Font

Text

Icons

Component Group: Button

Component Group: Link

Component Group: Form Controls

Component Group: Menu

Component Group: PanelBox and Region

Component Group: PanelHeader

Component Group: Tabs

Component Group: Tabs->Default

Default->Selected

Default->Unselected

Component Group: Tabs->Level One

Level One->Selected

Level One->Unselected

Component Group: Tabs->Level Two

Level Two->Selected

Level Two->Unselected

Miscellaneous

Global Resource Strings

Popup Selectors

The inline af:popup selector component defines a fragment of the page that will appear as a popup. The popup is not a browser window but a layer of DHTML that creates a visual layer on top of the page content. The inline popup component controls the delivery of the popup's content (inline, lazy, and lazyUncached). The server-side af:popup component doesn't directly participate in skinning.

However, if the popup's first child is a

• af:menu,
• af:dialog,
• af:panelWindow, or
• af:noteWindow,

If the popup has arbitrary content, meaning that the first child is not one of the components listed above, the skinning is controlled by global skinning classes. The reasoning behind using global skinning classes is that the outer frame is built in DHTML on the client. The client-side popup inline selector component and popup framework can be used without a corresponding server-side component. Some components such as the af:inputColor use the popup framework with an inline selector thus using the af:popup global style selectors.

When the af:popup contains arbitrary content, it uses global style selectors to create the frame around the inner af:popup content.

AFPopupSelector styles the root dom element of the component.

The root style contains skinning property "-tr-open-animation-duration" that specifies the animation duration for opening the popup. This skin property is honored only if the animation is enabled in the system.

Corner af:popup Global Selectors

AFPopupSelectorHeaderStart - top-start corner

AFPopupSelectorHeaderEnd - top-end corner

AFPopupSelectorFooterStart - bottom-start corner

AFPopupSelectorFooterEnd - bottom-end corner

Middle af:popup Global Selectors

AFPopupSelectorContentStart - middle-start side

AFPopupSelectorContent - middle-center contains af:popup content

AFPopupSelectorContentEnd - middle-end side

Summary of alias used by the global selectors.

.AFPopupSelectorBorderCell:alias - Cell border without edges; includes .AFTextBackground:alias

.AFPopupSelectorBorderCellEdge:alias - Cell border with one edge; includes .AFPopupSelectorBorderCell:alias

.AFPopupSelectorBorderCellCorner:alias - Cell border with two edges. If the dimensions of the corner images changed, the height and width properties would adjust in this selector; includes .AFPopupSelectorBorderCellEdge:alias

Note Window Selectors

Poll component timeout Pseudo-classes

Inline Editing Pseudo-classes

Drag and Drop Pseudo-classes

Message Selectors

The rich client allows rich components to be styled based on whether or not they have certain levels of messages associated with them. When a message of a particular type is added to a component (using the FacesMessage framework), the styles of that component are automatically modified to reflect the new status. If styles are not defined for the status in question, then the default stles are used.

In order to define styles for your components based on message levels that are tied to them, you would append a style pseudo-class to your component definition. For example:

    af|inputText::content {
      /*defines the base style for the content region of the af:inputText tag*/
    }
    af|inputText:error::content {
      /*defines the base style for the content region of the ad:inputText tag
        whem an error message is present.  The default will also be processed
        in addition to this special "error" style.
    }
  

The valid message properties are: fatal, error, warning, confirmation, and info. Typically these styles will only be defined on input elements, and they are of the form of a CSS pseudo-class (:fatal, :error, etc).

It is recommended that you use the aliases for the messages, if possible, since they will affect all the components, and you will have to style fewer selectors.

See also

Component Group: CodeEditor

Common Pseudo-classes

Several CSS pseudo-classes apply to almost every component. Some of these, such as :active and :hover are defined by the CSS specification. Most, are specific to ADF Faces and apply in well-defined cases. When combined together in the same selector, the selector applies only when all states are statisfied. Thus, :hover applies to any component with the mouse hovered over it, while :disabled:hover applies to components that are both disabled and have the mouse hovered over them.

Themes

The purpose of themes is to provide a consistent look and feel across multiple components for a portion of a page. A common usage for themes is in a page template where certain areas have a distinct look. For example, a page may have a branding area at the top with a dark background and light text, a navigation component with a lighter background, and a main content area with a light background.

af:activeCommandToolbarButton

af:activeImage

af:activeOutputText

af:breadCrumbs

af:button

af:body

af:calendar

af:carousel

af:carouselItem

af:chooseColor

af:chooseDate

af:chooseNumberSpinwheel

af:column

af:commandButton

af:commandImageLink

af:commandLink

af:commandMenuItem

A commandMenuItem can be a child of a menu or a menuBar.

When present on a menu, the commandMenuItem is identified by the style "af|commandMenuItem::menu-item". The commandMenuItem is further defined by 4 major sections, the "menu-item-icon-style" which contains the optional icon attribute, the "menu-item-text" which contains the commandMenuItem text, the "menu-item-accelerator" which contains the commandMenuItem accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open icon appears.

When present on a menuBar, the commandMenuItem is identified by the style "af|commandMenuItem::bar-item". The bar item is further defined by 2 major sections, the "bar-item-icon-style" which contains the optional icon attribute, and the "bar-item-text" which contains the commandMenuItem text.

af:commandNavigationItem

af:commandToolbarButton

af:contextInfo

af:conveyorBelt

af:decorativeBox

af:deck

af:dialog

af:document

af:form

af:goButton

af:goImageLink

af:goLink

af:goMenuItem

A goMenuItem can be a child of a menu or a menuBar.

When present on a menu, the goMenuItem is identified by the style "af|goMenuItem::menu-item". Like commandMenuItem and submenus, the goMenuItem is further defined by 4 major sections, the "menu-item-icon-style" which contains the optional icon attribute, the "menu-item-text" which contains the goMenuItem text, the "menu-item-accelerator" which contains the goMenuItem accelerator, and the "menu-item-open-indicator" which is the empty space corresponding to where a submenu's open icon appears.

When present on a menuBar, the goMenuItem is identified by the style "af|goMenuItem::bar-item". The bar item is further defined by 2 major sections, the "bar-item-icon-style" which contains the optional icon attribute, and the "bar-item-text" which contains the goMenuItem text.

af:group

af:help

Special tag for configuring properties for dynamic help.

af:icon There are no skinning selectors for this component.

af:inlineFrame

af:inputColor

af:inputComboboxListOfValues

af:inputDate

af:inputFile

af:inputListOfValues

af:inputNumberSlider

See also the selectors for af:inputRangeSlider. Most likely when you skin the af:inputNumberSlider component you'll want to skin the af:inputRangeSlider component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|inputNumberSlider::label, af|inputRangeSlider::label {background-color: silver}.

af:inputNumberSpinbox

af:inputRangeSlider

See also the selectors for af:inputNumberSlider. Most likely when you skin the af:inputRangeSlider component you'll want to skin the af:inputNumberSlider component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|inputNumberSlider::label, af|inputRangeSlider::label {background-color: silver}.

af:inputSearch

af:inputText

af:link

af:listItem

af:listView

af:masonryLayout

af:media

af:menu

There are 2 parts to a menu. One is the menu itself - meaning the popup that opens up and shows the children contained inside the menu. The other part is the menu link - the menu text and open icon that you click to open the menu. Menus can appear as children of two components. A menu can appear inside a menuBar - this is a normal or top-level menu. Alternately a menu can appear inside another menu - this is a submenu or nested menu.

The top-level menu link that appears on a menuBar is identified by the style "af|menu::bar-item". The menu bar item is further defined by 3 major sections, the "bar-item-icon-style" which contains the optional icon attribute, the "bar-item-text" which contains the menu text, and the "bar-item-open-icon-style" which contains the icon that opens the menu itself.

A nested submenu link (a menu inside a menu) is identified by the style "af|menu::submenu". The submenu is further defined by 4 major sections, the "submenu-icon-style" which contains the optional icon attribute, the "submenu-text" which contains the menu text, the "submenu-accelerator" which is the empty space corresponding to where a commandMenuItem's or goMenuItem's accelerator appears, and the "submenu-open-indicator" which is the space where the open indicator ("submenu-open-icon-style") appears.

af:menuBar

af:message

These styles may also be used when automatically displaying messaging for components even when no message component is on the page.

af:messages

These styles may also be used when automatically displaying messaging for the page even when no messages component is on the page.

af:navigationPane

af:noteWindow

af:outputFormatted

af:outputLabel

af:outputText

af:pageTemplate

af:panelAccordion

af:panelBorderLayout

af:panelBox

The panelBox component has attributes "ramp" and "background". With these attributes, the panelBox provides 8 different color schemes. For example, when panelBox's ramp="core" and background="dark", the panelBox's background-color might be a dark blue. When the panelBox's ramp="highlight" and background="default", the panelBox's background-color might be white.

The following selectors are all augmented by the two pseudo-classes. The first pseudo-class is the ramp which can have values of ":core" or ":highlight". The second pseudo-class is the background which can have the values of ":default", ":light", ":medium" or ":dark". For example, if you want to change the background color on the header start cell when the panelBox's ramp attribute is "core" and background attribute is "default" do the following: "af|panelBox::header-start:core:default {background-color:pink; border: none;}". NOTE: You can use the aliases to make change the header and content. These .AFPanelBox aliases are also included in the region selectors. For example, .AFPanelBoxHeaderCoreMedium:alias is included in the selectors af|panelBox::header-start:core:medium, af|panelBox::header-center:core:medium, af|panelBox::header-end:core:medium. So if you want to change the background color of the core medium panelBox'sheader, you can use the .AFPanelBoxHeaderCoreMedium:alias instead of three selectors.

af:panelCollection

af:panelDashboard

af:panelDrawer

af:panelFormLayout

af:panelGridLayout

af:panelGroupLayout

af:panelHeader

af:panelLabelAndMessage

af:panelList

af:panelSplitter

af:panelSpringboard

af:panelStretchLayout

af:panelTabbed

af:panelWindow

af:popup

af:progressIndicator

af:query

af:quickQuery

af:region

af:resetButton

af:richTextEditor

af:codeEditor

af:searchSection

af:selectBooleanCheckbox

af:selectBooleanRadio

af:selectManyCheckbox

af:selectManyChoice

af:selectManyListbox

af:selectManyShuttle

See also the selectors for af:selectOrderShuttle. Most likely when you skin the af:selectManyShuttle component you'll want to skin the af:selectOrderShuttle component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|selectOrderShuttle::desc-cell, af|selectManyShuttle::desc-cell {background-color: silver}.

af:selectOneChoice

af:selectOneListbox

af:selectOneRadio

af:selectOrderShuttle

See also the selectors for af:selectManyShuttle. Most likely when you skin the af:selectOrderShuttle component you'll want to skin the af:selectManyShuttle component the same way. You can do this in CSS by using a comma to separate the selectors, like: af|selectOrderShuttle::desc-cell, af|selectManyShuttle::desc-cell {background-color: silver}.

af:separator

af:showDetail

af:showDetailHeader

af:showDetailItem

af:spacer

af:statusIndicator

af:switcher

af:table

af:toolbar

af:toolbox