skyway builder web control guide

Skyway Builder Web Control Guide

6.3.0.0 - 07/21/2009

Skyway Software

Skyway Builder Web Control Guide: 6.3.0.0 - 07/21/2009Skyway Software

PublishedCopyright © 2009 Skyway Software

Abstract

TBD

iv

Table of Contents1. Web Controls Overview .................................................................................................... 1

1. Overview ............................................................................................................... 12. Web Control Reference .................................................................................................... 2

1. Button ................................................................................................................... 21.1. Configuration ............................................................................................... 2

2. Checkbox ............................................................................................................... 42.1. Configuration ............................................................................................... 5

3. Conditional Display .................................................................................................. 63.1. Configuration ............................................................................................... 6

4. Drop-Down ............................................................................................................ 74.1. Configuration ............................................................................................... 7

5. Form ................................................................................................................... 105.1. Configuration ............................................................................................. 10

6. Hyperlink ............................................................................................................. 116.1. Configuration ............................................................................................. 12

7. Image .................................................................................................................. 137.1. Configuration ............................................................................................. 13

8. Input Field ............................................................................................................ 158.1. Configuration ............................................................................................. 15

9. Iterator ................................................................................................................ 179.1. Configuration ............................................................................................. 17

10. Label ................................................................................................................. 1810.1. Configuration ............................................................................................ 19

11. Layer ................................................................................................................. 1911.1. Configuration ............................................................................................ 20

12. Radio Button ....................................................................................................... 2112.1. Configuration ............................................................................................ 21

13. Radio Button Group ............................................................................................. 2213.1. Configuration ............................................................................................ 22

14. Text Area ............................................................................................................ 2414.1. Configuration ............................................................................................ 25

15. Upload ............................................................................................................... 2615.1. Configuration ............................................................................................ 26

16. EE: Calendar Picker .............................................................................................. 2716.1. Configuration ............................................................................................ 27

17. EE: Pagination ..................................................................................................... 2917.1. Configuration ............................................................................................ 29

3. Events and Commands ................................................................................................... 321. Events ................................................................................................................. 322. Commands ........................................................................................................... 32

2.1. Change CSS Class ........................................................................................ 332.2. Change Style .............................................................................................. 332.3. Change Visibility ......................................................................................... 342.4. Custom Script ............................................................................................. 352.5. Load URL ................................................................................................... 352.6. Move Element ............................................................................................ 362.7. Reload ....................................................................................................... 372.8. Set Variables .............................................................................................. 372.9. Swap Image ............................................................................................... 382.10. Toggle CSS Class ........................................................................................ 382.11. Toggle Visibility ......................................................................................... 39

Skyway Builder Web Control Guide

v

4. General ........................................................................................................................ 401. Common Panels .................................................................................................... 40

1.1. Events ....................................................................................................... 401.2. Set Display Conditions .................................................................................. 411.3. Set Editable Conditions ................................................................................ 411.4. Style ......................................................................................................... 411.5. Attributes .................................................................................................. 42

vi

List of Figures3.1. Web Events and Commands .......................................................................................... 32

vii

List of Tables2.1. Label - Define Label ...................................................................................................... 22.2. Label - Format Options .................................................................................................. 22.3. Label - Properties ......................................................................................................... 32.4. Checkbox - Variable ....................................................................................................... 52.5. Checkbox - Properties .................................................................................................... 62.6. Conditional Display - Properties ....................................................................................... 72.7. Drop-down - Content .................................................................................................... 82.8. Drop-down - Result ....................................................................................................... 82.9. Drop-down - Properties ................................................................................................. 92.10. Form - Properties ...................................................................................................... 112.11. Hyperlink - Properties ................................................................................................ 122.12. Image - Properties ..................................................................................................... 142.13. Input Field - Select Variable ......................................................................................... 162.14. Input Field - Properties ............................................................................................... 162.15. Iterator - Properties ................................................................................................... 182.16. Iterator - Pagination ................................................................................................... 182.17. Label - Properties ...................................................................................................... 192.18. Layer - Properties ...................................................................................................... 202.19. Radio Button - Variable .............................................................................................. 212.20. Radio Button - Properties ........................................................................................... 222.21. Radio Button Group - Content ..................................................................................... 232.22. Radio Button Group - Result ........................................................................................ 232.23. Radio Button Group - Properties .................................................................................. 242.24. Text Area - Variable ................................................................................................... 252.25. Text Area - Properties ................................................................................................ 252.26. Properties Panel ........................................................................................................ 272.27. Calendar Picker - Properties ........................................................................................ 282.28. Pagination - Properties ............................................................................................... 292.29. Pagination - Id .......................................................................................................... 302.30. Pagination - Text ....................................................................................................... 312.31. Pagination - Style ...................................................................................................... 313.1. Skyway Events ............................................................................................................ 323.2. Skyway Commands ...................................................................................................... 323.3. Change CSS Class ........................................................................................................ 333.4. Change Style .............................................................................................................. 343.5. Change Visibility ......................................................................................................... 343.6. Custom Script ............................................................................................................. 353.7. Load URL ................................................................................................................... 353.8. Move Element ............................................................................................................ 363.9. Reload ....................................................................................................................... 373.10. Set Variables ............................................................................................................. 383.11. Swap Image .............................................................................................................. 383.12. Toggle CSS Classes ..................................................................................................... 393.13. Toggle Visibility ......................................................................................................... 394.1. Events and commands Panel ......................................................................................... 40

1

Chapter 1. Web Controls Overview

1. OverviewSpring MVC provides a JSP tag library (Spring Form Tag Library) for making it easier to bind form elementsto Model data. Skyway Builder's tag library extends the Spring Form tag library1 to address some of thedifficulties of using the Spring Form tag library. For one thing the information needed to configure theSpring Form tags comes from a variety of locations, making the configuration process tedious and error-proned. Each Skyway web control has a custom property editor which specialized selectors for configuringthe web controls, and the configuration options originate from the project meta-data.

While the Skyway web controls are compatible with Spring Web Flow, the Skyway URL and variableselectors haven't been integrated with the Spring Web Flow support in Skyway Builder 6.3. You can stilluse the Skyway web controls and their associated configuration panels, but you will need to manuallyenter references to flow urls, variables, events.

Many Skyway web controls have identical panels for configuring common properties, The description ofthose panel won't be duplicated in this guide. Instead there is a hyperlink to one common descriptionof the specific panel.

The Skyway web controls are found in the Skyway drawer of JSP editor's palette, and the controls canbe dragged onto the page.

1 http://static.springframework.org/spring/docs/2.5.x/reference/spring-form.tld.html

http://static.springframework.org/spring/docs/2.5.x/reference/spring-form.tld.html

http://static.springframework.org/spring/docs/2.5.x/reference/spring-form.tld.html

2

Chapter 2. Web Control Reference

1. Button

The Skyway Button defines a push button. Depending on how it's configured, a Skyway Button can beused in a variety of ways. The most common use the Skyway Button is to submit the user input on a form,in which case the button will be configured to submit . The Skyway button can also be used without aform, in which case the button can be configured to execute one or commands in response to a configuredEvent.

1.1. ConfigurationThis section describes each of the Properties panels.

1.1.1. Label

Enter static text or choose a variable that contains the desired label content for your button.

Table 2.1. Label - Define Label

Details Description

Label Enter the static text to display as the button label or click the Select...button to invoke the variable picker and select a variable that contains thedesired label content. Only valid variables from the current controller areenabled in the variable picker. The variables can be basic types (i.e. Text,Integer, Boolean) or basic attributes of a variable based on a data type.

Type This is a read-only property that provides the user with areminder of the variable type. For example when a user selects

a variable of type Text, the variable "type" displays Text.

Format If a variable is selected for the label text box, the applicable formattingoptions for the variable type selected is populated in the Format drop-down menu.Below are the formatting options of each applicable datatype: boolean, date, decimal, text, large text, integer, time, date/time

Table 2.2. Label - Format Options

Type Format Options

TEXT • TRIM(XXX) - removing trailing spaces

Web Control Reference

3

Type Format Options

• ESCAPE(XXX) - html encoding

• UPPER(XXX) - convert to upper case

• LOWER(XXX) - convert to lower case

INTEGER • #,### - use commas

• #,###; (#,###) - use commas and parenthesis

• #### - no commas

• ####; (####) - no commas and parenthesis

BOOLEAN • True/False

• true/false

• T/F

• Y/N

• 1/0

DATETIME • Enter Date/Time.

LARGETEXT, ID • There are no formatting options for LARGETEXT or ID variables

1.1.2. Properties

This panel defines unique properties assigned to this web control.

Table 2.3. Label - Properties

Details Description

ID This the ID for this web control, and it should be unique for the entireapplication. This ID will be emitted as the html id attribute for this web

control. A default ID is automatically generated for the web controlwhen it's added to a page, but it can be overriden by the developer.

Button Type Select the button type. The options are:


4

Details Description

• Submit - to submit the user entries of theform that the submit button is located in

• Reset - to reset user entries are to default values

• Button - to create a button that isn't bound to a form (forpotentially using Events and Commands); the behavior of thistype of button in inheritently different that a Submit button,but you can achieve the same result as the Submit button byspecifying an onClick Event with a Submit Form command.

• Image - similar to a Submit button, excecpt animage used instead of the browser's default button

Tab Index The tab index defines the order that different fields in the formshould be activated when the user clicks the tab button. Thisattribute specifies the position of the current element in the

tabbing order. This value must be a number between 0 and 32767.

Image If the button type is Image, then this setting is used toselect the image to use. The image can be selected by

• clicking on the Image... button to select a standard image(i.e. jpg, jpg, png, etc...) from the project WebContents folder

• clicking on the Variable... button to select a variablethat contains the path to the image to display

1.1.3. Events

See Events

1.1.4. Display Conditions

See Display Conditions

1.1.5. Style

See Style

1.1.6. Attributes

See Attributes

2. Checkbox

Checkboxes are used when you want the user to select one or more options of a limited number ofchoices. The Skyway Checkbox is bound to a single boolean variable. A checked Skyway Checkbox means


5

that the boolean variable is set to "true". An unchecked Skyway Checkbox means that the booleanvariable is set to "false".

2.1. Configuration

This section describes each of the panels.

2.1.1. Select Variable

Enter or select the variable bound to the Skyway Checkbox.

The following table describes the Select Variable Panel details:

Table 2.4. Checkbox - Variable

Details Description

Variable Path The boolean variable that is bound to this checkbox. When thiscontrol is rendered, the checkbox will be enabled or disabled

based on the value of this variable. So you can preset the checkboxto be checked or unchecked by presetting the bound variableaccordingly. Any changes to the checkbox by the end-user willbe assigned to the bound variable when the form is submitted.

Select... Click this button to invoke a variable picker and select avariable. Only valid boolean variables from the current

web conversation are enabled in the variable picker.

Note: A * denotes a required parameter.

2.1.2. Properties


The following table describes the Properties Panel details:


6

Table 2.5. Checkbox - Properties

Details Description

Id This the ID for this web control, and it should be unique for the entireapplication. This ID will be emitted as the html id attribute for this web




2.1.3. Events

See Events



2.1.5. Style

See Style

2.1.6. Attributes

See Attributes

3. Conditional Display

The Skyway Conditional Display web control allows you to display or not display a section of a webpage (conditional display area) based on the results of an expression. If the expression evaluates totrue, the content in the conditional display area is emitted, otherwise the content is omitted from theweb page. The conditional display area is anything that is included inside the Condition Display tags<skyway:conditionaldisplay></skyway:conditionaldisplay>.

It's important to note that using the Condition Display control doesn't merely hide or change visibility ofthe content embedded within the conditional display area, the content is completely omitted from therendered web page.

3.1. Configuration


3.1.1. Properties



7


Table 2.6. Conditional Display - Properties

Details Description

Show if Enter a valid JSP EL expression directly into the text area or clickthe Edit Expression button to invoke the Edit Expression window.

Edit Expression Click this button to invoke the Expression Editor window. Constructa valid JSP EL expression and include desired variables. Click the

OK button to display the expression in the Show if text area.

3.1.2. Attributes

See Attributes

4. Drop-Down

The Skyway Dropdown web control displays a drop-down list or listbox. It can display multiple static orvariable (collection) values in listbox or drop-down format. This web control can be configured to give theuser the option of selecting one or many of the dropdown values. At runtime, selection(s) are written toeither a variable or a collection of variables

4.1. ConfigurationThis section describes each of the panels.

4.1.1. Content

Construct the drop down or list using static value of the content of a collection.


8

The following table describes the Content Panel details:

Table 2.7. Drop-down - Content

Details Description

Static Options The Static Options is for defining static label/value pairs at design-time.The end-user of the application will see the static label in the listbox/drop-down web contol. When a label is selected, the value associatedwith that label (as defined under static options) will be bound to the

variable defined in the Result tab. To add new static label/value pair, clickthe Add button to enter a new label and value. Click Remove to delete alabel/value entry. Click the Up and Down buttons to reorder these labels.

Dynamic Options -Source Collection

The Dynamic Options is for deriving the label/value pairs at runtime basedon the contents of a source collection. For every object in the source

collection, the end-user will see the label (specified in the label field) inthe listbox/drop-down web control. When a label is selected, the value

(specified in the value field) associated with corresponding object will bebound to the variable defined in the Result tab. Enter a collection in the

text box or click the Select... button to invoke a variable picker and select avariable that stores the collection and field within the collection to display.

Label The object attribute from the source collection that will bedisplayed in the listbox/dropdown at runtime. Enter a label inthe text box or click the Select... button to invoke a variable

picker and select a variable that stores the desired label.

Value The object attribute from the source collection that will be assigned to thevariable (defined in the Result tab) when the corresponding value is selected

at runtime. Enter a value in the text box or click the Select... button toinvoke a variable picker and select a variable that stores the desired value.

4.1.2. Result

Select the variable to hold the selection.

The following table describes the Result Panel details:

Table 2.8. Drop-down - Result

Details Description

Variable Path The command object variable that will hold the value(s) correspondingto the label(s) selected by the end-user. When an enclosingform is submitted, this variable will be assigned the selected


9

Details Description

value(s. Enter the variable in the text box or click the Select...button to invoke a variable picker and select the desired variable.

If you are defining a drop-down control or a single-select listbox(see Properties panel), then you must specify a basic scalar variable

that corresponds to the value. For example, if you are assigninga text value, then you must specify a text variable. If you are

assigning an integer value, then you must specify an integer variable.

If you are definign a multi-select listbox (see Properties panel), thenyou must specify a basic scalar variable collection that corresponds tothe value. For example, if you are assigning multiple text values, then

you must specify a text collection variable. If you are assigning multipleinteger values, then you must specify an integer collection variable.


4.1.3. Properties



Table 2.9. Drop-down - Properties

Details Description





Type Select whether this control will be:

• Dropdown - an collapsible list which supportsthe selection of a single item from a list

• List - an scrollable list which supports the selection of one or more itemsfrom a list; selecting list enables the Rows input and Selections checkbox.


10

Details Description

Rows If List is selected as the Type, enter the number of rows to bedisplayed. If the number of rows to display is less than the numberof values in the list, the user will be able to scroll through the list.

Selections Identify whether the user will be able to choose one or multiplevalues in the listbox. This field is not applicable to dropdowns.

4.1.4. Events

See Events

4.1.5. Editable Conditions




4.1.7. Style

See Style

4.1.8. Attributes

See Attributes

5. Form

The Skyway Form web control is a container for other controls that accept user input. All the controlscontained within the Skyway Form web control are submitted to the server at the same time forprocessing. Examples of web controls that accept user input are Skyway Input Field, Skyway Radio Button,Skyway Radio Button Group, Skyway Checkbox, Skyway Dropdown and Skyway Text Area. These controlsmust be placed within the dashed form boundary after adding a Skyway Form control to a page withinthe HTML Editor.

When a Skyway Form is used in a Spring MVC implementation, the URL mapping configuration willtypically be assigned the URL for a web controller that will process the submitted data. When aSkyway Form is used in a Spring Web Flow implementation, the URL mapping will typically be set to${flowExecutionUrl}, an EL variable corresponding to the URL for the current view state of a flow.

5.1. Configuration


5.1.1. Properties



11


Table 2.10. Form - Properties

Details Description



Form Name Enter a descriptive name for the form using alpha-numeric characters.

URL Mapping Enter the desired web controller to map to or click theSelect button to invoke the Select Web Controller window.

Command Object Name of the model attribute under which theform object is exposed. Defaults to 'command'.

Form Encoding The content type used for encoding the form data set for submissionto the server. The default is application/x-www-form-urlencoded.

5.1.2. Events

See Events

5.1.3. Style

See Style

5.1.4. Attributes

See Attributes

6. Hyperlink

The Skyway Hyperlink web control displays either a static or variable value, and the click event for ahyperlink can be used to assign values to variables and invoke web Events. Additionally, it can be used tomove the user to the next step in the web conversation without submitting other form fields.

When a Skyway Hyperlink is used for navigation in a Spring MVC implementation, the URL willtypically be configured to a URL mapping that's defined in a controller. When a Skyway Hyperlink isused for navigation in a Spring Web Flow implementation, the URL mapping will typically be set to${flowExecutionUrl} with an _eventId url parameter for specify the event to be handled by the flowdefinition (i.e. ${flowExecutionUrl}&_eventId=add). The ${flowExecutionUrl} variable is an EL variablecorresponding to the URL for the current view state of a flow.


12

6.1. Configuration


6.1.1. Properties

This panel defines unique properties assigned to this web control


Table 2.11. Hyperlink - Properties

Details Description

Link Type For specifying the whether the link is to a URL or toMedia. URL is used for navigation, and Media is used for

downloading content from a web application. Media contentcan be stored and/or generated by the web application.

URL Click this radio button to make the hyperlink a URL.Enter the related information described below.

Link To (URL) For URL Type: Select the desired link destination by selecting oneof the following options:: File, URL Mapping, JSP Alias, and Variable.

For Spring Web Flow use ${flowExecutionUrl}&_eventId=xyz. Replace "xyz"with an event supported by the view state the rendered the current page.

Media Click this radio button to make this hyperlink media content. Enter thedesired variables that store the media variable, content type, and file name.

Media Variable (Media) For Media Type: Specify the variable thatcontains the media content to be downloaded.

Content Type (Media) For Media Type: Specify the content type (mime type) for the mediacontent. The content type can be specified statically or from from

a variable. Examples of content types include "text/html", "image/png", "image/gif", "video/mpeg", "text/css", and "audio/basic".

File Name (Media) For Media Type: Specify the default file name that the content willbe download as. For example: If you have bound this web control toa variable that contains a generated excel spreadsheet, you would

want the filename to contain the .xls extension (i.e. report.xls),

Link Text* Enter the text to display in the hyperlink. You can also specify an expression.

Target


13

Details Description

Enter the Target that should receive the result of thelink. Valid targets are listed in the Target dropdown.

Valid targets are _blank, _parent, _self, and _top.





Title Enter a title for the hyperlink or click the Select... button to invoke avariable picker and select the variable that stores the desired title. The

title is usually visible to the end-user when they hover over the hyperlink.


6.1.2. Events

See Events

6.1.3. Style

See Style

6.1.4. Attributes

See Attributes

7. Image

The Skyway Image web control allows you to display a picture or image on a web page. This web controlcan display either a static value or a variable, and if required, the user has the ability to modify theappearance of the image. Additionally, Skyway Image controls can be configured to display based onthe results of one or many true/false test conditions. If the conditions evaluate to "true", the image isdisplayed, otherwise the image is omitted from the web page

7.1. Configuration


7.1.1. Properties



14


Table 2.12. Image - Properties

Details Description

Link Type For specifying the whether the image is static image (URL) or dynamicallygenerated (Media). URL is used for configuring a reference to a

static image contained in the web project, and Media is used forconfiguring a dynamically generated image from the web application.

URL Click this radio button to specify a static image that is URLaddressable. Enter the related information described below.

Image URL (URL) For URL Type: Select the desired image from the web project

If URL is selected, then specify the URL by:

• entering the URL

• using the File button to select a file from the web project

• using the Variable button to specify the URL stored in a variable

Media Click this radio button to specify a dynamically generated image thatis stored in a variable. For example if the image maybe dynamically

generated by application or stored in a database, and it can be loadedinto a variable (type=Picture) for display using the Media option..

Media Variable (Media) For Media Type: Specify the variable (type =Picture) that contains the image to be displayed.

Content Type (Media) For Media Type: Specify the content type (mime type) for the image. Thecontent type can be specified statically or from from a variable. Examplesof content types include "image/png", "image/gif", and "image/jpeg". The

content type may be hardcoded or specified using a variable. The mime typeis used by the end-user's browser to determine how to display the content.

File Name (Media) For Media Type: Specify the file name for the image. For example: Ifyou have bound this web control to a variable that contains a generated

jpeg, you would want the filename to contain the .jpg extension (i.e.graph.jpg). The file name may be hardcoded or specified using a variable.



15

Details Description




Width Enter the width dimensions of the image.

Height Enter the height dimensions of the image.

Hover Text Enter the hover text to display when the image is selected.

Alt Text Enter the alternate text to display.


7.1.2. Events

See Events

7.1.3. Style

See Style

7.1.4. Attributes

See Attributes

8. Input Field

The Skyway Input Field web control is a form element that binds a variable to an Input Field on a webpage. At runtime, if the Input Field variable has been initialized, the value of the variable is displayedin the Input Field. Additionally, when a form containing an Input Field is submitted at runtime, the userinput is stored back to the bound variable.



Bind a variable to this input field.


16

The following table describes the Select Variable Panel details:

Table 2.13. Input Field - Select Variable

Details Description

Variable Path* Enter a command object variable directly into the text boxthat will hold the control's value or click the Select... button

to invoke a variable picker and select the desired variable. Thevariable must be contained within the form's command object.

Select... Click this button to invoke a variable picker andselect a variable that holds the control's value.

Type The data type of the selected variable. This is a read-only property thatprovides the user with a reminder of the variable type. For example when

a user selects a variable of type Text, the variable "type" displays Text.

Format Enter the format of the input field. The applicable formatting options forthe variable type selected is populated in the Format drop-down menu.


8.1.2. Properties



Table 2.14. Input Field - Properties

Details Description



Type Select the input type. Valid values are: Text, Password, and Hidden.

• Text - the web control and text will be visible.

• Password - the web control will be visible, but the test will be masked.

• Hidden - the web control will be hidden.

Tab Index The tab index defines the order that different fields in theform should be activated when the user clicks the tab button.


17

Details Description

This attribute specifies the position of the current element(in relation to the other elements on the page) in the tabbing

order. This value must be a number between 0 and 32767.

Char Width Enter the desired width of the input field.

Max Chars Enter the maximum characters allowed to be entered in the input field.


8.1.3. Events

See Events


See Editable Conditions



8.1.6. Style

See Style

8.1.7. Attributes

See Attributes

9. Iterator

The Skyway Iterator web control is used to iterate through the rows of a collection and repeat the enclosedweb controls once for each row in the collection.


9.1.1. Properties

Select a collection to iterator through.


18


Table 2.15. Iterator - Properties

Details Description

Collection Using Content Assist, enter a collection to iterate over directly intothe text box or click the Select... button to invoke a variable pickerand select a variable that stores the collection to iterate through.

Iteration Variable Name of the exported scoped variable for the current item of the iteration.

Metadata Variable Name of the exported scoped variable for the for the iterationmetadata. For example, if this variable is called metadata,

you can access the iteration index using ${metadata.index}.

9.1.2. Pagination

Configure in-memory pagination settings.

The following table describes the Pagination Panel details:

Table 2.16. Iterator - Pagination

Details Description

Start Index (Offset) Iteration begins at the item located at the specified indexwith the first item at index 0. If the items attribute is not

specified,iteration begins with the index set at the value specified.

Page Size How many records to display on a page. The EndIndex should be the Start Index plus Page Size.

End Index Iteration ends at the item located at the specified index(inclusive). If a collection was not specified (e.g. no items

attribute), iteration ends when the index reaches the value.

Increment Increment size. For example, a value of 1 would display every recordbetween start and end, a value of 2 would display every other record.

9.1.3. Attributes

See Attributes

10. Label


19

The Skyway Label web control allows you to display the contents of a variable on a web page. The variablecan be a top-level primitive variable or a field within a complex Data Type.


10.1.1. Properties

This panel defines unique properties assigned to this web control. Bind a variable to this label.


Table 2.17. Label - Properties

Details Description

Variable Path* Enter the static text to display as the button label or click theSelect... button to invoke the variable picker and select a variablethat contains the desired label content. Only valid variables fromthe current web conversation are enabled in the variable picker.

Type Once a label variable is defined, the data type of the selected variable isdisplayed in the read-only Type field below the selected variable name.

Format If a variable is selected for the label text box, the applicableformatting options for the variable type selected is populated in

the Format drop-down menu. Depending on the variable type, thecontents of a selected variable may be subject to a format mask.

Each variable type has relevant formats defined. For example,if a Text variable type is selected, options for TRIM(xxx) and

ESCAPE(xxx) formatting the text are available in the Format dropdown.


10.1.2. Attributes

See Attributes

11. Layer

The Skyway Layer web control is an area of content; at runtime, it emits a DIV or SPAN tag, allowing a userto apply CSS styles to specific regions of the page, and/or to use these regions to dynamically change thedisplay of a page. These layers can be loaded or hidden by commands.


20


11.1.1. Properties

This panel defines unique properties assigned to this web control. Configure the properties for thiselement.


Table 2.18. Layer - Properties

Details Description



Display Enter the display setting. Valid options are DIV or SPAN.

Link To Using Content Assist, enter the desired component to link to. Thiscontent will be emitted upon initial load of the layer. Data can be

subsequently loaded to this layer using AJAX or Skyway commands.

File... Click this button to select the desired .jsp page to link to.

URL Mapping... Click this button to select the desired web controller to link to.

JSP Alias... Click this button to select the desired page to link to.

Variable... Click this button to select the desired variable to link to.

11.1.2. Events

See Events



11.1.4. Style

See Style

11.1.5. Attributes

See Attributes


21

12. Radio Button

Radio Buttons are used when you want the user to select one of a limited number of choices. The SkywayRadio Button is a Skyway Form element that displays multiple static or variable (collection) values as aset of radio buttons. The web control allows a single selection to be made from the set of options, andat runtime, the selection is written to a variable


12.1.1. Variable

Enter or select the variable bound to the Skyway Radio Button button.

The following table describes the Variable Panel details:

Table 2.19. Radio Button - Variable

Details Description


to invoke a variable picker and select the desired variable. Thevariable must be contained within the form's command object..


12.1.2. Properties

Configure additional properties for this web control.



22

Table 2.20. Radio Button - Properties

Details Description

Label Enter a description of this radio button or click the Select button to invokethe variable picker and select a variable that stores the desired label.

Value Enter the value of this radio button or click the Select button to invokethe variable picker and select a variable that stores the desired value.





12.1.3. Events

See Events





12.1.6. Style

See Style

12.1.7. Attributes

See Attributes

13. Radio Button Group

Radio Button Groups allow users to create a grouping of skyway radio buttons.

13.1. Configuration


13.1.1. Content

Construct a set of radio buttons using the content of a collection.


23

The following table describes the Content Panel details:

Table 2.21. Radio Button Group - Content

Details Description

Source Collection Enter the desired source collection or click the Select button to invokea variable picker and select a variable that stores the desired collection.

Label Enter the desired label for this web control or click the Select button toinvoke a variable picker and select a variable that stores the desired label.

Value Enter the desired value for this web control or click the Select button toinvoke a variable picker and select a variable that stores the desired value.

13.1.2. Result

Select the variable to hold the selection.

The following table describes the Result Panel details:

Table 2.22. Radio Button Group - Result

Details Description

Variable Path* Enter a command object variable directly into the text box thatwill hold the control's value(s) or click the Select... button toinvoke a variable picker and select the desired variable. The

variable must be contained within the form's command object.

13.1.3. Properties

Configure additional properties for this web control.


24


Table 2.23. Radio Button Group - Properties

Details Description





Deliminator Enter the deliminator type.

13.1.4. Events

See Events





13.1.7. Style

See Style

13.1.8. Attributes

See Attributes

14. Text Area

Similar to the Skyway Input Field web control, the Skyway Text Area control is a Skyway Form elementthat binds a variable to a multi-line Input Field on a web page. Unlike the Input Field, the Text Area controlincludes a scroll bar and is used to display larger sets of data. At runtime, if the text area variable has been


25

initialized, the value of the variable is displayed in the web control. Additionally, when a form containinga text area is submitted at runtime, the user input is stored back to the bound variable.



Select a variable to hold the control's value.

The following table describes the Variable Panel details:

Table 2.24. Text Area - Variable

Details Description


to invoke a variable picker and select the desired variable. Thevariable must be contained within the form's command object.


14.1.2. Properties

Configure additional properties for this text area.


Table 2.25. Text Area - Properties

Details Description



26

Details Description




Columns Enter the columns for this control.

Rows Enter the rows for thsi control.

14.1.3. Events

See Events

14.1.4. Set Editable Conditions

See Set Editable Conditions



14.1.6. Style

See Style

14.1.7. Attributes

See Attributes

15. Upload

Map file information to variables.


15.1.1. Properties

Configure additional properties for this upload.


27


Table 2.26. Properties Panel

Details Description

Variable Path Required: The command object variable where the uploadedcontent will be stored. The variable type should be Large DataStorage or Picture. Enter the desired Variable Path or click the

Select... button to invoke a variable picker and select a variable.

Content Type Optional: The conversation variable where the content type will be stored.The content type is a value included in the header to identify the content,

and it consists of a type and subtype (ie. text/plain, image/jpg, application/msword). Enter the desired Variable Path or

click the Select... button to invoke a variable picker and select a variable.

File Name Optional: The conversation variable where the filenamewill be stored. If a variable is omitted, the filename will be

discarded. Enter the desired Variable Path or click the Select...button to invoke a variable picker and select a variable.

File Size Optional: The conversation variable where the file size will bestored. Enter the desired Variable Path or click the Select...

button to invoke a variable picker and select a variable.

15.1.2. Attributes

See Attributes

16. EE: Calendar Picker

The Skyway EE Calendar Picker web control is a highly customizable calendar widget based on the DHTMLCalendar built by dynarch.com1.

16.1. Configuration

This section describes each of the panels, however much more configuration can be made to thiscalendar control by visiting dynarch.com2. All files associated with this calendar control are located in theWebContent/calendar folder of the Skyway generated web project.

16.1.1. Properties

Configure properties for this calendar pop-up.

1 http://www.dynarch.com/projects/calendar/2 http://www.dynarch.com/projects/calendar/

http://www.dynarch.com/projects/calendar/





28


Table 2.27. Calendar Picker - Properties

Property Description

Input Field* The ID of the input field which can be used as boththe calendar value to post and display to the user.

Input Pattern* The format string that will be used to enter the date in the input field.This format will be honored even if the input field is hidden. Clicking Auto

Select attempts to automatically select the pattern that most closelymatches the Java pattern from the input field. The format string canbe chosen from the drop down or typed into the drop down control.

Display Element The ID of a SPAN, DIV (Skyway Layer) or any other element thatcan be used to display the date picked from the calendar control.This is generally used only when the input field is hidden and ifa text box is not the preferred approach to display the date. Forexample, if you want to only show the date as a read-only field.

Display Pattern The format string that will be used for the date displayed inthe Display Element, if used. Clicking Auto Select attempts to

automatically select the pattern that most closely matchesthe Java pattern from the input field. The format string can be

chosen from the drop down or typed into the drop down control.

Button The ID of the element that will pop-up the calendar control if thedefault calendar image is not used. This is usually a button or image.

Single Click Specifies if the calendar is in single-click (default) mode or double-click. If not enabled, the user must double-click to select the date.

Show Time If set to true, the calendar also shows a configurabletime selection with the calendar pop-up.

Time Display If Show Time is checked, this can be set toshow either a 12 hour or 24 hour time format.

First Day of Week Specifies which day of the week to showas the first column in the calendar pop-up.

Show Week Numbers If set to true, the calendar control will display weeknumbers on the left-hand side of the calendar control.

Show Border Days If set to true, then days belonging to the months beforeand after the selected month will also be displayed

in the calendar pop-up, but in a faded out color.


29

16.1.2. Attributes

See Attributes

17. EE: Pagination

The Skyway EE Pagination web control provides a highly customizable navigation area to enablepagination links for a large collection of data. This control is loosely bound to the data that is beingpaginated by design. Therefore, either the search step to retrieve the data or the iterator web control (forin memory pagination) must be configured along with this pagination control.


17.1.1. Properties

Configure properties for this pagination control.


Table 2.28. Pagination - Properties


URL (Search Action)* The URL to invoke when a pagination link is clicked. Click theURL Mapping... button to choose defined Controller URLs.

Count* The total number of records in the collection of data that willbe paginated. Click the Select... button to choose a variable

that contains that value from the Select Variable dialog.

Starting VariableIndex Name*

The fully qualified name of the variable containing the index of thefirst record on the current page. This variable name will be used as the

name in the URL patterns of the pagination links. Click the Select...button to choose the variable that contains that value from the SelectVariable dialog. It usually is part of the input variable of the Operationdefined in the URL, or part of a Controller or Project level variable set.

Page Size* The number of records to display on each page or a variablecontaining that value. Click the Select... button to choose the

variable that contains that value from the Select Variable dialog.


30


Number of Pages* The number of page links to display in the paginationcontrol. For a large amount of records, this offers a way topresent a manageable set of links displayed at any time.

Element ID (XHR Target) If the attribute is set, the pagination links will use AJAX toload content into a target element identified by this attribute.

Reload Elements Identifies additional elements to reload when pagination linksare clicked. This is only used when an XHR target has been set.

17.1.2. Id

Configure ids of the emitted elements in order to provide custom styling to the pagination links.

The following table describes the Id Panel details:

Table 2.29. Pagination - Id


Id The ID of the main DIV wrapping around the entire pagination control.

First Link Id The ID of the link to the first page.

Previous Link Id The ID of the link to the previous page.

Next Link Id The ID of the link to the next page.

Last Link Id The ID of the link to the last page.

17.1.3. Text

Configure the text of the pagination control


31

The following table describes the Text Panel details:

Table 2.30. Pagination - Text


Text The template for the pagination summary text.

No Records Found Text The text to display when no records are found.

First Link Text The text (or HTML) of the first link.

Previous Link Text The text (or HTML) of the previous link.

Next Link Text The text (or HTML) of the next link.

Last Link Text The text (or HTML) of the last link.

Page Separator The separator used between page links.

Previous/NextLink Separator

The separator used between the previous and next links.

17.1.4. Style

Configure CSS Styles. The CSS classes specified here will be emitted as class attributes on SPAN tags aroundthe pagination hyperlinks and not the hyperlinks themselves.

The following table describes the Style Panel details:

Table 2.31. Pagination - Style

Selected Page CSS Class The CSS class for the selected page. Generally, the select page is a linkthat is not clickable. This class can be used to add emphasis to that link.

Enabled Links CSS Class The CSS class used to style the previous/next links when they are clickable.

Disabled Links CSS Class The CSS class used to style the previous/next links when they are not clickable.

17.1.5. Attributes

See Attributes

32

Chapter 3. Events and Commands

1. EventsThe Skyway Web controls are emitted as standard HTML elements, which can be configured to executelogic (Commands) in response to Events. An HTML element can be configure to respond to multipleevents, and an Event can be configured to execute one or more commands.

Figure 3.1. Web Events and Commands

Table 3.1. Skyway Events

Event Handle Description

blur onblur Web control loses focus

change onchange Web control value has changed due to user action

click onclick Web control clicked

dbclick ondbclick Web control double-clicked

focus onfocus Web control receives focus

keydown onkeydown Keyboard key pressed in web control

keypress onkeypress Combination of keydown and keyuppressed in web control

keyup onkeyup Keyboard key released in web control

mousedown onmousedown Mouse button is pressed over a web control

mouseout onmouseout Mouse pointer is moved off a web control

mouseover onmouseover Mouse pointer is hovered over a web control

mouseup onmouseup Mouse button is released over a web control

2. CommandsOnce 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 Commandsavailable to the web developer.

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

Events and Commands

33

Command Description

Custom Script invokes a javascript

Load URL this command can load a full page or loadcontent 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

2.1. Change CSS Class

The Change CSS Class command applies or removes a CSS class to/from one or more page elements.More than one element can be specified by separating them with commas, and more than one CSS classcan be specified by separating them with commas. The styles must be defined separately in a style sheetor an inline style block on the page.

The following table describes the Change CSS Class details:

Table 3.3. Change CSS Class

Details Description

Element(s) Required: the element id(s) which to apply the command.Either type in the element id or select the desired page

element from the pulldown menu. When specifying multipleelements, the element names should be comma separated.

Add Class(es) Optional: Specify one or more CSS classes(comma separated) to be added to the element.

Remove Class(es) Optional: Specify one or more CSS classes (commaseparated) to be remove from the element.

2.2. Change Style

The Change Style command adds or removes css classes from one or more page elements.

Events and Commands

34

The following table describes the Change Style details:

Table 3.4. Change Style

Details Description

Element(s) Required: the element id(s) which to apply the command.Either type in the element id or select the desired page


Style Required: the desired style to be applied to the element.Either enter the style into the text area or click the StyleEditor... button to configure the desired style settings.

2.3. Change Visibility

The Change Visibility command changes the visibility (on or off) of one or more page elements.

The following table describes the Change Visibility details:

Table 3.5. Change Visibility

Details Description

Show Element(s) Optional: the element id(s) whose visibility should be turnedon. Either type in the element id or select the desired page


Hide Elements Optional: the element id(s) whose visibility should be turnedoff. Either type in the element id or select the desired page

Events and Commands

35

Details Description


2.4. Custom ScriptThe Custom Script command will execute a fragment of JavaScript.

The following table describes the Custom Script details:

Table 3.6. Custom Script

Details Description

Custom Script Required: Enter the desired script into the text area. The user should makesure he puts a semi-colon after any custom JavaScript entered (this is

standard). This command is typically used to invoke javascript functions thatare either embedded in the page or included in an external javascript library.

2.5. Load URLThe Load URL command is used to load a server generated resource into either a new page (Page), asection of the current page page (AJAX), or into a custom javascript handler.

The following table describes the Load URL details:

Table 3.7. Load URL

Details Description

Link to Required: the URL of the requested server resource. One option isto request a JSP page, either directly (File) or indirectly using a JSP

Events and Commands

36

Details Description

alias (View Mapping). Another option is to specify a URL mapping(URL Mapping). The final option is to specify a conversation orproject variable (Variable) that contains the URL to be loaded.

Type Required: The manner in which the server resource should be loaded.The Page option will load the requested resource into the full page. The

AJAX-XHR option will load the requested resource using XmlHttpRequest,which is typically used for AJAX. When using the AJAX-XHR option, you must

specify the element (Element ID) to load the response into, the javascriptcallback handler (Callback Function), or disregard the response (None).

Target Required: For Page requests you must specify the target (i.e._self, _parent, _blank, _top) that the response should be

loaded into. This property doesn't apply to AJAX-XHR requests.

Asynchronous Optional: For AJAX-XHR requests you must specify whether youwant the request to be loaded synchronously or asynchronously.

XHR Target Required: For AJAX-XHR requests you must specify how the response willbe handled. If you want the response (typically html) to be loaded intoan element of the current page, use the Element ID option and specify

the element to load the content into. If you want want the responseto be handled by a javascript callback funciton, specify the CallbackFunction. If you want the response to be disregarded, specify None.

XHR Error Optional: If an error occurs in make the server request, you canspecify a javascript function (Callback Function) for handling the error.

2.6. Move Element

The Move Element command moves an element to an x,y coordinate position. There is an option to movethe element to the coordinates of the triggering mouse event, which is useful for pop-ups. This actionmakes the element absolutely positioned, which removes the element from the natural layout flow ofthe page.

The following table describes the Move Element details:

Table 3.8. Move Element

Details Description

Element to Move Required: the element id to move . Either type in the elementid or select the desired page element from the pulldown menu.

Events and Commands

37

Details Description

Use Event/MouseCoordinates

Optional: Use the event/mouse coordinates along withthe Horizontal Offset and Vertical Offset to determine

the destination coordinates of the element being moved.

Relative To Optional: Specify the element whose coordinates the will be usedalong with the Horizontal Offset and Vertical Offset to determine

to the destination coordinates of the element being moved.

Horizontal Offset Optional: the horizontal offset from theRelative To element to move the element to.

Vertical Offset Optional: the vertical offset from theRelative To element to move the element to.

2.7. Reload

The Reload command reloads the current page or element of the page. This action is useful for refreshinga page or portion of the page when data has changed, etc.

The following table describes the Reload details:

Table 3.9. Reload

Details Description

Elements to Reload Required: the element id(s) that should be reloaded . Either type inthe element id or select the desired page element from the pulldown

menu. When specifying multiple elements, the element namesshould be comma separated.Select the desired element(s) to reload.

2.8. Set Variables

The Set Variables command perfomrs one or more variable assignment. Enter the expression directly intothe Set Variables text area containing the variable path and the value or click the Insert... button to selectthe desired variable to be inserted. If a variable is included it must be an EL Expression.

Events and Commands

38

The following table describes the Set Variable details:

Table 3.10. Set Variables

Details Description

Add Variables Insert, Add, Remove, and Reorder selected variables.

2.9. Swap Image

The Swap Image commnad changes the SRC of one image to another. This action is good for rollovers.Typically, the user would drop images onto the page (using the skyway image wizard) and make theminvisible. Then, the user can change the SRC of a visible image to any of the other hidden ones.

The following table describes the Swap Image details:

Table 3.11. Swap Image

Details Description

Change this Image Select the desired image to change from the pulldown menu.

To this Image Select the new image to change to from the pulldown menu.

2.10. Toggle CSS Class

The Toggle CSS Class command lets you toggle a CSS class on an element. If the element already has theclass, it will be removed. If the element does not have the class, it will be added. This is a great commandto use when you don't want to maintain style state. For example, you just want to display a down arrowif an up arrow is displayed or vice versa. You can specify more than one element and more than one styleby separating them with commas in the input fields.

Events and Commands

39

The following table describes the Toggle CSS Classes details:

Table 3.12. Toggle CSS Classes

Details Description

Element(s) Required: the element id(s) that will have one or more css classes toggled.Either type in the element id or select the desired page element fromthe pulldown menu. When specifying multiple elements, the element

names should be comma separated.Select the desired element(s) to reload.

CSS Class(es) Required: the desired CSS Class(es) to toggle on the specified element(s).

2.11. Toggle VisibilityThe Toggle Visibility command lets you toggle the visibility of an element. If the element is already visible,it will be hidden. If the element is already hidden, it will be made visible. This is a great command to usewhen you don't want to maintain visibility state. You can specify more than one element by separatingthem with commas in the input fields.

The following table describes the Toggle Visibility details:

Table 3.13. Toggle Visibility

Details Description

Element(s) Required: the element id(s) that will have their visibility toggled. Eithertype in the element id or select the desired page element from the

pulldown menu. When specifying multiple elements, the element namesshould be comma separated.Select the desired element(s) to reload.

40

Chapter 4. General1. Common Panels

1.1. EventsThis section describes each of the common panel. Events are actions that occur as a result of somethingthe user does. For example, clicking a Skyway button is an event, and changing the text in a Skyway textboxis an event. Many of Skyway's web controls can be configured to handle these events, including:

• Skyway Button

• Skyway Hyperlink

• Skyway Input Field

• Skyway Textarea

• Skyway Dropdown

• Skyway Checkbox

• Skyway Radio Button

• Skyway Image

A web control can be configured to invoke a Command upon the triggering of user event (browser-basedevent).

To add events and commands to a web control:

1. In the Events panel, click the Add Event button and select the desired event to add to this web control.The event displays in the Events and Commands display area.

2. Select an event from the list and click the Add Command button and select the desired command toassign to the event. The Command Details section updates with associated configuration options.

3. Select the desired configuration options then click OK.

The following table describes the Events and Commands panel details:

Table 4.1. Events and commands Panel

Details Description

Add Event Click this button to invoke the Select Event window and enterthe full or partial name prefix or pattern and select the desired

event from the available list of events, then click OK. The selectedevent displays in the Events and Commands display area.

Add Command After adding an Event, click this button to invoke the Select WebCommand window and enter the full or partial name prefix or pattern and

select the desired command for the selected event, then click OK. Theselected command displays in the Events and Commands display area.

Up/Down Click these buttons to change the order of the selectedevent in the Events and Commands display area.

General

41

Details Description

Delete Click this button to delete the selected eventfrom the Events and Commands display list.

Command Click this link to invoke the Command picker and selectthe desired command to invoke, or using ContentAssist, enter an action directly into the text box.

1.2. Set Display ConditionsThe Set Display Conditions panel is applicable to most Skyway web controls. The visibility controlled bythese display conditions is different than the visibility affected by Commands

When a display condition does not display anything, content is never even sent to the client browser.When you configure an command to hide a control or when you indicate that something is initially hidden(via a CSS style), that content is sent to the browser even though it is not displayed. The user can still seethe content by viewing source.

Note: As a general rule, you should never use CSS visibility for security. CSS is for cosmetics and usabilityonly. However, you can use the Display Conditions for security. For example, if you only wanted adminusers to see a certain part of a panel, you could achieve this with the display conditions and be assuredthat non-admin users will never be able to see that content because it will never get sent to the browser.

1.3. Set Editable ConditionsUse this panel to set conditional parameters (using process variables) that determine whether the controlis editable or read-only when rendered.

1.4. StyleThis panel allows a user to apply a customized Cascading Style Sheet (CSS) to their web page.

General

42

1.5. AttributesThis panel displays the associated web control's name, property details, and values (e.g. the image belowdisplay the attributes for the Skyway web control: button).

skyway builder web control guide

Documents