Ajax unified world-wide Dojo Integration

With the increasing number of Ajax applications, various types of Ajax libraries (Prototype), Ajax Framework (DWR), and Ajax Toolkit (Dojo, YUI) are increasingly enriched. Is there a way to combine them? Similar to Spring, of course, I cannot build an IoC microkernel to "Bond" Ajax, but it is no problem to integrate these reusable Ajax components, in this way, we can avoid repeated invention of the wheel, and develop strengths and circumvent weaknesses for various Ajax methods to form a comprehensive Ajax solution. It also increases the flexibility for developers to familiarize themselves with Ajax components.

At present, our company has formed a complete set of Ajax-based products, encapsulated its own Ajax frontend and backend communication mechanisms, and provided reusable client components, I tried to integrate our product with the Dojo Toolkit. The following is my practice. It integrates the Dojo ComboBox Widget, which is actually an Auto Completion component, similar to Google Suggest.

Start with the dojo test class test_combox.html, add a debugger for tracking and debugging, and clarify the loading process of the Dojo Widget.

After tracking and debugging, I have a general understanding of the Dojo widgets: first, load the JavaScript file that is currently needed, and then parse the entire html page. There are three ways to use widgets on pages: one is to add some attributes that can be parsed by dojo on html elements, such

<Select dojoType = "combobox" style = "width: 300px;" name = "foo. bar1" autocomplete = "false"

OnValueChanged = "setVal1"

>

Among them, dojoType, autocomplete, and onValueChanged are all attributes that can be recognized by dojo, which is similar to typestry. The second method is to use DojoML:

<Dojo: combobox style = "width: 300px;" name = "foo. bar1" autocomplete = "false"

OnValueChanged = "setVal1"

/>

This writing style is a little abnormal. It is basically the same as the custom tag in jsp. It just moves the parsing process from the backend to the front-end. Later I saw some frameworks doing the same, so I had nothing to say.

Another method is to use javascript to create a widget on the specified html element after the page is loaded:

Var combo;

Dojo. addOnLoad (init );

Function init (){

Combo = dojo. widget. createWidget ("dojo: ComboBox", {name: "prog", autocomplete: false, dataUrl: "comboBoxData. js "}, dojo. byId ("progCombo "));

}

When creating element parsing, use the combobox html template defined by dojo and the css template to insert the final combobox control into the page.

Next, let's take a look at how Dojo ComboBox communicates with the background through ajax. Dojo ComboBox provides two Automatic completion methods: one is to download all the data to the front-end cache, then, on the frontend, the required data list is automatically completed from the cache based on the user input data. The other is to send a request to the background in real time based on the data entered by the user to obtain the data to be completed automatically. Of course, the data will also take the content entered by the user as the key, the obtained data is cached as value. For the two methods, Dojo is implemented through different DataProvider (dojo. widget. incrementalComboBoxDataProvider and dojo. widget. basicComboBoxDataProvider). This is exquisite and I admire it very much. These two classes are implemented in the form of dojo. declare ("className", "parentClassName", constructor, and declarationBody), which is different from our previous practices. In short, it is more subtle!

The process of sending a request from Dojo to the background is encapsulated in dojo. io. in the bind () method, we have our own front-and back-end communication mechanism, because we must find a way. io. bind () is replaced with our practice to achieve final integration, because the data interaction of Dojo ComboBox is encapsulated in DataProvider, because we only need to implement our own DataProvider, so we don't need to modify the Dojo source, and we can also use the Inheritance Mechanism of Dojo, from the existing DataProvider integration, I need to replace the method, which makes me feel like writing Java.

Dojo. declare (

"Dojo. widget. incrementalDoradoComboBoxDataProvider ",

Dojo. widget. incrementalComboBoxDataProvider,

Null,

{

// Method to be replaced. Use your own communication mechanism.

StartSearch: function (/* String */searchStr,/* Function */callback ){

If (this. _ inFlight ){

// FIXME: implement backoff!

}

Var cmd = getControl (this. searchUrl );

Cmd. parameters (). setValue ("searchString", searchStr );

Var _ this = this;

EventManager. addDoradoEvent (cmd, "onSuccess", function (command ){

_ This. _ inFlight = false;

// Convention:

// 1.the key must be "result"

// 2.the data format must be [["Alabama", "AL"], ["Alaska", "AK"] or [{"Alabama": "AL "}, {"Alaska": "AK"}]

Var data = dj_eval (command. outParameters (). getValue ("result "));

If (! Dojo. lang. isArray (data )){

Var arrData = [];

For (var key in data ){

ArrData. push ([data [key], key]);

}

Data = arrData;

}

_ This. _ addToCache (searchStr, data );

Callback (data );

}

);

Cmd.exe cute ();

This. _ inFlight = true;

}

}

);

Through the above processing, we can use our own frontend and backend communication mechanism to complete the request data.

The next step is to generate our page and add the Javascript script for dojo loading:

<Script type = "text/javascript" src = "./dojo. js"> </script>

<Script type = "text/javascript">

Dojo. require ("dojo. widget. ComboBox ");

// Note that there is a problem to be located. You must add "..." to the search path "..",

// Because dojo searches for DoradoComboBox. js from the "/dojo" instead of "/" directory.

// The final loading path using xmlhttp is/dojo/../adapter/dojo/widget/DoradoComboBox. js.

Dojo. setModulePrefix ("adapter. dojo. widget", "../adapter/dojo/widget ");

Dojo. require ("adapter. dojo. widget. DoradoComboBox ");

</Script>

The following html part of the control to be loaded:

<Input dojoType = "ComboBox"

DataUrl = "descricomboboxsearch"

DataProviderClass = "dojo. widget. incrementalDoradoComboBoxDataProvider"

Style = "width: 200px ;"

Name = "sample2"

Autocomplete = "false"

>

In this way, our integration is complete, and there is also the directory structure of the file:

Webapp

| -- Adapter (stores all js files for integration)

| ------ Dojo

| --------- Widget

| ----------- DoradoComboBox. js

| -- Dojo (all js files of dojo)

| ------ Src

| ------ Dojo. js

| -- Js (js files in our own Component Library)

| -- WEB-INF

Conclusion

After expansion, many problems are found:

1. Because both of the integrated items are stored in the Object. prototype, Array. prototype, Function. add something of your own to prototype, so it is very easy to bring about naming conflicts, and this problem has already been encountered.

2. because both of them use global functions, variables, and so on, there may be potential conflicts, but they have not yet been met.

3. If multiple js libraries need to be loaded at the same time, is the client under a higher pressure? Is performance acceptable? Currently, no tests are available.