26. Responding to User-Generated Events (Events and Commands)

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.

Figure 2.14. Web Events and Commands

Web Events and 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

EventDescription
onblurWeb control loses focus
onchangeWeb control value has changed due to user action
onclickWeb control clicked
ondbclickWeb control double-clicked
onfocusWeb control receives focus
onkeydownKeyboard key pressed in web control
onkeypressCombination of keydown and keyuppressed in web control
onkeyupKeyboard key released in web control
onmousedownMouse button is pressed over a web control
onmouseoutMouse pointer is moved off a web control
onmouseoverMouse pointer is hovered over a web control
onmouseupMouse button is released over a web control

Note

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

CommandDescription
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


Note

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.

Figure 2.15. Events and Commands - Properties Panel

Events and Commands - Properties Panel

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">1
    <skyway:event event="onclick">2
              <skyway:submitform />3
              <skyway:loadurl />
    </skyway:event>
</skyway:button>
          

1

<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.

2

<skyway:event> specifies that an event is being wired, and the specific event (onclick) is configured using the event attribute.

3

<skyway:submitform> and <skyway:loadurl> are commands that are being wired to the event.

EXAMPLES

Here are some examples of using Events and Commands.

Figure 2.16. Events and Commands - 1 Event

Events and Commands - 1 Event

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.

Figure 2.17. Events and Commands - 2 Events

Events and Commands - 2 Events

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

  1. Creating the View for Spring MVC

  2. Using Javascript

  3. Implementing Client-side Validation using Javascript

  4. Publishing a AJAX service using DWR