Introduction to new AJAX and Web development technologies DynamicFaces (1)

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 ArchiveJAR file on which Dynamic Faces depends to the lib directory of the web archiveWAR 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 assumerver PagesJSP page that complies with the standard non-XML syntax, this description is as follows:

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

For the JavaServer PagesJSP page 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 fireAjaxTr bgcolor = e6e6e6 class = codeansaction 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. fireAjaxTr bgcolor = e6e6e6 class = codeansaction JavaScript function in the existing component labels, we can have more fine-grained component-level control over the asynchronous update method of components on 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 fireAjaxTr bgcolor = e6e6e6 class = codeansaction function.

To use the fireAjaxTr bgcolor = e6e6e6 class = codeansaction function, 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. fireAjaxTr bgcolor = e6e6e6 class = codeansaction 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. fireAjaxTr bgcolor = e6e6e6 class = codeansaction (this, {Execute: 'input', 'click ', Render: 'input', 'text'}); return false ;" Value = "click"/> <P> <H: outputText id = "text" value = "# {testBean. text}"/> </H: form> ... </F: view>