Introduction to dynamicfaces, a new Ajax and web development technology

Project dynamic faces is one of several projects that expand the assumerver faces technology. Project dynamic faces is an innovative project that provides a method to add Ajax functions to applications based on the assumerver faces technology. It enables ajax to be supported by any of the JavaServer faces components that the application software is already using. We don't need to modify the components to make them support Ajax, and we don't need to make any changes to the application software to make them have the magic of Ajax.

To make the application software have the Ajax magic, we must first determine the part of the web page in the application that you want the Ajax function to update. As developers Based on the assumerver faces technology know, The assumerver faces web page is represented by the component tree. Using Dynamic faces, we can determine which component in the component tree will benefit from Asynchronous updates. Like using Ajax updates to represent part of the html dom tree of a webpage, we use dynamic faces updates to represent part of the component tree of the JavaServer faces webpage. Therefore, the dynamic faces mechanism is familiar to Ajax and JavaServer faces developers.

More importantly, dynamic faces uses the assumerver faces component mode, allowing us to use Ajax in a more effective way. Due to the collaboration feature of the component mode, some JavaScript events on the webpage components can trigger asynchronous updates of any number of other components on the webpage. Dynamic faces makes these asynchronous updates only result from an Ajax request sent to the server, rather than the result of each asynchronous update Ajax request.

Dynamic faces also uses the assumerver faces component mode to effectively manage the status of the client and server. When dynamic faces updates the component Status on the client, it updates only the changed component rather than the entire tree state. The best thing is that dynamic faces completes all these operations in the background in a completely consistent way with the lifecycles of the assumerver faces technology.

In addition to simplifying the addition of Ajax functions to applications, dynamic faces also provides us with the flexibility to add Ajax functions. This article will discuss three ways to use dynamic faces to make applications more interactive and dynamic:

· Use the custom ajaxzone tag provided by dynamic faces to determine the Ajax-based part of the component tree.

· Add Ajax functions to a single component using the Javascript library provided by dynamic faces.

· Add Ajax-supported components to a webpage, such as jmaki widgets.

Before learning these technologies, let's take a look at how application software can use the dynamic faces technology.

　　Develop application software using dynamic faces

By adding ajax to a standard assumerver faces 1.2 Implementation, dynamic faces utilizes the scalability of the Runtime Library of the assumerver faces technology. The core of dynamic faces is the custom lifecycle and viewroot implementation. These two implementations are extensions of the standard lifecycle and viewroot implementations provided by the assumerver faces technology. A standard lifecycle object represents an instance of the assumerver faces lifecycle, A standard viewroot object represents the root of a component tree. The combination of custom lifecycle objects and custom viewroot objects enables JavaServer faces to process Ajax transactions and re-display part of the component tree without updating the entire page. These custom implementations are subject to standard implementations that do not support Ajax requests.

To make the assumerver faces technology Runtime Library aware of the existence of the custom lifecycle object, we must use an initialization parameter in the configuration descriptor to report the object to the facesservlet instance.

<Servlet> <Servlet-Name> faces servlet </servlet-Name> <Servlet-class> javax. Faces. webapp. facesservlet </servlet-class> <Init-param> <Param-Name> javax. Faces. lifecycle_id </param-Name> <Param-value> com. Sun. Faces. lifecycle. Partial </param-Name> </Init-param> <Load-on-startup> 1 </load-on-startup> </Servlet>

In addition, we must add the Java archive (jar) file on which dynamic faces depends to the lib directory of the Web Archive (WAR) file of the application software. Because dynamic faces is based on Java platform Enterprise Edition 5 (Java ee 5), almost all the dependencies we need already exist. The last dependency is shale remoting. Dynamic faces uses it to load JavaScript files and other resources from the Java class path. Shale remoting depends on commons-logging, so we must provide commons-logging to the application software.

Finally, we must describe the dynamic faces tag library on each page that uses it. For the standard non-XML syntax-compliant JavaServer Pages (JSP) webpage, this description is as follows:

<% @ Taglib prefix = "jsfext" uri = "http://java.sun.com/jsf/extensions/dynafaces" %>

For the JavaServer Pages (JSP) webpage that complies with the XML syntax, this description is as follows:

<JSP: Root xmlns: JSP = "http://java.sun.com/JSP/Page" version = "1.2" Xmlns: jsfext= "http://java.sun.com/jsf/extensions/dynafaces" Xmlns: H = "http://java.sun.com/jsf/html" Xmlns: F = "http://java.sun.com/jsf/core">

If facelets is used instead of JSP, the syntax is very similar to that of jsp xml, as shown below:

<HTML xmlns = "http://www.w3.org/1999/xhtml" Xmlns: H = "http://java.sun.com/jsf/html" Xmlns: jsfext= "http://java.sun.com/jsf/extensions/dynafaces" Xmlns: F = "http://java.sun.com/jsf/core">

Okay. We can start to use dynamic faces to add Ajax features to the application software.

As an alternative for manual configuration of application software, we can use dynamic faces to download packages, including blank application software for JSP and facelets. If you use the existing blank application software, all the settings have been completed in advance, and we can start to compile the web page.

Use the ajaxzone tag to update some webpages

One way to determine which components on the web page will support Ajax is to encapsulate them using the ajaxzone custom tag provided by dynamic faces. In doing so, we will tell dynamic faces to asynchronously update only the component tree part identified by the ajaxzone label.

For example, if we have a webpage with a series of buttons, customers can use these buttons to select standard or luxury decoration when purchasing a car online. When a customer clicks a button, the value of a series of other components changes without updating the entire webpage. When the customer changes the value of a component, the price of the car will also change, but the whole web page will not be updated.

Figure 1 shows a screen snapshot of the webpage in the cardemo application, which enables the customer to select the CAR configuration.

Figure 1: Select vehicle configuration

Figure 1 shows two regions divided by the ajaxzone tag. When you click a button in area 2, the value of the component in the area changes. When the customer changes the value of a component in area 2, the value of the your price output component in area 1 also changes.

To implement this function, we need to encapsulate all components in the ajaxzone tag, as shown below:

<Jsfext: ajaxzone id = "zone1"> <H: panelgrid columns = "2"> <H: outputtext styleclass = "subtitle" Value = "# {bundle. basepricelabel}"/> <H: outputtext Binding = "# {carstore. currentmodel. components. baseprice}"/> <H: outputtext styleclass = "subtitle" Value = "# {bundle. yourpricelabel}"/> <H: outputtext value = "# {carstore. currentmodel. currentprice}"/> </H: panelgrid> </Jsfext: ajaxzone> <Jsfext: ajaxzone id = "zone2" Action = "# {carstore. currentmodel. updatepricing}"> <H: commandbutton id = "standard" value = "# {bundle. Standard }" Styleclass = "# {carstore. customizers. Standard. buttonstyle }" Actionlistener = "# {carstore. choosepackage}"/> <H: commandbutton id = "deluxe" value = "# {bundle. Deluxe }" Styleclass = "# {carstore. customizers. Deluxe. buttonstyle }" Actionlistener = "# {carstore. choosepackage}"/> <H: outputtext value = "# {bundle. Engine }" Styleclass = "optionlabel"/> <H: selectonemenu styleclass = "optionvalue" Binding = "# {carstore. currentmodel. components. Engine}"/> <H: outputtext value = "# {bundle. SPEAKERS }" Styleclass = "optionlabel"/> <H: selectoneradio styleclass = "optionvalue" Binding = "# {carstore. currentmodel. components. Speaker}"/> </Jsfext: ajaxzone>

The preceding Code contains two domains named zone1 and zone2 respectively. As the code shows, Zone 1 has only one output component, so it does not generate any Ajax requests; Zone 2 contains input and output components. When the customer clicks one of the two buttons, or selects an option in the menu or radio button list, the component in zone2 starts an Ajax request. This request will cause the operation defined in Method Expression # {carstore. currentmodel. updatepricing} to be called.

When a domain is used, each Ajax transaction updates all the domains in the web page. The effect of the preceding example is that when you select any input component in zone 2, the Ajax function automatically updates the car price data in zone 1.

It is worth noting that this example can be implemented without writing a line of JavaScript code, and we do not need any custom components. This application uses the well-known common and simple JavaServer faces components, but they already support Ajax functionality.

The ajaxzone TAG provides web page creators with a simple, familiar, and intuitive way to use dynamic faces. In the simplest example, the ajaxzone tag can provide the required functions to web page creators. The ajaxzone tag supports many other attributes that allow us to further customize their operations. The ajaxzone document contains a complete list of attributes.

The following section describes another way to use dynamic faces, which enables fine-grained control over Ajax of Components in Web pages.
Use the dynamic faces fireajaxtransaction Method

To fine-grained control over Ajax-related tasks, we can use the built-in JavaScript library provided by dynamic faces. By using the appropriate dynafaces. fireajaxtransaction JavaScript function in the existing component labels, we can have more fine-grained component-level control over the asynchronous update mode of components in the webpage.

For example, suppose we want some components in the webpage to respond to a javascript event, such as onclick, and want other components in the webpage to respond to other types of JavaScript events. Suppose that we want to generate an Ajax request for each component to asynchronously update different parts of the component tree. To complete these tasks, we need to use the fireajaxtransaction function.

To use the fireajaxtransaction function, you need to complete the following preparations:

· Add a javascript event attribute to a component tag, such as onclick.

· Set the value of this attribute to the dynafaces. fireajaxtransaction function.

· Pass a series of parameters to the function.

The following code is part of a webpage in a simple hello world example. You can enter his or her name and click a button, the application responds to user input with a greeting containing the username.

... <F: View> ... <H: Form ID = "form" prependid = "false"> ... <H: graphicimage value = "wave.med.gif"/> <P> Hello, my name is Duke. What is your name? <P> <H: inputtext id = "input" value = "# {testbean. name}"/> <H: commandbutton id = "button" Actionlistener = "# {testbean. changetext }" Onclick = "dynafaces. fireajaxtransaction (this, {Execute: 'input', 'click ', Render: 'input', 'text'}); Return false ;" Value = "click"/> <P> <H: outputtext id = "text" value = "# {testbean. Text}"/> </H: Form> ... </F: View>

In the preceding example, the inputtext tag represents an input field. When you enter content in the input field and click the button indicated by the commandbutton label, the following situation occurs:

1. The execution of the dynafaces. fireajaxtransaction function allows dynamic faces to send an Ajax request to the server.

2. The server returns a special XML response processed by the dynamic faces JavaScript library.

3. Update the html dom tree with new values for appropriate library functions.

To tell the fireajaxtransaction function how to generate an Ajax request, we transmit a series of parameters to it. In the preceding example, two parameters are passed to the fireajaxtransaction function. The following code calls the fireajaxtransaction function:

Onclick = "dynafaces. fireajaxtransaction (this, {Execute: 'input', 'click ', Render: 'input', 'text'}); Return false ;"

This parameter indicates the tag of the button that triggers the event. Other parameters are composed of options that indicate how dynamic faces processes the request. In this example, the options are execute and render.

The execute and render options refer to the lifecycle of the assumerver faces, as shown in Figure 2:

Figure 2: How dynamic faces uses the execute and render options to divide the lifecycles of the assumerver faces Technology

Execute is the lifecycle part of the execution during the PostBack period. It contains the data conversion, verification, and update phases of the processing mode object. Render displays the webpage based on the request to the webpage.

The execute option used in the call to the fireajaxtransaction function lists the IDs of components that must be processed during the execute section of the assumerver faces lifecycle. The line of code in the Hello world example is as follows.

Execute: 'input', 'click'

The input component that accepts the user name must execute the execute part of the lifecycle because its data must be saved to the mode object. The button component should also execute the execute part of the lifecycle, because the invoke application stage is part of the execute part of the lifecycle.

When the render fragment of the lifecycle shows a Web page using dynamic faces, as the result of an Ajax request, it only displays the selected components on the web page. The render option is used to display the ID of the component to be re-displayed. The render option in the Hello world example is as follows:

Render: 'input', 'text'

In this example, as the result of an Ajax request, the render segment of the lifecycle will re-display the input and text components on the web page. When you click this button, the input fields representing the input component and the output text representing the text component are displayed again. The input field is displayed again to clear the value entered by the user before clicking this button. The output text is displayed again, showing the information about the values that you entered in the input field before clicking this button. Other components on the Web page do not need to be re-displayed.

In addition to the execute and render options, we can also use other options to further customize the way dynamic faces handles events. Remember that using the fireajaxtransaction function enables us to have more control over which components on the web page will benefit from Ajax. In fact, the fireajaxtransaction function allows us to enable any component in the webpage to support Ajax without writing JavaScript or any other code.

Combined use of dynamic faces and jmaki

So far, we have learned how to use dynamic faces to re-display the assumerver faces component that supports Ajax. However, how can I add Ajax-supported widgets that I have seen in applications based on JavaServer faces?

We can use project jmaki to encapsulate our favorite widgets in the JavaServer faces component. In this way, we can enjoy the benefits of the assumerver faces component mode and the flexibility to use widgets encapsulated as the assumerver faces component. At the same time, we do not need to write JavaScript code to implement Ajax functions for existing components, as well as the Java platform code required to create the JavaServer faces component for widgets.

How can we use jmaki and dynamic faces together? For web page creators, it is very simple to drag the labels related to the jmaki widget to the web page.
To use jmaki widgets and dynamic faces in combination, widget developers need to make some minor modifications to the component files of jmaki widgets. These modifications enable the jmaki widget to take full advantage of the component Status management system provided by the assumerver faces technology to correctly convert the headers required by dynamic faces. The modified details are beyond the scope of the three articles. You can refer to the relevant materials.

The dynamic faces development team has completed the work required to convert three jmaki widgets used in combination with dynamic faces. The converted jmaki widgets are script. aculo. Us In-Place editor widgets, Dojo fisheye widgets, and dojo inline-Editor widgets.

In addition to converting the fisheye widget, the development team also modified the jmaki API so that the widget can trigger a assumerver faces value modification event, as shown in:

<A: Ajax name = "dojo. fisheye" Value = "# {fisheyebean. selectedindex }" Valuechangelistener = "# {fisheyebean. valuechanged }" ARGs = "{items :[ {Iconsrc: 'images/150x126_jalopy.jpg ', caption: 'jalopy', index: 0 }, {Iconsrc: 'images/150x126_luxury.jpg ', caption: 'luxury', index: 1 }, {Iconsrc: 'images/150x126_roadster.jpg ', caption: 'roadster', index: 2 }, {Iconsrc: 'images/150x126_suv.jpg ', caption: 'suv', index: 3} ]}" />

The dynamic faces and jmaki development teams are stepping up to ensure that all jmaki widgets support dynamic faces.

Now, let's discuss this issue from the perspective of Web Page creators. To understand how to use jmaki script together. aculo. us in-place editor widget and dynamic faces. We include This widget in a JavaServer faces data table component so that we can edit the value of a unit in the table.

On the JSP page, we must describe the required tag library, as well as the dynamic faces and jmaki tags, as shown below:

<% @ Taglib prefix = "F" Uri = "http://java.sun.com/jsf/core" %> <% @ Taglib prefix = "H" Uri = "http://java.sun.com/jsf/html" %> <% @ Taglib prefix = "jsfext" Uri = "http://java.sun.com/jsf/extensions/dynafaces" %> <% @ Taglib prefix = "" Uri = "http://java.sun.com/jmaki-jsf" %>

The following code adds the <jsfext: scripts/> label:

<F: View> <HTML> <Head> <Title> table with jmaki </title> <Jsfext: scripts/> </Head> <Body>

This label displays the <SCRIPT> element of the Javascript file required by dynamic faces.

Finally, we add the widget to the webpage by including a jmaki Ajax tag of the In-Place editor that is encapsulated as a jmaki widget.

<H: Form> <H: datatable ... Rows = "10" binding = "# {resultsetbean. Data }" Value = "# {resultsetbean. List }" Var = "customer"> <H: column> <F: facet name = "Header"> <H: outputtext value = "account ID"/> </F: facet> <H: outputtext id = "accountid" Value = "# {customer. accountid}"/> </H: column> <H: column> <F: facet name = "Header"> <H: outputtext value = "customer name"/> </F: facet> <A: Ajax name = "scriptaculous. inplace" Value = "# {customer. name}"/> </H: column> </H: datatable> ... </H: Form> </Body> </Html> </F: View>

Figure 3 shows the preceding webpage:

Figure 3: before the user modifies the value of a Unit

Figure 4 shows how users click the link of a unit in the customer name column:

Figure 4: user clicking a link in the customer name column

Note that when you click an element in the customer name column, the customer name element is replaced by an input component, an "OK" button, and a "cancel" link, allows you to edit the current customer name. If you click "cancel" instead of "OK", the unit is re-displayed as the original value. If you enter a value and click "OK, the new value is sent to the server using Ajax technology, so that the mode is updated to a new value. Then, the edited unit is displayed again. Figure 5 shows the webpage after the unit is modified:

Figure 5: After a user submits a new value to the server, the page is displayed as a new value.

　　Conclusion

Project dynamic faces provides us with a flexible and effective way to add Ajax functions to applications based on assumerver faces, without having to give up any advantages of the assumerver faces component mode. With the help of the built-in JavaScript library, Ajax implementation, and component interaction mode provided by dynamic faces, we will find it easier to add Ajax functions using dynamic faces. Applications Based on JavaServer faces can benefit from more flexibility provided by jmaki widgets.

 

This article from: http://hi.baidu.com/shker/blog/item/a87a45da48a2a8dab7fd484d.html