Create rich Internet components based on Ajax and JSF

ajax|js| Internet

In this article, we'll show you how to use Mabon to create a simple and powerful input component that has the built-in recommendation features similar to those provided by Google suggest. To make it easier for web developers to use our JDJ inputsuggest components, we have used weblets open source engineering to bind external resources, such as icons and JavaScript libraries, to a Java archive (JAR)- It describes our JSF component bindings.

First, create a JSF htmlinputsuggest component that supports Ajax

This JSF Ajax input proposal includes a total of four classes, as shown in Figure 1.

Figure 1 Class diagram: Building the class needed to enter the proposed component

These classes are:

htmlinputsuggest-a specific subclass of the screen builder.

htmlrenderer-This is a superclass that provides some convenient ways to implement resource encoding.

htmlinputsuggestrenderer-is your new custom screen builder, which is responsible for generating annotations to the client screen, including the required resources, such as JavaScript libraries and model tables.

Htmlinputsuggesttag is a label processor.

In our input proposal solution, we implemented a JavaScript library-inputsuggest.js-that includes the ability to retrieve data from the Web Developer's support bean using Mabon. In this article, we will discuss the inputsuggest.js files and htmlinputsuggestrenderer-they are both affected by the Mabon and provide input fields that have input probes (type-ahead) and suggested list capabilities.

Ii. input suggested JavaScript library

Since we use Mabon, there is no need to worry about retrieving data from the support bean. We can give the task to Mabon to finish it. However, we are concerned with how to handle the data returned by the XMLHttpRequest object, how to populate the actual list of suggestions, and how to handle user interaction. This inputsuggest.js library contains a number of functions to handle keyboard navigation and mouse interaction. Space, here we will focus on the functions that have a significant impact on the JSF htmlinputsuggest component.

(i) Dokeypress function

The Dokeypress function, shown in Listing 1, handles the keystroke event and checks whether the user presses the TAB key. Under normal circumstances, the TAB key moves out of the input field and fires the Blur event. For the input suggested solution in this article, a tab keystroke can also be used to select an activity row from the list of suggestions. To do this, we need to track the TAB key, select a row from the list of suggestions, 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 suggested list is closed.

List 1-dokeypress function

projsf.jdj.doKeyPress = function (event) { var input = (Event.srcelement | | event.target); 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; Cancel pressing the TAB key to leave the input field } return true; Continue: Press the TAB key to leave the input field, it will call Doblur () }

List 2-dokeyup function

Projsf.jdj.doKeyUp = function (event) { var input = (Event.srcelement | | event.target); 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 = = | | 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.previoussibling) { Activerow.classname = "Htmlinputsuggestrow"; Activerow = activerow.previoussibling; Activerow.classname = "Htmlinputsuggestactiverow"; } Break } Input.value = activerow.innerhtml; } return false; } if (Event.keycode!= 8)//is not a backspace key { Input.blur (); Input.focus (); } if (input.value.length <= 2) Div.style.display = "None"; }

[1] [2] [3] [4] Next page