hxclient Attribute Reference

This is a list of all possible attributes for all JSF client components.

JSF tags that emit the component

Base HTML

JavaScript constructor

Attributes

CSS classes

API calls

Accessibility

Limitations

List of JWL actions

Supported events

Sequencing

Constructor Syntax

Blur/Focus interactions

Keystroke interactions

Mouse interactions

Clipboard interactions

Example code

Event

Action

Result

Target

Description

Component

Behavior

Converter

Validator

Description

id

The ID of the HTML tag to which the component is attached.

id

The ID to be assigned to this converter. The ID must be unique across all created converters within the page (or portal). Any string value may be used as the ID.

id

The ID to be assigned to this validator. The ID must be unique across all created validators within the page (or portal). Any string value may be used as the ID.

name

The name of the JSF Component.

attributes

Comma separated list of attributes where each attribute is a quoted string consisting of the attribute name and value separated by a colon, for example "label:MyLabel".

parent-id

ID of the JSF Component that is the parent of this subcomponent.

position

Position of this subcomponent relative to other subcomponents with the same parent. If omitted, the subcomponent is appended.

string

The string to convert

value

A JavaScript™ object of the type of the converter (Number, Date/Time or String)

cvt

A converter object

returns

A JavaScript object of the type of the converter (Number, DateTime or String). If the conversion cannot be done, null is returned and lastError is set.

arg

A JSF attribute/value string.

argname

A string containing the name of the attribute.

validatorName

The name of the JSF validator. See below for the list of validators.

vld

A validator object.

c

A component object.

boolean

Cast the return value to a JS object of the appropriate type.

id

The ID of the HTML tag to which the behavior is attached. To attach to the body tag, use #body and for the document use #document.

eventname

The HTML eventname that invokes the behavior. For example, onclick or onkeydown. Each behavior supports only some HTML event names (for example, the mouseclick behavior can't be bound to a keyboard event). In some cases, the behavior needs to be bound to multiple HTML events in which case a "pseudo" event name is used. For example, the mouseclick behavior is bound to multiple events so the eventname is "onmouse".

b

A behavior object.

attribute

See below for supported attributes.

Attribute name

Description

CSS class name

API call

css-prefix

The base class of a set of CSS classes that describe the visual appearance.

converter

The ID of a converter that has already been constructed. The converter describes the format of the value in the input field.

disabled

Specifies if the object is available.

first-day-of-week

Day of the week that is treated as the first day of the week. Zero means Sunday.

multi-line

If true, the header over the calendar is displayed as two lines (year and month) with independent buttons that control the month and year. If false, the year and month are displayed on one line with buttons that control only the month.

validator

The ID of a validator that has already been constructed. If the validator is supplied, the constraints described in the validator are used limit the values a user can pick.

base

Styles the outermost div that contains the calendar. To explicitly control the size of the calendar, specify the width (height) properties in this class.

base_DatePicker

Styles the div that contains the calendar. Note that setting the size (width/height) of the div does not change the size of the calendar within it. To change the size of the calendar, use <base>-Size.

<base>-size

Styles the outermost table that organizes the calendar into header and body areas.

<base>-DatePicker-Size

Styles the table that displays the calendar. The table is embedded inside the containing popup div. Changing the width and height of the table changes the size of the calendar (the containing div will size to fit this table).

<base>-Header

<base>_DatePicker-Header

Styles the table inside the calendar table that contains the three header rows (the year row, the month row and the days of the week row).

<base>-HeaderLine1

<base>_DatePicker-HeaderLine1

Within the header table, styles the cells in the first row (the year row) of the table that do not contain the year.

<base>-HeaderLine2

<base>_DatePicker-HeaderLine2

Within the header table, styles the cells in the second row (the month row) of the table that do not contain the month.

<base>-HeaderWeekday

<base>_DatePicker-HeaderWeekday

Within the header table, styles the cells in the third row (the weekday row) of the table.

<base>-HeaderYear

<base>_DatePicker-HeaderYear

Within the header table, styles middle table cell in the first row that contains the year.

<base>-HeaderMonth

_DatePicker<base>-HeaderMonth

Within the header table, styles middle table cell in the second row that contains the month.

<base>-Button

<base>_DatePicker-Button

Within the header table, in the first and second rows, styles the four buttons used to scroll the calendar.

<base>-Body

<base>_DatePicker-Body

Styles the table inside the calendar table that contains the days.

<base>-CurrentMonth

<base>_DatePicker-CurrentMonth

Within the body table, styles a table cell that contains a day in the current month.

<base>-OtherMonth

<base>_DatePicker-OtherMonth

Within the body table, styles a table cell that contains a day not in the current month (for example the last days of the previous month or the first days of the next month that need to be displayed before/after the days in the currently selected month).

<base>-InvalidDay

<base_>DatePicker-InvalidDay

Within the body table, styles a table cell that contains a day that may not be selected because such a day is not allowed by the validator attached to the date.

<base>-CurrentDay

<base>_DatePicker-CurrentDay

Within the body table, styles the table cell that contains the currently selected day.

<base>-Today

<base>_DatePicker-Today

Within the body table, styles the table cell that represents the current date.

<base>-CurrentToday

<base>_DatePicker-CurrentToday

Within the body table, if currently selected day is the same as the currectdate, then styles the table cell that represents both today's date and the current selection.

<base>-Hover

<base>_DatePicker-Hover

Defines the style that is added to the style of a day when the day has mouse or keyboard focus.

redraw()

Redraw the component taking into account any changes made to the attributes/properties of the base tag.

uirelease()

Releases any active UI associated with the component.

setValue(string)

Sets the value of the component and ensures that the value provided is valid.

object = getValue(boolean)

Retrieves the value of the component. If the boolean is false, this is equivalent to getting the value of the base tag. If the boolean is true, the value is returned as a JavaScript date/time object instead of as a string.

object = setAttribute(attribute)

Sets an attribute or changes its value (if it was set previously).

string = getAttribute(attribute-name)

Retrieves the current value of an attribute.

button-border

Controls how the popup button is drawn relative to the input field.

button-color

Specifies the background-color of the button. By default the background color matches the border color of the input field.

colors

A semi-colon separated list of hex color values which represent the palette of colors which a user may choose from.

color-names

A parallel list of user-friendly names for each color in the list.

show-labels

If specified, the name of the currently selected color is displayed in the input field on top of the color swatch. If omitted, the name is not displayed and the input field displays only a color swatch showing the currently selected color. Note that the color name is in the input field in all cases (for accessibility reasons), this option makes the name visible.

base_ColorPicker

Styles the outermost div that contains the popup. As a rule, the height and width properties should not be explicitly set in this class, instead, specify the size of a grid cell and the popup will size itself based on the size of a grid cell.

<base>_ColorPicker-Body

Styles the outermost table that organizes the popup into a grid.

<base>_ColorPicker-GridCell

Styles an individual grid (table) cell in the table.

<base>_ColorPicker-GridSwatch

Styles an individual swatch of color in a grid cell.

<base>_ColorPicker-GridCell-Selected

Specifies the style of the (one) grid cell that represents the currently selected color.

<base>_ColorPicker-GridCell-Hover-Selected

Specifies the style of a grid cell that has BOTH keyboard or mouse focus and selection.

<base>_ColorPicker-GridCell-Hover

Specifies the style of a grid cell that has either keyboard or mouse focus.

depressed

For images and buttons of type image only, the URL of the image to display when the button is depressed. If omitted, the normal image is used in the depressed case.

icon-normal

The URL of an icon image to be displayed atop the image/button while in normal state. For example, a little triangle image that means the button has a drop-down.

icon-moused

The URL of the image to display as an icon when the mouse is over the image/button (the hover case). The normal image must be supplied as well for this to be used. If omitted, the normal image is used in the hover case.

icon-depressed

The URL of the image to display as an icon when the image/button is depressed. The normal image must be supplied as well for this to be used. If omitted, the normal image is used in the depressed case.

icon-disabled

The url of the image to display as an icon when the image/button is disabled or readonly. The normal image must be supplied as well for this to be used. If omitted, the normal image is used in the disabled case.

label

The text to display for the object.

moused

For images and buttons of type image only, the URL of the image to display when the mouse is over the button (the hover case). If omitted, the normal image is used in the hover case.

normal

For images and buttons of type image only, the URL of the image to display when the button is in normal state (not moused, not depressed, not disabled). The image for the button can also be specified via the src attribute of the <input> tag. For image tags, the src must be supplied (even if it is not used) due to HTML restrictions.
Note: For this and all other attributes which supply a URL, the URL can reference a file on the file system or it can be wrapped in a URL prolog. The image can also be specified via CSS instead of as an attribute.

user-supplied

Supplied as the class of the <input> or <img> tag. Styles the image/button proper (for example, sets the height, width, background color) when it is in normal (up) mode.
Note: For any kind image/button or button state, the background-image style property can be used to specify the image used as the button. If specified, the height and width properties must be set as well (to the size of the background image).

<base>_moused

Styles the image/button proper (for example, sets the height, width, background color) when it is moused over (hover case). If omitted, the normal state is used when hovering.

<base>_depressed

Styles the image/button proper (for example, sets the height, width, background color) when it is depressed. If omitted, the normal state is used when depressed.

<base>_disabled

Styles the image/button proper (for example, sets the height, width, background color) when it is disabled. If omitted, the normal state is used when disabled.

<base>_Label

If the label is specified, styles the label when in the normal (up) state. Note that font properties for the label (for example, font-family, font-size), must be specified in this class. They are not picked up from the base class.

<base>_Label_moused

If the label is specified, styles the label when the button is in the normal (up) state. If omitted, the normal state is used for the label when hovering.

<base>_Label_depressed

If the label is specified, styles the label when the button is depressed. If omitted, the normal state is used when depressed.

<base>_Label_disabled

If the label is specified, styles the label when the button is disabled. If omitted, the normal state is used when disabled.

<base>_Icon

If the icon is specified, styles the icon when in the normal (up) state.

<base>_Icon_moused

If the icon is specified, styles the icon when the button is in the normal (up) state. If omitted, the normal state is used for the icon when hovering.

<base>_Icon_depressed

If the icon is specified, styles the icon when the button is depressed. If omitted, the normal state is used when depressed.

<base>_Icon_disabled

If the Icon is specified, styles the icon when the button is disabled. If omitted, the normal state is used when disabled.

vertical

Specifies if the top-level menu is displayed horizontally (false) or vertically (true). The Windows® menu bar is an example of a horizontal top-level menu. The navigation bar on the left side of many Web pages is an example of a vertical top-level menu.

vertical-body

Specifies if the submenus (all menus other than the top menu) are displayed horizontally (false) or vertically (true). In the Windows menu bar, the submenus are displayed vertically.

fly-open

For the top-level menu, specifies if submenus are displayed when you mouse over a menu item (true) or if they are displayed when you click on the menu item (false). The Windows menu bar requires you click on an item in the top-level menu. Many Web pages display submenus as you mouse over the parent menu item.
Note: If a menu item does not have a submenu associated with it, a user must click on it to select it (make it do something) regardless of how fly-open is specified.

fly-open-body

For the submenus (menus below the top-level), determines if submenus below them are displayed when you mouse over a menu item (true) or when you click on a menu item (false).
Note: If a menu item does not have a submenu associated with it, a user must click on it to select it (make it do something) regardless of how fly-open is specified.

open-sticky

By default, submenus are displayed as pop-ups that are only on display when they are active (they parent menu item has been moused-over or clicked on). If open-sticky is set to true, for each level below the main menu, the last submenu that is moused/clicked at that level is left on display.
Note: The main menu is always sticky. This property applies to the submenus only.

open-in-place

By default, submenus are displayed in a separate window. If open-in-place is set to true, the submenus open up in the menu bar after the parent menu item and the submenu is displayed in that space (in place). This allows a menu to be tree-style. Only one submenu at each level of the menu tree is displayed in place. If you pick a different submenu to display, any other menu that is displayed in place is closed (hidden) before the new submenu is displayed.
Note: If a menu is open-in-place, it is also sticky. Note too, that it is rare for this to be used with horizontal menus (the resulting display may well be unusable if the menus are horizontal).

relative

If one of the values is specified, the top-level menu is positioned relative to either the position of the mouse or to the tag specified with the relative-to attribute. If not specified, the top-level menu is positioned wherever the div representing the menu is normally positioned.
Note: This attribute is usually used to make a context menu that is displayed when the user clicks somewhere within a container tag or performs a keyboard action in a field. The menu will be treated as absolutely positioned if relative is set. As a result, if relative is set the menu should usually be initially hidden by setting the CSS property display to none. It can be hidden/shown using the showMenu and hideMenu calls (or by hiding and showing it via a JWL Action).

relative-to

If position is set to left-bottom, right-bottom, left-top or left-bottom, the ID of the tag used to determine the position.

initial-selection

The ID of a menu-item that is to be initially displayed as selected (selected is a different CSS defined visual state). For example, you may want to indicate which menu-item in the menu bar identifies the current page on display under the bar. In this case you set the initial-selection to the ID of the menu item that represents the current page.
Note: If the menu is not sticky, the top-level menu item associated with the initial selection is shown selected. If the menu is sticky, The specified item is shown as selected and the parent menus are displayed. The select-all attribute determines if the parent menus are highlighted as selected as well.

select-all

If a selection is used, specifies if only the top item is shown selected (false) or if all items from the containing parent menu down to the top item are shown as selected.

tab-index

Not all browsers let you assign a tab-index to a <bdiv> tag (the base tag of the menu bar). Use this attribute to specify the tab-index of the menu-bar such that it works in all browsers.

target

If supplied, the ID of an input type='text' field in the page. Whenever something is selected in the menu, the text of the menu item is set as the value of the specified field. This is normally only used when making a popup menu which is emulating a combo-box (that is you have an input field with an adjacent menu where the top-level of the menu is a single button, clicking the button displays the menu, choosing an item from the menu sets the value of the input field.)

onchange

If provided, the function is called whenever a leaf is clicked (an action is taken). The function is called after the menu item is clicked (for example, if the menu item is a link, the link will be clicked and then this function called). The function should have the usual signature function(thisObj, thisEvt). thisObj will always refer to the div that represents the menu bar. The menu-item ID of the item which was selected (last clicked) can be found in the event object as thisEvt.objSelected or if the selection hidden field is on the page, it can equally be retrieved from the value of this field.

<base_n>_div

Each menu is contained in a div. Specifies the style of the div.

<base_n>_table

Each menu is organized into rows/columns in a div using a table. This style applies to the entire table used at this level.

<base_n>_separator

If this level of menus uses separator menu items, this class styles the separator. The separator is a table cell (i.e., this styles a TD tag).

<base_n>_separator_first

If this level of menus uses separator menu items, the first separator can be treated distinctly. For example, you can use this to add a thick black line or leading graphic at the top of a menu.

<base_n>_separator_last

If this level of menus uses separator menu items, the last separator can be treated distinctly.

<base_n>_cell_normal

Each menu item is contained in a table cell. This style aplies to all cells at this level of the menu (unless one of the following applies).

<base_n>_cell_moused

Same as above, but used when the mouse is over the cell. If not supplied, the selected class is used. If not provided, the normal class is used.

<base_n>_cell_selected

Same as above, but used when the menu item is selected (see below). If not supplied, the moused class is used. If not provided, the normal class is used.

<base_n>_cell_selected_moused

Same as above, but used when the menu item is selected and the mouse is over it. If not supplied, the moused class is used. If not provided, the selected class is used.

<base_n>_cell_disabled

Same as above, but used when the menu item is disabled. If not supplied, the normal class is used. If not provided, the normal class is used.

<base_n>_cell_first_normal

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class.

<base_n>_cell_first_moused

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class. Moused state.

<base_n>_cell_first_selected

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class. Selected state.

<base_n>_cell_first_selected_moused

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class. Selected and moused state.

<base_n>_cell_first_disabled

The first cell in a menu can be treated distinctly. If this class is supplied it is applied to the first cell instead of the _cell class. Disabled state.

<base_n>_cell_last_normal

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class.

<base_n>_cell_last_moused

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class. Mouse state.

<base_n>_cell_last_selected

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class. Selected state.

<base_n>_cell_last_selected_moused

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class. Moused state and selected state.

<base_n>_cell_last_disabled

The last cell in a menu can be treated distinctly. If this class is supplied it is applied to the last cell instead of the _cell class. Disabled state.

<base_n>_cell_alt_normal

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class.

<base_n>_cell_alt_moused

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class. Moused state.

<base_n>_cell_alt_selected

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class. Selected state.

<base_n>_cell_alt_selected_moused

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class. Selected and moused state.

<base_n>_cell_alt_disabled

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the containing cell instead off the _cell class. Disabled state.

<base_n>_item_normal

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list.

<base_n>_item_moused

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list. Moused state.

<base_n>_item_selected

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list. Selected state.

<base_n>_item_selected_moused

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list. Selected and moused state.

<base_n>_item_disabled

The class is applied to all menu items at this level. If the item already has a class (or classes) assigned to it, the class is appended to the end of the list. Disabled state.

<base_n>_item_alt_normal

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class.

<base_n>_item_alt_moused

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class. Moused state.

<base_n>_item_alt_selected

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class. Selected state.

<base_n>_item_alt_selected_moused

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class. Selected moused state.

<base_n>_item_alt_disabled

A menu item can be flagged as an alternate cell. If a menu item is an alternate item, this class is applied to the item instead off the _item class. Disabled state.

<base_n>_arrow_normal

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow.

<base_n>_arrow_moused

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow. Moused state.

<base_n>_arrow_selected

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow. Selected state.

<base_n>_arrow_selected_moused

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow. Selected and moused state.

<base_n>_arrow_disabled

For submenus (not level 1), if a menu item opens a child submenu, an arrow is displayed at the right edge of the cell that contains the item. This style is applied to the arrow. If the style does not specify a background image, it styles the text arrow that is displayed by default. If the style includes a background image, the text arrow is not displayed and the background image is used as the arrow. Disabled state.

string = getMenuItemById

Given the ID of an item added to a menu bar, return the ID of the menu item that contains it.

setFocus

Sets focus in the menu bar to the specified menu item (an item must be supplied not an item ID). If the boolean is set, both mouse focus and keyboard focus are set to the item. If the boolean is not set, only keyboard focus is set. Normally, focus is only set to an item in the top-level menu or an item in a sticky menu.

showMenu

Shows the menu tree. Normally only used for menus used as a popup where the menu bar is hidden until a user action (for example, keypress) occurs. event is the event object associated with the event (for example, click or keydown) that is causing the menu to be shown. boolean should be set to true if focus should be moved to the first thing in the menu after it has been shown.
Note: If you use the JWL SHOW action in a behavior and give it the menu as a target, the showMenu call will be used to show the menu.

hideMenu ()

Hides the menu tree. Normally only used for menus used as a "popup" where the menu bar is hidden after a user action occurs. This call is the same as setting the display property of the top-level menu's divto "none".

*addSubComponent

Adds menuitem object (usually newly constructed) to the menu identified by menu_id. The menu item is given the ID specified by ID. If position is specified, the item is added at the specified (zero-based) position (and all other items slide down one position), otherwise it is appended to the menu.

*removeSubComponent

Removes the menu item identified by ID (note that the menu item ID assigned when the item is added) if it is a child of the specified menu-id.

this-id

The ID to give to this ID. Must be unique within the page.

item

The ID of an inline HTML tag or table tag located within the form that contains the menu. The tag (and its children) are moved into the menu item. For JSF components (which may emit multiple HTML tags), this is the recommended way of specifying a menu item. Either a label or a separator or an item must be provided.
Note: To reduce flicker on the page, items that are going to be moved into menu items should be enclosed in an absolutely positioned div with the style set to display:none.

alt-class

Specifies that the alternate class should be used to style this menu item. This allows for items in a menu to have different styles.

action

An action (or a set of actions) to be performed when a click-able entity is clicked. A target for the action (or a set of targets) are normally required.

action-click

A menu item is either a parent or a leaf. A parent menu item is a menu item that has an associated submenu (the sub--menu is displayed when the menu item is moused/clicked). A leaf menu item does not have an associated submenu, instead it should be something which responds to a click event (for example, a link). If a menu-item is created using an item, if it is a leaf, then the item should be something that will respond to a click (for example, a link or button). If a menu-item is created using a label and an onchange or action is provided, it will be treated as a link (the label will be automatically enclosed in an <a> tag and the provided function/action will be run when the item is clicked. It is possible to define a menu item that is both a parent and a leaf. For example, if the menu item is a label and has an action associated with it and has a submenu defined for it, it is both a parent and a leaf. Similarly, if a menu item is an item and the item is a link and the menu item has a submenu defined for it, it is both a parent and a leaf. When an item is both a parent and a leaf, when a user clicks on the item, the submenu will be displayed and then the action will be run. If action-click is specified, when an item is both a parent and a leaf, the submenu will not be displayed, instead, only the action will be run. This attribute should be set whenever the action of the leaf will cause a submit so as to prevent the submenu from opening just before the submit occurs.

separator

Indicates this menu item is a non-clickable separator. If no value is provided, a an empty table cell is rendered (which can be styled to look like a line or box). Alternatively, simple text or in-line HTML can be provided which is rendered in the table cell. Either a label or a separator or an item must be provided.

increment

Increment between "ticks" in the slider. For example, if the minimum is 1 and the maximum is 10, an increment of 1 draws a tick at 1,2,3,4,5,6,7,8,9 and 10. Only values marked with a tick can be selected in the slider. Value may be fractional (for example, .01).

label-increment

How often to draw a label under a tick. A value of one draws a label under every tick. A value of two draws a label under every other tick and so on.

scale-width

The width of the scale in pixels.

base_Slider

Styles the div that contains the slider. Note that setting the size (width/height) of the div does not change the size of the slider (neither the scale or the popup). To change the width, use the scale-width attribute. The height is always computed. The font properties of the class are used to style any text in the slider.

<base>_Slider-Body

Styles scale and stylus (the content) of the slider. The color property colors the scale. background-color and border style the stylus.

type

The type of spinner (either a number spinner or a time spinner).

increment1

For time only, you may spin each time component (hour, minute, seconds) independently depending on where the cursor is in the value. If increment1 is specified, then increment is the increment when the cursor is in and "hour" time component and increment1 is the increment when the cursor is in a "minute" time component (or a "second" time component if no increment2 is specified). Value must be > .01. Note that if muliple increments are provided, increment2 must be provided even if there is no minute component in the pattern (same is true for increment).

increment2

For time only, you may spin each time component (hour, minute, seconds) independently depending on where the cursor is in the value. If increment1 is specified, then increment is the increment when the cursor is in an hour component and increment1 is the increment when the cursor is in a minutes component and increment2 is the increment when the cursor is in a seconds component. For example, specifying increment=3600, increment1=60, and increment2=1 and a format hh:mm:ss means when the cursor is in the hours part of the value, spinning increases/decreases the value by 1 hour, when the cursor is in the minutes part of the value, spinning increases/decreases the value by 1 minute and when the cursor is in the seconds part of the value, spinning increases/decreases the value by 1 second. Value must be > .001.

color-edge

Color of the border. If omitted, derived from the tag it is associated with.

direction

Direction for the twistie: 0 points up, 1 points down, 2 points left, 3 points right.

size

Width (in pixels) of the triangle part of the twistie. If omitted, the twistie is sized to the tag it's associated with (that is it "fits" the input or button tag it's associated with).

style

Style for the twistie: 0 means long solid triangle, 1 means stubby solid triangle, 2 means "v", 3 means solid triangle.

style

list-style-type. A style type of "square" is treated as twistie style 3, of "circle" as twistie style 1, of "decimal" as twistie style 0. Any other value (including none) is treated as twistie style 2.

bar-style

list-style-position. A value of "inside" adds a 1 line bar, any other value does not draw a line.

size

height. The twistie is sized to the computed (effective) height of the tag it's associated with. Note that this attribute is not derived from base_twistie class but directly from the style of the base tag.

color-fill

If no color is in the style, black is used. Note that if the base tag is disabled, the twistie will always draw in "disabled" colors.

GOTO

url('value')

true

Goes to the specified page. Note the syntax of the target.

LOCKED

id

true

Disable the specified tag. Disables all tags within the tag if it is a container (for example, a div).Disable the specified tag. Disables all tags within the tag if it is a container (for example, a div).

UNLOCKED

id

true

Enable the specified tag. Enables all tags within the tag if it is a container (for example, a div).

INVERTLOCKED

id

true

Inverts the disabled state of the specified tag. Sets all tags within the tag to the same state if the tag is a container.

SHOW

id

true

Shows the specified tag.

HIDE

id

true

Hides the specified tag.

INVERTHIDE

id

true

Inverts the display of the specified tag.

VISIBLE

id

true

Makes the specified tag visible.

INVISIBLE

id

true

Makes the specified tag invisible.
Note: When a tag is hidden, it cannot be seen and it occupies no space. When a tag is invisible, it cannot be seen but it occupies space (that is, the tag is there, it's just that none of it's pixels are drawing.

INVERTVISIBLE

id

true

Inverts the visibility of the specified tag.

NEXTTAB

id

true

Advance to the next control in the tab order relative to the specified ID.

NEXTTABCLEAR

id

true

Clear (delete) characters in the field from the cursor position to the end of the field, and then advance to the next control in the tab order relative to the specified ID.

PREVTAB

id

true

Advance to the previous control in the tab order relative to the specified ID.

PREVTABCLEAR

id

true

Clear (delete) characters in the field from the cursor position to the end of the field, and then advance to the previous control in the tab order relative to the specified ID.

CLICK

id

false

"click" the control identified by the specified ID.

SUBMIT

id

false

Submit a form using the specified ID. The ID can be any field in the form or of the form itself. If the ID identifies a submit button, that button is used to submit the form. If the ID identifies any other tag in the form or the form itself, the first submit button in the form is used to do the submit. The submit is done using the submit button (i.e., not doing a form.submit()) so that the onsubmit handler for the form will fire.

FOCUS

id

false

Sets focus to the specified tag. The content of the field receiving focus may/may not be selected depending on the browser.

SELECTED

id

false

Sets focus to the specified tag and selects the content.

UNSELECTED

id

false

Sets focus to the specified tag and unselects the content.

CONFIRM

string

true if OK else false

Display a "confirm" (ok cancel) message box with the specified string as the message. If the target is set to the special string @ERROR, the (localized) error message in the event object is displayed as the message.

PADLEFT

id

true

Deprecated. Pads the value of the field identified by the ID with spaces to its maximum length. Padding is done on the left.

PADRIGHT

id

true

Deprecated. Pads the value of the field identified by the ID with spaces to its maximum length. Padding is done on the right.

TRIM

id

true

Deprecated. Removes spaces from the left and right of the field identified by the ID.

NOTHING

none

false

Do nothing (useful with keybind and mousebind as a way of "no-oping" a keystroke or mouseclick).

ALERT

string

false

Display an alert message box with the specified string as the message. If the target is set to the special string @ERROR, the (localized) error message in the event object is displayed as the message.

any

All event handlers are supported though normally this is used with keyboard handlers, mouse handlers, focus and blur handlers.

function

A JavaScript function (or inline string of JavaScript) to perform when the key is pressed.

onget

Note the use of the special event name. This is required.

title

While a request is in progress, the title is assigned to the panel's primary tag (for example, a div) and to the "temporary tabstop" assigned to the panel. This shows as both a tooltip if you mouse over the panel and is available to screen readers.

progress-actions

While the request is in progress, the JWL action(s) to apply to the panel. Currently the only supported action is LOCKED.

params

A semi-colon separated list of parameter names. When the page is retrieved, the URL will be encoded to include these parameter names and the corresponding values as identified by param-fields.

param-fields

If params is provided, this is a parallel list of identifiers. The value of the field identified by the ID will be encoded in the URL as the value of the param name. The size of the lists param and param-fields must be the same. The param names are usually the undecorated ids of a field while the param-field that corresponds to it is usually the "decorated" id of a field. For example, if you want to encode the value of the field form1:text1 you shoul use text1 as the param and form1:text1 as the param-fields. This will result in text1=value being encoded on the URL where value is the current field of the field form1:text1.

on-start

Before the request is sent, this JavaScript function is executed. It has no arguments. If it returns false execution is halted. This function can be used (in conjunction with oncomplete to customize what is displayed while the request is in progress.

on-error

If a request fails/times out, this JavaScript is executed. The signature is (thisObj, thisError) where thisObj points to the panel and thisError is a string that describes the error.

on-complete

If a request succeeds, after the content of the panel is replaced, this JavaScript is executed. The function has no meaningful arguments.

href

The URL of the page from which content is to be retrieved. If omitted, content will be retrieved from the current (originating) page.

hreflang

The language of the page that is retrieved (the page that the link resolves to). This is advisory only (most browsers ignore the attribute). Specified as an ISO-standard language abbreviation code. For example, "en" for English, "en-US" for American English, "fr" for French, "de" for German.

charset

The (preferred) character encoding of page that is retrieved (the page the link resolves to).

source

The ID of a tag in the targeted URL whose content will replace the content of the container this component is associated with. If not specified or if the ID is not found in the page referenced by the URL, the ID of container is used. If this ID is not found in the page referenced by the URL, the body content is used.

oninput

Note the use of the special event name. The behavior modifies all keyboard event handlers as well as focus and blur.

prompt-char

The character to use as the prompt character (shows users where to type). Space is a legal prompt character. Care must be taken that the prompt character makes sense with the pattern, for example, "." is not a good prompt character for a number. Not used if a converter is not provided.

auto-tab

If present, the maximum number of characters that can be entered. After the maximum number of characters are entered, focus will advance to the next field. For date/time and masked fields, a value is not required (it's computed from the pattern). For numbers, a value is optional (if not provided, the maximum size of the pattern is used). If no converter is provided, a value must be provided.

auto-submit

If auto-tab is set for the field, changes the behavior of the auto-tab from advancing to the next field to submitting the form that contains the field. By default, the submit is done using the first submit button found in the form. To have the submit use a different button provide the ID of the button as the value of the attribute. See the SUBMIT actions for a description of how auto-submit determines how to submit the form.

ime-mode

If provided, when the field receives focus, the ime-mode is set to the specified state. Only works in IE. Use is deprecated, instead use CSS to do this.

id

The ID to be assigned to this converter. The id must be unique across all created converters within the page (or portal). Any string value may be used as the ID.

Name

The name of the JSF assist. See below for the list of assist objects.

_elem

DOM object of the input field.

_state

Input State object associated with a JSF Behavior.

_converter

Converter object that defines the pattern/format of the field.

_validator

Optional validator object associated with the Behavior.

_promptChar

Prompt character to use in input assist for this field (single character).

required

If required, the value may not be null or the empty string. If not required, the value may be null or the empty string and the other validation constraints are skipped.

minimum-bound

The minimum allowed value. The bounds should be formatted as yyyyMMddHHmmssSSS where trailing components may be omitted.

maximum-bound

The maximum allowed value. The bounds should be formatted as yyyyMMddHHmmssSSS where trailing components may be omitted.

constraint-expression

A JavaScript EL expression that must be satisfied. A JavaScript EL expression is the same as a JSF EL expression with the following exceptions:

boolean = validate(value, converter)

Validate a value (either a string or a date object). Requires either a converter object or the ID of a converter. Returns true if value passes. Returns false if value fails and lastError is set.

string = lastError()

If a conversion fails, returns the reason for the failure as a localized string.

onload

The behavior can only be used to specify the initial focus in the page.

focus-id

The ID of the field given focus. If omitted, focus is given to the first field in the page's tab order.

select

If True, the field's contents are selected (if selection is possible). Otherwise, the field's content is left unselected unless the browser enforces selection when a field is given focus.

onmouse

Note the use of the special event name. The behavior modifies multiple mouse (and non-mouse) event handlers.

button

The mouse button to bind to. ALL means all buttons on the mouse. Note that the right mouse button may not exist (for example, on a MAC).

onfocus

When attached to an onfocus, the value is checked to see that it is the right "type" (for example, that it is a number). Validation rules are not checked.

onblur

When attached to an onblur, the value is checked that it is the right type and all validation rules are checked.

success-class

If the field is valid, its CSS class is set to the success-class (thus changing its display). (If more than one class name is provided, they should be separated with spaces.)

error-class

If the field is not valid, its CSS class is set to the error-class (thus changing its display). (If more than one class name is provided, they should be separated with spaces.)

default-class

A synonym for success-class. (If no success-class is provided, then this class is used as the success-class.)

success-action

If the field is valid, the action(s) to execute. See the documentation on actions for a list of the available actions.

success-target

If the field is valid, the target(s) of the success actions. See the documentation on actions for a description of targets. If no target is provided the field itself is used as the target.

error-action

If the field is not valid, the action(s) to execute. See the documentation on actions for a list of the available actions.

error-target

If the field is NOT valid, the target(s) of the success actions. See the documentation on actions for a description of targets. If no target is provided the field itself is used as the target.

success-function

A JavaScript function (or inline string of JavaScript) to perform if the field is valid. If the function returns false, validation fails and the error action/function is executed.

error-function

A JavaScript function (or inline string of JavaScript) to perform if the field is NOT valid.

label-id

If provided, the ID of a tag on the page that is used as the label for the field. The ID usually identifies a span or a div.

label-success-class

The name of the CSS class that is to be applied to the label if the field passes validation/conversion

label-error-class

The name of the CSS class that is to be applied to the label if the field fails validation/conversion.

info-span-id

The ID of a tag on the page that contains "help" or "informational" text associated with the field. This tag is hidden when the field is in error. The ID usually identifies a span or a div.

error-span-id

The ID of a tag on the page that is used to display errors associated with the field. If this tag is visible when the page is displayed, it is assumed that the field is initially in error (for example, failed server-side validation). The ID usually identifies a span or a div.

span-is-popup

If a keyword is provided, the info and error spans are treated as block level elements (as divs) and then are positioned just above, below or left of the input field (for example, as "popups").

info-span-always

If true, the info-span is always on display (unless there is an error). Otherwise, the info-span is only displayed while the field has focus.

error-span-always

If true, the content of the error span is always displayed (as is) whenever any kind of client-side error is detected. Otherwise, if a client-side error is detected, an error message in hxclient_v3_s.js is used.

onclick

Use is private to the implementation of the <hx:panelActionbar>

hide-object

Hide/Show this tag.

hide-tree

If present, should be same as hide-object. Collapses all children that are tables within hide-object.

hide-field

Identifier of a hidden field on the page where the current state of the hide-object is maintained. Submitted back to the server on a submit. Values returned are either "none" or "display".

hide-field-value

The initial value of hide-field. The hide-object is initially hidden/shown based on this value. Hide-field's value is initialized with this as well.

message

The message to display.

prompt-type

0 displays an alert message box. 1 displays a confirm message box.

number = stringToValue(string)

Converts a string to a JavaScript number object. Returns null if fails.

string = valueToString(number)

Converts a JavaScript number to a string. Returns null if fails.

pattern

The Java number pattern to use when converting this value.

ICU4J

If present (and not false), asterisk and plus will be parsed as pattern characters and secondary grouping symbols will be parsed in the pattern.

digits

If provided, the representation of the single character that represents a valid zero digit in the Unicode character set OTHER THAN the Western "0" character. This character and the following 9 characters in the Unicode character set will be output as "digits" when a value is formatted and will be parsed as digits when a value is converted from a string. This allows support for non-Western digits such as proper Arabic and/or Indic-Arabic digits. The value is the Unicode code point of this character expressed in decimal. For example, an Arabic zero is HEX 660, so 1632 should be the value of this attribute in this case.

locale

Locale information to be used when converting the value. As client JavaScript cannot access localization information on the machine, this information must be provided (usually it's derived on the server by using the client's locale information and using the Java DecimalFormatSymbols class).

The information is provided as a string of 6 or more characters of the format: GDMPINC where:

G

DecimalFormatSymbols.getGroupingSeparator (1 character). Grouping separator character, that is the "thousands separator". For example "," as in 1,000.

D

DecimalFormatSymbols.getDecimalSeparator (1 character). Decimal point character, for example, "." in 123.45
Note: If the format is a currency, DecimalFormatSymbols.getMonetaryDecimalSeparator is more appropriate.

P

DecimalFormatSymbols.getPercent (1 character). Percent character.

I

DecimalFormatSymbols.getPerMill (1 character). per mille symbol.

N

DecimalFormatSymbols.getMinusSign (1 character). Negative sign character, for example "-" in -3.0

C

DecimalFormatSymbols.getCurrencySymbol (String). Currency symbol, for example, $ (US)

For example " ,%‰-FR" means use space as the grouping separator, comma as the decimal symbol, percent sign as the percent symbol, use the mille sign as the mille symbol, use the minus sign as the negative symbol, and FR as the currency symbol. So if the format was "¤ #,##0.00", an example number would be "FR 1 23,45"

strict

Defines the strictness of the conversion when converting from a string to a number. The higher the value, the more exactly the value must conform to the pattern.

For numbers, currently strictness levels of 0 and 1 are equivalent. If the strictness is 2, if number is signed, the sign must be provided (otherwise it's assumed positive).

If 0 (liberal), all "literals" are ignored while parsing a value, mis-ordered components will be rearranged, any missing component is supplied using the current datetime, misspellings and incomplete spellings are allowed (to the extent that they can be evaluated), "E" and other non-unique components are ignored.

If 1 (strict), all "literals" are ignored while parsing a value, any missing component is supplied using the current datetime, misspellings and incomplete spellings are allowed (to the extent that they can be evaluated), "E" and other non-unique components are ignored. For example if the pattern is MMMM dd, yyyy a user can enter "Feb/02/04" and it will be parsed as February 02, 2004.

If 2 (very strict), an exact match is required except long month names can be "shortened" to the minimum number of unique characters and "E" and other non-unique components are ignored. Literals must match exactly.

format

The Java datetime pattern to use when converting this value. See below for details.

base-2digit-span

When parsing a two-digit year, this many years before the current date are treated as "last century". For example, if this year is 2003 and the span is 30 then years between "73" and "99" will be treated as "1973 through 1999". Note that the Microsoft® norm for this value is 30 while the Java norm is 80.

first-day-of-week

If present, specifies which day of the week (0 meaning Sunday, 1 meaning Monday, ...) is used when calculating "weeks".
Note: This should always be provided (even if ICU4J is not set so that "w" and "Y" can be correctly calculated.

epoch

Which calendar/epoch system to use. Can be specified even if ICU4J is not set. The following systems are supported:

(none)

Gregorian, Christian (AD/BC)

b

Gregorian, Buddhist (Year of The Buddha)

h

Hebrew calendar

i

Islamic (Hijiri) calendar

j

Gregorian, Japanese (Year of the Emperor)

string = valueToString(date)

Converts a JavaScript date object to a string. Returns null if fails.

mask

The pattern that the string must match. See below for details.

protect-mask

Protects the character in a "marker" position from being validated and input, i.e., you can "protect" a position in the string that contains a marker (#,?,!,~) so that a user can't type this character in, instead the value of that position is set programmatically (usually in the initial value). Effectively this turns a character in the value into a literal. If the protect-mask is provided, it should be the same length string as the mask. A position is marked as protected if it has an X (an upper-case X) in it. Positions without an X are not protected.

char1-regexpression

The Java regular expression used to test characters marked with the # character in the mask. If not supplied, the expression [0-9] is used (that is, the character must be a digit).

char2-regexpression

The Java regular expression used to test characters marked with the ? character in the mask. If not supplied, the expression [A-Za-z] is used (that is, the character must be a Latin alphabetic character).

char3-regexpression

The Java regular expression used to test characters marked with the ! character in the mask. If not supplied, the ! character is not treated as a mask character.

char4-regexpression

The Java regular expression used to test characters marked with the ~ character in the mask. If not supplied, the ~ character is not treated as a mask character.

modulus

Value must pass the IBM® Modulus 10 (value is 10) or IBM Modulus 11 (value is 11) self-check algorithm. See http://publib.boulder.ibm.com/iseries/v5r2/ic2924/index.htm?info/rzakc/rzakcmstdfcheck.htm (search for "M10/M10F").

minimum-length

The minimum number of characters the string must contain.

maximum-length

The maximum number of characters the string may contain.

constraint-regexpression

A Java regular expression that the value must match at least once. See the Java documentation for a description of regular expressions.

constraint

Apply a pre-defined regular expression. The following pre-defined expressions are available:

boolean = validate(value)

Validate a string. Returns true if value passes. Returns false if value fails and lastError is set.

onkeydown

Behavior can only be attached to key down events (not key press or key up).

keycode

The (decimal) number representing the key (for example 112 is function key 1).

modifier

Modifier key that must be pressed in conjunction with the key (for example SHIFT + F1).


Feedback