A container class defines a collection of components that are visually organized in a certain way. Typically, creating a container class results in the generation of an HTML table tag. Simple containers can concatenate the components horizontally or vertically. Other containers allow more flexible positioning of components and may add ornamentation around the components.
Because containers are themselves components, any container can be placed inside another container. You can use this mechanism to build complex page layouts. For example, many pages consist of a title, followed by a list of editing fields, followed by a row of form submission buttons. You can create this by creating a Panel component using vertical orientation that contains a Label component, an EditForm component, and a ButtonRow component. The EditForm component itself contains some number of subcomponents. The ButtonRow component is simply a Panel that uses horizontal orientation and contains a list of Button components.
Defines five regions (north, south, east, west, and center) into which items can be placed. Components in the north and south regions are positioned horizontally. Components in all other regions are positioned vertically.
Properties include:
eastWidth– Specifies the width of the east region
westWidth– Specifies the width of the west region
Sets default options for button placement. Extends the Panel component.
buttonDivStyle - Specifies the CSS class to apply to a div surrounding the buttons.
defaultAlign - Specifies the default alignment of the buttons in the row. Waveset consults this property if the align property has not been explicitly set on the row. Defaults to left.
defaultDivider - Specifies whether to render a divider above or below the button row. Waveset consults this property if the divider property has not been explicitly set on the row. Defaults to false.
divider– Specifies whether the divider should be rendered as a horizontal or blank line. When true, the divider will be rendered as a horizontal line (for example, an <hr>). (Boolean)
dividerSet — is false until the setter has been called on the divider property.
dividerStyle - Specifies the CSS class to use to style the divider if it is rendered. If this property is not set, Waveset renders a horizontal rule. Defaults to unset.
pad– Specifies where to insert this space between the button row and an adjacent component. Allowed values are top and bottom. If the value is null, no space is added. Default value is top.
This display component is the default display class used to render forms in a browser.
Form components are positioned in two columns, with titles on the left, and components on the right. Flyover help can be included with the titles. Multiple components can be concatenated on a single row.
Most edited properties include title, subTitle and adjacentTitleWidth.
<Form name=’Default User Form’ help=’account/modify-help.xml’> <Display class=’EditForm’> <Property name=’titleWidth’ value=’120’> <Property name=’adjacentTitleWidth’ value=’60’> </Display>
Additional EditForm properties include:
adjacentTitleWidth– Specifies the width of the titles of adjacent fields. If this property is not defined, it defaults to zero. If you define adjacentTitleWidth as equal to zero, columns titles will automatically resize. If set to a non-zero value, then the title width of adjacent columns (for example, the second and third columns) will be the value of adjacentTitleWidth.
border - Specifies the width in pixels of the table that contains the EditForm component. Defaults to 0, which indicates no border.
cellpadding - Specifies the cellpadding of the table that contains the EditForm component. Defaults to 5.
cellspacing - Specifies the cellspacing of the table that contains the EditForm component. Defaults to 0.
componentTableWidth– Specifies the width (in pixels) of the EditForm. If not specified, this defaults to either 400 pixels or the value of the defaultComponentTableWidth global property for EditForm
defaultComponentTableWidth - Specifies the width in pixels of the table in which Waveset renders each component. Waveset consults this property if the componentTableWidth property has not been explicitly set on the EditForm. When this component is not set, no width is specified for the component table.
defaultRequiredAnnotationLocation - Specifies the default location (left, right, or none) with respect to the component to render the required annotation. Waveset consults this property if the requiredMarkerLocation property has not been explicitly set on the EditForm. Defaults to right.
evenRowClass - Specifies the CSS class to use to style the even rows of the EditForm table (if the noAlternatingRowColors property is not set to true). Defaults to formevenrow.
helpIcon - Specifies the icon to render for flyover help messages for components. Defaults to images/helpi_gold.gif.
noAlternatingRowColors– Specifies whether rows in the EditForm are rendered in the same color. When noAlternatingRowColors is set to true, every row in the EditForm is rendered the same color. If not specified, this defaults to false.
oddRowClass - Specifies the CSS class to use to style the odd rows of the EditForm table (if the noAlternatingRowColors property is not set to true). Defaults to formoddrow.
requiredAnnotation - Specifies the annotation to render next to a required field. This defaults to an image of a red asterisk.
requiredClass - Specifies the CSS class to use to style the required field legend. Defaults to errortxt.
requiredLegendLocation - Specifies the location (top or bottom) at which to render the required legend if the form contains any required fields. Defaults to bottom.
rowPolarity - Specifies the polarity of alternating gray and white row colors in a table. The default is true. A value of false inverts the polarity and gives the first form field a white background. The code shown in the following example results in a table whose first form field has a white background.
<Display class=’EditForm’> <Property name=’componentTableWidth’ value=’100%’/> <Property name=’rowPolarity’ value=’false’/> <Property name=’requiredMarkerLocation’ value=’left’/> <Property name=’messages’> <ref>msgList</ref> </Property> </Display>
tableClass - Specifies the CSS class to use to style the table that contains the EditForm component.
tableWidth - Specifies the width in pixels of the table in which Waveset renders the EditForm component. Defaults to 400.
titleClass - Specifies the CSS class to use to style help messages for components.
Consists of three classes: Menu, MenuBar, and MenuItem.
Menu refers to the entire component.
MenuItem is a leaf, or node, that corresponds to a tab on the first or second level.
MenuBar corresponds to a tab that contains MenuBars, or MenuItems.
Menu contains the following properties:
layout - A String with value horizontal or vertical. A value of horizontal generates a horizontal navigation bar with tabs. A value of vertical causes the menu to be rendered as a vertical tree menu with typical node layout.
stylePrefix - String prefix for the CSS class name. For the Waveset End User pages, this value is User.
MenuBar contains the following properties:
default - A String URL path that corresponds to one of the MenuBar’s MenuItem URL properties. This controls which subtab is displayed as selected by default when the MenuBar tab is clicked.
MenuItem contains the following properties:
containedUrls - A List of URL path(s) to JSPs that are ”related” to the MenuItem. The current MenuItem will be rendered as “selected”if any of the containedUrls JSPs are rendered. An example is the request launch results page that is displayed after a workflow is launched from the request launch page.
You can set these properties on either a MenuBar or MenuItem:
title - Specifies the text String displayed in the tab or tree leaf as a hyperlink
URL - Specifies the String URL path for the title hyperlink
The following XPRESS example creates a menu with two tabs. The second tab contain two subtabs:
<Display class=’Menu’/> <Field> <Display class=’MenuItem’> <Property name=’URL’ value=’user/main.jsp’/> <Property name=’title’ value=’Home’ /> </Display> </Field> <Field> <Display class=’MenuBar’ > <Property name=’title’ value=’Work Items’ /> <Property name=’URL’ value=’user/workItemListExt.jsp’ /> </Display> <Field> <Display class=’MenuItem’> <Property name=’URL’ value=’user/workItemListExt.jsp’/> <Property name=’title’ value=’Approvals’ /> </Display> </Field> <Field> <Display class=’MenuItem’> <Property name=’URL’ value=’user/otherWorkItems/listOtherWorkItems.jsp’/> <Property name=’title’ value=’Other’ /> </Display> </Field> </Field> |
In the Waveset User Interface, the horizontal navigation bar is driven by the End User Navigation User form in enduser.xml.
The userHeader.jsp, which is included in all Waveset User Interface pages, includes another JSP named menuStart.jsp. This JSP accesses two system configuration objects:
ui.web.user.showMenu - Toggles the display of the navigation menu on/off (default is true).
ui.web.user.menuLayout - Determines whether the menu is rendered as a horizontal navigation bar with tabs (the default value is horizontal) or a vertical tree menu (vertical).
style.css contains the CSS style classes that determine how the menu is rendered.
Defines the most basic container. Panel renders its children in a simple linear list.
Properties include:
horizontal– Aligns components horizontally, when set to true. (Boolean)
horizontalPad– Specifies the number of pixels to use for the cell padding attribute of the table surrounding horizontal components.
verticalPad– Specifies the number of blank lines added between components. (Boolean)
The default orientation is vertical, but can be set to horizontal.
Provides a single- or multi- valued field (similar to Text or ListEditor components, respectively) with search fields below. After a search is executed, Waveset displays results beneath the search fields and populates the results into the value field.
Unlike other container components, Selector has a value (the field we are populating with search results). The contained fields are typically search criteria fields. Selector implements a property to display the contents of the search results.
Properties include:
fixedWidth– Specifies whether the component should have a fixed width (same behavior as Multiselect). (Boolean)
multivalued– Indicates whether the value is a List or a String. (The value of this property determines whether a ListEditor or Text field is rendered for the value). (Boolean)
allowTextEntry– Indicates whether values must be selected from the supplied list or can be entered manually. (Boolean)
valueTitle– Specifies the label to use on the value component. (String)
pickListTitle– Specifies the label to use on the picklist component. (String)
pickValues– the available values in the picklist component (if null, the picklist is not shown). (List)
pickValueMap– a map of display labels for the values in the picklist. (Map or List)
searchLabel– Labels the button next to the input text field with the supplied text. If not set, the text defaults to “...”.
sorted– Indicates that the values should be sorted in the picklist (if multivalued and not ordered, the value list will also be sorted). (Boolean)
clearFields– Lists the fields that should be reset when the Clear button is selected. (List)
The following properties are valid only in a multi-valued component:
ordered– Indicates that the order of values is important. (Boolean)
allowDuplicates– Indicates whether the value list can contain duplicates. (Boolean)
valueMap– Provides a map of display labels for the values in the list. (Map)
These properties are valid only in a single-valued component:
nullLabel– Specifies a label to use to indicate a value of null. (String)
Arranges components in a grid with an optional row of column titles at the top.
Properties include:
columns– Defines the column headers. Usually a list of message keys, but can also be simple strings. (List)
rows– Defines the cells of the table. Each cell must be a component. (List)
columnCount– Specifies the number of columns if there is no column title list.
border– Determines the width of the table border. Set to 0 to create invisible borders.
noItemsMessage– Specifies the message to display in the table when there are no rows.
Use to render a tabbed panel that displays a row of tabs as shown below. By default, the tabs are aligned horizontally.
Properties include:
leftTabs– When set to true, aligns tabs along left margin, not along the top. (Boolean)
border– Draws a border around the main panel under the tabs, when set to true. (Boolean)
renderTabsAsSelect– Renders tabs as a Select drop-down rather than tabs, when set to true. This is useful when a form contains many tabs that would cause the browser to scroll horizontally. Do not use in conjunction with aligning the tabs on the left.
tabAlignment– Determines the position of the tabs relative to the page content. Valid values include left (default setting), top, right, bottom, center, and middle.
validatePerTab -- When set to true, Waveset performs validation expressions as soon as the user switches to a different tab.
<Field name=’MainTabs’> <Display class=’TabPanel’> <Property name=’leftTabs’ value=’false’/> <Property name=’tabAlignment’ value=’left’/> </Field> |
Use to create a Panel capable of horizontal alignment.
Use to create a table whose contents can be sorted by column header.Child components determine the content of this table. Create one child component per column (defined by the columns property). Columns are typically contained within a FieldLoop.
This component respects the align, valign, and width properties of the children components when rendering the table cells.
Properties include:
emptyMessage– Specifies the String or message key to display in the table when the table has no rows. If you omit this property, Waveset displays a generic message.
pageButtonAlign– Determines position of buttons relative to page content. Valid values include left, right, bottom, and center. The default value is right.
sortEnable– Enables column sorting when set to true. (Boolean)
sortURL– Identifies the URL that Waveset posts to when column sorting is selected. If column sorting is not set, Waveset uses the _postURL of the HtmlPage. (String)
sortURLParams– Specifies the parameters that get passed along with the sortURL. (String)
sortColumn– Specifies the number of the column that we are currently sorting by. The default is to set this value to the first column. (Integer)
sortOrder– Specifies the sort order. Values includes asc (for ascending) or desc (for descending). Default value is asc. (String)
linkEnable– Indicates if this table is to be generated with the first column as links. (Boolean)
linkURL– Specifies the URL that Waveset links to when generating links. If not specified, defaults to the post URL of the containing HtmlPage. (String)
linkURLArguments– Indicates the arguments to include in the link URL.
linkColumn– Specifies the column number that will be used for the generated links as specified by the linkURL attribute. (Integer)
linkParameter– Specifies the name of the post data parameter that will have the value of the link row id. The default value is id.
selectEnable– Indicates whether a column of checkboxes is displayed along a MultiSelect table’s left margin. When set to true, Waveset displays a column of checkboxes. (Boolean)
columns– Lists table column headers. (List of strings)
pageSize– Specifies that the table should display at most _pageSize entries simultaneously. If more than _pageSize entries exist, then interface elements allow paging through the results. If _pageSize is less than 1 (the default setting), then all entries are displayed at once. (Integer)
useSavedPage– If set to true and if the value of pageSize exceeds 0, then the sorting table saves the current sorting table page on the HTTP session in the <fieldName>_currentPage attribute. The _useSavedPage property indicates whether the current page should be retrieved from the HTTP session and displayed. By making the value of this property the result of an XPRESS expression, the form or view can control when the current page is recalled after when returning back to the JSP containing the SortingTable component. (Boolean)
If you use multiple sorting tables in a form, you must enable the useSavedPage property for each table. Each field in the form must have a unique name.
For example, if the SortingTable component displays the results of a query containing editable items, to ensure that Waveset displays the results page that contains the edited item after the user has edited an item in the result table, enter a value that exceeds 0.
Use to render one of several child components (typically EditForms) that use wizard-style Next and Previous buttons to navigate between components.
Properties include:
button– Specifies a value for child component’s location property that will place it in the button row. (String)
nextLabel– Specifies the label to display on the Next button. The default text is Next. (String)
prevLabel– Specifies that the label in the Previous button is displayed. (String)
cancelLabel– Specifies that the label in the Cancel button is displayed. (String)
okLabel– Specifies that the label is displayed in the OK button. (String)
noOk– Specifies that the OK button is not displayed. (Boolean)
alwaysOk– Determines that the OK button is displayed, when set to true. (Boolean)
noCancel– Specifies that the Cancel button is not displayed, when set to true. (Boolean)
topButtons– Causes the buttons to be rendered at the top of the page rather than the page bottom, when set to true. (Boolean)
noButtons– Suppresses all button rendering when set to true. (Boolean)