Skyway Builder Web Control Guide

Transcription

1 Skyway Builder Web Control Guide /21/2009 Skyway Software

2 Skyway Builder Web Control Guide: /21/2009 Skyway Software Published Copyright 2009 Skyway Software Abstract TBD

3

4 Table of Contents 1. Web Controls Overview Overview Button Configuration Checkbox Configuration Conditional Display Configuration Drop-Down Configuration Form Configuration Hyperlink Configuration Image Configuration Input Field Configuration Iterator Configuration Label Configuration Layer Configuration Radio Button Configuration Radio Button Group Configuration Text Area Configuration Upload Configuration EE: Calendar Picker Configuration EE: Pagination Configuration Events and Commands Events Commands Change CSS Class Change Style Change Visibility Custom Script Load URL Move Element Reload Set Variables Swap Image Toggle CSS Class Toggle Visibility iv

5 Skyway Builder Web Control Guide 4. General Common Panels Events Set Display Conditions Set Editable Conditions Style Attributes... v

6 List of Figures 3.1. Web Events and Commands vi

7 List of Tables 2.1. Label - Define Label Label - Format Options Label - Properties Checkbox - Variable Checkbox - Properties Conditional Display - Properties Drop-down - Content Drop-down - Result Drop-down - Properties Form - Properties Hyperlink - Properties Image - Properties Input Field - Select Variable Input Field - Properties Iterator - Properties Iterator - Pagination Label - Properties Layer - Properties Radio Button - Variable Radio Button - Properties Radio Button Group - Content Radio Button Group - Result Radio Button Group - Properties Text Area - Variable Text Area - Properties Properties Panel Calendar Picker - Properties Pagination - Properties Pagination - Id Pagination - Text Pagination - Style Skyway Events Skyway Commands Change CSS Class Change Style Change Visibility Custom Script Load URL Move Element Reload Set Variables Swap Image Toggle CSS Classes Toggle Visibility Events and commands Panel vii

8 Chapter 1. Web Controls Overview 1. Overview Spring MVC provides a JSP tag library (Spring Form Tag Library) for making it easier to bind form elements to Model data. Skyway Builder's tag library extends the Spring Form tag library1 to address some of the difficulties of using the Spring Form tag library. For one thing the information needed to configure the Spring Form tags comes from a variety of locations, making the configuration process tedious and errorproned. Each Skyway web control has a custom property editor which specialized selectors for configuring the 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 variable selectors haven't been integrated with the Spring Web Flow support in Skyway Builder 6.3. You can still use the Skyway web controls and their associated configuration panels, but you will need to manually enter references to flow urls, variables, events. Many Skyway web controls have identical panels for configuring common properties, The description of those panel won't be duplicated in this guide. Instead there is a hyperlink to one common description of the specific panel. The Skyway web controls are found in the Skyway drawer of JSP editor's palette, and the controls can be dragged onto the page

9 Chapter 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 Configuration This section describes each of the Properties panels Label Enter static text or choose a variable that contains the desired label content for your button. Table 2.1. Label - Define Label 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 the desired label content. Only valid variables from the current controller 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. Type This 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. Format If a variable is selected for the label text box, the applicable formatting options for the variable type selected is populated in the Format dropdown 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 Type TEXT Format Options TRIM(XXX) - removing trailing spaces 2

10 Type Format Options ESCAPE(XXX) - html encoding UPPER(XXX) - convert to upper case LOWER(XXX) - convert to lower case #,### - use commas #,###; (#,###) - use commas and parenthesis #### - no commas ####; (####) - no commas and parenthesis 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 INTEGER BOOLEAN Properties This panel defines unique properties assigned to this web control. Table 2.3. Label - Properties ID This 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 Type Select the button type. The options are: 3

11 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 Index The 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 Image If 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, jpg, 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 Events See Events Display Conditions See Display Conditions Style See Style Attributes See Attributes 2. 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 4

12 that the boolean variable is set to "true". An unchecked Skyway Checkbox means that the boolean variable is set to "false" Configuration This section describes each of the panels 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 Variable Path The 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 Properties This panel defines unique properties assigned to this web control. The following table describes the Properties Panel details: 5

13 Table 2.5. Checkbox - Properties Id This 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 Index The 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 Events See Events Display Conditions See Display Conditions Style See Style Attributes See Attributes 3. 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 Configuration This section describes each of the panels Properties This panel defines unique properties assigned to this web control. 6

14 The following table describes the Properties Panel details: Table 2.6. Conditional Display - Properties Show if Enter a valid JSP EL expression directly into the text area or click the Edit Expression button to invoke the Edit Expression window. Edit Expression Click 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 Attributes See Attributes 4. 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 4.1. Configuration This section describes each of the panels Content Construct the drop down or list using static value of the content of a collection. 7

15 The following table describes the Content Panel details: Table 2.7. Drop-down - Content 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 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 Collection The 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. Label The 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. Value The 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 Result Select the variable to hold the selection. The following table describes the Result Panel details: Table 2.8. Drop-down - Result Variable Path The command object 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 8

16 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 Properties This panel defines unique properties assigned to this web control. The following table describes the Properties Panel details: Table 2.9. Drop-down - Properties Id This 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 Index The 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 Type Select 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. 9

17 Rows If 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. Selections Identify whether the user will be able to choose one or multiple values in the listbox. This field is not applicable to dropdowns Events See Events Editable Conditions See Display Conditions Display Conditions See Display Conditions Style See Style Attributes See Attributes 5. Form The Skyway Form web control is a container for other controls that accept user input. All the controls contained within the Skyway Form web control are submitted to the server at the same time for processing. 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 controls must be placed within the dashed form boundary after adding a Skyway Form control to a page within the HTML Editor. When a Skyway Form is used in a Spring MVC implementation, the URL mapping configuration will typically be assigned the URL for a web controller that will process the submitted data. When a Skyway 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 Configuration This section describes each of the panels Properties This panel defines unique properties assigned to this web control. 10

18 The following table describes the Properties Panel details: Table Form - Properties Id This 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 Name Enter a descriptive name for the form using alpha-numeric characters. URL Mapping Enter the desired web controller to map to or click the Select button to invoke the Select Web Controller window. Command Object Name of the model attribute under which the form object is exposed. Defaults to 'command'. Form Encoding The content type used for encoding the form data set for submission to the server. The default is application/x-www-form-urlencoded Events See Events Style See Style Attributes See Attributes 6. 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. When a Skyway Hyperlink is used for navigation in a Spring MVC implementation, the URL will typically be configured to a URL mapping that's defined in a controller. When a Skyway Hyperlink is used 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 flow definition (i.e. ${flowexecutionurl}&_eventid=add). The ${flowexecutionurl} variable is an EL variable corresponding to the URL for the current view state of a flow. 11

19 6.1. Configuration This section describes each of the panels Properties This panel defines unique properties assigned to this web control The following table describes the Properties Panel details: Table Hyperlink - Properties Link Type For specifying the whether the link is to a URL or to Media. URL is used for navigation, and Media is used for downloading content from a web application. Media content can 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 one of 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 the desired variables that store the media variable, content type, and file name. Media Variable (Media) For Media Type: Specify the variable that contains the media content to be downloaded. Content Type (Media) For Media Type: Specify the content type (mime type) for the media content. 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 will be download as. For example: If you have bound this web control to a 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 12

20 Enter the Target that should receive the result of the link. Valid targets are listed in the Target dropdown. Valid targets are _blank, _parent, _self, and _top. Id This 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 Index The 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 Title Enter a title for the hyperlink or click the Select... button to invoke a variable 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. Note: A * denotes a required parameter Events See Events Style See Style Attributes See Attributes 7. 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 7.1. Configuration This section describes each of the panels Properties This panel defines unique properties assigned to this web control. 13

21 The following table describes the Properties Panel details: Table Image - Properties Link Type For specifying the whether the image is static image (URL) or dynamically generated (Media). URL is used for configuring a reference to a static image contained in the web project, and Media is used for configuring a dynamically generated image from the web application. URL Click this radio button to specify a static image that is URL addressable. 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 that is stored in a variable. For example if the image maybe dynamically generated by application or stored in a database, and it can be loaded into 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. The content type can be specified statically or from from a variable. Examples of content types include "image/png", "image/gif", and "image/jpeg". The content type may be hardcoded or specified using a variable. The mime type is 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: If you 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. Id This 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 14

22 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. Id This 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. 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. Note: A * denotes a required parameter Events See Events Style See Style 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 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 Configuration This section describes each of the panels Select Variable Bind a variable to this input field. 15

23 The following table describes the Select Variable Panel details: Table Input Field - Select Variable Variable Path* Enter a command object 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. The variable must be contained within the form's command object. Select... Click this button to invoke a variable picker and select a variable that holds the control's value. Type The data type of the selected variable. This 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. Format Enter the format of the input field. The applicable formatting options for the variable type selected is populated in the Format drop-down menu. Note: A * denotes a required parameter Properties This panel defines unique properties assigned to this web control. The following table describes the Properties Panel details: Table Input Field - Properties Id This 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. Type Select the input type. Valid values are: Text, Password, and Hidden. Tab Index 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. The tab index defines the order that different fields in the form should be activated when the user clicks the tab button. 16

24 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 Char Width Enter the desired width of the input field. Max Chars Enter the maximum characters allowed to be entered in the input field. Note: A * denotes a required parameter Events See Events Editable Conditions See Editable Conditions Display Conditions See Display Conditions Style See Style Attributes See Attributes 9. 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 Configuration This section describes each of the panels Properties Select a collection to iterator through. 17

25 The following table describes the Properties Panel details: Table Iterator - Properties Collection Using 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 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 iteration metadata. For example, if this variable is called metadata, you can access the iteration index using ${metadata.index} Pagination Configure in-memory pagination settings. The following table describes the Pagination Panel details: Table Iterator - Pagination 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 Size How many records to display on a page. The End Index 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 record between start and end, a value of 2 would display every other record Attributes See Attributes 10. Label 18

26 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 Configuration This section describes each of the panels 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 Label - Properties 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. Type Once 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. Format If 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 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 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 commands. 19

27 11.1. Configuration This section describes each of the panels 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 Layer - Properties Id This 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. Display Enter the display setting. Valid options are DIV or SPAN. Link To Using Content Assist, enter the desired component to link to. This content 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 Events See Events Display Conditions See Display Conditions Style See Style Attributes See Attributes 20

28 12. 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 Configuration This section describes each of the panels Variable Enter or select the variable bound to the Skyway Radio Button button. The following table describes the Variable Panel details: Table Radio Button - Variable Variable Path* Enter a command object 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. The variable must be contained within the form's command object.. Note: A * denotes a required parameter Properties Configure additional properties for this web control. The following table describes the Properties Panel details: 21

29 Table Radio Button - Properties Label Enter a description of this radio button or click the Select button to invoke the 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 invoke the variable picker and select a variable that stores the desired value. Id This 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 Index The 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 Events See Events Editable Conditions See Editable Conditions Display Conditions See Display Conditions Style See Style Attributes See Attributes 13. Radio Button Group Radio Button Groups allow users to create a grouping of skyway radio buttons Configuration This section describes each of the panels Content Construct a set of radio buttons using the content of a collection. 22

30 The following table describes the Content Panel details: Table Radio Button Group - Content Source Collection Enter the desired source collection or click the Select button to invoke a 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 to invoke 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 to invoke a variable picker and select a variable that stores the desired value Result Select the variable to hold the selection. The following table describes the Result Panel details: Table Radio Button Group - Result Variable Path* Enter a command object variable directly into the text box that will hold the control's value(s) or click the Select... button to invoke a variable picker and select the desired variable. The variable must be contained within the form's command object Properties Configure additional properties for this web control. 23

31 The following table describes the Properties Panel details: Table Radio Button Group - Properties Id This 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 Index The 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 Deliminator Enter the deliminator type Events See Events Editable Conditions See Editable Conditions Display Conditions See Display Conditions Style See Style 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 24

32 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 Configuration This section describes each of the panels Select Variable Select a variable to hold the control's value. The following table describes the Variable Panel details: Table Text Area - Variable Variable Path* Enter a command object 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. The variable must be contained within the form's command object. Note: A * denotes a required parameter Properties Configure additional properties for this text area. The following table describes the Properties Panel details: Table Text Area - Properties Id This 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 25

33 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 Index The 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 Columns Enter the columns for this control. Rows Enter the rows for thsi control Events See Events Set Editable Conditions See Set Editable Conditions Display Conditions See Display Conditions Style See Style Attributes See Attributes 15. Upload Map file information to variables Configuration This section describes each of the panels Properties Configure additional properties for this upload. 26

34 The following table describes the Properties Panel details: Table Properties Panel Variable Path Required: The command object 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 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 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 Size Optional: 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 Attributes See Attributes 16. EE: Calendar Picker The Skyway EE Calendar Picker web control is a highly customizable calendar widget based on the DHTML Calendar built by dynarch.com Configuration This section describes each of the panels, however much more configuration can be made to this calendar control by visiting dynarch.com2. All files associated with this calendar control are located in the WebContent/calendar folder of the Skyway generated web project Properties Configure properties for this calendar pop-up

35 The following table describes the Properties Panel details: Table Calendar Picker - Properties Property Input Field* The ID of the input field which can be used as both the 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 closely matches the Java pattern from the input field. The format string can be 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 that can be used to display the date picked from the calendar control. This is generally used only when the input field is hidden and if a text box is not the preferred approach to display the date. For example, 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 in the Display Element, if used. Clicking Auto Select attempts to automatically select the pattern that most closely matches the 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 the default 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 doubleclick. If not enabled, the user must double-click to select the date. Show Time If set to true, the calendar also shows a configurable time selection with the calendar pop-up. Time Display If Show Time is checked, this can be set to show either a 12 hour or 24 hour time format. First Day of Week Specifies which day of the week to show as the first column in the calendar pop-up. Show Week Numbers If set to true, the calendar control will display week numbers on the left-hand side of the calendar control. Show Border Days If set to true, then days belonging to the months before and after the selected month will also be displayed in the calendar pop-up, but in a faded out color. 28

36 Attributes See Attributes 17. EE: Pagination The Skyway EE Pagination web control provides a highly customizable navigation area to enable pagination links for a large collection of data. This control is loosely bound to the data that is being paginated by design. Therefore, either the search step to retrieve the data or the iterator web control (for in memory pagination) must be configured along with this pagination control Configuration This section describes each of the panels Properties Configure properties for this pagination control. The following table describes the Properties Panel details: Table Pagination - Properties Property URL (Search Action)* The URL to invoke when a pagination link is clicked. Click the URL Mapping... button to choose defined Controller URLs. Count* The total number of records in the collection of data that will be paginated. Click the Select... button to choose a variable that contains that value from the Select Variable dialog. Starting Variable Index Name* The fully qualified name of the variable containing the index of the first 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 Select Variable dialog. It usually is part of the input variable of the Operation defined 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 variable containing that value. Click the Select... button to choose the variable that contains that value from the Select Variable dialog. 29

37 Property Number of Pages* The number of page links to display in the pagination control. For a large amount of records, this offers a way to present a manageable set of links displayed at any time. Element ID (XHR Target) If the attribute is set, the pagination links will use AJAX to load content into a target element identified by this attribute. Reload Elements Identifies additional elements to reload when pagination links are clicked. This is only used when an XHR target has been set 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 Pagination - Id Property 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 Text Configure the text of the pagination control 30

38 The following table describes the Text Panel details: Table Pagination - Text Property 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/Next Link Separator The separator used between the previous and next links Style Configure CSS Styles. The CSS classes specified here will be emitted as class attributes on SPAN tags around the pagination hyperlinks and not the hyperlinks themselves. The following table describes the Style Panel details: Table Pagination - Style Selected Page CSS Class The CSS class for the selected page. Generally, the select page is a link that 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 Attributes See Attributes 31

39 Chapter 3. Events and Commands 1. Events The Skyway Web controls are emitted as standard HTML elements, which can be configured to execute logic (Commands) in response to Events. An HTML element can be configure to respond to multiple events, and an Event can be configured to execute one or more commands. Figure 3.1. Web Events and Commands Table 3.1. Skyway Events Event Handle 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. Commands Once an event is specified, it can be configured with the logic to be performed in response to the event. The logic is implemented as one or more Skyway Commands, and there are various Skyway Commands available to the web developer. Table 3.2. Skyway Commands Command 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 32

40 Events and Commands Command Custom Script invokes a javascript Load URL this command can load a full page or load content into a section of the current page Move Element this command moves a page element to a coordinate on the page Reload this command reloads the page or elements of a page Set Variable this command sets one or more conversation variables Submit Form this command submits the specified form Swap Image this command changes one image to another image Toggle CSS Classes this command toggles css classes for an element Toggle Visibility this command toggles visibility of an element 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 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 Change Style The Change Style command adds or removes css classes from one or more page elements. 33

41 Events and Commands The following table describes the Change Style details: Table 3.4. Change Style 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. Style Required: 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 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 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 Elements Optional: the element id(s) whose visibility should be turned off. Either type in the element id or select the desired page 34

42 Events and Commands element from the pulldown menu. When specifying multiple elements, the element names should be comma separated 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 Custom Script Required: 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 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 Link to Required: the URL of the requested server resource. One option is to request a JSP page, either directly (File) or indirectly using a JSP 35

43 Events and Commands alias (View Mapping). Another option is to specify a URL mapping (URL Mapping). The final option is to specify a conversation or project 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 javascript callback 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 you want the request to be loaded synchronously or asynchronously. XHR Target Required: 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 Error Optional: If an error occurs in make the server request, you can specify a javascript function (Callback Function) for handling the error Move Element The Move Element command moves an element to an x,y coordinate position. There is an option to move the element to the coordinates of the triggering mouse event, which is useful for pop-ups. This action makes the element absolutely positioned, which removes the element from the natural layout flow of the page. The following table describes the Move Element details: Table 3.8. Move Element Element to Move Required: the element id to move. Either type in the element id or select the desired page element from the pulldown menu. 36

44 Events and Commands Use Event/Mouse Coordinates Optional: Use the event/mouse coordinates along with the 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 used along 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 the Relative To element to move the element to. Vertical Offset Optional: the vertical offset from the Relative To element to move the element to Reload The Reload command reloads the current page or element of the page. This action is useful for refreshing a page or portion of the page when data has changed, etc. The following table describes the Reload details: Table 3.9. Reload Elements to Reload Required: the element id(s) that should be reloaded. 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.select the desired element(s) to reload Set Variables The Set Variables command perfomrs one or more variable assignment. Enter the expression directly into the Set Variables text area containing the variable path and the value or click the Insert... button to select the desired variable to be inserted. If a variable is included it must be an EL Expression. 37

45 Events and Commands The following table describes the Set Variable details: Table Set Variables Add Variables Insert, Add, Remove, and Reorder selected variables 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 them invisible. 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 Swap Image 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 Toggle CSS Class The Toggle CSS Class command lets you toggle a CSS class on an element. If the element already has the class, it will be removed. If the element does not have the class, it will be added. This is a great command to use when you don't want to maintain style state. For example, you just want to display a down arrow if an up arrow is displayed or vice versa. You can specify more than one element and more than one style by separating them with commas in the input fields. 38

46 Events and Commands The following table describes the Toggle CSS Classes details: Table Toggle CSS Classes 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 from the 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) Toggle Visibility The 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 use when you don't want to maintain visibility state. You can specify more than one element by separating them with commas in the input fields. The following table describes the Toggle Visibility details: Table Toggle Visibility Element(s) Required: the element id(s) that will have their visibility toggled. 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.select the desired element(s) to reload. 39

47 Chapter 4. General 1. Common Panels 1.1. Events This section describes each of the common panel. Events are actions that occur as a result of something the user does. For example, clicking a Skyway button is an event, and changing the text in a Skyway textbox is 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-based event). 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 to assign to the event. The Command 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 Add Event Click this button to invoke the Select Event window and enter the full or partial name prefix or pattern and select the desired event from the available list of events, then click OK. The selected event displays in the Events and Commands display area. Add Command After adding an Event, click this button to invoke the Select Web Command window and enter the full or partial name prefix or pattern and select the desired command for the selected event, then click OK. The selected command displays in the Events and Commands display area. Up/Down Click these buttons to change the order of the selected event in the Events and Commands display area. 40

48 General Delete Click this button to delete the selected event from the Events and Commands display list. Command Click this link to invoke the Command picker and select the desired command to invoke, or using Content Assist, enter an action directly into the text box Set Display Conditions The Set Display Conditions panel is applicable to most Skyway web controls. The visibility controlled by these 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 see the content by viewing source. Note: As a general rule, you should never use CSS visibility for security. CSS is for cosmetics and usability only. However, you can use the Display Conditions for security. For example, if you only wanted admin users to see a certain part of a panel, you could achieve this with the display conditions and be assured that non-admin users will never be able to see that content because it will never get sent to the browser Set Editable Conditions Use this panel to set conditional parameters (using process variables) that determine whether the control is editable or read-only when rendered Style This panel allows a user to apply a customized Cascading Style Sheet (CSS) to their web page. 41