How to Apply Skins to Messages

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: 20-24 Web User Interface Developers Guide for Oracle Application Development Framework skin-family{sessionScope.skinFamily}skin-family

20.4 Changing the Style Properties of a Component

ADF Faces components use the CSS style properties based on the Cascading Style Sheet CSS specification. Cascading style sheets contain rules, composed of selectors and declarations, that define how styles will be applied. These are then interpreted by the browser and override the browser’s default settings.

20.4.1 How to Set an Inline Style

Set an inline style for a component by defining the inlineStyle attribute. You can use inline style to specify the style of a component for that instance of the component. For more information, see Section 8.3, Arranging Contents to Stretch Across a Page . To set an inline style: 1. Set the inlineStyle attribute of the component to the inline style you want to use.

2. If you use the Property Inspector to set a style, you can select the style features you

want from dropdown lists, as shown in Figure 20–5 . Figure 20–5 Setting an inlineStyle WARNING: Do not use styles to achieve stretching of components. Using styles to achieve stretching is not declarative and, in many cases, will result in inconsistent behavior across different web browsers. Instead, you can use the geometry management provided by the ADF Faces framework to achieve component stretching. For more information about layouts and stretching, see Section 8.2.1, Geometry Management and Component Stretching. .