apache myfaces trinidad - skin selectors

Last Published: 2009-05-22

Download

Current Release Notes

Supported Browsers

Overview

Javadoc

Tag Documentation

Skinning Selectors

Developer Guide

Plugins

Trinidad 1.0.x

Live Demos

Foundation

ASF

Sponsorship

Thanks

Modules

Apache MyFaces Trinidad

Build


API


Impl


Examples

Project Documentation

Project Information

Project Reports

Selectors for Skinning Trinidad Components

Overview

Global Selectors

Component-level Selectors

Miscellaneous Selectors

Overview

This document lists the selectors that can be used in an Trinidad skin .css file to skin Trinidad components. NOTE:

This document is not currently up-to-date!

Examples of some Trinidad Skin selectors:

/* Global selectors affect more than one component */

.AFDarkForeground:alias {color:#035D5C;}

.AFDarkBackground:alias {background-color:Purple;}

/* Component-specific selector. */

af|panelTabbed::orientation-top

{

border-bottom: 3px solid black;

}

Global Selectors

Global Selectors are selectors that affect more than one component. If the selector name ends in the :alias

pseudo-class, then the selector is most likely included in other component-specific selectors. Defining properties

for a selector that ends in :alias will most likely affect the skin for more than one component.

MyFaces

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

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

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 AFDefaultFontFamily 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 .AFDarkBackground:alias color.

.AFMediumBackground:alias A slightly lighter background color in the core color ramp. This

value is computed relative to the .AFDarkBackground:alias color.

.AFLightBackground:alias The lightest background color in the core color ramp. This value is

computed relative to the .AFDarkBackground:alias color.

.AFDarkAccentBackground: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.

.AFVeryDarkAccentBackground:alias The darkest background color in the accent color ramp. This value

is computed relative to the .AFDarkAccentBackground:alias color.

.AFMediumAccentBackground:alias A slightly lighter background color in the accent color ramp. This

value is computed relative to the .AFDarkAccentBackground:alias

color.

.AFLightAccentBackground: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 .AFDarkForeground:alias color.

.AFMediumForeground:alias A slightly lighter foreground color in the core color ramp. This

value is computed relative to the .AFDarkForeground:alias color.

.AFLightForeground:alias The lightest foreground color in the core color ramp. This value is

computed relative to the .AFDarkForeground:alias color.

.AFDarkAccentForeground:alias The primary foreground color in the accent color ramp.

.AFVeryDarkAccentForeground:alias The darkest foreground color in the accent color ramp. This value

is computed relative to the .AFDarkAccentForeground:alias color.

.AFMediumAccentForeground:alias A slightly lighter foreground color in the accent color ramp. This

value is computed relative to the .AFDarkAccentForeground:alias

color.

.AFLightAccentForeground: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.

.AFDarkAccentBorder: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.

.AFVeryDarkAccentBorder:alias The darkest border color in the accent color ramp. By default, it

uses the same color as is used in

.AFVeryDarkAccentBackground:alias's background-color.

.AFMediumAccentBorder: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.

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.

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.

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 .AFPath:alias style defines style properties that are shared by both af|breadCrumbs and af|treeTable::path.

.AFPathSeparator:alias The .AFPathSeparator:alias style defines style properties that used by both af|breadCrumbs::separator.

.AFPathStep:alias The .AFPathStep:alias style defines style properties that are shared by both af|breadCrumbs::step and

af|treeTable::path-step

.AFPathSelectedStep:alias The .AFPathSelectedStep: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


.AFTableCellDataVerticalAlign: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-

overlay-icon

The icon that is overlayed on top of the inputColor's color swatch to indicate that the color swatch is clickable.

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 .AFLabel:alias style

selector.

To style the input piece of inputNumberSpinbox without creating a skin definition, you

can set the following public style classes on the styleClass attribute. The 'Marker' style

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 AFFieldNumberMarker to AFFieldNumber by defining

this skin definition for you in our base skin:

af|inputNumberSpinbox.AFFieldNumberMarker 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

AFFieldTextMarker, AFFieldTextLTRMarker,

AFFieldNumberMarker

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 .AFLabel:alias style

selector.

To style the input piece of inputText without creating a skin definition, you can set the

following public style classes on the styleClass attribute. The 'Marker' style 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 AFFieldTextMarker to AFFieldText by defining this skin definition for you in our base skin:

af|inputText.AFFieldTextMarker af|inputText::content {-tr-rule-ref: selector(".AFFieldText")}. 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

AFFieldTextMarker, AFFieldTextLTRMarker,

AFPhoneFieldTextMarker,

AFPostalCodeFieldTextMarker,

AFAddressFieldTextMarker,

AFFieldNumberMarker


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-

active-disabled

The style on a table around the item when the item is active and disabled.


active-enabled

The style on a table around the item when the item is active and enabled.


inactive-disabled

The style on a table around the item when the item is inactive and disabled.


inactive-enabled

The style on a table around the item when the item is inactive and enabled.


content

Styles the cell of the bar content. To change the style (like font-style) of the active disabled item, you can use

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


separator

Styles the separator between items in the navigationPane bar.


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-

active-disabled



active-enabled



inactive-disabled



inactive-enabled



content

Styles the cell of the buttons content. To change the style of an individual item eg. an active and disabled

item, you can use descendent selectors such as "af|navigationPane::buttons-active-disabled

af|navigationPane::buttons-content".


separator

Styles the separator bar between the items in the navigationPane buttons.

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-

disabled


af|navigationPane::list-active-

enabled


af|navigationPane::list-

inactive-disabled


af|navigationPane::list-

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. Available 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-

inactive

This is the style that is on the root of each inactive tab. Available 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}. 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.


start-join

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

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-

join-from-active

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

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-

join-from-inactive

This styles an inactive tab when it follows an inactive tab. This is the start 1/3 of a tab that is inactive and

follows an inactive tab. You can use the same image as what you defined in ::tabs-start-join-from-active


end-join-to-inactive

This styles last 1/3 of a tab that isn't the LAST tab. By default, this is the end background-image of a tab. Note:

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


bottom-start

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

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.


bottom-start-content

This selector is the empty div inside of tabs-bottom-start. The best thing to do is set background-image to none

and let the container style take over.


bottom-end

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

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)


bottom-end-content

This selector is the empty div inside of tabs-bottom-end. The best thing to do is set background-image to none

and let the container style take over.


bottom-end-join

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 portion, the last 1/3 that isn't the LAST 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 LAST 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|panelAccordion This can be used to style the root element of a panelAccordion.

af|panelAccordion::content This can be used to style the parent element of each showDetailItem in a panelAccordion.

af|panelAccordion::header-collapsed This can be used to style the header region of each collapsed showDetailItem in a panelAccordion.

af|panelAccordion::header-disabled This can be used to style the header region of each disabled showDetailItem in a panelAccordion.

af|panelAccordion::header-

expanded

This can be used to style the header region of each expanded showDetailItem in a panelAccordion.

af|panelAccordion::title-link This can be used to style the link element for the title of each enabled showDetailItem in a

panelAccordion.

af|panelAccordion::title-disabled-link This can be used to style the link element for the title of each disabled showDetailItem in a

panelAccordion.

af|panelAccordion::toolbar This can be used to style the toolbar facet of a showDetailItem in a panelAccordion.

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 .AFPanelBox: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 .AFEndTextAlign: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

.AFEndTextAlign:alias.

af|panelFormLayout::label-

stacked-cell

Specifies the style information for the label cell of the panelForm when stacked above content.

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|panelLabelAndMessage::help-facet Specifies the style information for the help-facet text of a panelLabelAndMessage.


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 "appAbout" 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-

background-icon

This icon is rendered in the background in between the af|panelSideBar::top-start and af|panelSideBar::top-end

icons.

af|panelSideBar::bottom-

start-icon

This icon is rendered at the bottom starting corner of the panelSideBar (ie. at the bottom left corner for left to

right languages.)


end-icon

This icon is rendered at the bottom ending corner of the panelSideBar (ie. at the bottom right corner for left to

right languages.)


background-icon

This icon is rendered in the background in between the af|panelSideBar::bottom-start and

af|panelSideBar::bottom-end icons.

af|panelSideBar::start-

background-icon

This icon is rendered in the background at the start of the panelSideBar.

af|panelSideBar::end-

background-icon

This icon is rendered in the background at the end of the panelSideBar.

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-

selected

This is a cell with no content that renders before the selected cell. You can style this cell to highlight

the selected cell, if desired.

af|panelTabbed::separator-after-

selected

This is a cell with no content that renders after the selected cell. You can style this cell to highlight the

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-

five-percent-icon

The icon which is displayed when the progressIndicator's value divided by maximum is

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-

percent-icon

The icon which is displayed when the progressIndicator's value divided by maximum is

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-

checked-icon

The icon that is displayed when the checkbox is readOnly, disabled, and checked.

af|selectBooleanCheckbox::disabled-

unchecked-icon

The icon that is displayed when the checkbox is readOnly, disabled, and unchecked.

af|selectBooleanCheckbox::read-

only-checked-icon

The icon that is displayed when the checkbox is read-only and checked.

af|selectBooleanCheckbox::read-

only-unchecked-icon

The icon that is displayed when the checkbox is read-only and unchecked.

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-

selected-icon

The icon that is displayed when the radio is readOnly, disabled, and selected.

af|selectBooleanRadio::disabled-

unselected-icon

The icon that is displayed when the radio is readOnly, disabled, and not selected.

af|selectBooleanRadio::read-

only-selected-icon

The icon that is displayed when the radio is read-only and selected.

af|selectBooleanRadio::read-

only-unselected-icon

The icon that is displayed when the radio is read-only and not selected.

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.

.AFShuttleMoveAllIcon: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.

.AFShuttleRemoveAllIcon: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 All" 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-

background-icon

This icon is rendered in the body region as the background in between the

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-

background-icon


af|selectManyShuttle::top-start and af|selectManyShuttle::top-end icons. This needs to be an icon with

an url.

af|selectManyShuttle::start-

background-icon

This icon is rendered as the background image on the starting side of the body region. This needs to

be an icon with an url.

af|selectManyShuttle::end-

background-icon

This icon is rendered as the background image on the ending side of the body region. This needs to be

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 .AFLabel: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.

.AFShuttleMoveAllIcon: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.

.AFShuttleRemoveAllIcon: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 All" 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-

down-icon

The icon for moving the currently selected item down by one item.

af|selectOrderShuttle::reorder-

bottom-icon

The icon for moving the currently selected item to the bottom.

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-

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-

background-icon


af|selectManyShuttle::top-start and af|selectManyShuttle::top-end icons. This needs to be an icon with

an url.

af|selectOrderShuttle::start-

background-icon

This icon is rendered as the background image on the starting side of the body region. This needs to


af|selectOrderShuttle::end-

background-icon

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 ".AFReadyIcon: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-

parent-train

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

located at the root of its TreeModel.

-tr-visible-

stop-count

Strictly positive integer value specifying the maximum amount of stops visible at a time.

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

.AFTrainIconCell:alias.

af|train::stop-content Styles the content section of the stop. This selector is combinable with state pseudo-classes. This selector includes

.AFTrainContent: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-

icon-cell

Styles the icon section of the overflow-start. This selector is combinable with state pseudo-classes. This selector

includes .AFTrainIconCell:alias.

af|train::overflow-start-

content

Styles the content section of the overflow-start. This selector is combinable with state pseudo-classes. This selector

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-

end-icon-cell

Styles the icon section of the overflow-end. This selector is combinable with state pseudo-classes. This selector


af|train::overflow-

end-content

Styles the content section of the overflow-end. This selector is combinable with state pseudo-classes. This selector


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-

icon-cell

Styles the icon section of the parent-start. This selector is NOT combinable with state pseudo-classes. This selector


af|train::parent-start-

content

Styles the content section of the parent-start. This selector is NOT combinable with state pseudo-classes. This selector


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-

end-icon-cell

Styles the icon section of the parent-end. This selector is NOT combinable with state pseudo-classes. This selector


af|train::parent-

end-content

Styles the content section of the parent-end. This selector is NOT combinable with state pseudo-classes. This selector


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.

Miscellaneous Selectors

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-

children-icon

This icon is displayed instead of the expanded/collapsed icon, when the node has no children

af|tree::line-icon This icon is used as a vertical line between the nodes.

af|tree::line-

middle-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 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-

selected-step

Styles the selected path step. This step may be hidden.

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-

bar-bottom

Styles the treeTable's bottom control bar.

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-

disabled-icon

The previous icon disabled.

af|treeTable::next-

disabled-icon

The next icon disabled.

.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-

all-icon

The collapse-all link 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".


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

Documents