Application of rich Internet components based on AJAX and JSF (1)

In this article, we will show you how to use Mabon to create a simple and powerful input component that features built-in recommendations similar to Google Suggest. To make it easier for Web developers to use our JDJ InputSuggest component, we use the Weblets open source project to bind external resources, samples, and JavaScript libraries to a Java archive file (JAR) -It describes the binding of our JSF component.

1. Create a JSF HtmlInputSuggest component that supports AJAX

The proposed jsf ajax input solution consists of four classes, as shown in figure 1.

 
Figure 1. Class diagram: Build the class required by the input suggestion component

These classes are:
• HtmlInputSuggest-a subclass specific to the screen generator.
• HtmlRenderer-this is a superclass that provides some convenient methods to implement resource encoding.
• HtmlInputSuggestRenderer-is your new custom Screen Builder that generates tags on the client screen, including required resources, such as JavaScript libraries and style tables.
• HtmlInputSuggestTag is a tag processor.

In our input suggestion solution, we implemented a JavaScript library-inputSuggest. js-which contains the function of retrieving data from bean supported by Web developers using Mabon. In this article, we will discuss inputSuggest in detail. js files and HtmlInputSuggestRenderer-both of them are affected by Mabon and provide input fields. These input fields all have the input detection type-ahead function) and the recommended list function ).

Ii. Enter the suggested JavaScript Library

Since we use Mabon, we do not need to worry about retrieving data from the support bean. We can assign this task to Mabon. However, we are concerned about how to process the data returned by the XMLHttpRequest object, how to fill in the actual suggestion list, and how to process user interaction. This inputSuggest. js library contains a large number of functions to process keyboard navigation and mouse interaction. Space limitations: here we will focus on the functions that have a significant impact on the JSF HtmlInputSuggest component.

(1) doKeyPress Function

The doKeyPress function displayed in List 1 is responsible for handling the key-Click Event and checking whether the user has pressed the TAB key. Normally, the TAB key is removed from the input field and the blur event is triggered. For the solution entered in this article, you can press a TAB to select an active row from the suggestion list. To do this, we need to track the TAB key, select a row from the suggestion list, and add the value to the input field, or leave the input field if no list data is available. If control navigation occurs, the doBlur () function is activated and the recommendation list is disabled.

List 1-doKeyPress Functions

Projsf. jdj. doKeyPress = function (event ){ Var input = (event. srcElement | event.tar get ); Var inputId = input. id; Var div = document. getElementById (inputId + "$ suggest "); Var divStyle = (div. currentStyle | div. style ); If (event. keyCode = 9 & divStyle. display = "block ") { Div. style. display = "none "; Var activeRow = projsf. jdj. _ findActiveRow (div ); Input. value = activeRow. innerHTML; Return false; // unpress the Tab key to exit the input field. } Return true; // continue: press the Tab key to exit the input field and it will call doBlur () }

List 2-doKeyUp Functions

Projsf. jdj. doKeyUp = function (event ){ Var input = (event. srcElement | event.tar get ); Var inputId = input. id; Var div = document. getElementById (inputId + "$ suggest "); If (event. keyCode = 9) // Tab key {Return false ;} Else if (div. style. display = "block" | div. childNodes. length> 0 )&& (Event. keyCode = 40 | event. keyCode = 38 )) { If (div. style. display = "none ") {Div. style. display = "block ";} Else { Var activeRow = projsf. jdj. _ findActiveRow (div ); Switch (event. keyCode ){ Case 40:/down arrow If (activeRow. nextSibling) { ActiveRow. className = "HtmlInputSuggestRow "; ActiveRow = activeRow. nextSibling; ActiveRow. className = "HtmlInputSuggestActiveRow "; } Break; Case 38:/Up Arrow If (activeRow. previussibling) { ActiveRow. className = "HtmlInputSuggestRow "; ActiveRow = activeRow. previussibling; ActiveRow. className = "HtmlInputSuggestActiveRow "; } Break; } Input. value = activeRow. innerHTML; } Return false; } If (event. keyCode! = 8) // not a Backspace key { Input. blur (); Input. focus (); } If (input. value. length <= 2) Div. style. display = "none "; }