Initially set up the Yui-ext (Ajax) Development Environment (background-> Foreground Data Exchange)

If you have seen the Yui-ext example, I believe you would like to use it in the actual project, I have been studying it for the past two weeks, almost no information in China, can only find from the http://www.jackslocum.com Forum, I will briefly introduce my actual development environment:

The original development environment of my project is STRUTS + spring1.2.8 + hibernate3.1.2. Now we need to convert the JSP + jstl of the page and the struts action into the Ajax page of Yui-Ext, simple data list, paging, addition, modification, deletion, and other functions.

1.
Data exchange: the request object is used to transmit data from the action in the struts environment to the JSP page. If Ajax is used, XML Conversion and JSON conversion are commonly used.
JSON is selected, because the JSON-lib package can be used in Java to easily convert objects to JSON format. On the page, you can call the script eval () to convert objects
Array object of JavaScript.

1) JSON-lib conversion Java object (download JSON-Lib: http://json-lib.sourceforge.net)

Action example: (example. Do) add the following to the Code:

Response. setcontenttype ("text/XML; charset = UTF-8 ");

Jsonarray = jsonarray. fromobject (list );

Response. getwriter (). Print ("{datalist:" + jsonarray + "}");

Return NULL;

Simple Description: Change Return Mapping of action to null, because now the response object is used for data transmission. The list in fromobject (list) includes the data to be called and displayed on the page, it can be another Java object, String, Bean, or map.

2) jsondatamodel calls action (example. Do)

Yui-ext converts JSON format into Javascript array objects through jsondatamodel. js

JS example:

VaR schema = {

Root: 'datalist ',

ID: 'Nothing ',

Fields: ['A', 'B', 'C', 'D']

Datamodel = new Yahoo. Ext. Grid. jsondatamodel (schema );

Datamodel. Load ('HTTP: // xxx/example. Do ');

Note: The Root parameter of Schema must correspond to the JSON data header list passed by action. Here, it is new.
After jsondatamodel, jsondatamodel converts the JSON data returned by example. Do To the data of datamodel.
Group, jsondatamodel inherits from loadabledatamodel, jsondatamodel only converts JSON data in a complex way, and others are implemented by inherited classes.
Yui-ext is a feature of Yui-Ext. You can write datamodel to inherit the parent class and convert your own data format. Yui-ext provides jsondatamodel and
Xmldatamodel converts two data formats.

3) use grid to display datamodel data

JS example:

VaR grid = new Yahoo. Ext. Grid. Grid ('example-grid', datamodel, colmodel );

Grid. Render ();

JSP page example:

<Div id = "example-grid" style = "border: 1px solid # cccccc;
Overflow: hidden; width: 535px; Height: 225px; "> </div>

NOTE: For the use of colmodel, see example. After the grid is bound to datamodel, the grid is displayed on the <div> page.

 

The editorgrid editable table of Yui-ext will be attracted by everyone, but how can I submit the edited table to the background action? I have been worried for a while

Http://www.jackslocum.com/forum's Forum, Jack

Sloc said that if xmldatamodel is used, after you edit and modify the grid, the data in xmldatamodel will also be modified.
Xmldatamodel's data generation XML can be submitted to the background. I didn't implement XML transmission of xmldatamodel in the project, and didn't verify his statement, because I couldn't find it
A good Java object is converted into a package in XML format. I hope you will have a good introduction to the package.

I chose jsondatamodel to submit the JSON format to the server, Jack
Sloc prompts you to convert JSON data by yourself. It is difficult to use JS scripts on the page, but it is not difficult to implement it. The following describes how to implement it, some content in this article is for reference

Http://www.rodrigodiniz.qsh.eu/yahoogrid.aspx's gridexample:

1. backfill datamodel data with elements in Form


The example is to automatically add a row of data in datamodel to the element of the form, that is, to replace the <HTML: XXX> tag of struts.
You can't even use jstl, because you don't need to refresh the page, but fortunately, I still have some JavaScript basics. Some jstl functions can also be implemented using Js.

Example:

<Form name = "form1">

<Input type = "text" name = "userid" value = ">

<Input type = "text" name = "username" value = ">

</Form>

Note: make a simple form.

Datamodel = new Yahoo. Ext. Grid. jsondatamodel (schema );

Datamodel. addlistener ('load', oneditload );

Datamodel. Load ('HTTP: // xxx/example2.do ');

 
Note: Add a listener to datamodel and use datamodel to obtain a JavaBean object new from example2.do in the background in real time.
User (userid, username) data (for the implementation of example2.do, refer to the first part of the action), after the return of JavaBean data is activated
Oneditload () method. Yui-ext uses callback to obtain the callback data.

 

Function oneditload (){

VaR ROW = datamodel. getrows ([0, 0]);

VaR fields = datamodel. schema. fields;

For (VAR I = 0; I <fields. length; I ++ ){

If ($ (fields [I])! = NULL ){

$ (Fields [I]). value = row [0] [I];

}

}

}

Note:


Because the returned result is a JavaBean and jsondatamodel has been converted to a JavaScript Array object, getrows ([0, 0] takes only the first row of data
[Object1, object2], object1 includes userid = xxx, and object2 includes username = xxx.
Fields array for JavaBean [userid, username ),


Prototype. JS is used here, which can be easily found on the Internet. It uses $ (fields [I]) to call the elements in the form.
Real $ (fields [I]) = Document. getelementbyid (fields [I]), The datamodel data can be automatically filled in through a loop
Form element.

2. method 1 of page submission:

Using prototype. JS, the form element is automatically transferred to the background using the form. serialize () method, and the action is obtained using request. getparameter ("XXX. Example:

Function save (){

VaR callback = {

Success: responsesuccess,

Failure: responsefailure

};

VaR postdata = form. serialize ($ ("form1 "));

Yahoo. util. Connect. asyncrequest ('post', "http: // xxx/example3.do", hcallback, postdata );

}

VaR responsesuccess = function (o)

{

Alert (O. responsetext );

}

VaR responsefailure = function (o)

{

Alert (O. statustext );

}

Creates a callback method using Yahoo
The asyncrequest () method of the UI post data to the action. The principle is to add parameters after the link, such as http: // xxx
/Example3.do? Userid = xxx & username = xxx. The background action passes
Request. getparameter ("XXX") to obtain data, but the disadvantage is that you must manually create a user object.

3. Method 2: submit the form to the background action in JSON format

1) Examples of front-end JS scripts:

Function save (){

VaR fields = datamodel. schema. fields;

VaR objret = new object ();

For (VAR I = 0; I <fields. length; I ++ ){

If ($ (fields [I])! = NULL ){

Objret [fields [I] = $ (fields [I]). value;

}

VaR callback = {

Success: responsesuccess,

Failure: responsefailure

};

Yahoo. util. Connect. asyncrequest (

'Post ',

'Http: // xxx/example3.do ',

Callback,

"Outjsonxml = [" + Yahoo. Ext. util. JSON. encode (objret) + "]");

}

Description: obtains the object name through the fields array of datamodel, creates an object () object, stores the value of the element in the form, and then uses the JSON of Yahoo UI. the encode () method is converted to the JSON format. The transfer principle is as follows:

Http: // xxx/example3.do? Outjsonxml = [--- JSON data format ---]

2) Example of the JSON data format received by the background action (example3.do:

Private beanutilsbean;

If (request. getparameter ("outjsonxml ")! = NULL ){

Jsonobject = new jsonobject ();

Jsonobject. Put ("jsonparser", request. getparameter ("outjsonxml "));

List list = jsonarray. tolist (jsonobject. getjsonarray ("jsonparser "));

Jsondynabean beana = (jsondynabean) list. Get (0 );

User user = new user ();

Beanutilsbean. copyproperties (user, beana)

}

Note: Because the jsondynabean object inherits from dynabean, you can use beanutilsbean in the common Apache package to automatically copy the object from jsondynabean to the user object, this saves the trouble of manually assigning values to objects one by one.

3) about the updatemanager () method

Yui-ext also provides an updatemanager method to implement the same functions as the Yahoo asyncrequest () method. You can enter the background reverse return information with a <div> prompt to the user, as shown in the following example:

VaR Mgr = new Yahoo. Ext. updatemanager ('errordiv ');

Mgr. Update ('HTTP: // xxx/example3.do ',

"Outjsonxml = [" + Yahoo. Ext. util. JSON. encode (objret) + "]",);

Updatemanager uses callback for callback:

Mgr. Update ({

URL: 'http: // xxx/example3.do ',

Params: "outjsonxml = [" + Yahoo. Ext. util. JSON. encode (objret) + "]",

Callback: updatestring,

Text: 'loading ...',

Timeout: 10,

Scripts: True

});

Function updatestring (oelement, bsuccess ){

If (bsuccess ){

Alert (oelement. innerhtml );

}

}

Summary: The above two parts summarize the test application of Yui-ext in the actual project in the last two weeks. Now I am still testing the project sample project, the details are not detailed here.
Due to the limited number of examples introduced by Yui-ext and the limited number of front-and back-end applications, we have written our experiences so that we can avoid detours and study them together, please do not mind.
Communication instructions.