PROBLEM
Web applications respond to events, and events typically happen as a result of human interaction with the an application running in their browser. Some examples of end-user generated events are clicking on a submit button or hyperlink, hovering over a hyperlink, or entering text into a textbox. The interaction model of a web application is supported by standard HTML event handlers that allow an application developer to control what happens in response to a user generated event. The events need to be wired to either client-side logic or server-side logic.
SOLUTION
A UI developer can use standard HTML conventions for programming web applications, but Skyway Builder provides a JSP tag library that provides additional functionality for wiring events to client-side or server-side logic. The JSP tag library is supported by tooling in Skyway Builder that makes it easier for a developer to the configure the tags to achieve the desired functionality.
HOW IT WORKS
In order to use the Skyway tag library a declaration must be added to the top of the JSP page. When using the Skyway JSP template (New-->JSP), the Skyway JSP tag is automatically added.
Example 2.27. JSP Directive for using Skyway Tab Library
<%@taglib uri="http://www.skywaysoftware.com/taglibs/core" prefix="skyway"%>
The Skyway Web controls are emitted as standard HTML elements, which can be configured to execute logic (Commands) in response to Events. An HTML element can be configure to respond to multiple events, and an Event can be configured to execute one or more commands.
The following table lists the most common events used in web applicatons. Per the HTML and javascript specifications, not all events are supported by all web controls.
Table 2.3. Event Descriptions
| Event | Description | ||
|---|---|---|---|
| onblur | Web control loses focus | ||
| onchange | Web control value has changed due to user action | ||
| onclick | Web control clicked | ||
| ondbclick | Web control double-clicked | ||
| onfocus | Web control receives focus | ||
| onkeydown | Keyboard key pressed in web control | ||
| onkeypress | Combination of keydown and keyuppressed in web control | ||
| onkeyup | Keyboard key released in web control | ||
| onmousedown | Mouse button is pressed over a web control | ||
| onmouseout | Mouse pointer is moved off a web control | ||
| onmouseover | Mouse pointer is hovered over a web control | ||
| onmouseup | Mouse button is released over a web control | ||
Refer to the Skyway Web Control Reference guide for detailed explanation of Skyway web controls, events and commands.
Once an event is specified, it can be configured with the logic to be performed in response to the event. The logic is implemented as one or more Skyway Commands, and there are various Skyway Commands available to the web developer.
Table 2.4. Skyway Commands
| Command | Description | ||
|---|---|---|---|
| Change CSS Class | applies or removes a CSS class to/from a page element | ||
| Change Style | applies a style to a page element | ||
| Change Visibility | show and/or hides a page element | ||
| Custom Script | invokes a javascript | ||
| Load URL | this command can load a full page or load content into a section of the current page | ||
| Move Element | this command moves a page element to a coordinate on the page | ||
| Reload | this command reloads the page or elements of a page | ||
| Set Variable | this command sets one or more conversation variables | ||
| Submit Form | this command submits the specified form | ||
| Swap Image | this command changes one image to another image | ||
| Toggle CSS Classes | this command toggles css classes for an element | ||
| Toggle Visibility | this command toggles visibility of an element | ||
Refer to the Skyway Web Control Reference guide for detailed explanation of Skyway web controls, events and commands.
The easiest way to configure a Skyway web control with events and commands is to use the tooling provided in Skyway Builder. The Events properties panel makes it very easy for a developer to wire events to client-side or server-side logic. The Events panel will only show events that are supported by the specific web control being configured.
Alternatively you can use the Skyway JSP tags manually. The Skyway tag library descriptor (TLD) specifies all the available tags and their attributes. This fragment of JSP code is intended to show the layering web controls, events and commands. The implementation details have been intentionally excluded.
Example 2.28. Event and Command - JSP Fragment
<skyway:button label="Click Here" type="submit"><skyway:event event="onclick">
<skyway:submitform />
<skyway:loadurl /> </skyway:event> </skyway:button>
| <skyway:button> is the JSP tag for emitting a button web control. Events and commands are defined within the tag will be associated with the web control. | |
| <skyway:event> specifies that an event is being wired, and the specific event (onclick) is configured using the event attribute. | |
| <skyway:submitform> and <skyway:loadurl> are commands that are being wired to the event. |
EXAMPLES
Here are some examples of using Events and Commands.
In the first example, a Button is configured to invoke two commands in response to an onClick event. The commands will be executed sequentially from top-to-bottom.
In this example, a Hyperlink is configured to
respond to two events. The Change CSS Class command will be
invoked in response to the onMouseOver event. The
Load URL and Toggle Visibility commands will
be invoked in response to the Hyperlink's onClick
event.
RELATED RECIPES
