You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by ma...@apache.org on 2008/02/22 07:51:17 UTC
svn commit: r630105 [2/2] -
/myfaces/trinidad/trunk/src/site/xdoc/skin-selectors.xml
Modified: myfaces/trinidad/trunk/src/site/xdoc/skin-selectors.xml
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk/src/site/xdoc/skin-selectors.xml?rev=630105&r1=630104&r2=630105&view=diff
==============================================================================
--- myfaces/trinidad/trunk/src/site/xdoc/skin-selectors.xml (original)
+++ myfaces/trinidad/trunk/src/site/xdoc/skin-selectors.xml Thu Feb 21 22:51:06 2008
@@ -30,7 +30,7 @@
<a href="#Overview">Overview</a>
</li>
<li>
- <a href="#GlobalSelectors">Global Selectors</a>
+ <a href="#Global Selectors">Global Selectors</a>
</li>
<li>
<a href="#ComponentLevelSelectors">Component-level Selectors</a>
@@ -545,6 +545,99 @@
</tr>
</table>
</subsection>
+ <a name="breadCrumbs"></a>
+ <subsection name="tr:breadCrumbs Component">
+ <table>
+ <tr>
+ <th colspan="2">
+ <i>Style Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>af|breadCrumbs</td>
+ <td>Styles the tr:breadCrumbs content.</td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|breadCrumbs::disabled-step</td>
+ <td>Styles the disabled step of tr:breadCrumbs.</td>
+ </tr>
+ <tr>
+ <td>af|breadCrumbs::separator</td>
+ <td>Styles the tr:breadCrumbs steps.</td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|breadCrumbs::selected-step</td>
+ <td>Styles the selected step of tr:breadCrumbs. This step may be hidden
+ if the -tr-show-last-item property is set to false.</td>
+ </tr>
+ <tr>
+ <td>af|breadCrumbs::step</td>
+ <td>Styles the tr:breadCrumbs steps.</td>
+ </tr>
+ <tr>
+ <td>.AFPath:alias</td>
+ <td>The .AFPath:alias style defines style properties that are shared
+ by both af|breadCrumbs and af|treeTable::path.</td>
+ </tr>
+ <tr>
+ <td>.AFPathSeparator:alias</td>
+ <td>The .AFPathSeparator:alias style defines style properties that
+ used by both af|breadCrumbs::separator.</td>
+ </tr>
+ <tr>
+ <td>.AFPathStep:alias</td>
+ <td>The .AFPathStep:alias style defines style properties that are
+ shared by both af|breadCrumbs::step and af|treeTable::path-step</td>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">.AFPathSelectedStep:alias</td>
+ <td>The .AFPathSelectedStep:alias style defines style properties
+ that are shared by both af|breadCrumbs::selected-step and
+ af|treeTable::path-selected-step</td>
+ </tr>
+ <tr>
+ <th colspan="2">
+ <i>Icon Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td style="white-space: nowrap">af|breadCrumbs::separator-icon</td>
+ <td>The separator icon that is rendered between tr:breadCrumbs links.
+ This is typically a text icon, like '>'.</td>
+ </tr>
+ <tr>
+ <td>.AFPathSeparatorIcon:alias</td>
+ <td>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.</td>
+ </tr>
+ <tr>
+ <th colspan="2">
+ <i>Trinidad properties</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>-tr-show-last-item</td>
+ <td>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.</td>
+ </tr>
+ </table>
+ </subsection>
+ <a name="chooseDate"></a>
<subsection name="tr:chooseDate Component">
<table>
<tr>
@@ -607,6 +700,7 @@
</tr>
</table>
</subsection>
+ <a name="column"></a>
<subsection name="tr:column Component">
<table>
<tr>
@@ -681,21 +775,7 @@
<td style="white-space: nowrap">af|column::sortable-header-icon-format</td>
<td>Styles the icon sortable column headers.</td>
</tr>
- <tr>
- <td>af|column::sorted-header-text</td>
- <td>Styles the currently sorted column header.
- You can style the borders with this selector as well.</td>
- </tr>
- <tr>
- <td>af|column::sorted-header-number</td>
- <td>Styles the numeric sorted column header.
- This includes the af|column::sorted-header-text selector.</td>
- </tr>
- <tr>
- <td style="white-space: nowrap">af|column::sorted-header-icon-format</td>
- <td>Styles the icon of the sorted column header.</td>
- </tr>
- <tr>
+ <tr>
<td>.AFTableCellDataText:alias</td>
<td>Specifies the font family, font size and color for table data
text. This is included in the af|column::cell* selectors.</td>
@@ -747,6 +827,7 @@
</tr>
</table>
</subsection>
+ <a name="commandButton"></a>
<subsection name="tr:commandButton Component">
<table>
<tr>
@@ -770,6 +851,7 @@
</tr>
</table>
</subsection>
+ <a name="goButton"></a>
<subsection name="tr:goButton Component">
<table>
<tr>
@@ -793,6 +875,7 @@
</tr>
</table>
</subsection>
+ <a name="inputColor"></a>
<subsection name="tr:inputColor Component">
<table>
<tr>
@@ -853,6 +936,7 @@
</tr>
</table>
</subsection>
+ <a name="inputDate"></a>
<subsection name="tr:inputDate Component">
<table>
<tr>
@@ -923,6 +1007,7 @@
</tr>
</table>
</subsection>
+ <a name="inputListOfValues"></a>
<subsection name="tr:inputListOfValues Component">
<table>
<tr>
@@ -974,63 +1059,12 @@
</tr>
</table>
</subsection>
- <subsection name="tr:inputText Component">
- <table>
- <tr>
- <th colspan="3">
- <i>Style Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|inputText</td>
- <td>Style on the root element of the tr:inputText component.</td>
- </tr>
-
- <tr>
- <td>af|inputText:disabled</td>
- <td>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"</td>
- </tr>
- <tr>
- <td>af|inputText:readOnly</td>
- <td>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:readOnly::label"</td>
- </tr>
-
- <tr>
- <td>af|inputText::content</td>
- <td>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.</td>
- </tr>
- <tr>
- <td>af|inputText::label</td>
- <td>Style on the label of the tr:inputText component.
- This includes .AFLabel:alias style selector.</td>
- </tr>
- <tr>
- <td>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</td>
- <td>AFFieldTextMarker, AFFieldTextLTRMarker, AFPhoneFieldTextMarker, AFPostalCodeFieldTextMarker, AFAddressFieldTextMarker,
- AFFieldNumberMarker</td>
- </tr>
- </table>
- </subsection>
+
+ <a name="inputNumberSpinbox"></a>
<subsection name="tr:inputNumberSpinbox Component">
<table>
<tr>
- <th colspan="3">
+ <th colspan="2">
<i>Style Selectors</i>
</th>
</tr>
@@ -1078,34 +1112,9 @@
<td>AFFieldTextMarker, AFFieldTextLTRMarker, AFFieldNumberMarker</td>
</tr>
</table>
- </subsection>
- <subsection name="tr:menuBar Component">
- <p>The tr:menuBar is implemented using an inner table nested within an
- outer table. The outer table contains cells for the
- af|menuBar::start-icon and af|menuBar::end-icon icons, as well as a
- cell for the nested inner table. The inner table contains the actual
- contents of the menuBar - which includes the tr:menuBar items if any
- items exist, or possibly the tr:menuBar title if no items are
- specified.</p>
- <p>Style properties can be applied to either the outer table or the
- inner table, depending on how the styles are meant to be used. The
- af|menuBar style can be used to apply styles to the entire menuBar -
- including the af|menuBar::start-icon/af|menuBar::end-icon icons.
- Note, however, that if these icons are transparent, then setting the
- background color or borders on the af|menuBar style class itself is
- probably not desirable, since the background color will show through
- any transparent pixels in the icons.</p>
- <p>Three other styles can be used to apply styles to the inner contents
- of the tr:menuBar (not including the af|menuBar::start-icon and
- af|menuBar::end-icon icons). If the tr:menuBar contains any items,
- the af|menuBar::body style class is used to style the inner table
- which contains the items. This is a good choice for specifying a
- background color for the tr:menuBar, since this background color is
- not applied to the tr:menuBar's outer icons. If no tr:menuBar items
- are present, but the tr:menuBar's text attribute is specified, the
- af|menuBar::title style class is rendered on the inner table instead
- of af|menuBar::body. If no children are present and there is no
- title, the af|menuBar::empty title is used.</p>
+ </subsection>
+ <a name="inputText"></a>
+ <subsection name="tr:inputText Component">
<table>
<tr>
<th colspan="2">
@@ -1117,55 +1126,59 @@
<th>Description</th>
</tr>
<tr>
- <td>af|menuBar</td>
- <td>Styles the menuBar container itself.</td>
- </tr>
- <tr>
- <td>af|menuBar::body</td>
- <td>Styles the menuBar's inner table when the menuBar contains child
- items.</td>
- </tr>
- <tr>
- <td>af|menuBar::title</td>
- <td>Styles the menuBar's inner table when the menuBar does not
- contain any child items but does have its text attribute set.</td>
- </tr>
- <tr>
- <td>af|menuBar::empty</td>
- <td>Styles empty menuBars - that is, menuBars which do not have any
- children or a title.</td>
- </tr>
- <tr>
- <td>af|menuBar::enabled</td>
- <td>Styles enabled items in the menuBar.</td>
+ <td>af|inputText</td>
+ <td>Style on the root element of the tr:inputText component.</td>
</tr>
+
<tr>
- <td>af|menuBar::selected</td>
- <td>Styles selected items in the menuBar.</td>
+ <td>af|inputText:disabled</td>
+ <td>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"</td>
</tr>
<tr>
- <td>af|menuBar::separator</td>
- <td>Styles the menuBar separator items.</td>
+ <td>af|inputText:readOnly</td>
+ <td>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:readOnly::label"</td>
</tr>
+
<tr>
- <td>af|menuBar::enabled-link</td>
- <td>Styles enabled links in the menuBar.</td>
+ <td>af|inputText::content</td>
+ <td>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.</td>
</tr>
<tr>
- <td>af|menuBar::selected-link</td>
- <td>Styles selected links in the menuBar.</td>
- </tr>
+ <td>af|inputText::label</td>
+ <td>Style on the label of the tr:inputText component.
+ This includes .AFLabel:alias style selector.</td>
+ </tr>
<tr>
- <td>.AFMenuBarItem:alias</td>
- <td>The .AFMenuBarItem:alias style defines style properties that are
- shared by all 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 af|menuBar::enabled and af|menuBar::selected.</td>
+ <td>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</td>
+ <td>AFFieldTextMarker, AFFieldTextLTRMarker, AFPhoneFieldTextMarker, AFPostalCodeFieldTextMarker, AFAddressFieldTextMarker,
+ AFFieldNumberMarker</td>
</tr>
+ </table>
+ </subsection>
+ <a name="messages"></a>
+ <subsection name="tr:messages Component">
+ <p>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.</p>
+ <table>
<tr>
<th colspan="2">
- <i>Icon Selectors</i>
+ <i>Style Selectors</i>
</th>
</tr>
<tr>
@@ -1173,37 +1186,41 @@
<th>Description</th>
</tr>
<tr>
- <td>af|menuBar::start-icon</td>
- <td>This icon is rendered at the start of the af|menuBar.</td>
+ <td>.AFHeaderLevelOne</td>
+ <td>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</td>
</tr>
<tr>
- <td>af|menuBar::end-icon</td>
- >
- <td>This icon is rendered at the end of the af|menuBar.</td>
+ <td>af|messages</td>
+ <td>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...</td>
</tr>
<tr>
- <td style="white-space: nowrap">af|menuBar::leading-separator-icon</td>
- <td>This icon is rendered before the first item in the af|menuBar.</td>
+ <td>af|messages::body</td>
+ <td>Styles the messages's inner table, which does not include any
+ outer icons.</td>
</tr>
<tr>
- <td style="white-space: nowrap">af|menuBar::trailing-separator-icon</td>
- <td>This icon is rendered after the last item in the af|menuBar.</td>
+ <td>af|messages::message-text</td>
+ <td>Styles the 'text' attribute of tr:messages if present.</td>
</tr>
<tr>
- <td style="white-space: nowrap">af|menuBar::background-icon</td>
- <td>This icon is rendered as the background of the af|menuBar.</td>
+ <td>af|messages::list</td>
+ <td>Styles the list of messages inside of af|messages::body</td>
</tr>
<tr>
- <td style="white-space: nowrap">af|menuBar::separator-icon</td>
- <td>This icon is rendered between items.</td>
+ <td>af|messages::list-single</td>
+ <td>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.</td>
</tr>
- </table>
- </subsection>
- <subsection name="tr:menuButtons Component">
- <table>
<tr>
<th colspan="2">
- <i>Style Selectors</i>
+ <i>Icon Selectors</i>
</th>
</tr>
<tr>
@@ -1211,272 +1228,93 @@
<th>Description</th>
</tr>
<tr>
- <td>af|menuButtons::text</td>
- <td>Styles the enabled menu buttons text.</td>
+ <td>af|messages::top-start</td>
+ <td>This icon is rendered at the top starting corner of the messages
+ (ie. at the top left corner for left to right languages.)</td>
</tr>
<tr>
- <td>af|menuButtons::text-selected</td>
- <td>Styles the selected menu buttons text.</td>
+ <td>af|messages::top</td>
+ <td>This icon is rendered in the background in between the
+ af|messages::top-start-icon and af|messages::top-end-icon icons.</td>
</tr>
<tr>
- <td>af|menuButtons::text-disabled</td>
- <td>Styles the disabled menu buttons text.</td>
+ <td>af|messages::top-end</td>
+ <td>This icon is rendered at the top ending corner of the messages
+ (ie. at the top right corner for left to right languages.)</td>
</tr>
<tr>
- <td>.AFMenuButtons:alias</td>
- <td>The .AFMenuButtons:alias style defines style properties that are
- shared by all menuButtons selectors: af|menuButtons::text,
- af|menuButtons::text-selected, and af|menuButtons::text-disabled.</td>
+ <td>af|messages::start</td>
+ <td>This icon is rendered in the background at the start of the
+ messages.</td>
</tr>
<tr>
- <th colspan="2">
- <i>Icon Selectors</i>
- </th>
+ <td>af|messages::end</td>
+ <td>This icon is rendered in the background at the end of the
+ messages.</td>
</tr>
<tr>
- <th>Name</th>
- <th>Description</th>
+ <td>af|messages::bottom-start</td>
+ <td>This icon is rendered at the bottom starting corner of the
+ messages (ie. at the bottom left corner for left to right
+ languages.)</td>
</tr>
<tr>
- <td style="white-space: nowrap">af|menuButtons::separator-icon</td>
- <td>The separator icon that is rendered between tr:menuButtons. This
- is typically a text icon, like |.</td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:menuChoice Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Style Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|menuChoice::label</td>
- <td>Styles the tr:menuChoice's label.</td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:menuList Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Style Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|menuList</td>
- <td>Styles the menuList.</td>
- </tr>
- <tr>
- <td>af|menuList::selected</td>
- <td>Styles the selected menuList.</td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:breadCrumbs Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Style Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|breadCrumbs</td>
- <td>Styles the tr:breadCrumbs content.</td>
- </tr>
- <tr>
- <td style="white-space: nowrap">af|breadCrumbs::disabled-step</td>
- <td>Styles the disabled step of tr:breadCrumbs.</td>
- </tr>
- <tr>
- <td>af|breadCrumbs::separator</td>
- <td>Styles the tr:breadCrumbs steps.</td>
- </tr>
- <tr>
- <td style="white-space: nowrap">af|breadCrumbs::selected-step</td>
- <td>Styles the selected step of tr:breadCrumbs. This step may be hidden
- if the -tr-show-last-item property is set to false.</td>
- </tr>
- <tr>
- <td>af|breadCrumbs::step</td>
- <td>Styles the tr:breadCrumbs steps.</td>
- </tr>
- <tr>
- <td>.AFPath:alias</td>
- <td>The .AFPath:alias style defines style properties that are shared
- by both af|breadCrumbs and af|treeTable::path.</td>
- </tr>
- <tr>
- <td>.AFPathSeparator:alias</td>
- <td>The .AFPathSeparator:alias style defines style properties that
- used by both af|breadCrumbs::separator.</td>
- </tr>
- <tr>
- <td>.AFPathStep:alias</td>
- <td>The .AFPathStep:alias style defines style properties that are
- shared by both af|breadCrumbs::step and af|treeTable::path-step</td>
- </tr>
- <tr>
- <td style="white-space: nowrap">.AFPathSelectedStep:alias</td>
- <td>The .AFPathSelectedStep:alias style defines style properties
- that are shared by both af|breadCrumbs::selected-step and
- af|treeTable::path-selected-step</td>
- </tr>
- <tr>
- <th colspan="2">
- <i>Icon Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td style="white-space: nowrap">af|breadCrumbs::separator-icon</td>
- <td>The separator icon that is rendered between tr:breadCrumbs links.
- This is typically a text icon, like '>'.</td>
- </tr>
- <tr>
- <td>.AFPathSeparatorIcon:alias</td>
- <td>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.</td>
- </tr>
- <tr>
- <th colspan="2">
- <i>Trinidad properties</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>-tr-show-last-item</td>
- <td>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.</td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:menuTabs Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Style Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|menuTabs</td>
- <td>Styles the tr:menuTabs container.</td>
- </tr>
- <tr>
- <td>af|menuTabs::enabled</td>
- <td>Styles the enabled items.</td>
- </tr>
- <tr>
- <td>af|menuTabs::selected</td>
- <td>Styles the selected item.</td>
- </tr>
- <tr>
- <td>af|menuTabs::disabled</td>
- <td>Styles the disabled item.</td>
- </tr>
- <tr>
- <td>af|menuTabs::enabled-link</td>
- <td>Styles link-specific styles to enabled links.</td>
- </tr>
- <tr>
- <td>af|menuTabs::selected-link</td>
- <td>Styles link-specific styles to selected links.</td>
- </tr>
- <tr>
- <td>.AFTabBarItem:alias</td>
- <td>The .AFTabBarItem:alias style defines style properties that are
- shared by all menuTabs items. This alias style is included by
- the af|menuTabs::enabled, af|menuTabs::selected and
- af|menuTabs::disabled style classes.</td>
- </tr>
- <tr>
- <td>.AFTabBarLink:alias</td>
- <td>The .AFTabBarLink:alias style defines style properties that are
- shared by all links within the tabBar. This alias style is
- included by the "af|menuTabs::enabled-link" and
- "af|menuTabs::selected-link" selectors.</td>
- </tr>
- <tr>
- <th colspan="2">
- <i>Icon Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
+ <td>af|messages::bottom</td>
+ <td>This icon is rendered in the background in between the
+ af|messages::bottom-start-icon and af|messages::bottom-end-icon
+ icons.</td>
</tr>
<tr>
- <td>af|menuTabs::enabled-start-icon</td>
- <td>This icon is rendered at the start of each enabled menuTab item.</td>
+ <td>af|messages::bottom-end</td>
+ <td>This icon is rendered at the bottom ending corner of the
+ messages (ie. at the bottom right corner for left to right
+ languages.)</td>
</tr>
<tr>
- <td>af|menuTabs::enabled-end-icon</td>
- <td>This icon is rendered at the end of each enabled menuTab item.</td>
+ <td>af|messages::error-icon</td>
+ <td>The icon that is displayed for error messages.</td>
</tr>
<tr>
- <td>af|menuTabs::enabled-background-icon</td>
- <td>This icon is rendered in the background each enabled menuTab
- item.</td>
+ <td>af|messages::warning-icon</td>
+ <td>The icon that is displayed for warning messages.</td>
</tr>
<tr>
- <td>af|menuTabs::selected-start-icon</td>
- <td>This icon is rendered at the start of the selected menuTab item.</td>
+ <td>af|messages::info-icon</td>
+ <td>The icon that is displayed for information messages.</td>
</tr>
<tr>
- <td>af|menuTabs::selected-end-icon</td>
- <td>This icon is rendered at the end of the selected menuTab item.</td>
+ <td style="white-space: nowrap">af|messages::confirmation-icon</td>
+ <td>The icon that is displayed for confirmation messages.</td>
</tr>
<tr>
- <td>af|menuTabs::selected-background-icon</td>
- <td>This icon is rendered in the background the selected menuTab
- item.</td>
+ <td>.AFHeaderErrorIcon:alias</td>
+ <td>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</td>
</tr>
<tr>
- <td>af|menuTabs::enabled-join-icon</td>
- <td>This icon is rendered in between two enabled menuTab items.</td>
+ <td>.AFHeaderWarningIcon:alias</td>
+ <td>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</td>
</tr>
<tr>
- <td>af|menuTabs::enabled-selected-join-icon</td>
- <td>This icon is rendered in between an enabled tabBar item and the
- selected menuTab item. That is, when the reading direction is
- left to right, the join connects an enabled item with a selected
- item to the right of the enabled item.</td>
+ <td>.AFHeaderInfoIcon:alias</td>
+ <td>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</td>
</tr>
<tr>
- <td style="white-space: nowrap">af|menuTabs::selected-enabled-join-icon</td>
- <td>Thisicon is rendered in between the selected menuTab item and an
- enabled menuTab item. That is, when the reading direction is
- left to right, the join connects a selected item with an enabled
- item to the right of the selected item.</td>
+ <td>.AFHeaderConfirmationIcon:alias</td>
+ <td>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</td>
</tr>
</table>
</subsection>
+
+ <a name="navigationPane"></a>
<subsection name="tr:navigationPane hint='bar'">
<table>
<tr>
@@ -1521,6 +1359,7 @@
</tr>
</table>
</subsection>
+ <a name="navigationPane"></a>
<subsection name="tr:navigationPane hint='buttons'">
<p>Not yet documented.</p>
<table>
@@ -1535,6 +1374,7 @@
</tr>
</table>
</subsection>
+ <a name="navigationPane"></a>
<subsection name="tr:navigationPane hint='choice'">
<p>Not yet documented.</p>
<table>
@@ -1549,6 +1389,7 @@
</tr>
</table>
</subsection>
+
<subsection name="tr:navigationPane hint='list'">
<p>Not yet documented.</p>
<table>
@@ -1563,6 +1404,7 @@
</tr>
</table>
</subsection>
+
<subsection name="tr:navigationPane hint='tabs'">
<p>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
@@ -1734,6 +1576,7 @@
</table>
</subsection>
+ <a name="navigationTree"></a>
<subsection name="tr:navigationTree">
<table>
<tr>
@@ -1770,13 +1613,10 @@
</tr>
</table>
</subsection>
- <subsection name="tr:messages Component">
- <p>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.</p>
+
+
+ <a name="outputDocument"></a>
+ <subsection name="tr:outputDocument Component">
<table>
<tr>
<th colspan="2">
@@ -1788,41 +1628,29 @@
<th>Description</th>
</tr>
<tr>
- <td>.AFHeaderLevelOne</td>
- <td>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</td>
- </tr>
- <tr>
- <td>af|messages</td>
- <td>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...</td>
- </tr>
- <tr>
- <td>af|messages::body</td>
- <td>Styles the messages's inner table, which does not include any
- outer icons.</td>
+ <td>af|outputDocument</td>
+ <td>Styles the tr:outputDocument component's container element.</td>
</tr>
<tr>
- <td>af|messages::message-text</td>
- <td>Styles the 'text' attribute of tr:messages if present.</td>
+ <td>af|outputDocument::title</td>
+ <td>Styles the tr:outputDocument component's title element.</td>
</tr>
<tr>
- <td>af|messages::list</td>
- <td>Styles the list of messages inside of af|messages::body</td>
+ <td>af|outputDocument::paragraph</td>
+ <td>Styles the tr:outputDocument component's paragraphs.</td>
</tr>
<tr>
- <td>af|messages::list-single</td>
- <td>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.</td>
+ <td>af|outputDocument::separator</td>
+ <td>Styles the tr:outputDocument component's separator placed between paragraphes.</td>
</tr>
+ </table>
+ </subsection>
+ <a name="panelAccordion"></a>
+ <subsection name="tr:panelAccordion Component">
+ <table>
<tr>
<th colspan="2">
- <i>Icon Selectors</i>
+ <i>Style Selectors</i>
</th>
</tr>
<tr>
@@ -1830,137 +1658,43 @@
<th>Description</th>
</tr>
<tr>
- <td>af|messages::top-start</td>
- <td>This icon is rendered at the top starting corner of the messages
- (ie. at the top left corner for left to right languages.)</td>
+ <td>af|panelAccordion</td>
+ <td>This can be used to style the root element of a panelAccordion.</td>
</tr>
<tr>
- <td>af|messages::top</td>
- <td>This icon is rendered in the background in between the
- af|messages::top-start-icon and af|messages::top-end-icon icons.</td>
+ <td>af|panelAccordion::content</td>
+ <td>This can be used to style the parent element of each showDetailItem in a panelAccordion.</td>
</tr>
<tr>
- <td>af|messages::top-end</td>
- <td>This icon is rendered at the top ending corner of the messages
- (ie. at the top right corner for left to right languages.)</td>
- </tr>
- <tr>
- <td>af|messages::start</td>
- <td>This icon is rendered in the background at the start of the
- messages.</td>
- </tr>
- <tr>
- <td>af|messages::end</td>
- <td>This icon is rendered in the background at the end of the
- messages.</td>
- </tr>
- <tr>
- <td>af|messages::bottom-start</td>
- <td>This icon is rendered at the bottom starting corner of the
- messages (ie. at the bottom left corner for left to right
- languages.)</td>
- </tr>
- <tr>
- <td>af|messages::bottom</td>
- <td>This icon is rendered in the background in between the
- af|messages::bottom-start-icon and af|messages::bottom-end-icon
- icons.</td>
- </tr>
- <tr>
- <td>af|messages::bottom-end</td>
- <td>This icon is rendered at the bottom ending corner of the
- messages (ie. at the bottom right corner for left to right
- languages.)</td>
- </tr>
- <tr>
- <td>af|messages::error-icon</td>
- <td>The icon that is displayed for error messages.</td>
- </tr>
- <tr>
- <td>af|messages::warning-icon</td>
- <td>The icon that is displayed for warning messages.</td>
- </tr>
- <tr>
- <td>af|messages::info-icon</td>
- <td>The icon that is displayed for information messages.</td>
- </tr>
- <tr>
- <td style="white-space: nowrap">af|messages::confirmation-icon</td>
- <td>The icon that is displayed for confirmation messages.</td>
- </tr>
- <tr>
- <td>.AFHeaderErrorIcon:alias</td>
- <td>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</td>
- </tr>
- <tr>
- <td>.AFHeaderWarningIcon:alias</td>
- <td>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</td>
- </tr>
- <tr>
- <td>.AFHeaderInfoIcon:alias</td>
- <td>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</td>
- </tr>
- <tr>
- <td>.AFHeaderConfirmationIcon:alias</td>
- <td>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</td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:separator Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Style Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|separator</td>
- <td>Styles the tr:separator component.</td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:outputDocument Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Style Selectors</i>
- </th>
+ <td>af|panelAccordion::header-collapsed</td>
+ <td>This can be used to style the header region of each collapsed showDetailItem in a panelAccordion.</td>
</tr>
<tr>
- <th>Name</th>
- <th>Description</th>
+ <td>af|panelAccordion::header-disabled</td>
+ <td>This can be used to style the header region of each disabled showDetailItem in a panelAccordion.</td>
</tr>
<tr>
- <td>af|outputDocument</td>
- <td>Styles the tr:outputDocument component's container element.</td>
+ <td>af|panelAccordion::header-expanded</td>
+ <td>This can be used to style the header region of each expanded showDetailItem in a panelAccordion.</td>
</tr>
+
<tr>
- <td>af|outputDocument::title</td>
- <td>Styles the tr:outputDocument component's title element.</td>
+ <td>af|panelAccordion::title-link</td>
+ <td>This can be used to style the link element for the title of
+ each enabled showDetailItem in a panelAccordion.</td>
</tr>
<tr>
- <td>af|outputDocument::paragraph</td>
- <td>Styles the tr:outputDocument component's paragraphs.</td>
+ <td>af|panelAccordion::title-disabled-link</td>
+ <td>This can be used to style the link element for the title of
+ each disabled showDetailItem in a panelAccordion.</td>
</tr>
<tr>
- <td>af|outputDocument::separator</td>
- <td>Styles the tr:outputDocument component's separator placed between paragraphes.</td>
+ <td>af|panelAccordion::toolbar</td>
+ <td>This can be used to style the toolbar facet of a showDetailItem in a panelAccordion.</td>
</tr>
</table>
</subsection>
+ <a name="panelBox"></a>
<subsection name="tr:panelBox">
<p>The panelBox contains the body region, which
contains the panelBox header which contains
@@ -2100,6 +1834,7 @@
</table>
</subsection>
+ <a name="panelCaptionGroup"></a>
<subsection name="tr:panelCaptionGroup Component">
<table>
<tr>
@@ -2122,6 +1857,7 @@
</tr>
</table>
</subsection>
+ <a name="panelFormLayout"></a>
<subsection name="tr:panelFormLayout Component">
<table>
<tr>
@@ -2169,94 +1905,7 @@
</tr>
</table>
</subsection>
- <subsection name="tr:panelLabelAndMessage Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Style Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|panelLabelAndMessage::help-facet</td>
- <td>Specifies the style information for the help-facet text of a
- panelLabelAndMessage.</td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:panelList Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Style Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|panelList</td>
- <td>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.</td>
- </tr>
- </table>
- </subsection>
-
- <subsection name="tr:panelAccordion Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Style Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|panelAccordion</td>
- <td>This can be used to style the root element of a panelAccordion.</td>
- </tr>
- <tr>
- <td>af|panelAccordion::content</td>
- <td>This can be used to style the parent element of each showDetailItem in a panelAccordion.</td>
- </tr>
- <tr>
- <td>af|panelAccordion::header-collapsed</td>
- <td>This can be used to style the header region of each collapsed showDetailItem in a panelAccordion.</td>
- </tr>
- <tr>
- <td>af|panelAccordion::header-disabled</td>
- <td>This can be used to style the header region of each disabled showDetailItem in a panelAccordion.</td>
- </tr>
- <tr>
- <td>af|panelAccordion::header-expanded</td>
- <td>This can be used to style the header region of each expanded showDetailItem in a panelAccordion.</td>
- </tr>
-
- <tr>
- <td>af|panelAccordion::title-link</td>
- <td>This can be used to style the link element for the title of
-each enabled showDetailItem in a panelAccordion.</td>
- </tr>
- <tr>
- <td>af|panelAccordion::title-disabled-link</td>
- <td>This can be used to style the link element for the title of
-each disabled showDetailItem in a panelAccordion.</td>
- </tr>
- <tr>
- <td>af|panelAccordion::toolbar</td>
- <td>This can be used to style the toolbar facet of a showDetailItem in a panelAccordion.</td>
- </tr>
- </table>
- </subsection>
-
-
+ <a name="panelGroupLayout"></a>
<subsection name="tr:panelGroupLayout Component">
<table>
<tr>
@@ -2275,7 +1924,7 @@
</tr>
</table>
</subsection>
-
+ <a name="panelHeader"></a>
<subsection name="tr:panelHeader Component">
<table>
<tr>
@@ -2406,6 +2055,47 @@
</tr>
</table>
</subsection>
+ <a name="panelLabelAndMessage"></a>
+ <subsection name="tr:panelLabelAndMessage Component">
+ <table>
+ <tr>
+ <th colspan="2">
+ <i>Style Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>af|panelLabelAndMessage::help-facet</td>
+ <td>Specifies the style information for the help-facet text of a
+ panelLabelAndMessage.</td>
+ </tr>
+ </table>
+ </subsection>
+ <a name="panelList"></a>
+ <subsection name="tr:panelList Component">
+ <table>
+ <tr>
+ <th colspan="2">
+ <i>Style Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>af|panelList</td>
+ <td>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.</td>
+ </tr>
+ </table>
+ </subsection>
+
+ <a name="panelPage"></a>
<subsection name="tr:panelPage Component">
<table>
<tr>
@@ -2459,6 +2149,7 @@
</tr>
</table>
</subsection>
+ <a name="panelPopup"></a>
<subsection name="tr:panelPopup Component">
<table>
<tr>
@@ -2494,6 +2185,7 @@
</tr>
</table>
</subsection>
+ <a name="panelSideBar"></a>
<subsection name="tr:panelSideBar Component">
<p>This tr:panelSideBar component is implemented using an inner table
nested within an outer table. The outer container is used to lay out
@@ -2580,8 +2272,8 @@
</tr>
</table>
</subsection>
- <subsection name="tr:panelTip Component">
- <p>The tr:panelTip has two regions - a label and the main content.</p>
+ <a name="panelTabbed"></a>
+ <subsection name="tr:panelTabbed Component">
<table>
<tr>
<th colspan="2">
@@ -2593,24 +2285,223 @@
<th>Description</th>
</tr>
<tr>
- <td>af|panelTip</td>
- <td>This style class is rendered on the outer content of the
-panelTip.</td>
+ <td>.AFShowOneTab:alias</td>
+ <td>This style is included in both af|panelTabbed::orientation-top
+ and af|panelTabbed::orientation-bottom.</td>
</tr>
<tr>
- <td>af|panelTip::label</td>
- <td>This style class is rendered on the label of the panelTip.</td>
+ <td>af|panelTabbed::orientation-top</td>
+ <td>This styles the top panelTabbed. You can use this to add padding
+ and margins and borders, for example.</td>
</tr>
<tr>
- <td>af|panelTip::content</td>
- <td>This style class is rendered on the content of the panelTip.</td>
+ <td>af|panelTabbed::orientation-bottom</td>
+ <td>This styles the bottom panelTabbed. You can use this to add
+ padding and margins and borders, for example.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::tab</td>
+ <td>This styles each unselected tab.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::tab-link</td>
+ <td>This styles each unselected tab link.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::tab-selected</td>
+ <td>This styles each selected tab.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::tab-selected-link</td>
+ <td>This styles each selected tab link.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::separator-before-selected</td>
+ <td>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.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::separator-after-selected</td>
+ <td>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.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::separator</td>
+ <td>This style is on the cells between each unselected step.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::cell-start</td>
+ <td>The style on the first cell. You can left-align by setting
+ width:0% on this, and width:100% on cell-end.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::cell-end</td>
+ <td>The style on the last cell.</td>
+ </tr>
+ <tr>
+ <td>af|panelTabbed::body</td>
+ <td>The style on the body of the panelTabbed; ie., the contents.</td>
+ </tr>
+ </table>
+ </subsection>
+ <a name="panelTip"></a>
+ <subsection name="tr:panelTip Component">
+ <p>The tr:panelTip has two regions - a label and the main content.</p>
+ <table>
+ <tr>
+ <th colspan="2">
+ <i>Style Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>af|panelTip</td>
+ <td>This style class is rendered on the outer content of the panelTip.</td>
+ </tr>
+ <tr>
+ <td>af|panelTip::label</td>
+ <td>This style class is rendered on the label of the panelTip.</td>
+ </tr>
+ <tr>
+ <td>af|panelTip::content</td>
+ <td>This style class is rendered on the content of the panelTip.</td>
+ </tr>
+ </table>
+ </subsection>
+ <a name="progressIndicator"></a>
+ <subsection name="tr:progressIndicator Component">
+ <table>
+ <tr>
+ <th colspan="2">
+ <i>Icon Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::indeterminate-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ is -1.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::zero-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is zero percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::five-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is five percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::ten-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is ten percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::fifteen-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is fifteen percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::twenty-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is twenty percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::twenty-five-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is twenty-five percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::thirty-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is thirty percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::thirty-five-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is thirty-five percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::forty-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is forty percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::forty-five-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is forty-five percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::fifty-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is fifty percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::fifty-five-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is fifty-five percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::sixty-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is sixty percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::sixty-five-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is sixty-five percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::seventy-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is seventy percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::seventy-five-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is seventy-five percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::eighty-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is eighty percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::eighty-five-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is eighty-five percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::ninety-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is ninety percent.</td>
+ </tr>
+ <tr>
+ <td>af|progressIndicator::ninety-five-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is ninety-five percent.</td>
+ </tr>
+ <tr>
+ <td style="white-space:nowrap">af|progressIndicator::one-hundred-percent-icon</td>
+ <td>The icon which is displayed when the progressIndicator's value
+ divided by maximum is one-hundred percent.</td>
</tr>
</table>
</subsection>
+ <a name="selectBooleanCheckbox"></a>
<subsection name="tr:selectBooleanCheckbox Component">
<table>
<tr>
- <th colspan="3">
+ <th colspan="2">
<i>Style Selectors</i>
</th>
</tr>
@@ -2644,13 +2535,43 @@
<td>af|selectBooleanCheckbox::label</td>
<td>Style on the label of the tr:selectBooleanCheckbox component.
This includes .AFLabel:alias style selector.</td>
- </tr>
+ </tr>
+ <tr>
+ <th colspan="2">
+ <i>Icon Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>af|selectBooleanCheckbox::disabled-checked-icon</td>
+ <td>The icon that is displayed when the checkbox is readOnly,
+ disabled, and checked.</td>
+ </tr>
+ <tr>
+ <td>af|selectBooleanCheckbox::disabled-unchecked-icon</td>
+ <td>The icon that is displayed when the checkbox is readOnly,
+ disabled, and unchecked.</td>
+ </tr>
+ <tr>
+ <td>af|selectBooleanCheckbox::read-only-checked-icon</td>
+ <td>The icon that is displayed when the checkbox is read-only and
+ checked.</td>
+ </tr>
+ <tr>
+ <td style="white-space:nowrap">af|selectBooleanCheckbox::read-only-unchecked-icon</td>
+ <td>The icon that is displayed when the checkbox is read-only and
+ unchecked.</td>
+ </tr>
</table>
</subsection>
+ <a name="selectBooleanRadio"></a>
<subsection name="tr:selectBooleanRadio Component">
<table>
<tr>
- <th colspan="3">
+ <th colspan="2">
<i>Style Selectors</i>
</th>
</tr>
@@ -2684,14 +2605,10 @@
<td>af|selectBooleanRadio::label</td>
<td>Style on the label of the tr:selectBooleanRadio component.
This includes .AFLabel:alias style selector.</td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:selectManyCheckbox Component">
- <table>
+ </tr>
<tr>
- <th colspan="3">
- <i>Style Selectors</i>
+ <th colspan="2">
+ <i>Icon Selectors</i>
</th>
</tr>
<tr>
@@ -2699,23 +2616,57 @@
<th>Description</th>
</tr>
<tr>
- <td>af|selectManyCheckbox</td>
- <td>Style on the root element of the tr:selectManyCheckbox component.</td>
+ <td>af|selectBooleanRadio::disabled-selected-icon</td>
+ <td>The icon that is displayed when the radio is readOnly, disabled,
+ and selected.</td>
</tr>
<tr>
- <td>af|selectManyCheckbox:disabled</td>
- <td>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"</td>
+ <td>af|selectBooleanRadio::disabled-unselected-icon</td>
+ <td>The icon that is displayed when the radio is readOnly, disabled,
+ and not selected.</td>
</tr>
<tr>
- <td>af|selectManyCheckbox:readOnly</td>
- <td>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:readOnly af|selectManyCheckbox::label"</td>
- </tr>
+ <td>af|selectBooleanRadio::read-only-selected-icon</td>
+ <td>The icon that is displayed when the radio is read-only and
+ selected.</td>
+ </tr>
+ <tr>
+ <td>af|selectBooleanRadio::read-only-unselected-icon</td>
+ <td>The icon that is displayed when the radio is read-only and not
+ selected.</td>
+ </tr>
+ </table>
+ </subsection>
+ <a name="selectManyCheckbox"></a>
+ <subsection name="tr:selectManyCheckbox Component">
+ <table>
+ <tr>
+ <th colspan="2">
+ <i>Style Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>af|selectManyCheckbox</td>
+ <td>Style on the root element of the tr:selectManyCheckbox component.</td>
+ </tr>
+ <tr>
+ <td>af|selectManyCheckbox:disabled</td>
+ <td>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"</td>
+ </tr>
+ <tr>
+ <td>af|selectManyCheckbox:readOnly</td>
+ <td>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:readOnly af|selectManyCheckbox::label"</td>
+ </tr>
<tr>
<td>af|selectManyCheckbox::content</td>
<td>Style on the content of the tr:selectManyCheckbox component.</td>
@@ -2727,10 +2678,11 @@
</tr>
</table>
</subsection>
+ <a name="selectManyListbox"></a>
<subsection name="tr:selectManyListbox Component">
<table>
<tr>
- <th colspan="3">
+ <th colspan="2">
<i>Style Selectors</i>
</th>
</tr>
@@ -2767,6 +2719,7 @@
</tr>
</table>
</subsection>
+ <a name="selectManyShuttle"></a>
<subsection name="tr:selectManyShuttle Component">
<table>
<tr>
@@ -2924,10 +2877,11 @@
</tr>
</table>
</subsection>
+ <a name="selectOneChoice"></a>
<subsection name="tr:selectOneChoice Component">
<table>
<tr>
- <th colspan="3">
+ <th colspan="2">
<i>Style Selectors</i>
</th>
</tr>
@@ -2964,10 +2918,11 @@
</tr>
</table>
</subsection>
+ <a name="selectOneListbox"></a>
<subsection name="tr:selectOneListbox Component">
<table>
<tr>
- <th colspan="3">
+ <th colspan="2">
<i>Style Selectors</i>
</th>
</tr>
@@ -3004,10 +2959,11 @@
</tr>
</table>
</subsection>
+ <a name="selectOneRadio"></a>
<subsection name="tr:selectOneRadio Component">
<table>
<tr>
- <th colspan="3">
+ <th colspan="2">
<i>Style Selectors</i>
</th>
</tr>
@@ -3044,6 +3000,7 @@
</tr>
</table>
</subsection>
+ <a name="selectOrderShuttle"></a>
<subsection name="tr:selectOrderShuttle Component">
<table>
<tr>
@@ -3204,6 +3161,55 @@
</tr>
</table>
</subsection>
+ <a name="selectRangeChoiceBar"></a>
+ <subsection name="tr:selectRangeChoiceBar Component">
+ <table>
+ <tr>
+ <th colspan="2">
+ <i>Icon Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>af|selectRangeChoiceBar::prev-icon</td>
+ <td>The previous icon which is used to go back to previous step.</td>
+ </tr>
+ <tr>
+ <td>af|selectRangeChoiceBar::next-icon</td>
+ <td>The next icon which is used to go back to next step.</td>
+ </tr>
+ <tr>
+ <td>af|selectRangeChoiceBar::prev-disabled-icon</td>
+ <td>The previous icon in its disabled state.</td>
+ </tr>
+ <tr>
+ <td>af|selectRangeChoiceBar::next-disabled-icon</td>
+ <td>The next icon in its disabled state.</td>
+ </tr>
+ </table>
+ </subsection>
+ <a name="separator"></a>
+ <subsection name="tr:separator Component">
+ <table>
+ <tr>
+ <th colspan="2">
+ <i>Style Selectors</i>
+ </th>
+ </tr>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>af|separator</td>
+ <td>Styles the tr:separator component.</td>
+ </tr>
+ </table>
+ </subsection>
+ <a name="showDetail"></a>
<subsection name="tr:showDetail Component">
<table>
<tr>
@@ -3240,6 +3246,7 @@
</tr>
</table>
</subsection>
+ <a name="showDetailHeader"></a>
<subsection name="tr:showDetailHeader Component">
<table>
<tr>
@@ -3337,7 +3344,8 @@
</tr>
</table>
</subsection>
- <subsection name="tr:panelTabbed Component">
+ <a name="statusIndicator"></a>
+ <subsection name="tr:statusIndicator Component">
<table>
<tr>
<th colspan="2">
@@ -3349,67 +3357,56 @@
<th>Description</th>
</tr>
<tr>
- <td>.AFShowOneTab:alias</td>
- <td>This style is included in both af|panelTabbed::orientation-top
- and af|panelTabbed::orientation-bottom.</td>
- </tr>
- <tr>
- <td>af|panelTabbed::orientation-top</td>
- <td>This styles the top panelTabbed. You can use this to add padding
- and margins and borders, for example.</td>
- </tr>
- <tr>
- <td>af|panelTabbed::orientation-bottom</td>
- <td>This styles the bottom panelTabbed. You can use this to add
- padding and margins and borders, for example.</td>
- </tr>
- <tr>
- <td>af|panelTabbed::tab</td>
- <td>This styles each unselected tab.</td>
- </tr>
- <tr>
- <td>af|panelTabbed::tab-link</td>
- <td>This styles each unselected tab link.</td>
+ <td>af|statusIndicator</td>
+ <td>Styles the status indicator as a whole.</td>
</tr>
<tr>
- <td>af|panelTabbed::tab-selected</td>
- <td>This styles each selected tab.</td>
+ <td>af|statusIndicator::busy</td>
+ <td>Styles the status indicator's busy facet</td>
</tr>
<tr>
- <td>af|panelTabbed::tab-selected-link</td>
- <td>This styles each selected tab link.</td>
+ <td>af|statusIndicator::ready</td>
+ <td>Styles the status indicator's ready facet</td>
</tr>
<tr>
- <td>af|panelTabbed::separator-before-selected</td>
- <td>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.</td>
+ <th colspan="2">
+ <i>Icon Selectors</i>
+ </th>
</tr>
<tr>
- <td>af|panelTabbed::separator-after-selected</td>
- <td>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.</td>
+ <th>Name</th>
+ <th>Description</th>
</tr>
<tr>
- <td>af|panelTabbed::separator</td>
- <td>This style is on the cells between each unselected step.</td>
+ <td>af|statusIndicator::busy-icon</td>
+ <td>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.</td>
</tr>
<tr>
- <td>af|panelTabbed::cell-start</td>
- <td>The style on the first cell. You can left-align by setting
- width:0% on this, and width:100% on cell-end.</td>
+ <td>af|statusIndicator::ready-icon</td>
+ <td>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.</td>
</tr>
<tr>
- <td>af|panelTabbed::cell-end</td>
- <td>The style on the last cell.</td>
+ <td>.AFBusyIcon:alias</td>
+ <td>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.</td>
</tr>
<tr>
- <td>af|panelTabbed::body</td>
- <td>The style on the body of the panelTabbed; ie., the contents.</td>
+ <td>.AFReadyIcon:alias</td>
+ <td>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.</td>
</tr>
</table>
</subsection>
+
+ <a name="table"></a>
<subsection name="tr:table Component">
<table>
<tr>
@@ -3514,6 +3511,7 @@
</tr>
</table>
</subsection>
+ <a name="train"></a>
<subsection name="tr:train Component">
<table>
<tr>
@@ -3668,345 +3666,39 @@
</tr>
<tr>
<td>af|train::parent-end</td>
- <td>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.</td>
- </tr>
- <tr>
- <td>af|train::parent-end-icon-cell</td>
- <td>Styles the icon section of the parent-end. This selector is NOT combinable
- with state pseudo-classes. This selector includes .AFTrainIconCell:alias.
- </td>
- </tr>
- <tr>
- <td>af|train::parent-end-content</td>
- <td>Styles the content section of the parent-end. This selector is NOT combinable
- with state pseudo-classes. This selector includes .AFTrainContent:alias.
- </td>
- </tr>
- <tr>
- <td>af|train::join-parent</td>
- <td>Styles the join between parent and stop icons. This selector is NOT combinable
- with state pseudo-classes. This selector includes .AFTrainJoin:alias.</td>
- </tr>
- <tr>
- <td>af|train::link</td>
- <td>Styles the links generated within the stop's content. This selector is
- NOT combinable with state pseudo-classes</td>
- </tr>
- </table>
- <table>
- <tr>
- <th colspan="2">
- <i>Icons</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td colspan="2">
- 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:
- <ul>
- <li>:visited for steps that were already completed (assumed to be all steps
- before the current one, this might change in the future);</li>
- <li>:selected for the current step. This state is not available to overflows;
- </li>
- <li>:unvisited for steps that were not completed by the user (assumed to be
- all steps after the current one, this might change in the future);</li>
- <li>:read-only for steps that cannot be accessed directly by the user by
- clicking on the link (clicking on the icon is not implemented at this
- time). This state is combinable with any of the previous three states,
- but must be placed after them, e.g. :selected:read-only-icon is valid,
- while :read-only:selected is not;</li>
- <li>:disabled for steps that cannot be accessed by the user using the link
- and should theorically not be accessible at all until some condition is
- met. This state has absolute priority and is not combinable with any other
- state.</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td>af|train::stop<states>-icon</td>
- <td>Define the icons for stops. At least one state must be specified.
- For example:
- <ul>
- <li>VALID: af|train::stop:selected-icon;</li>
- <li>INVALID: af|train::stop-icon;</li>
- </ul></td>
- </tr>
- <tr>
- <td>af|train::overflow-start<states>-icon</td>
- <td>Define the icons for overflows toward the previous step group. At least one
- state must be specified.
- For example:
- <ul>
- <li>VALID: af|train::overflow-start:read-only-icon;</li>
- <li>INVALID: af|train::overflow-start-icon;</li>
- </ul></td>
- </tr>
- <tr>
- <td>af|train::overflow-end<states>-icon</td>
- <td>Define the icons for overflows toward the next step group. At least one
- state must be specified.
- For example:
- <ul>
- <li>VALID: af|train::overflow-end:read-only-icon;</li>
- <li>INVALID: af|train::overflow-end-icon;</li>
- </ul></td>
- </tr>
- <tr>
- <td>af|train::parent-start<states>-icon</td>
- <td>Define the icons for the parent train that include this train.
- It appears before the first stop's icon. This icon is NOT
- combinable with state pseudo-classes. For example:
- <ul>
- <li>VALID: af|train::parent-start-icon;</li>
- <li>INVALID: af|train::parent-start:read-only-icon;</li>
- </ul></td>
- </tr>
- <tr>
- <td>af|train::parent-end<states>-icon</td>
- <td>Define the icons for the parent train that follow the parent train
- including this train. It appears after the last stop's icon. This
- icon is NOT combinable with state pseudo-classes. For example:
- <ul>
- <li>VALID: af|train::parent-end-icon;</li>
- <li>INVALID: af|train::parent-end:read-only-icon;</li>
- </ul></td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:progressIndicator Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Icon Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|progressIndicator::indeterminate-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- is -1.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::zero-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is zero percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::five-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is five percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::ten-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is ten percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::fifteen-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is fifteen percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::twenty-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is twenty percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::twenty-five-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is twenty-five percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::thirty-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is thirty percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::thirty-five-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is thirty-five percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::forty-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is forty percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::forty-five-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is forty-five percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::fifty-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is fifty percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::fifty-five-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is fifty-five percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::sixty-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is sixty percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::sixty-five-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is sixty-five percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::seventy-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is seventy percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::seventy-five-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is seventy-five percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::eighty-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is eighty percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::eighty-five-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is eighty-five percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::ninety-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is ninety percent.</td>
- </tr>
- <tr>
- <td>af|progressIndicator::ninety-five-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is ninety-five percent.</td>
- </tr>
- <tr>
- <td style="white-space:nowrap">af|progressIndicator::one-hundred-percent-icon</td>
- <td>The icon which is displayed when the progressIndicator's value
- divided by maximum is one-hundred percent.</td>
- </tr>
- </table>
- </subsection>
- <subsection name="tr:selectBooleanCheckbox Component">
- <table>
- <tr>
- <th colspan="2">
- <i>Icon Selectors</i>
- </th>
- </tr>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>af|selectBooleanCheckbox::disabled-checked-icon</td>
- <td>The icon that is displayed when the checkbox is readOnly,
- disabled, and checked.</td>
- </tr>
- <tr>
- <td>af|selectBooleanCheckbox::disabled-unchecked-icon</td>
- <td>The icon that is displayed when the checkbox is readOnly,
- disabled, and unchecked.</td>
- </tr>
- <tr>
- <td>af|selectBooleanCheckbox::read-only-checked-icon</td>
- <td>The icon that is displayed when the checkbox is read-only and
- checked.</td>
- </tr>
- <tr>
- <td style="white-space:nowrap">af|selectBooleanCheckbox::read-only-unchecked-icon</td>
[... 385 lines stripped ...]