Skyway Builder Web Control Guide

September 22, 2008

Abstract

TBD


Table of Contents

1. Web Controls Overview
1. Overview
2. Web Control Reference
1. Button
1.1. Configuration
2. Calendar Picker
2.1. Configuration
3. Checkbox
3.1. Configuration
4. Conditional Display
4.1. Configuration
5. Drop-Down
5.1. Configuration
6. Form
6.1. Configuration
7. Hyperlink
7.1. Configuration
8. Image
8.1. Configuration
9. Input Field
9.1. Configuration
10. Iterator
10.1. Configuration
11. Label
11.1. Configuration
12. Layer
12.1. Configuration
13. Radio Button
13.1. Configuration
14. Text Area
14.1. Configuration
15. Upload
15.1. Configuration
3. Events and Commands
1. Events
2. Commands
2.1. Change CSS Class
2.2. Change Style
2.3. Change Visibility
2.4. Custom Script
2.5. Load URL
2.6. Move Element
2.7. Reload
2.8. Set Variables
2.9. Swap Image
2.10. Toggle CSS Class
2.11. Toggle Visibility
4. General
1. Common Panels
1.1. Events
1.2. Set Display Conditions
1.3. Set Editable Conditions
1.4. Style
1.5. Attributes

List of Tables

2.1. Label - Define Label
2.2. Label - Format Options
2.3. Label - Properties
2.4. Label - Define Label
2.5. Label - Format Options
2.6. Label - Properties
2.7. Checkbox - Variable
2.8. Checkbox - Properties
2.9. Conditional Display - Properties
2.10. Drop-down - Content
2.11. Drop-down - Result
2.12. Drop-down - Properties
2.13. Form - Properties
2.14. Hyperlink - Properties
2.15. Image - Properties
2.16. Input Field - Select Variable
2.17. Input Field - Properties
2.18. Iterator - Properties
2.19. Iterator - Pagination
2.20. Label - Properties
2.21. Layer - Properties
2.22. Radio Button - Variable
2.23. Radio Button - Properties
2.24. Text Area - Variable
2.25. Text Area - Properties
2.26. Properties Panel
3.1. Skyway Events
3.2. Skyway Commands
3.3. Change CSS Class
3.4. Change Style
3.5. Change Visibility
3.6. Custom Script
3.7. Load URL
3.8. Move Element
3.9. Reload
3.10. Set Variables
3.11. Swap Image
3.12. Toggle CSS Classes
3.13. Toggle Visibility
4.1. Events and commands Panel

Chapter 1. Web Controls Overview

Table of Contents

1. Overview

1. Overview

Chapter 2. Web Control Reference

1. Button

The Skyway Button defines a push button. Depending on how it's configured, a Skyway Button can be used 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 a form, in which case the button can be configured to execute one or commands in response to a configured Event.

1.1. Configuration

This section describes each of the panels.

1.1.1. Label

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

Table 2.1. Label - Define Label

DetailsDescription
LabelEnter 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 the desired label content. Only valid variables from the current web conversation are enabled 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.
TypeThis is a read-only property that provides 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.
FormatIf a variable is selected for the label text box, the applicable formatting options for the variable type selected is populated in the Format drop-down menu.Below are the formatting options of each applicable data type: boolean, date, decimal, text, large text, integer, time, date/time

Table 2.2. Label - Format Options

TypeFormat Options
TEXT
  • TRIM(XXX) - removing trailing spaces

  • 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

DetailsDescription
IDThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Button TypeSelect the button type. The options are:
  • Submit - to submit the user entries of the form 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 (for potentially using Events and Commands); the behavior of this type of button in inheritently different that a Submit button, but you can achieve the same result as the Submit button by specifying an onClick Event with a Submit Form command.

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

Tab IndexThe tab index defines the order that different fields in the form should be activated when the user clicks the tab button. This attribute specifies the position of the current element in the tabbing order. This value must be a number between 0 and 32767.
ImageIf the button type is Image, then this setting is used to select the image to use. The image can be selected by
  • clicking on the Image... button to select a standard image (i.e. jpg, gif, png, etc...) from the project WebContents folder

  • clicking on the Variable... button to select a variable that 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. Calendar Picker

DIANA - please update this control, including images and tables, remove sections that don't apply

The Skyway Button defines a push button. Depending on how it's configured, a Skyway Button can be used 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 a form, in which case the button can be configured to execute one or commands in response to a configured Event.

2.1. Configuration

This section describes each of the panels.

2.1.1. Label

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

Table 2.4. Label - Define Label

DetailsDescription
LabelEnter 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 the desired label content. Only valid variables from the current web conversation are enabled 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.
TypeThis is a read-only property that provides 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.
FormatIf a variable is selected for the label text box, the applicable formatting options for the variable type selected is populated in the Format drop-down menu.Below are the formatting options of each applicable data type: boolean, date, decimal, text, large text, integer, time, date/time

Table 2.5. Label - Format Options

TypeFormat Options
TEXT
  • TRIM(XXX) - removing trailing spaces

  • 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
  • Dyyyy-MM-dd'T'HH:mm:ss.SSSZ

  • yyyy-MM-dd HH:mm:ssZ

  • (datetime_short)

  • (datetime_medium)

  • (datetime_long)

  • (datetime_full)

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


2.1.2. Properties

This panel defines unique properties assigned to this web control.

Table 2.6. Label - Properties

DetailsDescription
IDThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Button TypeSelect the button type. The options are:
  • Submit - to submit the user entries of the form 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 (for potentially using Events and Commands); the behavior of this type of button in inheritently different that a Submit button, but you can achieve the same result as the Submit button by specifying an onClick Event with a Submit Form command.

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

Tab IndexThe tab index defines the order that different fields in the form should be activated when the user clicks the tab button. This attribute specifies the position of the current element in the tabbing order. This value must be a number between 0 and 32767.
ImageIf the button type is Image, then this setting is used to select the image to use. The image can be selected by
  • clicking on the Image... button to select a standard image (i.e. jpg, gif, png, etc...) from the project WebContents folder

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


2.1.3. Events

See Events

2.1.4. Display Conditions

See Display Conditions

2.1.5. Style

See Style

2.1.6. Attributes

See Attributes

3. Checkbox

Checkboxes are used when you want the user to select one or more options of a limited number of choices. The Skyway Checkbox is bound to a single boolean variable. A checked Skyway Checkbox means that the boolean variable is set to "true". An unchecked Skyway Checkbox means that the boolean variable is set to "false".

3.1. Configuration

This section describes each of the panels.

3.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.7. Checkbox - Variable

DetailsDescription
Variable PathThe boolean variable that is bound to this checkbox. When this control is rendered, the checkbox will be enabled or disabled based on the value of this variable. So you can preset the checkbox to be checked or unchecked by presetting the bound variable accordingly. Any changes to the checkbox by the end-user will be assigned to the bound variable when the form is submitted.
Select...Click this button to invoke a variable picker and select a variable. Only valid boolean variables from the current web conversation are enabled in the variable picker.

Note: A * denotes a required parameter.

3.1.2. Properties

This panel defines unique properties assigned to this web control.

The following table describes the Properties Panel details:

Table 2.8. Checkbox - Properties

DetailsDescription
IdThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Tab IndexThe tab index defines the order that different fields in the form should be activated when the user clicks the tab button. This attribute specifies the position of the current element in the tabbing order. This value must be a number between 0 and 32767.

3.1.3. Events

See Events

3.1.4. Display Conditions

See Display Conditions

3.1.5. Style

See Style

3.1.6. Attributes

See Attributes

4. Conditional Display

The Skyway Conditional Display web control allows you to display or not display a section of a web page (conditional display area) based on the results of an expression. If the expression evaluates to true, the content in the conditional display area is emitted, otherwise the content is omitted from the web 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 of the content embedded within the conditional display area, the content is completely omitted from the rendered web page.

4.1. Configuration

This section describes each of the panels.

4.1.1. Properties

This panel defines unique properties assigned to this web control.

The following table describes the Properties Panel details:

Table 2.9. Conditional Display - Properties

DetailsDescription
Show ifEnter a valid JSP EL expression directly into the text area or click the Edit Expression button to invoke the Edit Expression window.
Edit ExpressionClick this button to invoke the Expression Editor window. Construct a valid JSP EL expression and include desired variables. Click the OK button to display the expression in the Show if text area.

4.1.2. Attributes

See Attributes

5. Drop-Down

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

5.1. Configuration

This section describes each of the panels.

5.1.1. Content

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

The following table describes the Content Panel details:

Table 2.10. Drop-down - Content

DetailsDescription
Static OptionsThe 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 associated with 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, click the Add button to enter a new label and value. Click Remove to delete a label/value entry. Click the Up and Down buttons to reorder these labels.
Dynamic Options - Source CollectionThe Dynamic Options is for deriving the label/value pairs at runtime based on 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) in the listbox/drop-down web control. When a label is selected, the value (specified in the value field) associated with corresponding object will be bound 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 a variable that stores the collection and field within the collection to display.
LabelThe object attribute from the source collection that will be displayed in the listbox/dropdown at runtime. Enter a label in the text box or click the Select... button to invoke a variable picker and select a variable that stores the desired label.
ValueThe object attribute from the source collection that will be assigned to the variable (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 to invoke a variable picker and select a variable that stores the desired value.

5.1.2. Result

Select the variable to hold the selection.

The following table describes the Result Panel details:

Table 2.11. Drop-down - Result

DetailsDescription
Variable Path

The variable that will hold the value(s) corresponding to the label(s) selected by the end-user. When an enclosing form is submitted, this variable will be assigned the selected 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 assigning a 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), then you must specify a basic scalar variable collection that corresponds to the value. For example, if you are assigning multiple text values, then you must specify a text collection variable. If you are assigning multiple integer values, then you must specify an integer collection variable.


Note: A * denotes a required parameter.

5.1.3. Properties

This panel defines unique properties assigned to this web control.

The following table describes the Properties Panel details:

Table 2.12. Drop-down - Properties

DetailsDescription
IdThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Tab IndexThe tab index defines the order that different fields in the form should be activated when the user clicks the tab button. This attribute specifies the position of the current element in the tabbing order. This value must be a number between 0 and 32767.
TypeSelect whether this control will be:
  • Dropdown - an collapsible list which supports the selection of a single item from a list

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

RowsIf List is selected as the Type, enter the number of rows to be displayed. If the number of rows to display is less than the number of values in the list, the user will be able to scroll through the list.
SelectionsIdentify whether the user will be able to choose one or multiple values in the listbox. This field is not applicable to dropdowns.

5.1.4. Events

See Events

5.1.5. Editable Conditions

See Display Conditions

5.1.6. Display Conditions

See Display Conditions

5.1.7. Style

See Style

5.1.8. Attributes

See Attributes

6. Form

The Skyway Form web control is where controls that accept user input are placed so that the input can be submitted to the server for processing. Examples of web controls that accept user input are Skyway Input Field, Skyway Checkbox, Skyway Dropdown and Skyway Text Area. These controls must be placed within the dashed form boundary after adding a Skyway Form control to a page within the HTML Editor

6.1. Configuration

This section describes each of the panels.

6.1.1. Properties

This panel defines unique properties assigned to this web control.

The following table describes the Properties Panel details:

Table 2.13. Form - Properties

DetailsDescription
IdThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Form NameEnter a descriptive name for the form using alpha-numeric characters.

6.1.2. Events

See Events

6.1.3. Style

See Style

6.1.4. Attributes

See Attributes

7. Hyperlink

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

7.1. Configuration

This section describes each of the panels.

7.1.1. Properties

This panel defines unique properties assigned to this web control

The following table describes the Properties Panel details:

Table 2.14. Hyperlink - Properties

DetailsDescription
URLClick this radio button to make the hyperlink a URL. Enter the related information described below.
Link Text*Enter the text to display in the hyperlink.
MediaClick this radio button to make this hyperlink media content. Enter the desired variables that store the media variable, content type, and file name.
Link ToSelect the desired link destination by selecting one of the following options: File, URL Action Mapping, View Mapping, and Variable.
Link TextEnter the link text as you want it to appear.
TargetEnter the Target that should receive the result of the link. Valid
IdThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Tab IndexThe tab index defines the order that different fields in the form should be activated when the user clicks the tab button. This attribute specifies the position of the current element in the tabbing order. This value must be a number between 0 and 32767.
TitleEnter a title for the hyperlink or click the Select... button to invoke a variable picker and select the variable that stores the desired title

Note: A * denotes a required parameter.

7.1.2. Events

See Events

7.1.3. Style

See Style

7.1.4. Attributes

See Attributes

8. Image

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

8.1. Configuration

This section describes each of the panels.

8.1.1. Properties

This panel defines unique properties assigned to this web control.

The following table describes the Properties Panel details:

Table 2.15. Image - Properties

DetailsDescription
ImageClick this radio button to make the hyperlink a URL. Enter the related information described below.
IdThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Tab IndexThe tab index defines the order that different fields in the form should be activated when the user clicks the tab button. This attribute specifies the position of the current element in the tabbing order. This value must be a number between 0 and 32767.

Note: A * denotes a required parameter.

8.1.2. Events

See Events

8.1.3. Style

See Style

8.1.4. Attributes

See Attributes

9. Input Field

The Skyway Input Field web control is a Skyway Form element that binds a variable to an Input Field on a web page. At runtime, if the Input Field variable has been initialized, the value of the variable is displayed in the Input Field. Additionally, when a form containing an Input Field is submitted at runtime, the user input is stored back to the bound variable.

9.1. Configuration

This section describes each of the panels.

9.1.1. Select Variable

Bind a variable to this input field.

The following table describes the Select Variable Panel details:

Table 2.16. Input Field - Select Variable

DetailsDescription
Variable Path*Enter a variable directly into the text box that will hold the control's value or click the Select... button to invoke a variable picker and select the desired variable.
Select...Click this button to invoke a variable picker and select a variable that holds the control's value.
TypeThe data type of the selected variable.
FormatEnter the format of the input field.

Note: A * denotes a required parameter.

9.1.2. Properties

This panel defines unique properties assigned to this web control.

The following table describes the Properties Panel details:

Table 2.17. Input Field - Properties

DetailsDescription
IdThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Tab IndexThe tab index defines the order that different fields in the form should be activated when the user clicks the tab button. This attribute specifies the position of the current element in the tabbing order. This value must be a number between 0 and 32767.
Char WidthEnter the desired width of the input field.
Max CharsEnter the maximum characters allowed to be entered in the input field.
TypeSelect the input type. Valid values are Text, Password, and Hidden.

Note: A * denotes a required parameter.

9.1.3. Events

See Events

9.1.4. Editable Conditions

See Editable Conditions

9.1.5. Display Conditions

See Display Conditions

9.1.6. Style

See Style

9.1.7. Attributes

See Attributes

10. Iterator

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

10.1. Configuration

This section describes each of the panels.

10.1.1. Properties

Select a collection to iterator through.

The following table describes the Properties Panel details:

Table 2.18. Iterator - Properties

DetailsDescription
CollectionUsing Content Assist, enter a collection to iterate over directly into the text box or click the Select... button to invoke a variable picker and select a variable that stores the collection to iterate through.
Iteration VariableName of the exported scoped variable for the current item of the iteration.
Metadata VariableName of the exported scoped variable for the for the iteration metadata. For example, if this variable is called metadata, you can access the iteration index using ${metadata.index}.

10.1.2. Pagination

Configure in-memory pagination settings.

The following table describes the Pagination Panel details:

Table 2.19. Iterator - Pagination

DetailsDescription
Start Index (Offset)Iteration begins at the item located at the specified index with the first item at index 0. If the items attribute is not specified,iteration begins with the index set at the value specified.
Page SizeHow many records to display on a page. The End Index should be the Start Index plus Page Size.
End IndexIteration 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.
IncrementIncrement size. For example, a value of 1 would display every record between start and end, a value of 2 would display every other record.

10.1.3. Attributes

See Attributes

11. Label

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

11.1. Configuration

This section describes each of the panels.

11.1.1. Properties

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

The following table describes the Properties Panel details:

Table 2.20. Label - Properties

DetailsDescription
Variable Path*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 the desired label content. Only valid variables from the current web conversation are enabled in the variable picker.
TypeOnce a label variable is defined, the data type of the selected variable is displayed in the read-only Type field below the selected variable name.
FormatIf a variable is selected for the label text box, the applicable formatting options for the variable type selected is populated in the Format drop-down menu. Depending on the variable type, the contents 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.

Note: A * denotes a required parameter.

11.1.2. Attributes

See Attributes

12. Layer

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

12.1. Configuration

This section describes each of the panels.

12.1.1. Properties

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

The following table describes the Properties Panel details:

Table 2.21. Layer - Properties

DetailsDescription
IdThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
DisplayEnter the display setting. Valid options are DIV or SPAN.
Link ToUsing Content Assist, enter the desired component to link to. Alternatively, click the appropriate button to select the desired component.
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.
View Mapping...Click this button to select the desired view mapping to link to.
Variable...Click this button to select the desired variable to link to.

12.1.2. Events

See Events

12.1.3. Display Conditions

See Display Conditions

12.1.4. Style

See Style

12.1.5. Attributes

See Attributes

13. Radio Button

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

13.1. Configuration

This section describes each of the panels.

13.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.22. Radio Button - Variable

DetailsDescription
Variable Path*A variable whose value should be shown in the control, and updated when submitted to the server. Enter a variable in the text box or click the Select... button to invoke a variable picker and select a variable that contains the collection or data type to map the users selection into.

Note: A * denotes a required parameter.

13.1.2. Properties

Configure additional properties for this web control.

The following table describes the Properties Panel details:

Table 2.23. Radio Button - Properties

DetailsDescription
IdThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Tab IndexThe tab index defines the order that different fields in the form should be activated when the user clicks the tab button. This attribute specifies the position of the current element in the tabbing order. This value must be a number between 0 and 32767.

13.1.3. Events

See Events

13.1.4. Editable Conditions

See Editable Conditions

13.1.5. Display Conditions

See Display Conditions

13.1.6. Style

See Style

13.1.7. Attributes

See Attributes

14. Text Area

Similar to the Skyway Input Field web control, the Skyway Text Area control is a Skyway Form element that binds a variable to a multi-line Input Field on a web page. Unlike the Input Field, the Text Area control includes a scroll bar and is used to display larger sets of data. At runtime, if the text area variable has been initialized, the value of the variable is displayed in the web control. Additionally, when a form containing a text area is submitted at runtime, the user input is stored back to the bound variable.

14.1. Configuration

This section describes each of the panels.

14.1.1. Select Variable

Select a variable to hold the control's value.

The following table describes the Variable Panel details:

Table 2.24. Text Area - Variable

DetailsDescription
Variable Path*A variable whose value should be shown in the control, and updated when submitted to the server. Enter a variable in the text box or click the Select... button to invoke a variable picker and select a variable that contains the collection or data type to map the users selection into.

Note: A * denotes a required parameter.

14.1.2. Properties

Configure additional properties for this text area.

The following table describes the Properties Panel details:

Table 2.25. Text Area - Properties

DetailsDescription
IdThis the ID for this web control, and it should be unique for the entire application. This ID will be emitted as the html id attribute for this web control. A default ID is automatically generated for the web control when it's added to a page, but it can be overriden by the developer.
Tab IndexThe tab index defines the order that different fields in the form should be activated when the user clicks the tab button. This attribute specifies the position of the current element in the tabbing order. This value must be a number between 0 and 32767.
ColumnsEnter the columns for this control.
RowsEnter the rows for thsi control.

14.1.3. Events

See Events

14.1.4. Set Editable Conditions

See Set Editable Conditions

14.1.5. Display Conditions

See Display Conditions

14.1.6. Style

See Style

14.1.7. Attributes

See Attributes

15. Upload

Map file information to variables.

15.1. Configuration

This section describes each of the panels.

15.1.1. Properties

Configure additional properties for this upload.

The following table describes the Properties Panel details:

Table 2.26. Properties Panel

DetailsDescription
Variable PathRequired: The conversation variable where the uploaded content will be stored. The variable type should be Large Data Storage or Picture. Enter the desired Variable Path or click the Select... button to invoke a variable picker and select a variable.
Content TypeOptional: 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/gif, application/msword). Enter the desired Variable Path or click the Select... button to invoke a variable picker and select a variable.
File NameOptional: The conversation variable where the filename will 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 SizeOptional: The conversation variable where the file size will be stored. 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

Chapter 3. Events and Commands

1. Events

DESCRIPTION GOES HERE

Table 3.1. Skyway Events

EventHandleDescription
bluronblurWeb control loses focus
changeonchangeWeb control value has changed due to user action
clickonclickWeb control clicked
dbclickondbclickWeb control double-clicked
focusonfocusWeb control receives focus
keydownonkeydownKeyboard key pressed in web control
keypressonkeypressCombination of keydown and keyuppressed in web control
keyuponkeyupKeyboard key released in web control
mousedownonmousedownMouse button is pressed over a web control
mouseoutonmouseoutMouse pointer is moved off a web control
mouseoveronmouseoverMouse pointer is hovered over a web control
mouseuponmouseupMouse button is released over a web control

2. Commands

Table 3.2. 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 Variablethis 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 class can be specified by separating them with commas. The styles must be defined separately in a style sheet or an inline style block on the page.

The following table describes the Change CSS Class details:

Table 3.3. Change CSS Class

DetailsDescription
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 multiple elements, 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 (comma separated) 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.

The following table describes the Change Style details:

Table 3.4. Change Style

DetailsDescription
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 multiple elements, the element names should be comma separated.
StyleRequired: the desired style to be applied to the element. Either enter the style into the text area or click the Style Editor... 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

DetailsDescription
Show Element(s)Optional: the element id(s) whose visibility should be turned on. Either type in the element id or select the desired page element from the pulldown menu. When specifying multiple elements, the element names should be comma separated.
Hide ElementsOptional: the element id(s) whose visibility should be turned off. Either type in the element id or select the desired page element from the pulldown menu. When specifying multiple elements, the element names should be comma separated.

2.4. Custom Script

The Custom Script command will execute a fragment of JavaScript.

The following table describes the Custom Script details:

Table 3.6. Custom Script

DetailsDescription
Custom ScriptRequired: Enter the desired script into the text area. The user should make sure he puts a semi-colon after any custom JavaScript entered (this is standard). This command is typically used to invoke javascript functions that are either embedded in the page or included in an external javascript library.

2.5. Load URL

The Load URL command is used to load a server generated resource into either a new page (Page), a section 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

DetailsDescription
Link toRequired: the URL of the requested server resource. One option is to request a JSP page, either directly (File) or indirectly using a JSP alias (View Mapping). Another option is to specify a URL mapping (URL Action Mapping). The final option is to specify a conversation or project variable (Variable) that contains the URL to be loaded.
TypeRequired: 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 javascript callback handler (Callback Function), or disregard the response (None).
TargetRequired: 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.
AsynchronousOptional: For AJAX-XHR requests you must specify whether you want the request to be loaded synchronously or asynchronously.
XHR TargetRequired: For AJAX-XHR requests you must specify how the response will be handled. If you want the response (typically html) to be loaded into an element of the current page, use the Element ID option and specify the element to load the content into. If you want want the response to be handled by a javascript callback funciton, specify the Callback Function. If you want the response to be disregarded, specify None.
XHR ErrorOptional: If an error occurs in make the server request, you can specify a javascript function (Callback Function) for handling the error.
<