Apache MyFaces Trinidad - Skin Selectors

Apache MyFaces Trinidad - Selectors for Skinning Trinidad subsections http://myfaces.apache.org/trinidad/skin-selectors.
html
Last Published: 2009-05-22 MyFaces
Selectors for Skinning Trinidad Components

Download
Current Release Notes Overview
Supported Browsers Global Selectors
Overview Component-level Selectors
Javadoc Miscellaneous Selectors
Tag Documentation
Skinning Selectors
Developer Guide Overview
Plugins
Trinidad 1.0.x This document lists the selectors that can be used in an Trinidad skin .css file to skin Trinidad components. NOTE:
Live Demos This document is not currently up-to-date!
Examples of some Trinidad Skin selectors:

/* Global selectors affect more than one component */
Foundation .AFDarkForeground:alias {color:#035D5C;}
.AFDarkBackground:alias {background-color:Purple;}
ASF
/* Component-specific selector. */
Sponsorship
af|panelTabbed::orientation-top
Thanks
{
border-bottom: 3px solid black;
}
Modules
Apache MyFaces Trinidad Global Selectors

Build
Apache MyFaces Trinidad Global Selectors are selectors that affect more than one component. If the selector name ends in the :alias
API pseudo-class, then the selector is most likely included in other component-specific selectors. Defining properties
Apache MyFaces Trinidad for a selector that ends in :alias will most likely affect the skin for more than one component.
Impl
Apache MyFaces Trinidad
Examples
Project Documentation
Project Information
Project Reports
1 de 25 12/06/2009 09:39 a.m.

Apache MyFaces Trinidad - Selectors for Skinning Trinidad subsections http://myfaces.apache.org/trinidad/skin-selectors.html
Global Style Selectors

Selector Name Description
.AFDefaultFontFamily:alias Specifies the default font family list ("font-family" property) for the
skin.
.AFDefaultFont:alias Specifies the default font for the skin. This style defines both the
default font family (as specified by the A FDefaultFontFamily named
style), the default font size, and default font weight.
.AFDefaultBoldFont:alias A bold version of the default font.
.AFVerySmallFont:alias A very small version of the default font. This style is used for very
small text such as inline messages, and copyright and privacy
messages.
.AFSmallFont:alias A small version of the default font. This style is used for text which
is slightly smaller than the default, such as tr:breadCrumbs links.
.AFMediumFont:alias A version of the default font which is slightly larger than the
default size. This is used for medium sized text, such as level 2
headers.
.AFLargeFont:alias A large version of the default font. This is used for large text, such
as level 1 headers.
.AFVeryLargeFont:alias A very large version of the default font.
.AFDarkBackground:alias The primary background color in the core color ramp.
.AFVeryDarkBackground:alias The darkest background color in the core color ramp. This value is
computed relative to the .A FDarkBackground:alias color.
.AFMediumBackground:alias A slightly lighter background color in the core color ramp. This
value is computed relative to the .A FDarkBackground:alias color.
.AFLightBackground:alias The lightest background color in the core color ramp. This value is
computed relative to the .A FDarkBackground:alias color.
.AFDarkA ccentBackground:alias The primary background color in the accent color ramp. The other
accent background colors are computed relative to this one. So
changing this style properties will affect those styles.
.AFVeryDarkA ccentBackground:alias The darkest background color in the accent color ramp. This value
is computed relative to the .AFDarkAccentBackground:alias color.
.AFMediumA ccentBackground:alias A slightly lighter background color in the accent color ramp. This
value is computed relative to the .A FDarkA ccentBackground:alias
color.
.AFLightA ccentBackground:alias The lightest background color in the accent color ramp. This value
is computed relative to the .AFDarkAccentBackground:alias color.
This is used in af|messages::body.
.AFTextBackground:alias The default text background color (white).
.AFDarkForeground:alias The primary foreground color in the core color ramp.
.AFVeryDarkForeground:alias The darkest foreground color in the core color ramp. This value is
computed relative to the .A FDarkForeground:alias color.
.AFMediumForeground:alias A slightly lighter foreground color in the core color ramp. This
value is computed relative to the .A FDarkForeground:alias color.
.AFLightForeground:alias The lightest foreground color in the core color ramp. This value is
computed relative to the .A FDarkForeground:alias color.
.AFDarkA ccentForeground:alias The primary foreground color in the accent color ramp.
.AFVeryDarkA ccentForeground:alias The darkest foreground color in the accent color ramp. This value
is computed relative to the .AFDarkAccentForeground:alias color.
.AFMediumA ccentForeground:alias A slightly lighter foreground color in the accent color ramp. This
value is computed relative to the .A FDarkA ccentForeground:alias
color.
.AFLightA ccentForeground:alias The lightest foreground color in the accent color ramp. This value
is computed relative to the .AFDarkAccentForeground:alias color.
.AFDarkBorder:alias The primary border color in the core color ramp. By default, it uses
the same color as is used in .AFDarkBackground:alias's
background-color.
.AFVeryDarkBorder:alias The darkest border color in the core color ramp. By default, it uses
the same color as is used in .AFVeryDarkBackground:alias's
background-color.
.AFMediumBorder:alias A slightly lighter border color in the core color ramp. By default, it
uses the same color as is used in .AFMediumBackground:alias's
background-color.
.AFLightBorder:alias The lightest border color in the core color ramp. By default, it uses
the same color as is used in .AFLightBackground:alias's
background-color.
.AFDarkA ccentBorder:alias The primary border color in the accent color ramp. By default, it
uses the same color as is used in .AFDarkAccentBackground:alias's
background-color.
.AFVeryDarkA ccentBorder:alias The darkest border color in the accent color ramp. By default, it
uses the same color as is used in
.A FVeryDarkAccentBackground:alias's background-color.
.AFMediumA ccentBorder:alias A slightly lighter border color in the accent color ramp. By default,
it uses the same color as is used in
2 de 25 12/06/2009 09:39 a.m.

Global Icon Selectors

Name Description
.AFErrorIcon:alias This icon is used by the form components (eg. inputText, selectBooleanCheckbox, outputLabel, etc...) to indicate
that an error has occurred.
.AFErrorAnchorIcon:alias This icon is a version of the error icon that is displayed when the icon is used as a link to additional information
about the error. For example, when outputLabel's messageType is error, and the messageDescUrl is not null, an
clickable error icon is rendered.
.AFInfoIcon:alias This icon is used by the form components (eg. inputText, selectBooleanCheckbox, outputLabel, etc...) to indicate
that an informational message is being displayed to the user.
.AFInfoAnchorIcon:alias This icon is a version of the info icon that is displayed when the icon is used as a link to additional information.
.AFRequiredIcon:alias This icon is used by the form components (eg. inputText, selectBooleanCheckbox, outputLabel, etc...) to indicate
that a value is required.
.AFWarningIcon:alias This icon is used by the form components (eg. inputText, selectBooleanCheckbox, etc...) to indicate that an
warning message is being displayed to the user.
.AFWarningAnchorIcon:alias This icon is a version of the warning icon that is displayed when the icon is used as a link to additional information
about the warning.
.AFQuickSelectIcon This icon depects a QuickSelect. This is used in LOV tables where a click on a button will act as a shortcut for a
select/OK sequence.
Component-level Selectors
Component-level selectors are selectors that can be used to skin a particular Trinidad component. The selectors
defined below are specified by the component they affect. Let's say you want to skin the tr:chooseDate
component. If you go to the tr:chooseDate Component section of this document, you will see the selectors that
you can use to skin the tr:chooseDate component. One of the selectors is af|chooseDate::title. The ::title pseudo-
element indicates that this is the title portion of the tr:chooseDate component. If you want to skin the title of the
tr:chooseDate component, you would set css properties on the af|chooseDate::title selector in your Trinidad skin
.css file.
You may see selector names that end in :alias in the component-level section. These are meant to provide
short-cuts to skin more than one component that share a certain style or icon, or to skin more than one piece of a
component. For example, the .AFMenuBarItem:alias style defines skin properties that are shared by all
tr:menuBar items. This is included by the af|menuBar::enabled and af|menuBar::selected style classes.
Therefore, if you change the .AFMenuBarItem:alias style, you will affect the af|menuBar::enabled and
af|menuBar::selected style selectors.
trh:body Component
Style Selectors
Name Description
af|body Styles the trh:body content.
3 de 25 12/06/2009 09:39 a.m.

tr:breadCrumbs Component
Style Selectors
Name Description
af|breadCrumbs Styles the tr:breadCrumbs content.

af|breadCrumbs::disabled-step Styles the disabled step of tr:breadCrumbs.
af|breadCrumbs::separator Styles the tr:breadCrumbs steps.
af|breadCrumbs::selected-step Styles the selected step of tr:breadCrumbs. This step may be hidden if the -tr-show-last-item property is set to
false.
af|breadCrumbs::step Styles the tr:breadCrumbs steps.
.AFPath:alias The .A FPath:alias style defines style properties that are shared by both af|breadCrumbs and af|treeTable::path.
.AFPathSeparator:alias The .A FPathSeparator:alias style defines style properties that used by both af|breadCrumbs::separator.
.AFPathStep:alias The .A FPathStep:alias style defines style properties that are shared by both af|breadCrumbs::step and
af|treeTable::path-step
.AFPathSelectedStep:alias The .A FPathSelectedStep:alias style defines style properties that are shared by both
af|breadCrumbs::selected-step and af|treeTable::path-selected-step
Icon Selectors
Name Description
af|breadCrumbs::separator-icon The separator icon that is rendered between tr:breadCrumbs links. This is typically a text icon, like '>'.
.AFPathSeparatorIcon:alias Changing this icon changes both af|breadCrumbs::separator-icon and af|treeTable::separator-icon. This makes
it easier to keep the icons between the two consistent.
Trinidad properties
Name Description
-tr-show-last-item Valid values are true or false. Determines whether the last item is displayed or not. e.g., af|breadCrumbs
{-tr-show-last-item:false} will not show the last item in the breadCrumbs.
-tr-separator-on-new-line Valid values are true or false. In the case the orientation is vertical, it determines whether the separator will be
shown on the new line (in front of the next path element)
-tr-indent-spaces Valid values are positive integers. In the case the orientation is vertical, it determines whether the number of
nbsp's rendered as an indent
tr:chooseDate Component
Style Selectors
Name Description
af|chooseDate::nav-link Styles the chooseDate's navigation Previous Month and Next Month links.
af|chooseDate::title Styles the chooseDate title which is month/year choice lists.
af|chooseDate::header Styles the chooseDate header which is the days of week row..
af|chooseDate::content Styles the chooseDate content.
af|chooseDate::selected Styles the selected date.
af|chooseDate::disabled Styles the disabled dates.
Icon Selectors
Name Description
af|chooseDate::prev-icon The previous icon which is used to go back to previous month.

af|chooseDate::next-icon The next icon which is used to go back to next month.
af|chooseDate::prev-disabled-icon The previous icon disabled.
af|chooseDate::next-disabled-icon The next icon disabled.
4 de 25 12/06/2009 09:39 a.m.

tr:column Component
Style Selectors
Name Description
af|column::cell-text Styles the text cells.

af|column::cell-text-band Styles the banded text cells.
af|column::cell-number Styles the numeric cells.
af|column::cell-number-band Styles the banded numeric cells.
af|column::cell-icon-format Styles the icon cells.
af|column::cell-icon-format-band Styles the banded icon cells.
af|column::header-text Styles the column headers.
af|column::header-number Styles the numeric column headers.
af|column::header-icon-format Styles the icon column headers.
af|column::row-header-text Styles the row headers.
af|column::total-text Styles the text total row cells.
af|column::total-number Styles the numeric total row cells.
af|column::sortable-header-text Styles the sortable column headers. You can style the borders with this selector as well.
af|column::sortable-header-number Styles the numeric sortable column headers. This includes the af|column::sortable-header-text
selector.
af|column::sortable-header-icon-format Styles the icon sortable column headers.
.AFTableCellDataText:alias Specifies the font family, font size and color for table data text. This is included in the
af|column::cell* selectors.
.AFTableCellDataBackgroundColor:alias Specifies the background color for data cells. This is included in the af|column::cell* and
af|table::control-bar* selectors.
.AFTableCellDataBandedBackgroundColor:alias Specifies the background color for banded data cells. This is included in the
af|column::cell*band selectors.
.AFTableCellDataBorderColor:alias Specifies the border color for data cells. This is included in the af|column::cell* and
.AFTableCellDataVerticalA lign:alias Specifies the vertical alignment for data cells. This is included in the af|column::cell* selectors.
Icon Selectors
Name Description
af|column::sort-ascend-icon This icon is used to indicate that the column is sorted in ascending order.
af|column::sort-descend-icon This icon is used to indicate that the column is sorted in descending order.
af|column::unsorted-icon This icon is used to indicate that the column is unsorted. Used in the oracle.adf.pda renderKit
only.
tr:commandButton Component
Style Selectors
Name Description
af|commandButton Styles the commandButton.

af|commandButton:disabled Styles the commandButton when disabled.
tr:goButton Component
Style Selectors
Name Description
af|goButton Styles the goButton.

af|goButton:disabled Styles the goButton when disabled.
5 de 25 12/06/2009 09:39 a.m.

tr:inputColor Component
Style Selectors
Name Description
af|inputColor Style on the root element of the tr:inputColor component.

af|inputColor:disabled Style on the root element of the tr:inputColor component when its disabled attribute is set to 'true'. For example,
you can style the label when the component is disabled by using this selector: "af|inputColor:disabled::label"
af|inputColor:read-only Style on the root element of the tr:inputColor component when its readOnly attribute is set to 'true'. For example,
you can style the label when the component is readOnly by using this selector: "af|inputColor:read-only::label"
af|inputColor::content Styles the inputColor content.
af|inputColor::label Styles the inputColor label.
Icon Selectors
Name Description
af|inputColor::launch-icon The button icon which is used to launch the secondary color picker dialog. Note: This af|inputColor's color swatch
is now used to launch the secondary dialog on most browsers. The af|inputColor::launch-icon icon is only
displayed on browsers which do not display the color swatch, such as Netscape 4.x.
af|inputColor::swatch- The icon that is overlayed on top of the inputColor's color swatch to indicate that the color swatch is clickable.
overlay-icon
tr:inputDate Component
Style Selectors
Name Description
af|inputDate Style on the root element of the tr:inputDate component.

af|inputDate:disabled Style on the root element of the tr:inputDate component when its disabled attribute is set to 'true'. For example, you
can style the label when the component is disabled by using this selector: "af|inputDate:disabled::label"
af|inputDate:read-only Style on the root element of the tr:inputDate component when its readOnly attribute is set to 'true'. For example, you
can style the label when the component is readOnly by using this selector: "af|inputDate:read-only::label"
af|inputDate::content Styles the inputDate content.
af|inputDate::label Styles the inputDate label.
af|inputDate::nav-link Styles the inputDate's navigation Previous Month and Next Month links.
af|inputDate::title Styles the inputDate title which is month/year choice lists..
af|inputDate::header Styles the inputDate header which is the days of week row.
af|inputDate::selected Styles the selected date.
Icon Selectors
Name Description
af|inputDate::launch-icon The button icon which is used to launch the secondary date picker dialog.
tr:inputListOfValues Component
Style Selectors
Name Description
af|inputListOfValues Style on the root element of the tr:inputListOfValues component.

af|inputListOfValues:disabled Style on the root element of the tr:inputListOfValues component when its disabled attribute is set to 'true'. For
example, you can style the label when the component is disabled by using this selector:
"af|inputListOfValues:disabled::label"
af|inputListOfValues:read-only Style on the root element of the tr:inputListOfValues component when its readOnly attribute is set to 'true'.
For example, you can style the label when the component is readOnly by using this selector:
"af|inputListOfValues:read-only::label"
af|inputListOfValues::content Styles the inputListOfValues content.
af|inputListOfValues::label Styles the inputListOfValues label.
Icon Selectors
Name Description
af|inputListOfValues::button-icon The icon which is used to launch the secondary list of values dialog.
6 de 25 12/06/2009 09:39 a.m.

tr:inputNumberSpinbox Component
Style Selectors
Name Description
af|inputNumberSpinbox Style on the root element of the

tr:inputNumberSpinbox component.
af|inputNumberSpinbox:disabled Style on the root element of the
tr:inputNumberSpinbox component when its
disabled attribute is set to 'true'. For example, you
can style the label when the component is disabled
by using this selector:
"af|inputNumberSpinbox:disabled::label"
af|inputNumberSpinbox:read-only Style on the root element of the
tr:inputNumberSpinbox component when its
readOnly attribute is set to 'true'. For example, you
can style the label when the component is readOnly
by using this selector:
"af|inputNumberSpinbox:read-only::label"
af|inputNumberSpinbox::content Style on the content of the tr:inputNumberSpinbox
component. You can set the width of the content
piece that will be used when the columns attribute
on tr:inputNumberSpinbox is not set.
af|inputNumberSpinbox::label Style on the label of the tr:inputNumberSpinbox
component. This includes .A FLabel:alias style
selector.
To style the input piece of inputNumberSpinbox without creating a skin definition, you A FFieldTextMarker, A FFieldTextLTRMarker,
can set the following public style classes on the styleClass attribute. The 'Marker' style A FFieldNumberMarker
classes are rendered on the root dom element, they have no style properties of its own,
and they map the content piece of the component's styling to the public style class without
the 'Marker'. For example, we map A FFieldNumberMarker to A FFieldNumber by defining
this skin definition for you in our base skin:
af|inputNumberSpinbox.A FFieldNumberMarker af|inputNumberSpinbox::content
{-tr-rule-ref: selector(".AFFieldNumber")}. If you set styleClass="AFFieldNumber", the
entire component will be affected, including the label. If you want to affect only the
'content' piece, use one of these marker style classes
tr:inputText Component
Style Selectors
Name Description
af|inputText Style on the root element of the tr:inputText

component.
af|inputText:disabled Style on the root element of the tr:inputText
component when its disabled attribute is set to
'true'. For example, you can style the label
when the component is disabled by using this
selector: "af|inputText:disabled::label"
af|inputText:read-only Style on the root element of the tr:inputText
component when its readOnly attribute is set to
'true'. For example, you can style the label
when the component is readOnly by using this
selector: "af|inputText:read-only::label"
af|inputText::content Style on the content of the tr:inputText
component. You can set the width of the
content piece that will be used when the
columns attribute on tr:inputText is not set.
af|inputText::label Style on the label of the tr:inputText
component. This includes .A FLabel:alias style
selector.
To style the input piece of inputText without creating a skin definition, you can set the A FFieldTextMarker, A FFieldTextLTRMarker,
following public style classes on the styleClass attribute. The 'Marker' style classes are rendered A FPhoneFieldTextMarker,
on the root dom element, they have no style properties of its own, and they map the content A FPostalCodeFieldTextMarker,
piece of the component's styling to the public style class without the 'Marker'. For example, we A FAddressFieldTextMarker,
map A FFieldTextMarker to A FFieldText by defining this skin definition for you in our base skin: A FFieldNumberMarker
af|inputText.AFFieldTextMarker af|inputText::content {-tr-rule-ref: selector(".A FFieldText")}. If
you set styleClass="AFFieldText", the entire component will be affected, including the label. If
you want to affect only the 'content' piece, use one of these marker style classes
7 de 25 12/06/2009 09:39 a.m.

tr:messages Component
This tr:messages component is implemented using an inner div nested within an outer table. The outer container
is used to lay out the messages' icons. The inner container contains the actual contents of the messages. If any
transparent icons are used, style properties such as the background color should probably be set on the inner
table via the af|messages::body selector.
Style Selectors
Name Description
.AFHeaderLevelOne This style class is included by af|messages::header and af|messages::error, as well as the af|*::level-one
selectors and af|panelHeader::error
af|messages Styles the messages's outer table. The overall width of the outer table is also configured through this selector.
Since the messages's icons are rendered within the outer table, the af|messages::body selector is probably a
better choice for specifying the messages's background color, padding, etc...
af|messages::body Styles the messages's inner table, which does not include any outer icons.
af|messages::message-text Styles the 'text' attribute of tr:messages if present.
af|messages::list Styles the list of messages inside of af|messages::body
af|messages::list-single This selector is used in addition to af|messages::list when there is only a single message displayed. It can be
used to remove the numbering from the list.
Icon Selectors
Name Description
af|messages::top-start This icon is rendered at the top starting corner of the messages (ie. at the top left corner for left to right
languages.)
af|messages::top This icon is rendered in the background in between the af|messages::top-start-icon and af|messages::top-
end-icon icons.
af|messages::top-end This icon is rendered at the top ending corner of the messages (ie. at the top right corner for left to right
languages.)
af|messages::start This icon is rendered in the background at the start of the messages.
af|messages::end This icon is rendered in the background at the end of the messages.
af|messages::bottom-start This icon is rendered at the bottom starting corner of the messages (ie. at the bottom left corner for left to
right languages.)
af|messages::bottom This icon is rendered in the background in between the af|messages::bottom-start-icon and
af|messages::bottom-end-icon icons.
af|messages::bottom-end This icon is rendered at the bottom ending corner of the messages (ie. at the bottom right corner for left to
right languages.)
af|messages::error-icon The icon that is displayed for error messages.
af|messages::warning-icon The icon that is displayed for warning messages.
af|messages::info-icon The icon that is displayed for information messages.
af|messages::confirmation-icon The icon that is displayed for confirmation messages.
.AFHeaderErrorIcon:alias The icon that is displayed for error messages or headers in tr:messages and tr:panelHeader. Changing this
icon changes both af|panelHeader::error-icon and af|messages::error-icon
.AFHeaderWarningIcon:alias The icon that is displayed for warning messages or headers in tr:messages and tr:panelHeader. Changing this
icon changes both af|panelHeader::warning-icon and af|messages::warning-icon
.AFHeaderInfoIcon:alias The icon that is displayed for information messages or headers in tr:messages and tr:panelHeader. Changing
this icon changes both af|panelHeader::info-icon and af|messages::info-icon
.AFHeaderConfirmationIcon:alias The icon that is displayed for confirmation messages or headers in tr:messages and tr:panelHeader. Changing
this icon changes both af|panelHeader::confirmation-icon and af|messages::confirmation-icon
tr:navigationPane hint='bar'
Style Selectors
Name Description
af|navigationPane::bar The style on the root dom element of the navigationPane hint="bar".
af|navigationPane::bar- The style on a table around the item when the item is active and disabled.
active-disabled
af|navigationPane::bar- The style on a table around the item when the item is active and enabled.
active-enabled
af|navigationPane::bar- The style on a table around the item when the item is inactive and disabled.
inactive-disabled
af|navigationPane::bar- The style on a table around the item when the item is inactive and enabled.
inactive-enabled
af|navigationPane::bar- Styles the cell of the bar content. To change the style (like font-style) of the active disabled item, you can use
content descendent selector like af|navigationPane::bar-active-enabled af|navigationPane::bar-content. To affect the link
itself, like you need to do if you change the color, you can use af|navigationPane::bar-active-enabled
af|navigationPane::bar-content A
af|navigationPane::bar- Styles the separator between items in the navigationPane bar.
separator
8 de 25 12/06/2009 09:39 a.m.

tr:navigationPane hint='buttons'
Style Selectors
Name Description
af|navigationPane::buttons The style on the root dom element of the navigationPane hint="buttons"
af|navigationPane::buttons- The style on a table around the item when the item is active and disabled.
active-disabled
af|navigationPane::buttons- The style on a table around the item when the item is active and enabled.
active-enabled
af|navigationPane::buttons- The style on a table around the item when the item is inactive and disabled.
inactive-disabled
af|navigationPane::buttons- The style on a table around the item when the item is inactive and enabled.
inactive-enabled
af|navigationPane::buttons- Styles the cell of the buttons content. To change the style of an individual item eg. an active and disabled
content item, you can use descendent selectors such as "af|navigationPane::buttons-active-disabled
af|navigationPane::buttons-content".
af|navigationPane::buttons- Styles the separator bar between the items in the navigationPane buttons.
separator
tr:navigationPane hint='choice'
Style Selectors
Name Description
af|navigationPane::choice-label The style on the label of navigationPane hint="choice".

af|navigationPane::choice-options The style on the option items of navigationPane hint="choice".
af|navigationPane::choice-button The style on the button item of navigationPane hint="choice".
tr:navigationPane hint='list'
Style Selectors
Name Description
af|navigationPane::list The style on the root dom element of the navigationPane hint="list".
af|navigationPane::list-active- The style on a table around the item when the item is active and disabled.
disabled
af|navigationPane::list-active- The style on a table around the item when the item is active and enabled.
enabled
af|navigationPane::list- The style on a table around the item when the item is inactive and disabled.
inactive-disabled
af|navigationPane::list- The style on a table around the item when the item is inactive and enabled.
inactive-enabled
af|navigationPane::list-content Styles the cell of the list content. To change the style of an individual item eg. an active and disabled item, you
can use descendent selectors such as "af|navigationPane::list-active-disabled af|navigationPane::list-content".
af|navigationPane::list-bullet The style on the cell which contains the bullet for list of the component with hint "list".
9 de 25 12/06/2009 09:39 a.m.

tr:navigationPane hint='tabs'
The navigationPane hint="tabs" renders nested tables. The af|navigationPane::tabs is the root dom element style
selector. Within the root dom element are tables denoting af|navigationPane::tabs-active and
af|navigationPane::tabs-inactive. Within each of these tables are more tables that break the active or inactive tab
into skinnable pieces, so you can skin the start 1/3, the middle, or the end 1/3 of the tab, and each of these pieces
have a top and a bottom row.. There are also hooks for joining an active tab to an inactive tab or an inactive tab
to another inactive tab, hooks for the very first tab shown and hooks for the very last tab shown.
By default, the tabs use background image. If you need to use background-color instead, use -tr-inhibit:
background-image or background-image: none. Remember CSS specificity rules if you find these don't work. If
you want to use background-images to get a rounded look, it is easiest to start with the images that are used by
default or in the beach skin.
For help in skinning the tabs, look at one of the demos: purple skin or beach skin. Also, it will help to view the
html and selectors that are rendered when the active tab is the first tab, a middle tab, or an end tab, because the
selectors change slightly. Make sure the styleclass compression that is on by default is turned off as this will help
your debugging. This is one of the most complicated components to skin. Looking at the examples or at the base
skin's css (see generated css file or base-desktop.xss) will help. Also, hopefully this documentation will help.
Style Selectors
Name Description
af|navigationPane::tabs The style root dom element of the tabs. It is unlikely you'll need to use this selector to skin the tabs, unless you
want to skin an instance of a tab component using composite selectors, like
af|navigationPane::tabs.MyStyleClass
af|navigationPane::tabs-active The style on the root of the active tab. A vailable pseudo-class is :disabled. For example, to change the color of
all disabled tabs, you can do this: af|navigationPane::tabs-active:disabled af|navigationPane::tabs-mid,
af|navigationPane::tabs-inactive:disabled af|navigationPane::tabs-mid {color: pink}
af|navigationPane::tabs- This is the style that is on the root of each inactive tab. Available pseudo-class is :disabled. For example, to
inactive change the color of all disabled tabs, you can do this: af|navigationPane::tabs-active:disabled
af|navigationPane::tabs-mid, af|navigationPane::tabs-inactive:disabled af|navigationPane::tabs-mid {color:
pink}. To color a non-disabled tab's text, you need to do this: af|navigationPane::tabs-active
af|navigationPane::tabs-mid A {color: white;} Note the A . The reason is a disabled tab does not render an A
element.
af|navigationPane::tabs-start This styles the FIRST tab only, not the middle tabs, and not the last tab. This styles the start 1/3 of an active
tab that is the FIRST tab. This is typically the part that styles the background-image that shows the start of the
tab. For example, if using images, it's the ramp-up image. There is a different selector for hte 'start' piece that
isn't the first tab. See ::tabs-start-join-from-inactive and ::tabs-start-join-from-active Examples:
af|navigationPane::tabs-active af|navigationPane::tabs-start {background-image: url('darkrampup.gif');}
af|navigationPane::tabs-inactive af|navigationPane::tabs-start {background-image: url('lightrampup.gif');}
af|navigationPane::tabs-mid This styles the middle/top portion of all tabs. This is typically the part that holds the text of the tab and it
usually has a background-image or background-color.
af|navigationPane::tabs-end This selector is for the LAST tab in all the tabs and it is the end 1/3 of that last tab. There is a different selector
for the 'end' piece of tabs that are not the last tab. The end piece of the tab that comes before an inactive tab
has pseudo-element ::tabs-end-join-to-inactive. There is no 'end' piece for an inactive tab that comes before an
active tab.
af|navigationPane::tabs- This styles a tab when it isn't the first tab and it isn't the last tab. Use like this: af|navigationPane::tabs-active
start-join af|navigationPane::tabs-start-join{} to style the start of a selected tab when the previous tab is unselected. By
default it contain an image that depicts the end of the unselected tab image (light accent color) and the start of
a selected tab (dark color) where the start of the selected tab overlaps in front of the end of the unselected tab.
af|navigationPane::tabs-start- This styles an inactive tab when it follows an active tab. This is the start 1/3 of a tab that is inactive and follows
join-from-active an active tab. By default, this image is only 14 pixels wide. It's similar to ::tabs-start, but that is for the FIRST
tab, and thus that image is probably wider.
af|navigationPane::tabs-start- This styles an inactive tab when it follows an inactive tab. This is the start 1/3 of a tab that is inactive and
join-from-inactive follows an inactive tab. You can use the same image as what you defined in ::tabs-start-join-from-active
af|navigationPane::tabs- This styles last 1/3 of a tab that isn't the LA ST tab. By default, this is the end background-image of a tab. Note:
end-join-to-inactive there is no ::end-join-to-active selector because an inactive tab that precedes an active tab only has 2 pieces
(start and mid). Instead you'd use ::tabs-start-join
af|navigationPane::tabs- This selector styles the bottom bit of the first 1/3 of a tab that is either the active tab or if it in an inactive tab, it
bottom-start has to be be the first tab. For example, af|navigationPane::tabs-inactive af|navigationPane::tabs-bottom-start {}
will skin the bottom bit of the first tab if it is inactive. Otherwise, you will see no effect. af|navigationPane::tabs-
active af|navigationPane::tabs-bottom-start {} will skin the bottom bit of the first 1/3 of the active tab,
regardless of which tab it is.
af|navigationPane::tabs- This selector is the empty div inside of tabs-bottom-start. The best thing to do is set background-image to none
bottom-start-content and let the container style take over.
af|navigationPane::tabs- The bottom portion, start 1/3 a tab as long as it isn't the FIRST tab. If the last tab is inactive, then this key is on
bottom-end BOTH the start 1/3 and the end 1/3. This key name and its usage needs to be cleaned up, since it is obviously
confusing. (The start 1/3 of the FIRST tab is af|navigatonPane::tabs-inactive af|navigationPane::tabs-bottom-
start.) In the active tab, this is only the last 1/3 on the LAST tab. Otherwise it is nothing. (see ::tabs-bottom-
end-join)
af|navigationPane::tabs- This selector is the empty div inside of tabs-bottom-end. The best thing to do is set background-image to none
bottom-end-content and let the container style take over.
af|navigationPane::tabs- This is the last 1/3 of a tab, the bottom portion, when it is joining another tab. In the active tab, this is the
bottom-end-join bottom portion, the last 1/3 that isn't the LA ST tab. In the inactive tab, this is the bottom portion, the last 1/3
when joining to another inactive tab (therefore it can't be the LA ST tab). For an inactive tab that is joining an
10 de 25 12/06/2009 09:39 a.m.

tr:navigationTree
Icon Selectors
Name Description
af|navigationTree::disclosed-icon This icon is displayed when the tr:navigationTree component is rendered in its disclosed state.
af|navigationTree::undisclosed-icon This icon is displayed when the tr:navigationTree component is rendered in its undisclosed state.
.AFDetailDisclosedIcon:alias Customizes all of these icons at once: af|table::disclosed-icon, af|showDetail::disclosed-icon,
af|showDetailHeader::disclosed-icon, af|navigationTree::disclosed-icon
.AFDetailUndisclosedIcon:alias Customizes all of these icons at once: af|table::undisclosed-icon, af|showDetail::undisclosed-icon,
af|showDetailHeader::undisclosed-icon, af|navigationTree::undisclosed-icon
tr:outputDocument Component
Style Selectors
Name Description
af|outputDocument Styles the tr:outputDocument component's container element.

af|outputDocument::title Styles the tr:outputDocument component's title element.
af|outputDocument::paragraph Styles the tr:outputDocument component's paragraphs.
af|outputDocument::separator Styles the tr:outputDocument component's separator placed between paragraphes.
tr:panelAccordion Component
Style Selectors
Name Description
af|panelA ccordion This can be used to style the root element of a panelAccordion.
af|panelA ccordion::content This can be used to style the parent element of each showDetailItem in a panelA ccordion.
af|panelA ccordion::header-collapsed This can be used to style the header region of each collapsed showDetailItem in a panelAccordion.
af|panelA ccordion::header-disabled This can be used to style the header region of each disabled showDetailItem in a panelAccordion.
af|panelA ccordion::header- This can be used to style the header region of each expanded showDetailItem in a panelAccordion.
expanded
af|panelA ccordion::title-link This can be used to style the link element for the title of each enabled showDetailItem in a
panelAccordion.
af|panelA ccordion::title-disabled-link This can be used to style the link element for the title of each disabled showDetailItem in a
panelAccordion.
af|panelA ccordion::toolbar This can be used to style the toolbar facet of a showDetailItem in a panelA ccordion.
tr:panelBorderLayout
The panel border layout currently only has skin selectors for the positioned layout.
Style Selectors
Name Description
af|panelBorderLayout-positioned The default style class for the root element

af|panelBorderLayout-positioned::top The style class for the top facet element
af|panelBorderLayout-positioned::inner-top The style class for the inner top facet element
af|panelBorderLayout-positioned::bottom The style class for the bottom facet element
af|panelBorderLayout-positioned::inner-bottom The style class for the bottom facet element
af|panelBorderLayout-positioned::start The style class for the start (or left/right depending on text direction) facet element
af|panelBorderLayout-positioned::inner-start The style class for the start (or left/right depending on text direction) facet element
af|panelBorderLayout-positioned::end The style class for the start (or left/right depending on text direction) facet element
af|panelBorderLayout-positioned::inner-end The style class for the start (or left/right depending on text direction) facet element
af|panelBorderLayout-positioned::center The style class for the center element that contains the inner facets and content
af|panelBorderLayout-positioned::inner-center The style class for the element that holds the component children
11 de 25 12/06/2009 09:39 a.m.

tr:panelBox
The panelBox contains the body region, which contains the panelBox header which contains the panelBox header
text (set by the text attribute on tr:panelBox) and the panelBox contents. Styles can be applied to the body region
via the af|panelBox::content selector. Similarly, styles for the header region are specified via the
af|panelBox::header selector. Both section can be skinned with the af|panelBox::body selector
The content is rendered within a layout container that allow round edges and such. You can access this container
using af|panelBox::top, af|panelBox::bottom, af|panelBox::start, af|panelBox::end, af|panelBox::top-start,
af|panelBox::top-end, af|panelBox::bottom-start and af|panelBox::bottom-end. To use round edges, set a
background image on each of the corners and set the width and height of those corners to the used image's size.
Here're some conditions for it to work properly:
The top edge background image should have the same height as both top corner images.
The bottom edge background image should have the same height as both bottom corner images.
The start edge background image should have the same width as the top start corner image and the bottom
start corner widths.
The end edge background image should have the same width as the top end corner image and the bottom
end corner widths.
In order to apply a style to the panelBox body or header for a particular background type, a contextual selector
can be used. For example, the following selectors can be used to change the properties of dark panelBox header
and body regions:
af|panelBox::dark af|panelBox::header {...} af|panelBox::dark
af|panelBox::body {...}
Style Selectors
Name Description
af|panelBox::transparent Styles the container of transparent panelBox. This is on the root dom element. It includes .AFPanelBox:alias
af|panelBox::light Styles the container of light panelBox. This is on the root dom element. It includes .A FPanelBox:alias
af|panelBox::medium Styles the container of the medium panelBox. This is on the root dom element. It includes .AFPanelBox:alias
af|panelBox::dark Styles the container of the dark panelBox. This is on the root dom element. It includes .AFPanelBox:alias
af|panelBox::body Styles the body region, that is the central frame of the box, including both the header and the content. To skin the
body of a particular background panelBox, you can do use descendent selectors like: af|panelBox::light
af|panelBox::body.
af|panelBox::header Styles the header region within the body when there is a header.
af|panelBox::content Styles the content region within the body.
af|panelBox::top-start Styles the top start corner of the box's container. In LTR this is the upper left corner. For rounded-corners you can
set background-image and width and height css properties.
af|panelBox::top Styles the top edge of the box's container.
af|panelBox::top-end Styles the top end corner of the box's container. In LTR this is the upper right corner. . For rounded-corners you can
set background-image and width and height css properties.
af|panelBox::start Styles the start edge of the box's container. In LTR this is the left side of the box.
af|panelBox::end Styles the end edge of the box's container. In LTR this is the right side of the box.
af|panelBox::bottom-start Styles the bottom start corner of the box's container. In LTR this is the lower left corner. . For rounded-corners you
can set background-image and width and height css properties.
af|panelBox::bottom Styles the bottom edge of the box's container.
af|panelBox::bottom-end Styles the bottom end corner of the box's container. In LTR this is the lower right corner. . For rounded-corners you
can set background-image and width and height css properties.
.AFPanelBox:alias Alias style that styles the root dom element of the panelBox for all values of the background attribute. It is included
in af|panelBox::transparent, af|panelBox::light, af|panelBox::medium, and af|panelBox::dark. Use this to add styles
common to all panelBoxes.
.AFPanelBoxBody:alias Alias style that styles the af|panelBox::body dom element for all values of the background attribute. It is included in
af|panelBox::body, af|panelBox::transparent af|panelBox::body, af|panelBox::light af|panelBox::body,
af|panelBox::medium af|panelBox::body, and af|panelBox::dark af|panelBox::body. Use this to add styles common
to all 'af|panelBox::body' regardless of the panelBox background attribute.
tr:panelCaptionGroup Component
Style Selectors
Name Description
af|panelCaptionGroup Specifies the style information for caption group. Use this to style the border and padding for the group.
af|panelCaptionGroup::caption Specifies the style information for caption text.
12 de 25 12/06/2009 09:39 a.m.

tr:panelFormLayout Component
Style Selectors
Name Description
af|panelFormLayout This can be used to set common properties that are shared across all panel form layouts.
af|panelFormLayout::column Specifies the style information for columns of the panelForm.
af|panelFormLayout::separator Specifies the style information for separators between groups in the panelForm.
af|panelFormLayout::cell Specifies the style information for each cell of the panelForm.
af|panelFormLayout::label-cell Specifies the style information for the label cell of the panelForm when side-by-side with content. This
includes .A FEndTextA lign:alias.
af|panelFormLayout::content-cell Specifies the style information for the input cell of the panelForm when side-by-side with content. Use this
in combination with af|panelFormLayout::label-cell to space out the inputs horizontally. This includes
.A FEndTextAlign:alias.
af|panelFormLayout::label- Specifies the style information for the label cell of the panelForm when stacked above content.
stacked-cell
tr:panelGroupLayout Component
Style Selectors
Name Description
af|panelGroupLayout This can be used to set common properties that are shared across all panel group layouts.
tr:panelHeader Component
Style Selectors
Name Description
af|panelHeader This can be used to set common properties that are shared across all header levels.
af|panelHeader::icon-style Styles the header icon.
af|panelHeader::level-one Styles level one headers.
af|panelHeader::level-two Styles level two headers.
af|panelHeader::level-three Styles level three headers.
af|panelHeader::level-four Styles level four headers.
af|panelHeader::level-five Styles level five headers.
af|panelHeader::level-six Styles level six headers.
af|panelHeader::error Styles level one header when messageType is error.
.AFHeaderText:alias This style is included by all the AFHeaderLevel* style classes, which in turn is included in other header style
selectors.
.AFHeaderLevelOne This style is included by the af|*::level-one selectors and af|messages::header, af|panelHeader::error and
af|messages::error (e.g., af|panelHeader::level-one, af|showDetailHeader::level-one)
.AFHeaderLevelTwo This style class is included by the af|*::level-two selectors (e.g., af|panelHeader::level-two,
af|showDetailHeader::level-two).
.AFHeaderLevelThreePlus This style class is included by all of the af|*::level-three, af|*::level-four, af|*::level-five, and af|*::level-six
selectors
Icon Selectors
Name Description
af|panelHeader::error-icon The icon that is displayed for headers with messageType "error".
af|panelHeader::warning-icon The icon that is displayed for headers with messageType "warning".
af|panelHeader::info-icon The icon that is displayed for headers with messageType "info".
af|panelHeader::confirmation-icon The icon that is displayed for headers with messageType "confirmation".
af|panelHeader::processing-icon The icon that is displayed for headers with messageType "processing".
.AFHeaderErrorIcon:alias The icon that is displayed for error messages or headers in tr:messages and tr:panelHeader. Changing this
icon changes both af|panelHeader::error-icon and af|messages::error-icon
.AFHeaderWarningIcon:alias The icon that is displayed for warning messages or headers in tr:messages and tr:panelHeader. Changing
this icon changes both af|panelHeader::warning-icon and af|messages::warning-icon
.AFHeaderInfoIcon:alias The icon that is displayed for information messages or headers in tr:messages and tr:panelHeader. Changing
this icon changes both af|panelHeader::info-icon and af|messages::info-icon
.AFHeaderConfirmationIcon:alias The icon that is displayed for confirmation messages or headers in tr:messages and tr:panelHeader.
Changing this icon changes both af|panelHeader::confirmation-icon and af|messages::confirmation-icon
tr:panelLabelAndMessage Component
Style Selectors
Name Description
af|panelLabelA ndMessage::help-facet Specifies the style information for the help-facet text of a panelLabelA ndMessage.
13 de 25 12/06/2009 09:39 a.m.

tr:panelList Component
Style
Selectors
Name Description
af|panelList Styles the root dom element of the panelList. Note: if you would like to style the bullets, you can set a css property/value to the
listStyle attribute. For example, listStyle='list-style-type: decimal' changes the list style to decimals. See the w3.org's css spec for
more options.
tr:panelPage Component
Style Selectors
Name Description
.AFFooterMessageText:alias This defines style properties that are shared by af|panelPage::about, af|panelPage::copyright, and
af|panelPage::privacy style selectors.
.AFFooterMessageLink:alias This defines style properties that are shared by af|panelPage::about-link, af|panelPage::copyright-link, and
af|panelPage::privacy-link style selectors.
af|panelPage::about Styles the "appAbout" facet.
af|panelPage::about-link Styles the links within the "appA bout" facet.
af|panelPage::branding Styles the "branding" facet.
af|panelPage::copyright Styles the "appCopyright" facet.
af|panelPage::copyright-link Styles the links within the "appCopyright" facet.
af|panelPage::privacy Styles the "appPrivacy" facet.
af|panelPage::privacy-link Styles the links within the "privacy" facet.
tr:panelPopup Component
Style Selectors
Name Description
af|panelPopup::trigger Styles the trigger facet of the panelPopup. Use this selector to control border and margin/padding around the trigger.
af|panelPopup::link Styles the link element of the trigger. Use this selector to control border, color and background around the
trigger-link.
af|panelPopup::container Styles the outer element of the popup. Use this selector to control border and margin/padding around the entire
popup.
af|panelPopup::content Styles the content area of the popup, meaning the area beneath the title-bar.
af|panelPopup::title-bar Styles the title-bar of the popup. Use this selectors to control the size the baackground color of the title-bar.
af|panelPopup::title-text Styles the text within the title-bar.
af|panelPopup::icon-style Styles the trigger icon that is rendered alongwith trigger-text.
af|panelPopup::close-icon Styles the clickable icon that closes the popup.
14 de 25 12/06/2009 09:39 a.m.

tr:panelSideBar Component
This tr:panelSideBar component is implemented using an inner table nested within an outer table. The outer
container is used to lay out the panelSideBar's icons. The inner container contains the actual contents of the
panelSideBar. If any transparent icons are used, style properties such as the background color should probably be
set on the inner table via the af|panelSideBar::body style class.
Style Selectors
Name Description
af|panelSideBar This style class is rendered on the panelSideBar's outer table. Since the panelSideBar's icons are rendered within
the outer table, the af|panelSideBar::body style is probably a better choice for specifying the panelSideBar's
background color, padding, etc...
af|panelSideBar::body This style class is rendered on the panelSideBar's inner table, which does not include any outer icons.
Icon Selectors
Name Description
af|panelSideBar::top-start-icon This icon is rendered at the top starting corner of the panelSideBar (ie. at the top left corner for left to right
languages.)
af|panelSideBar::top-end-icon This icon is rendered at the top ending corner of the panelSideBar (ie. at the top right corner for left to right
languages.)
af|panelSideBar::top- This icon is rendered in the background in between the af|panelSideBar::top-start and af|panelSideBar::top-end
background-icon icons.
af|panelSideBar::bottom- This icon is rendered at the bottom starting corner of the panelSideBar (ie. at the bottom left corner for left to
start-icon right languages.)
af|panelSideBar::bottom- This icon is rendered at the bottom ending corner of the panelSideBar (ie. at the bottom right corner for left to
end-icon right languages.)
af|panelSideBar::bottom- This icon is rendered in the background in between the af|panelSideBar::bottom-start and
background-icon af|panelSideBar::bottom-end icons.
af|panelSideBar::start- This icon is rendered in the background at the start of the panelSideBar.
background-icon
af|panelSideBar::end- This icon is rendered in the background at the end of the panelSideBar.
background-icon
tr:panelTabbed Component
Style Selectors
Name Description
.AFShowOneTab:alias This style is included in both af|panelTabbed::orientation-top and af|panelTabbed::orientation-bottom.

af|panelTabbed::orientation-top This styles the top panelTabbed. You can use this to add padding and margins and borders, for
example.
af|panelTabbed::orientation-bottom This styles the bottom panelTabbed. You can use this to add padding and margins and borders, for
example.
af|panelTabbed::tab This styles each unselected tab.
af|panelTabbed::tab-link This styles each unselected tab link.
af|panelTabbed::tab-selected This styles each selected tab.
af|panelTabbed::tab-selected-link This styles each selected tab link.
af|panelTabbed::separator-before- This is a cell with no content that renders before the selected cell. You can style this cell to highlight
selected the selected cell, if desired.
af|panelTabbed::separator-after- This is a cell with no content that renders after the selected cell. You can style this cell to highlight the
selected selected cell, if desired.
af|panelTabbed::separator This style is on the cells between each unselected step.
af|panelTabbed::cell-start The style on the first cell. You can left-align by setting width:0% on this, and width:100% on cell-end.
af|panelTabbed::cell-end The style on the last cell.
af|panelTabbed::body The style on the body of the panelTabbed; ie., the contents.
tr:panelTip Component
The tr:panelTip has two regions - a label and the main content.
Style Selectors
Name Description
af|panelTip This style class is rendered on the outer content of the panelTip.
af|panelTip::label This style class is rendered on the label of the panelTip.
af|panelTip::content This style class is rendered on the content of the panelTip.
15 de 25 12/06/2009 09:39 a.m.

tr:progressIndicator Component
Icon Selectors
Name Description
af|progressIndicator::indeterminate-icon The icon which is displayed when the progressIndicator's value is -1.
af|progressIndicator::zero-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is zero
percent.
af|progressIndicator::five-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is five
percent.
af|progressIndicator::ten-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is ten
percent.
af|progressIndicator::fifteen-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is fifteen
percent.
af|progressIndicator::twenty-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is twenty
percent.
af|progressIndicator::twenty-five-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is
twenty-five percent.
af|progressIndicator::thirty-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is thirty
percent.
af|progressIndicator::thirty-five-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is
thirty-five percent.
af|progressIndicator::forty-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is forty
percent.
af|progressIndicator::forty-five-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is
forty-five percent.
af|progressIndicator::fifty-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is fifty
percent.
af|progressIndicator::fifty-five-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is fifty-five
percent.
af|progressIndicator::sixty-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is sixty
percent.
af|progressIndicator::sixty-five-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is
sixty-five percent.
af|progressIndicator::seventy-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is seventy
percent.
af|progressIndicator::seventy- The icon which is displayed when the progressIndicator's value divided by maximum is
five-percent-icon seventy-five percent.
af|progressIndicator::eighty-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is eighty
percent.
af|progressIndicator::eighty-five-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is
eighty-five percent.
af|progressIndicator::ninety-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is ninety
percent.
af|progressIndicator::ninety-five-percent-icon The icon which is displayed when the progressIndicator's value divided by maximum is
ninety-five percent.
af|progressIndicator::one-hundred- The icon which is displayed when the progressIndicator's value divided by maximum is
percent-icon one-hundred percent.
16 de 25 12/06/2009 09:39 a.m.

tr:selectBooleanCheckbox Component
Style Selectors
Name Description
af|selectBooleanCheckbox Style on the root element of the tr:selectBooleanCheckbox component.

af|selectBooleanCheckbox:disabled Style on the root element of the tr:selectBooleanCheckbox component when its disabled attribute is
set to 'true'. For example, you can style the label when the component is disabled by using this
selector: "af|selectBooleanCheckbox:disabled af|selectBooleanCheckbox::label"
af|selectBooleanCheckbox:read-only Style on the root element of the tr:selectBooleanCheckbox component when its readOnly attribute is
set to 'true'. For example, you can style the label when the component is readOnly by using this
selector: "af|selectBooleanCheckbox:read-only af|selectBooleanCheckbox::label"
af|selectBooleanCheckbox::content Style on the content of the tr:selectBooleanCheckbox component.
af|selectBooleanCheckbox::label Style on the label of the tr:selectBooleanCheckbox component. This includes .AFLabel:alias style
selector.
Icon Selectors
Name Description
af|selectBooleanCheckbox::disabled- The icon that is displayed when the checkbox is readOnly, disabled, and checked.
checked-icon
af|selectBooleanCheckbox::disabled- The icon that is displayed when the checkbox is readOnly, disabled, and unchecked.
unchecked-icon
af|selectBooleanCheckbox::read- The icon that is displayed when the checkbox is read-only and checked.
only-checked-icon
af|selectBooleanCheckbox::read- The icon that is displayed when the checkbox is read-only and unchecked.
only-unchecked-icon
tr:selectBooleanRadio Component
Style Selectors
Name Description
af|selectBooleanRadio Style on the root element of the tr:selectBooleanRadio component.

af|selectBooleanRadio:disabled Style on the root element of the tr:selectBooleanRadio component when its disabled attribute is set to
'true'. For example, you can style the label when the component is disabled by using this selector:
"af|selectBooleanRadio:disabled af|selectBooleanRadio::label"
af|selectBooleanRadio:read-only Style on the root element of the tr:selectBooleanRadio component when its readOnly attribute is set to
'true'. For example, you can style the label when the component is readOnly by using this selector:
"af|selectBooleanRadio:read-only af|selectBooleanRadio::label"
af|selectBooleanRadio::content Style on the content of the tr:selectBooleanRadio component.
af|selectBooleanRadio::label Style on the label of the tr:selectBooleanRadio component. This includes .AFLabel:alias style selector.
Icon Selectors
Name Description
af|selectBooleanRadio::disabled- The icon that is displayed when the radio is readOnly, disabled, and selected.
selected-icon
af|selectBooleanRadio::disabled- The icon that is displayed when the radio is readOnly, disabled, and not selected.
unselected-icon
af|selectBooleanRadio::read- The icon that is displayed when the radio is read-only and selected.
only-selected-icon
af|selectBooleanRadio::read- The icon that is displayed when the radio is read-only and not selected.
only-unselected-icon
tr:selectManyCheckbox Component
Style Selectors
Name Description
af|selectManyCheckbox Style on the root element of the tr:selectManyCheckbox component.

af|selectManyCheckbox:disabled Style on the root element of the tr:selectManyCheckbox component when its disabled attribute is set to 'true'.
For example, you can style the label when the component is disabled by using this selector:
"af|selectManyCheckbox:disabled af|selectManyCheckbox::label"
af|selectManyCheckbox:read-only Style on the root element of the tr:selectManyCheckbox component when its readOnly attribute is set to 'true'.
For example, you can style the label when the component is readOnly by using this selector:
"af|selectManyCheckbox:read-only af|selectManyCheckbox::label"
af|selectManyCheckbox::content Style on the content of the tr:selectManyCheckbox component.
af|selectManyCheckbox::label Style on the label of the tr:selectManyCheckbox component. This includes .AFLabel:alias style selector.
17 de 25 12/06/2009 09:39 a.m.

tr:selectManyListbox Component
Style Selectors
Name Description
af|selectManyListbox Style on the root element of the tr:selectManyListbox component.

af|selectManyListbox:disabled Style on the root element of the tr:selectManyListbox component when its disabled attribute is set to 'true'. For
"af|selectManyListbox:disabled af|selectManyListbox::label"
af|selectManyListbox:read-only Style on the root element of the tr:selectManyListbox component when its readOnly attribute is set to 'true'. For
example, you can style the label when the component is readOnly by using this selector:
"af|selectManyListbox:read-only af|selectManyListbox::label"
af|selectManyListbox::content Style on the content of the tr:selectManyListbox component.
af|selectManyListbox::label Style on the label of the tr:selectManyListbox component. This includes .AFLabel:alias style selector.
tr:selectManyShuttle Component
Style Selectors
Name Description
af|selectManyShuttle::box-body Styles the body region of the box around the shuttle. This is inside of the af|selectManyShuttle::box-
content style.
af|selectManyShuttle::box-content Styles the outer container of box around the shuttle.
.AFShuttleBoxContent:alias This style defines style properties that are shared by af|selectOrderShuttle::box-content and
af|selectManyShuttle::box-content
.AFShuttleBoxContentBody:alias
This style defines style properties that are included by the following selectors:
af|selectManyShuttle::box-content af|selectManyShuttle::box-body
af|selectOrderShuttle::box-content af|selectOrderShuttle::box-body
.AFShuttleBoxBackground:alias
Styles the background color for shuttle's box. It is included by the following selectors:
af|selectOrderShuttle::box-content af|selectOrderShuttle::panel-box-body
.AFBoxBackground:alias
This style is used to set the background color for light panelBox and for the selectMany/selectOrder
shuttle's box. It is included by the following selectors:
af|panelBox::light af|panelBox::body
af|panelBox::content-light af|panelBox::body
.AFShuttleBoxLightBackground:alias
Icon Selectors
Name Description
.AFShuttleMoveIcon:alias Customizes both af|selectManyShuttle::move-icon and a af|selectOrderShuttle::move-icon.

.AFShuttleMoveA llIcon:alias Customizes both af|selectManyShuttle::move-all-icon and a af|selectOrderShuttle::move-all-icon.
.AFShuttleRemoveIcon:alias Customizes both af|selectManyShuttle::remove-icon and a af|selectOrderShuttle::remove-icon.
.AFShuttleRemoveA llIcon:alias Customizes both af|selectManyShuttle::remove-all-icon and a af|selectOrderShuttle::remove-all-icon.
af|selectManyShuttle::move-icon The icon for the tr:selectManyShuttle's "Move" action.
af|selectManyShuttle::move-all-icon The icon for the tr:selectManyShuttle's "Move A ll" action.
af|selectManyShuttle::remove-icon The icon for the tr:selectManyShuttle's "Remove" action.
af|selectManyShuttle::remove-all-icon The icon for the tr:selectManyShuttle's "Remove All" action.
af|selectManyShuttle::bottom-start-icon This icon is rendered in the body region at the bottom starting corner (ie. at the bottom left corner for
left to right languages.)
af|selectManyShuttle::bottom-end-icon This icon is rendered in the body region at the bottom ending corner (ie. at the bottom right corner for
af|selectManyShuttle::bottom- This icon is rendered in the body region as the background in between the
background-icon af|selectManyShuttle::bottom-start and af|selectManyShuttle::bottom-end icons.
af|selectManyShuttle::top-start-icon This icon is rendered in the body region at the top starting corner (ie. at the top left corner for left to
right languages.)
af|selectManyShuttle::top-end-icon This icon is rendered in the body region at the top ending corner (ie. at the top right corner for left to
right languages.)
af|selectManyShuttle::top- This icon is rendered in the body region as the background in between the
background-icon af|selectManyShuttle::top-start and af|selectManyShuttle::top-end icons. This needs to be an icon with
an url.
af|selectManyShuttle::start- This icon is rendered as the background image on the starting side of the body region. This needs to
background-icon be an icon with an url.
af|selectManyShuttle::end- This icon is rendered as the background image on the ending side of the body region. This needs to be
background-icon an icon with an url.
18 de 25 12/06/2009 09:39 a.m.

tr:selectOneChoice Component
Style Selectors
Name Description
af|selectOneChoice Style on the root element of the tr:selectOneChoice component.

af|selectOneChoice:disabled Style on the root element of the tr:selectOneChoice component when its disabled attribute is set to 'true'. For
"af|selectOneChoice:disabled af|selectOneChoice::label"
af|selectOneChoice:read-only Style on the root element of the tr:selectOneChoice component when its readOnly attribute is set to 'true'. For
"af|selectOneChoice:read-only af|selectOneChoice::label"
af|selectOneChoice::content Style on the content of the tr:selectOneChoice component.
af|selectOneChoice::label Style on the label of the tr:selectOneChoice component. This includes .AFLabel:alias style selector.
tr:selectOneListbox Component
Style Selectors
Name Description
af|selectOneListbox Style on the root element of the tr:selectOneListbox component.

af|selectOneListbox:disabled Style on the root element of the tr:selectOneListbox component when its disabled attribute is set to 'true'. For
"af|selectOneListbox:disabled af|selectOneListbox::label"
af|selectOneListbox:read-only Style on the root element of the tr:selectOneListbox component when its readOnly attribute is set to 'true'. For
"af|selectOneListbox:read-only af|selectOneListbox::label"
af|selectOneListbox::content Style on the content of the tr:selectOneListbox component.
af|selectOneListbox::label Style on the label of the tr:selectOneListbox component. This includes .AFLabel:alias style selector.
tr:selectOneRadio Component
Style Selectors
Name Description
af|selectOneRadio Style on the root element of the tr:selectOneRadio component.

af|selectOneRadio:disabled Style on the root element of the tr:selectOneRadio component when its disabled attribute is set to 'true'. For
"af|selectOneRadio:disabled af|selectOneRadio::label"
af|selectOneRadio:read-only Style on the root element of the tr:selectOneRadio component when its readOnly attribute is set to 'true'. For
"af|selectOneRadio:read-only af|selectOneRadio::label"
af|selectOneRadio::content Style on the content of the tr:selectOneListbox component.
af|selectOneRadio::label Style on the label of the tr:selectOneListbox component. This includes .A FLabel:alias style selector.
19 de 25 12/06/2009 09:39 a.m.

tr:selectOrderShuttle Component
Style Selectors
Name Description
af|selectOrderShuttle::box-body Styles the body region of the box around the shuttle. This is inside of the af|selectOrderShuttle::box-
content style.
af|selectOrderShuttle::box-content Styles the outer container of box around the shuttle.
.AFShuttleBoxContent:alias This style defines style properties that are shared by af|selectOrderShuttle::box-content and
af|selectManyShuttle::box-content
.AFShuttleBoxContentBody:alias
This style defines style properties that are included by the following selectors:
.AFShuttleBoxBackground:alias
This style is used to set the background color for shuttle's box. It is included by the following
selectors:
Icon Selectors
Name Description
.AFShuttleMoveIcon:alias Customizes both af|selectManyShuttle::move-icon and a af|selectOrderShuttle::move-icon.

.AFShuttleMoveA llIcon:alias Customizes both af|selectManyShuttle::move-all-icon and a af|selectOrderShuttle::move-all-icon.
.AFShuttleRemoveIcon:alias Customizes both af|selectManyShuttle::remove-icon and a af|selectOrderShuttle::remove-icon.
.AFShuttleRemoveA llIcon:alias Customizes both af|selectManyShuttle::remove-all-icon and a af|selectOrderShuttle::remove-all-icon.
af|selectOrderShuttle::move-icon The icon for the tr:selectOrderShuttle's "Move" action.
af|selectOrderShuttle::move-all-icon The icon for the tr:selectOrderShuttle's "Move A ll" action.
af|selectOrderShuttle::remove-icon The icon for the tr:selectOrderShuttle's "Remove" action.
af|selectOrderShuttle::remove-all-icon The icon for the tr:selectOrderShuttle's "Remove All" action.
af|selectOrderShuttle::reorder-top-icon The icon for moving the currently selected item to the top.
af|selectOrderShuttle::reorder-up-icon The icon for moving the currently selected item up by one item.
af|selectOrderShuttle::reorder- The icon for moving the currently selected item down by one item.
down-icon
af|selectOrderShuttle::reorder- The icon for moving the currently selected item to the bottom.
bottom-icon
af|selectOrderShuttle::bottom-start-icon This icon is rendered in the body region at the bottom starting corner (ie. at the bottom left corner for
af|selectOrderShuttle::bottom-end-icon This icon is rendered in the body region at the bottom ending corner (ie. at the bottom right corner for
af|selectOrderShuttle::bottom- This icon is rendered in the body region as the background in between the
background-icon af|selectManyShuttle::bottom-start and af|selectManyShuttle::bottom-end icons.
af|selectOrderShuttle::top-start-icon This icon is rendered in the body region at the top starting corner (ie. at the top left corner for left to
right languages.)
af|selectOrderShuttle::top-end-icon This icon is rendered in the body region at the top ending corner (ie. at the top right corner for left to
right languages.)
af|selectOrderShuttle::top- This icon is rendered in the body region as the background in between the
background-icon af|selectManyShuttle::top-start and af|selectManyShuttle::top-end icons. This needs to be an icon with
an url.
af|selectOrderShuttle::start- This icon is rendered as the background image on the starting side of the body region. This needs to
af|selectOrderShuttle::end- This icon is rendered as the background image on the ending side of the body region. This needs to
tr:selectRangeChoiceBar Component
Icon Selectors
Name Description
af|selectRangeChoiceBar::prev-icon The previous icon which is used to go back to previous step.

af|selectRangeChoiceBar::next-icon The next icon which is used to go back to next step.
af|selectRangeChoiceBar::prev-disabled-icon The previous icon in its disabled state.
af|selectRangeChoiceBar::next-disabled-icon The next icon in its disabled state.
tr:separator Component
Style Selectors
Name Description
af|separator Styles the tr:separator component.
20 de 25 12/06/2009 09:39 a.m.

tr:showDetail Component
Style Selectors
Name Description
af|showDetail::prompt-disclosed Styles the prompt when the component is rendered in its disclosed state.
af|showDetail::prompt-undisclosed Styles the prompt when the component is rendered in its undisclosed state.
af|showDetail::prompt-link Styles the prompt-link.
af|showDetail::disclosure-icon-link Styles the disclosure-icon-link.
Icon Selectors
Name Description
af|showDetail::disclosed-icon The af|showDetail::disclosed-icon icon is displayed when the tr:showDetail component is rendered in its
disclosed state.
af|showDetail::undisclosed-icon The af|showDetail::disclosed-icon icon is displayed when the tr:showDetail component is rendered in its
undisclosed state.
tr:showDetailHeader Component
Style Selectors
Name Description
af|showDetailHeader This can be used to set common properties that are shared across all header levels.
af|showDetailHeader::level-one Styles level one headers.
af|showDetailHeader::level-two Styles level two headers.
af|showDetailHeader::level-three Styles level three headers.
af|showDetailHeader::level-four Styles level four headers.
af|showDetailHeader::level-five Styles level five headers.
af|showDetailHeader::level-six Styles level six headers.
.AFHeaderText:alias This style is included by all the AFHeaderLevel* style classes, which in turn is included in other header
style selectors.
.AFHeaderLevelOne This style class is included by the af|*::level-one selectors and af|messages::header,
af|panelHeader::error and af|messages::error (e.g., af|panelHeader::level-one,
af|showDetailHeader::level-one)
.AFHeaderLevelTwo This style class is included by the af|*::level-two selectors (e.g., af|panelHeader::level-two,
af|showDetailHeader::level-two)
.AFHeaderLevelThreePlus This style class is included by all of the af|*::level-three, af|*::level-four, af|*::level-five, and
af|*::level-six selectors
Icon Selectors
Name Description
af|showDetailHeader::disclosed-icon The icon is displayed when the tr:showDetailHeader component is rendered in its disclosed state.
af|showDetailHeader::undisclosed-icon The icon is displayed when the tr:showDetailHeader component is rendered in its undisclosed state.
tr:statusIndicator Component
Style Selectors
Name Description
af|statusIndicator Styles the status indicator as a whole.

af|statusIndicator::busy Styles the status indicator's busy facet
af|statusIndicator::ready Styles the status indicator's ready facet
Icon Selectors
Name Description
af|statusIndicator::busy-icon The icon that is displayed when the page is busy. The icon will only be rendered if no facet was specified. Simple
skin references the ".AFBusyIcon:alias" icon.
af|statusIndicator::ready-icon The icon that is displayed when the page is not busy. The icon will only be rendered if no facet was specified.
Simple skin references the ".A FReadyIcon:alias" icon.
.AFBusyIcon:alias A named icon that's used by af|statusIndicator::busy-icon and is also usable in with <tr:icon>. That ability is
important to include the icon even when a facet is specified on the statusIndicator.
.AFReadyIcon:alias A named icon that's used by af|statusIndicator::ready-icon and is also usable in with <tr:icon>. That ability is
important to include the icon even when a facet is specified on the statusIndicator.
21 de 25 12/06/2009 09:39 a.m.

tr:table Component
Style Selectors
Name Description
af|table Style on the root element of the tr:table component.

af|table::content This style class is applied to the inner HTML table which contains the table data (column
headers, row headers, and data cells).
af|table::control-bar-top This style class is applied to the table's top control bar.
af|table::control-bar-bottom This style class is applied to the table's bottom control bar.
af|table::sub-control-bar This style class is applied to the table's sub control bar.
af|table::detail Specifies properties for detail disclosure cells.
af|table::column-footer Specifies properties for column footers.
.AFTableCellDataBackgroundColor:alias Specifies the background color for data cells. This is included in the af|column::cell* and
.AFTableCellDataBandedBackgroundColor:alias Specifies the background color for banded data cells. This is included in the
af|column::cell*band selectors.
.AFTableCellDataBorderColor:alias Specifies the border color for data cells. This is included in the af|column::cell* and
Icon Selectors
Name Description
af|table::disclosed-icon The af|table::disclosed-icon icon is displayed when the tr:table's showDetail is rendered in its
disclosed state.
af|table::undisclosed-icon The af|table::undisclosed-icon icon is displayed when the tr:table's showDetail is rendered in its
undisclosed state.
.AFDetailUndisclosedIcon:alias Customizes all of these icons at once: af|table::undisclosed-icon,
af|showDetail::undisclosed-icon, af|showDetailHeader::undisclosed-icon,
af|navigationTree::undisclosed-icon
af|table::prev-icon The previous icon which is used to go back to previous step.
af|table::next-icon The next icon which is used to go back to next step.
af|table::prev-disabled-icon The previous icon disabled.
af|table::next-disabled-icon The next icon disabled.
22 de 25 12/06/2009 09:39 a.m.

tr:train Component
Properties
Name Description
-tr-render- Boolean value that specifies if parent train icons should be rendered if this train is a sub-train. A sub-train is a process not
parent-train located at the root of its TreeModel.
-tr-visible- Strictly positive integer value specifying the maximum amount of stops visible at a time.
stop-count
Aliases
Name Description
.AFTrainContent:alias Styles all train station content.

.AFTrainIconCell:alias Styles all train station icons.
.AFTrainJoin:alias Styles all train station joins.
Style Selectors
Name Description
af|train Styles the whole train.

af|train::stop Styles a train stop. A stop include both the icon and its content. This selector is often combined with one or more
station pseudo-classes like :selected, :unvisited, :disabled, :read-only and .p_AFVisited and used in descendant
selector, e.g. "af|train::stop:unvisited af|train::link" would style the link generated for an unvisited stop.
af|train::stop-icon-cell Styles the icon section of the stop. This selector is combinable with state pseudo-classes. This selector includes
.A FTrainIconCell:alias.
af|train::stop-content Styles the content section of the stop. This selector is combinable with state pseudo-classes. This selector includes
.A FTrainContent:alias.
af|train::join Styles the join between stop icons. This selector is combinable with state pseudo-classes, except :selected. This
selector includes .AFTrainJoin:alias.
af|train::overflow-start Styles a train start overflow. A start overflow is generated when the amount of steps in the process is higher than the
amount of visibled stop defined by the -tr-visible-stop-count property. In LTR mode, this selector represents the left
side overflow (previous step group). This selector includes both the icon and its content. This selector is combinable
with state pseudo-classes.
af|train::overflow-start- Styles the icon section of the overflow-start. This selector is combinable with state pseudo-classes. This selector
icon-cell includes .AFTrainIconCell:alias.
af|train::overflow-start- Styles the content section of the overflow-start. This selector is combinable with state pseudo-classes. This selector
content includes .AFTrainContent:alias.
af|train::overflow-end Styles a train end overflow. A end overflow is generated when the amount of steps in the process is higher than the
amount of visibled stop defined by the -tr-visible-stop-count property. In LTR mode, this selector represents the right
side overflow (next step group). This selector includes both the icon and its content. This selector is combinable with
state pseudo-classes.
af|train::overflow- Styles the icon section of the overflow-end. This selector is combinable with state pseudo-classes. This selector
end-icon-cell includes .AFTrainIconCell:alias.
af|train::overflow- Styles the content section of the overflow-end. This selector is combinable with state pseudo-classes. This selector
end-content includes .AFTrainContent:alias.
af|train::join-overflow Styles the join between overflows and stop icons. This selector is combinable with state pseudo-classes, except
:selected. This selector includes .AFTrainJoin:alias.
af|train::parent-start Styles a train start parent. A parent is generated when the current train is not located at the root of its TreeModel and
that -tr-render-parent-train property is set to true. In LTR mode this will be rendered to the left of the first step's stop.
This selector includes both the icon and its content. This selector is NOT combinable with state pseudo-classes.
af|train::parent-start- Styles the icon section of the parent-start. This selector is NOT combinable with state pseudo-classes. This selector
icon-cell includes .AFTrainIconCell:alias.
af|train::parent-start- Styles the content section of the parent-start. This selector is NOT combinable with state pseudo-classes. This selector
content includes .AFTrainContent:alias.
af|train::parent-end Styles a train end parent. A parent is generated when the current train is not located at the root of its TreeModel and
that -tr-render-parent-train property is set to true. In LTR mode this will be rendered to the right of the last step's
stop. This selector includes both the icon and its content. This selector is NOT combinable with state pseudo-classes.
af|train::parent- Styles the icon section of the parent-end. This selector is NOT combinable with state pseudo-classes. This selector
end-icon-cell includes .AFTrainIconCell:alias.
af|train::parent- Styles the content section of the parent-end. This selector is NOT combinable with state pseudo-classes. This selector
end-content includes .AFTrainContent:alias.
af|train::join-parent Styles the join between parent and stop icons. This selector is NOT combinable with state pseudo-classes. This
selector includes .AFTrainJoin:alias.
af|train::link Styles the links generated within the stop's content. This selector is NOT combinable with state pseudo-classes
Icons
Name Description
Stop and overflow icons are combinable with one or more state pseudo-
classes. For example, it's possible to build icons for a very specific situations
like a read-only visited stop being different from a read-only unvisited stop.
The valid classes are:
:visited for steps that were already completed (assumed to be all
23 de 25 12/06/2009 09:39 a.m.

tr:tree Component
Icon Selectors
Name Description
af|tree::expanded-icon This icon is displayed before the expanded tree node.

af|tree::collapsed-icon This icon is displayed before the collapsed tree node.
af|tree::no- This icon is displayed instead of the expanded/collapsed icon, when the node has no children
children-icon
af|tree::line-icon This icon is used as a vertical line between the nodes.
af|tree::line- This icon is used as the horizontal line in the background of the expand/collapse icon of the node, in the case the node
middle-icon is not the last sibling of its parent node.
af|tree::line-last-icon This icon is used as the horizontal line in the background of the expand/collapse icon of the node, in the case the node
is the last sibling of its parent node.
af|tree::node-icon This icon selector is used in the case the Node class has a getNodeType() method that returns the node type as string.
The nodetype gets added to this selector, separated by a ':'. If the node is a container (has children) the following
suffixes get added depending on the expanded/collapsed state: '-expanded' / '-collapsed'. e.g. "af|tree::node-
icon:container-collapsed", "af|tree::node-icon:container-expanded", "af|tree::node-icon:noncontainer".
Trinidad properties
Name Description
-tr-show-lines Valid values are true or false (default true). Determines whether the tree lines are displayed or not. e.g., af|tree
{-tr-show-lines:false} will not show the lines of the tree.
tr:treeTable Component
Style Selectors
Name Description
af|treeTable::expansion Styles the treeTable's expanded and collapsed icons.

af|treeTable::focus Styles the treeTable's focus icon.
af|treeTable::locator Styles the treeTable's locator icon.
af|treeTable::path Styles the path content.
af|treeTable::path- Styles the selected path step. This step may be hidden.
selected-step
af|treeTable::path-step Styles the path steps.
af|treeTable::content Styles the inner HTML table which contains the treeTable data (column headers, row headers, and data cells).
af|treeTable::control-bar-top Styles the treeTable's top control bar.
af|treeTable::control- Styles the treeTable's bottom control bar.
bar-bottom
af|treeTable::sub-control-bar Styles the treeTable's sub control bar.
.AFPath:alias This style is included in both af|breadCrumbs and af|treeTable::path
.AFPathStep:alias This style is included in both af|breadCrumbs::step and af|treeTable::path-step
.AFPathSelectedStep:alias This style is included in both af|breadCrumbs::selected-step and af|treeTable::path-selected-step
Icon Selectors
Name Description
af|treeTable::expanded-icon This icon is displayed in expanded treeTable rows.

af|treeTable::collapsed-icon This icon is displayed in collapsed treeTable rows.
af|treeTable::focus-icon This icon is displayed in the focus column for focusable rows.
af|treeTable::locator-icon This icon is displayed next to the treeTable's locator bread crumbs which display the treeTable's focus path.
af|treeTable::separator-icon The separator icon that is rendered between the path links. This is typically a text icon.
af|treeTable::prev-icon The previous icon which is used to go back to previous step.
af|treeTable::next-icon The next icon which is used to go back to next step.
af|treeTable::prev- The previous icon disabled.
disabled-icon
af|treeTable::next- The next icon disabled.
disabled-icon
.AFPathSeparatorIcon:alias Changing this icon changes both af|breadCrumbs::separator-icon and af|treeTable::separator-icon
af|treeTable::expand-all-icon The expand-all link icon.
af|treeTable::collapse- The collapse-all link icon.
all-icon
af|treeTable::node-icon This icon selector is used in the case the Node class has a getNodeType() method that returns the node type as
string. The nodetype gets added to this selector separated by a ':'. If the node is a container (has children) the
following suffixes get added depending on the expanded/collapsed state: '-expanded' / '-collapsed'. i.e.
"af|treeTable::node-icon:container-collapsed", "af|treeTable::node-icon:container-expanded",
"af|treeTable::node-icon:noncontainer".
Miscellaneous Selectors
24 de 25 12/06/2009 09:39 a.m.

Lightweight Dialog Selectors
The following selectors enable styling of specific elements of the dialog box when lightweight dialogs are
configured.
Style Selectors
Name Description
af|dialog::container Styles the outer element of the dialog. Use this selector to control border and margin/padding around the entire dialog,
including title-bar.
af|dialog::content Styles the content area of the dialog, meaning the area beneath the title-bar.
af|dialog::title-bar Styles the title-bar of the dialog. Use this selectors to control the size the baackground color of the title-bar.
af|dialog::title-text Styles the text within the title-bar.
af|dialog::close-icon Styles the clickable icon that closes the dialog. Note - this selector must use an image, it cannot be styled with content
text.
af|dialog::blocked-area Styles the blocked area (behind the opened modal dialog). Note - at the moment the usage of !important is required to
overwrite the following inline styles: background-color, display, position, z-index, top, left, cursor
25 de 25 12/06/2009 09:39 a.m.

Apache MyFaces Trinidad - Skin Selectors

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Apache MyFaces Trinidad - Skin Selectors

Transféré par

Droits d'auteur :

Formats disponibles

Apache MyFaces Trinidad - Selectors for Skinning Trinidad subsections http://myfaces.apache.org/trinidad/skin-selectors.

Last Published: 2009-05-22 MyFaces

Selectors for Skinning Trinidad Components

Examples of some Trinidad Skin selectors:

Apache MyFaces Trinidad Global Selectors

1 de 25 12/06/2009 09:39 a.m.

Global Style Selectors

2 de 25 12/06/2009 09:39 a.m.

Global Icon Selectors

af|body Styles the trh:body content.

3 de 25 12/06/2009 09:39 a.m.

af|breadCrumbs Styles the tr:breadCrumbs content.

af|chooseDate::prev-icon The previous icon which is used to go back to previous month.

4 de 25 12/06/2009 09:39 a.m.

af|column::cell-text Styles the text cells.

af|commandButton Styles the commandButton.

af|goButton Styles the goButton.

5 de 25 12/06/2009 09:39 a.m.

af|inputColor Style on the root element of the tr:inputColor component.

af|inputDate Style on the root element of the tr:inputDate component.

af|inputListOfValues Style on the root element of the tr:inputListOfValues component.

6 de 25 12/06/2009 09:39 a.m.

af|inputNumberSpinbox Style on the root element of the

af|inputText Style on the root element of the tr:inputText

7 de 25 12/06/2009 09:39 a.m.

8 de 25 12/06/2009 09:39 a.m.

af|navigationPane::choice-label The style on the label of navigationPane hint="choice".

9 de 25 12/06/2009 09:39 a.m.

10 de 25 12/06/2009 09:39 a.m.

af|outputDocument Styles the tr:outputDocument component's container element.

af|panelBorderLayout-positioned The default style class for the root element

11 de 25 12/06/2009 09:39 a.m.

12 de 25 12/06/2009 09:39 a.m.

13 de 25 12/06/2009 09:39 a.m.

14 de 25 12/06/2009 09:39 a.m.

.AFShowOneTab:alias This style is included in both af|panelTabbed::orientation-top and af|panelTabbed::orientation-bottom.

15 de 25 12/06/2009 09:39 a.m.

16 de 25 12/06/2009 09:39 a.m.

af|selectBooleanCheckbox Style on the root element of the tr:selectBooleanCheckbox component.

af|selectBooleanRadio Style on the root element of the tr:selectBooleanRadio component.

af|selectManyCheckbox Style on the root element of the tr:selectManyCheckbox component.

17 de 25 12/06/2009 09:39 a.m.

af|selectManyListbox Style on the root element of the tr:selectManyListbox component.

.AFShuttleMoveIcon:alias Customizes both af|selectManyShuttle::move-icon and a af|selectOrderShuttle::move-icon.

18 de 25 12/06/2009 09:39 a.m.

af|selectOneChoice Style on the root element of the tr:selectOneChoice component.

af|selectOneListbox Style on the root element of the tr:selectOneListbox component.

af|selectOneRadio Style on the root element of the tr:selectOneRadio component.

19 de 25 12/06/2009 09:39 a.m.

.AFShuttleMoveIcon:alias Customizes both af|selectManyShuttle::move-icon and a af|selectOrderShuttle::move-icon.

af|selectRangeChoiceBar::prev-icon The previous icon which is used to go back to previous step.

af|separator Styles the tr:separator component.

20 de 25 12/06/2009 09:39 a.m.

af|statusIndicator Styles the status indicator as a whole.

21 de 25 12/06/2009 09:39 a.m.

af|table Style on the root element of the tr:table component.

22 de 25 12/06/2009 09:39 a.m.

.AFTrainContent:alias Styles all train station content.

af|train Styles the whole train.

23 de 25 12/06/2009 09:39 a.m.

af|tree::expanded-icon This icon is displayed before the expanded tree node.

af|treeTable::expansion Styles the treeTable's expanded and collapsed icons.

af|treeTable::expanded-icon This icon is displayed in expanded treeTable rows.