Adding behaviors to JSF components

JSF Widget Library (JWL) Behaviors add event handlers which perform common functions to a containing tag. For example, you can add a JWL Behavior to the onblur handler of an input tag that validates the value of the tag when the onblur event is invoked.

1. Create a JSF enabled dynamic Web project.

2. Create a JSF page.

There are four ways to add a behavior to a JSF component or to a JSF page:

• Using the Properties view

  Behavior tab.

• Using the Properties view

  Keyboard Assist tab.

• Using the Quick Edit view:

  1. In the Quick Edit view, select a scripting element from the list of scripting elements.

  2. To add your own scripted event, type your code into the editor. If you don't use a predefined behavior, your scrip is referenced directly on the event attribute. For example

     <h:inputText onblur="return func_1(this, event);">
     </h:inputText>

  3. To use a predefined behavior, click

     Use pre-defined behavior. Specify an

     Action and a

     Target. This will add a <hx:behavior> tag to the JSP. In addition to selecting a predefined behavior, you can type code into the editor. Your custom code is referenced by the <hx:behavior> tag. For example

     <hx:behavior 
     	event="onblur" 
     	id="behavior2" 
     	behaviorAction="locked" 
     	onActionFunction="return func_1(this, event);">
     </hx:behavior>

• Using the JSP Source editor.

When a behavior is invoked, it runs one or more JWL Actions along with any provided Javascript. A JWL Action is a predefined block of Javascript such as "disable a field", "hide a field", "show an alert box". In addition, some behaviors (notably ones that deal with validation) can also toggle which CSS classes are associated with a field (as well as executing functions and actions).

JWL Behaviors add to an object's event handler as opposed to replacing it. For example, you can attach a JavaScript™ function to the onblur handler of an object and then attach a behavior to the onblur function as well. Both the event handler and the behavior are run when the event is fired.

 

Sequencing of Execution

If a behavior also has an associated user-supplied Javascript function, the function is executed before any JWL Actions. If the function returns false, the actions are not executed. Similarly, if the function returns false, any CSS styles are not applied. Actions behave similarly -- if an action returns false, any additional actions are not performed.

If a Javascript event handler is provided (for example, script is attached to an onblur event handler, onblur="return func_1(this, event);" and a behavior is attached to the same onblur event handler), the JavaScript will either be executed first or last depending on the event. If the JavaScript event handler runs first and it returns false, the behavior will not be run.

The method by which behaviors are added to a component varies based on the behavior:

Table 1. Adding behaviors to a JSF components

Behavior1	Tag	Description	How is behavior added to component?
Generic Behavior	<hx:behavior>	Assign a JWL Action and/or JavaScript to a DOM event handler.	In the QuickEdit view, select a value changed event then click Use pre-defined behavior. Use the Action and Target fields to configure the behavior. For information on available actions, refer to Actions.
Key Press Behavior	<hx:behaviorKeyPress>	Assign a JWL Action and/or JavaScript to the pressing of a function/control key when a component or the content of a component has focus.	In the Keyboard Assist tab of the Properties view for the <h:form> tag, click Add to assign actions to specific keystrokes at runtime.
Right Mouse Click Behavior	<hx:behaviorRightMouse>	Assign a JWL Action and/or Javascript to the clicking of the right mouse button on a component or on the content of a component.	In the JSP Source editor, type in the tag <hx:behaviorRightMouse></hx:behaviorRightMouse>.
Input Assist Behavior	<hx:inputHelperAssist>	Assign client-side validation, input prompting, auto-tabbing, etc. to an inputText field.	Add an input component to the JSF page. For more information about adding JSF components to a page, refer to Adding JSF components to Web pages. There are a number of ways to add the <hx:inputHelperAssist> tag: In the Behavior tab, click Auto-advance to next field. In the Behavior tab, click Validate field value in the browser. In the Behavior tab, add an onblur or onfocus action.
Field Tracking Behavior	<hx:inputHelperFormTracker>	Enable field/cursor tracking so that when a form is submitted, information about where the focus/cursor last was is transmitted as part of the submit. This tag is primarily for use in iSeries-based applications.	In the JSP Source editor, type in the tag <hx:inputHelperFormTracker></hx:inputHelperFormTracker>.
Key Bind Behavior	<hx:inputHelperKeybind>	Now deprecated. Replaced by <hx:behaviorKeyPress>.	Refer to Key Press Behavior.
Set Initial Focus Behavior	<hx:inputHelperSetFocus>	When a page loads, set initial focus to a control in the page.	In the Keyboard Assist tab of the Properties view for the <h:form> tag, specify if you want to set initial focus to the first field in the page or a specific field.
Typehead Complete Component	<hx:inputHelperTypeahead>	Assign type-ahead support (auto-suggest or auto-complete) to an inputText field.	Add an input component to the JSF page. For more information about adding JSF components to a page, refer to Adding JSF components to Web pages. In the Behavior tab, click Enable typeahead option. For more information, refer to the developerWorks® articles: Improve the usability of Web applications with type-ahead input fields using JSF, AJAX, and Web services in Rational® Application Developer V7 Advanced usage of the Typeahead control in Rational Application Developer V7.0

¹ Click the link to see the component properties.

---