Methods of Dwrutil in DWR framework

methods of Dwrutil in DWR framework

2008-10-14 17:57:23|  Category: JAVA | Tags: | Report | Font size Big medium small subscription

7. The util.js feature Util.js includes tool functions to help you update your Web pages with JavaScript data, such as data returned from the server. You can use it outside of DWR because it does not depend on other parts of Dwr. You can download the entire DWR or download it separately. The functions of 4 basic Operation pages: Getvalue[s] () and Setvalue[s] () can manipulate most HTML elements except table,list and image. GetText () can manipulate the select list. To modify the table you can use Addrows () and Removeallrows (). To modify the list (select list and Ul,ol list) you can use AddOptions () and Removealloptions (). There are some other features that are not part of the dwrutil. But they are also useful, they can be used to solve small problems, but they are not common to all.

The 7.1 $ () $ () function (which is a legitimate JavaScript name) is the idea of stealing from Protoype. Roughly speaking: $ = document.getElementById. Because in an AJAX program, you will need to write a lot of these statements, so using $ () will be more concise. Finds an array of elements in the current HTML document by specifying the ID, and if passed to it multiple arguments, it returns the element that is found. All parameters that are not string types are returned intact. This function is inspired by the prototype library, but it can be run on more browsers. Take a look at Dwrutil.todescriptivestring's demo. Technically he is not used in IE5.0 because it uses array.push, although it is usually used only to work with Engine.js. If you don't want to engine.js and use it in IE5.0, then you'd better find a replacement for Array.push.

7.2 addoptions and Removealloptions One of the frequently encountered tasks of DWR is to populate the selection list with options. The following example fills the list according to the input. Here are some examples of how dwrutil.addoptions () is used. If you want to keep the shipping options after you update the Select, you should do the following: var sel = dwrutil.getvalue (ID); Dwrutil.removealloptions (ID); Dwrutil.addoptions (ID, ...); Dwrutil.setvalue (ID, SEL); 55/92 If you want to add an initial "please select ..." Option then you can add the following statement directly: Dwrutil.addoptions (ID, \["Please select ..."); Dwrutil.addoptions has 5 mode arrays: Dwrutil.addoptions (Selectid, array) ² creates a bunch of option, and each option's text and value is the value in the array element. Object Array (Specify text): ²dwrutil.addoptions (Selectid, data, prop) creates a Option,option value and text for each array element as a property of the object specified in Prop. An array of objects (specifying the text and value values): ²dwrutil.addoptions (Selectid, array, Valueprop, Textprop) creates an option with each array element, The value of option is the Valueprop property of the object, and the text of option is the Textprop property of the object. Object: ²dwrutil.addoptions (Selectid, map, reverse) creates an option with each attribute. The object property name is used as the value of option, and the object property value is used as the text of the property, which sounds a bit wrong. But in fact it's the right way. If the reverse parameter is set to True, then the object property value is used as the value of the option. ² The object's Map:DWRUtil.addOptions (Selectid, Map, Valueprop, Textprop) creates an option with each object in the map. Use the object's Valueprop property as the value of option, using the object's Textprop property as the text of option. ²ol or UL List: dwrutil.addoptions (Ulid, array) creates a bunch of LI elements with the elements in the array, whose innerhtml are the values in the array elements. This mode can be used to create a list of UL and OL. This is an online example.

7.3 Addrows and Removeallrows DWR uses these two functions to help you manipulate table:DWRUtil.addRows () and Dwrutil.removeallrows (). The first parameter of this function is the ID of table, tbody, THEAD, TFOOT. Generally it is best to use tbody, as this will keep your header and footer lines intact and prevent Internet Explorer bugs. Dwrutil.removeallrows () l dwrutil.removeallrows (ID); Description: Deletes all rows in the table by ID. Parameter: The ID of the id:table element (preferably the ID of the TBODY element)

Dwrutil.addrows () l dwrutil.addrows (ID, array, cellfuncs, [options]); Description: Adds a row to the table element of the specified ID. It uses each element in the array to create a row in the table. It then creates a column with no function in the Cellfuncs array. Cells are created in sequence by using cellfunc based on elements that are not in the array. DWR1.1 start, addrows () can also use objects as data. If you create a cell with an object in place of an array, the object is passed to the cell function. Parameter: The ID of the id:table element (preferably the ID of the TBODY Element) array: An array (DWR1.1 can be an object later) as an update to the tabular data. Cellfuncs: An array of functions that extracts cell data from the row data passed in. Options: An object that contains options (see below) includes: Rowcreator: A function to create rows (for example, you want a tr plus a CSS). The default is to return a document.createelement ("tr") Cellcreator: a function to create a cell (for example, using th instead of TD). Default returns a document.createelement ("TD") which is an example of the Internet

7.4 getText getText (ID) and GetValue (ID) are very similar. Out of it is designed for the select list. You may need to get the displayed text instead of the value of the current option. This is an online example.

7.5 GetValue Dwrutil.getvalue (ID) is the "read version" of SetValue (). It can take the value out of the HTML element, and you don't have to control whether the element is a select list or a div. This function can manipulate most HTML elements including select (the value of the current option instead of the text), input elements (including textarea), Div, and span. This is an online example.

7.6 getValues getValues () and GetValue () are very similar except that they enter JavaScript objects that contain name/value pairs. Name is the id,value of the HTML element that will be changed to the contents of these ID object elements. This function does not return an object, it only changes the value passed to it. Starting from DWR1.1 GetValues () can pass in an HTML element (a DOM object or an ID string) and then generate a reply object from it. This is an online example.

7.7 OnReturn be notified when the return key is pressed. When an INPUT element is present in the form, triggering the return key causes the form to be submitted. When using Ajax, this is often not what you want. And usually you need to trigger some javscript. Unfortunately, different browsers handle this event differently. So Dwrutil.onreturn fixed the difference. If you need an attribute that is the same as the return of the form element, you can do so with the following code: <input type= "text" onkeypress= "Dwrutil.onreturn (event,submitfunction)"/> <input type= "button" onclick= "Submitfunction ()"/> You can also use onkeypress events or onkeydown events, they do the same thing. In general, DWR is not a JavaScript class library, so it should try to meet this requirement. However, this is a useful function in the process of using AJAX. This function works because the onsubmit () event exists only on the <form ...> element, which is an example on the web.

7.8 selectrange Select a range of text in the input box. You may need to select a range of text in the input box to implement a feature similar to the "Google suggest" type, but the model chosen varies between browsers. This dwrutil function can help you achieve this. Dwrutil.selectrange (Ele, start, end) This is an online example.

7.9 SetValue Dwrutil.setvalue (ID, value) finds the corresponding element based on the ID specified in the first parameter and changes its value according to the second parameter. This function can manipulate most HTML elements including select (the value of the current option instead of the text), input elements (including textarea), Div, and span. This is an online example.

7.10 setvalues setvalues () and SetValue () are very similar except that they enter JavaScript objects that contain name/value pairs. Name is the id,value of the HTML element that you want to set to the corresponding element. This is an online example.

7.11 todescriptivestring The dwrutil.todescriptivestring () function is better than the default ToString (). The first parameter is the object to be debugged, and the second parameter is optional to specify the level of content depth: 0: Single-line Debug 1: Multi-line debugging, but not deep into child objects. 2: Multi-line debugging, deep into the second layer of sub-objects and so on. General debugging to the second level is optimal. There is also a third parameter, which defines the initial indentation. This function should not be used outside of the modal program, as it may change in the future. This is an online example.

7.12 Useloadingmessage This method may be discarded in the future because the implementation is too arbitrary. Why is red, why in the upper right corner, and so on. The only real answer is: Copy gmail. The advice here is to customize the code on this page as a template based on your needs. You must call this method after the page is loaded (for example, do not call before the OnLoad () event fires), because it creates a hidden div to hold the message.

The simplest approach is to call Dwrutil.useloadingmessage in the OnLoad event, like this:

<script>

function init () {dwrutil.useloadingmessage ();}

</script> ...

<body onload= "Init ();" > ...

There may be situations where you can't easily edit the header and body tags (if you're using a CMS, which is normal), in which case you can do this:

<script>

function init () {

Dwrutil.useloadingmessage ();

}

if (Window.addeventlistener) {

Window.addeventlistener ("Load", init, false);

} else if (window.attachevent) {

Window.attachevent ("onload", init);

} else {

Window.onload = init;

}

</script>

Here are the code for this function, which is useful for you to implement your own load message. The main content of this function is to dynamically create a div (ID is disabledzone) to hold the message. The important code is to make it visible and hidden when it is called remotely:

Dwrengine.setprehook (function () {$ (' Disabledzone '). style.visibility = ' visible ';});
Dwrengine.setposthook (function () {$ (' Disabledzone '). style.visibility = ' hidden ';});

this is fairly simple and makes it quite easy to implement your own "L Oading "message.

function Useloadingimage (imagesrc) {var loadingimage; if (imagesrc)    loadingimage = imagesrc; else  &nbs P Loadingimage = "Ajax-loader.gif"; Dwrengine.setprehook (function () {    var disabledimagezone = $ (' Disabledimagezone ');      if (!disabledimagezone) {      Disabledimagezone = document.createelement (' div ');       disabledimagezone.setattribute (' id ', ' disabledimagezone ');       disabledImageZone.style.position = "absolute";       DisabledImageZone.style.zIndex = "1000";       disabledImageZone.style.left = "0px";       disabledImageZone.style.top = "0px";       disabledImageZone.style.width = "100%";       disabledImageZone.style.height = "100%";       var imagezone = document.createelement (' img ');       imagezone.setattribute (' id ', ' imagezone ');       imagezone.setattribute (' src ', imagesrc);       imageZone.style.position = "absolute";       imageZone.style.top = "0px";       imageZone.style.right = "0px";

Disabledimagezone.appendchild (Imagezone);
Document.body.appendChild (Disabledimagezone); } else {
$ (' imagezone '). src = imagesrc;     disabledImageZone.style.visibility = ' visible '; } });

Dwrengine.setposthook (function () {$ (' Disabledimagezone '). style.visibility = ' hidden ';}); }

Then you can use this: Useloadingimage ("images/loader.gif");

7.13 Submission Box H1 features in non-util.js here are some features that are not suitable for adding to the dwrutil. They are useful in solving special problems, but they are not universal enough for any occasion. 62/92 Patching Browser Events If you create a DOM element and then use AddAttribute to create an event on the element, they cannot be triggered normally. You can use the following script to traverse a DOM tree and bind events to them again so that they can trigger normally. Change the ' click ' to the event you want.

dwrengine._fixexplorerevents = function (obj) {

for (var i = 0; i < obj.childNodes.length; i++) {

var childobj = obj.childnodes [i];

if (Childobj.nodevalue = = null) {

var OnClickHandler = childobj.getattribute (' onclick ');

if (OnClickHandler! = null) {

Childobj.removeattribute (' onclick '); If using prototype:

Event.observe (childobj, ' click ', New Function (OnClickHandler));

Otherwise (but watch out for memory leaks):

if (element.attachevent) {

Element.attachevent ("onclick", OnClickHandler);

} else {

Element.addeventlistener ("Click", OnClickHandler, Usecapture);

}

}

Dwrengine._fixexplorerevents (Childobj);

}

}

Reference:

Http://wiki.javascud.org/display/dwrcn/useLoadingMessage

Methods of Dwrutil in DWR framework