Create a rich set of Internet components based on AJAX and JSF (1)

In the previous article, we discussed how JSF component creators can use the new Webletshttp: // weblets.dev.java.net open source project to provide resource services-These resources include JavaScript libraries directly from JAR, icons and CSS files-without affecting application developers.

In this article, we will use AJAX and JSF components to retrieve data. The most common case for retrieving data using AJAX is to fill the drop-down list box and add the input detection type-ahead function for the text field. Unlike the event operation using the AJAX return mechanism, data retrieval should not affect other components around the page. In addition, if retrieving data does not affect other parts of the DOM tree, you do not have to traverse the full JSF lifecycle for obtaining the data.

This article introduces a new open-source project Mabonhttp: // mabon.dev.java.net ). Mabon represents the managed Bean object flag. Its goal is to use a JSON syntax communication channel, this allows developers of JSF components based on AJAX technology to access JSF managed beans outside the standard JSF lifecycle.

Essentially, by using the managed bean tool provided by the JSF specification, Mabon provides an easy and standard way for application developers to provide data for AJAX-based JSF components.

I. Use AJAX technology to retrieve data

The conventional data retrieval method follows the same basic concept as AJAX technology, and should not affect the status of other components around it.
Figure 1 shows an AJAX sequence chart using the http get method. W3C recommends that you use the http get method to retrieve data. This does not affect user requests (for example, Google Suggest ).

 
Figure 1. Sequence diagram of XMLHttpRequest using the http get Method

2. Different jsf ajax Methods

If you do not want to use other additional functions, you do not need to change the JSF Component Hierarchy, so you do not need to go through the entire JSF lifecycle. However, if you want to reuse a managed bean method, the easiest way is to use the JSF MethodBinding tool. To this end, there are three solutions: adding features to Renderer, using a PhaseListener and providing a new JSF lifecycle.

Iii. Renderer Method

The Renderer method adds the function to the screen generator to detect AJAX requests. The default JSF life cycle first restores the Component Hierarchy in the "Restore View" phase, while the Renderer gets control in the "Apply Request Values" phase. After the AJAX request is processed, Renderer calls the responseComplete () method of FacesContext to terminate the remaining stages of the lifecycle. On the surface, this seems to be a better method, but it actually has some serious shortcomings.

First, this method requires a component level, which may lead to additional overhead in each request, especially when the client state saving function is used. The response-Complete () method takes effect only after this phase is completed. This "Apply Request Values" stage calls the decode () method on all screen generators in the view, which may lead to unexpected "side effects" that exceed the control ", for example Set to immediate = "true ". This causes the application logic to be called before the "Apply Request Values" phase is complete.

In addition, this method usually requires http post to send the status string back to the server.

Iv. PhaseListener Method

This PhaseListener method adds a PhaseListenerPhaseId. RESTORE_VIEW)-it "short-circuited" the lifecycle and completes all the processing work in the PhaseListener itself. Later, it will call the responseComplete () method of FacesContext.

To make this method work, it must generate a reference containing information about managed beans in the initial request. PhaseListener uses this information during sending back to create a MethodBinding-which is then used to call a method on the managed bean and return data to the client. Since no component hierarchy is created and no screen generator is available, setting immediate to true does not cause any side effects.

However, this method has a problem: it cannot prevent application developers from attaching other PhaseListeners at the same stage, which may lead to unwanted side effects. Moreover, you cannot know the sequence in which these PhaseListeners will be executed.

5. lifecycle Methods

This life cycle method adds a new life cycle mapped to an AJAX request and only contains the life cycle stage of the request to be processed. It calls the application logic defined by MethodBinding, and generate a response. This eliminates the trouble of creating and recovering the component tree, so screen generator is not required. If you set immediate to true, You will not encounter any problems.

Another advantage of using a custom life cycle is that any PhaseListener added by application developers has no impact on this solution; application developers can even add PhaseListeners to this custom lifecycle. However, if you use a custom PhaseListener to add other managed beans to this request, you may encounter some problems, unless they are also registered for this custom lifecycle.

6. Select a jsf ajax Method

Here we use the lifecycle method-since it does not bring about logical side effects and other overhead of the application. Here, the open-source project Mabon can help you focus on the design of components that support AJAX technology.
Let's explain what Mabon is and how it supports component developers interested in AJAX data retrieval. Figure 2 ).

 
Figure 2. Mabon class diagram

7. What is Mabon?

Mabon provides a convenient way to "hook" in) A specially designed life cycle-this is especially suitable for components that support AJAX technology-it must retrieve data directly from a support bean without wasting a complete JSF life cycle. It also provides a Mabon protocol mabon:/)-used to reference JavaScript tool functions that support beans and send target URLs and any required parameters, then, the data is retrieved from the managed bean asynchronously.

8. Mabon and JSON

As you know, XMLHttpRequest provides two response types: responseText and responseXML, which can be used to retrieve data. You may ask: Which one should I use? The answer to this question depends on whether you want to control the response syntax by yourself.
ResponseXML Type Returns a complete DOM object. It provides you with many ways to traverse the DOM tree. This allows you to find the information you need and apply the changes to the current document. This is useful when your component responds to the surrounding elements and you do not want to control the response, for example, when you communicate with a Web service.

9. MabonLifecycle class

MabonLifecycle consists of three parts:
ApplyRequestValuesPhase, InvokeApplicationPhase, and RenderResponsePhase. MabonLifecycle is responsible for executing these three phases and is also responsible for processing any PhaseListeners attached to the MabonLifecycle.