Ajax eminence of the Dojo Integration Chapter _dojo

With the increasing use of Ajax, the variety of Ajax Library (Prototype), Ajax Framework (DWR), Ajax Toolkit (Dojo,yui) are increasingly enriched, there is no way to combine these? Like spring, of course, I can't get an IOC micro-core to "glue" all kinds of Ajax, but it should be fine to integrate these AJAX reusable components, so that you can avoid reinventing the wheel, and do the same for all kinds of Ajax. To form a more comprehensive AJAX solution. It also increases the flexibility that developers choose to familiarize themselves with Ajax components.
Now that our company has formed a complete set of Ajax-based products, encapsulating its own Ajax front and rear communication mechanisms and providing reusable client components, I've tried to integrate our offerings with Dojo Toolkit. The following is my practice of integrating the Dojo ComboBox Widget, which is actually an auto completion component similar to Google suggest.
Start with the test class test_combobox.html provided by dojo, add debugger to track and debug, and sort out the loading process of the Dojo widget.
After debugging, you have a general idea of the Dojo widget: First, load the JavaScript file that you currently need, and then parse the entire HTML page. There are three ways to use widgets on a page: one is to add some properties that dojo can resolve on an HTML element, such as
<select dojotype= "combobox" Style= "width:300px" name= "Foo.bar1" autocomplete= "false"
Onvaluechanged= "SetVal1"
>
The Dojotype,autocomplete, onvaluechanged, are attributes that dojo can recognize, something similar to the typestry approach. The second way is to use DOJOML:
<dojo:combobox style= "width:300px" name= "Foo.bar1" autocomplete= "false"
Onvaluechanged= "SetVal1"
/>
This kind of writing some metamorphosis, and JSP in the custom label is basically the same thing, but the process of parsing from the background moved to the front desk to do, and then see some of the framework is also so dry, there is no words.
Another way to do this is to use JavaScript to create widgets in 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"));
}
The use of Dojo-defined ComboBox HTML templates and CSS templates to accomplish the purpose of inserting the final ComboBox control on a page while creating an element resolution.
Next, to see how Dojo ComboBox with back-end communication with Ajax, Dojo ComboBox offers two ways to automate: one is to download all the data to the foreground cache, and then to match the data from the cache with the data entered by the user in the foreground. The other is based on the user input data in real time to the background to send requests for automatic completion of the data, of course, this data will be the user input content as key, to get the data for the value of the cache. For two different ways, Dojo is implemented through different dataprovider (Dojo.widget.incrementalComboBoxDataProvider and Dojo.widget.basicComboBoxDataProvider), which is very subtle and makes me very Clothing. And these two categories are done through Dojo.declare ("ClassName", "Parentclassname", constructor, Declarationbody), which is different from our previous practice. In short, it is more exquisite!
The process by which Dojo sends requests to the background is encapsulated in the Dojo.io.bind () method, and we have our own set of front and rear communication mechanisms because we have to find a way to replace dojo.io.bind () with our practice to achieve eventual integration, because dojo ComboBox data interactions are encapsulated in dataprovider because we need to implement our own dataprovider so we don't have to change the source of dojo, and we can also use the Dojo inheritance mechanism, From the existing Dataprovider integration to copy out the way I need to replace, which gives me the feeling of writing Java.
Dojo.declare (
"Dojo.widget.incrementalDoradoComboBoxDataProvider",
Dojo.widget.incrementalComboBoxDataProvider,
Null
{
To replace the method, 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.execute ();
This._inflight = true;
}
}
);
Through the above processing, we can use our own front and rear communication mechanism to complete the request data purposes.
The next step is to build our page and add a script that dojo loads JS:
<script type= "Text/javascript" src= "/dojo/dojo.js" ></script>
<script type= "Text/javascript" >
Dojo.require ("Dojo.widget.ComboBox");
Note that there is a positioning problem, the lookup path must be added "...",
Because dojo starts looking for doradocombobox.js from the "/dojo" instead of the "/" directory.
The path that is eventually loaded using XMLHTTP is/dojo/. /adapter/dojo/widget/doradocombobox.js
Dojo.setmoduleprefix ("Adapter.dojo.widget", ". /adapter/dojo/widget ");
Dojo.require ("Adapter.dojo.widget.DoradoComboBox");
</script>
Partial HTML of the control to be loaded below:
<input dojotype= "ComboBox"
Dataurl= "Cmdcomboboxsearch"
Dataproviderclass = "Dojo.widget.incrementalDoradoComboBoxDataProvider"
Style= "width:200px;"
Name= "Sample2"
Autocomplete= "false"
>
So our integration work is done, and the directory structure of the files:
Webapp
|--adapter (store all JS files for consolidation)
|------Dojo
|---------Widget
|-----------doradocombobox.js
|--dojo (all JS files for dojo)
|------src
|------dojo.js
|--js (JS file for our own component library)
|--web-inf
Conclusion
There are a number of problems that have been discovered after the expansion:
1, because the integration of the two sets of things will be in Object.prototype, Array.prototype, function.prototype add some of their own things, so it is very easy to bring the name of the conflict, has encountered this problem.
2, because the two will use a number of global functions, variables, etc., there will be potential conflicts, but not yet encountered.
3, more than a set of JS library to load at the same time, the client pressure is not a bit larger? are performance acceptable? No tests are yet known.