How to Apply Skins to Text

Customizing the Appearance Using Styles and Skins 20-21 to reflect the new status. If styles are not defined for the status in question, then the default styles are used. In order to define styles for your input components based on message levels that are tied to them, you would append a style pseudo-class to your component definition. For example, to define the base style for the content region of the af:inputText component to a background color of purple, use the style selector af|inputText::content{background-color:purple}. To define the content region of the component when an error message is present, use the skin style selector af|inputText:error::content. The valid message properties are :fatal, :error, :warning, :confirmation, and :info.

20.3.4 How to Apply Themes to Components

Themes are a way of implementing a look and feel at a component level. The purpose is to provides a consistent look and feel across multiple components for a portion of a page. A common usage for themes is in a JSF 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. A component that sets a theme exposes that theme to its child components and therefore the theme is inherited. Themes can be set started or changed by the following components: ■ af:document ■ af:decorativeBox ■ af:panelStretchLayout ■ af:panelGroupLayout The Fusion and BLAF Plus skins blafplus-rich and blafplus-medium support the following themes: ■ Dark ■ Medium ■ Light ■ None default In the JSPX page, the theme is started by the af:document component, as in: af:document theme=dark af:panelTabbed...af:panelTabbed af:document To set the theme for a component, specify a theme attribute in the skin selector in the CSS file. For example, the selector to change the text color under an af:panelTabbed component to a dark theme is: af|panelTabbed[theme=dark] { color: red; } If you do not want a child component to inherit modifications made to a parent component in a JSPX page, set a value for the -tr-children-theme property in the CSS file. For example, you do not want the af:panelTabbed child component to 20-22 Web User Interface Developers Guide for Oracle Application Development Framework inherit the dark theme defined for the af:document parent component in the JSPX page. Set the -tr-children-theme property in the CSS file as follows: af|panelTabbed::content { -tr-children-theme: default; } By default, themes are not set for components or their child components. Because themes are inherited, the following values are supported when a component has a theme attribute that is not set: ■ not given - If no theme is given, the theme is inherited, as in af:decorativeBox... ■ {null}- The theme is inherited; same as not given. ■ inherit - The theme is inherited; same as null. ■ default - The theme is removed for the component and its child components. ■ empty string - If the theme is set to a blank string, it has the same behavior as default. For example, af:decorativeBox theme= will remove the theme for the component and its child components. Because the themes are added to every HTML element of a component that supports themes and that has style classes, there is no need for containment-style CSS selectors for themes. With the exception of :ltr and :rtl, all theme selectors should always appear on the last element of the selector. For example, the selector to apply a dark theme to each step of an af:breadCrumbs component would be: af|breadCrumbs::step:disabled[theme=dark] { color:FFFFFF; } Color incompatibility may occur if a component sets its background color to a color that is not compatible with its encompassing theme color. For example, if a panelHeader component is placed in a dark theme, the CSS styles inside the panelHeader component will set its component background to a light color without changing its foreground color accordingly. The result is a component with a light foreground on a light background. Many other components also set their foreground color to a light color when placed in a dark theme. If color incompatibility occurs, you can resolve color incompatibility between parent and child components by setting a value for the -tr-children-theme property. For components that do not have a parent-child relationship, you can manually set the component’s theme color to a color that is compatible with the surrounding theme color. You do this by inserting the panelGroupLayout or panelStretchLayout component inside the component and by setting the panelGroupLayout or panelStretchLayout theme to a compatible color. af:panelHeader text=Header Level 0 af:panelGroupLayout layout=vertical theme=default ... af:panelGroupLayout af:panelHeader

20.3.5 How to Create a Custom Alias

You can create your own alias that you can then include on other selectors. Customizing the Appearance Using Styles and Skins 20-23 To create a custom alias: 1. Create a selector class for the alias. For example, you can add an alias to set the color of a link when a mouse cursor hovers over it: .MyLinkHoverColor:alias {color: CC6633;} 2. To include the alias in another selector, add a pseudo-element to an existing selector to create a new selector, and then reference the alias using the -tr-rule-ref:selector property. For example, you can create a new selector for the af|menuBar::enabled-link selector to style the hover color, and then reference the custom alias, as shown in Example 20–13 . Example 20–13 Referencing a Custom Alias in a New Selector af|menuBar::enabled-link:hover { -rt-rule-ref:selector.MyLinkHoverColor:alias; }

20.3.6 How to Configure a Component for Changing Skins Dynamically

To configure a component to dynamically change the skin, you must first configure the component on the JSF page to set a scope value that can later be evaluated by the configuration file. You then configure the skin family in the trinidad-config file to be dynamically set by that value. To conditionally configure a component to set the skin family: 1. Open the main JSF page such as the index.jspx or a similar file that contains the component that will be used to set the skin family. 2. Configure the page to display the skin family by using the sessionScope component. Example 20–14 shows an af:selectOneChoice component that takes its selected value, and sets it as the value for the skinFamily attribute in the sessionScope component on the index.jspx page. Example 20–14 Using a Component to Set the Skin Family af:selectOneChoice label=Choose Skin: value={sessionScope.skinFamily} autoSubmit=true af:selectItem value=blafplus-rich label=blafplus-rich af:selectItem value=blafplus-medium label=blafplus-medium af:selectItem value=simple label=simple af:selectItem value=richDemo label=richDemo af:selectItem value=mySkin label=mySkin af:selectOneChoice The Refresh button on the page resubmits the page. Every time the page refreshes, the EL expression is evaluated and if there is a change, the page is redrawn with the new skin. To conditionally configure a component for changing skins at runtime: In the trinidad-config.xml file, use an EL expression to dynamically evaluate the skin family: