How to Create a Custom Alias

Customizing the Appearance Using Styles and Skins 20-25 JDeveloper adds the corresponding code for the component to the JSF page. Example 20–15 shows the source for an af:outputText component with an inlineStyle attribute. Example 20–15 InlineStyle in the Page Source af:outputText value=outputText1 inlineStyle=color:Red; text-decoration:overline; 3. You can use an EL expression for the inlineStyle attribute itself to conditionally set inline style attributes. For example, if you want the date to be displayed in red when an action has not yet been completed, you could use the code similar to that in Example 20–16 . Example 20–16 EL Expression Used to Set an inlineStyle Attribute af:outputText value={row.assignedDate eq null?res[srsearch.unassignedMessage]:row.assignedDate} inlineStyle={row.assignedDate eq null?color:rgb255,0,0;:} 4. The ADF Faces component may have other style attributes not available for styling that do not register on the root DOM element. For example, for the af:inputText component, set the text of the element using the contentStyle property, as shown in Example 20–17 . Example 20–17 Using the contentStyle Property af:inputText value=outputText1 contentStyle=color:Red;

20.4.2 How to Set a Style Class

You can define the style for a component using a style class. You create a style class to group a set of inline styles. To set a style using a style class: 1. Set the styleClass attribute of the component to the style class you want to use. Example 20–18 shows an example of a style class being used in the page source. Example 20–18 Page Source for Using a Style Class af:outputText value=Text with a style class styleClass=overdue 2. You can also use EL expressions for the styleClass attribute to conditionally set style attributes. For example, if you want the date to be displayed in red when an action has not yet been completed, you could use code similar to that in Example 20–16 .

20.5 Referring to URLs in a Skin’s CSS File

You can refer to a URL from a skin’s CSS file in a number of different formats. The supported formats are: ■ Absolute 20-26 Web User Interface Developers Guide for Oracle Application Development Framework You specify the complete URL to the resource. For example, a URL in the following format: http:www.mycompany.comWebAppSkinskin1imgerrorIcon.gif ■ Relative You can specify a relative URL if the URL does not start with and no protocol is present. A relative URL is based on the location of the skin’s CSS file. For example, if the skins CSS file directory is WebAppSkinskin1 and the specified URL is imgerrorIcon.gif, the final URL is WebAppSkinmySkinimgerrorIcon.gif ■ Context relative This format of URL is resolved relative to the context root of your web application. You start a context relative root with . For example, if the context relative root of a web application is: WebApp and the specified URL is: imgerrorIcon.gif the resulting URL is: WebAppimgerrorIcon.gif ■ Server relative A server relative URL is resolved relative to the web server. This differs to the context relative URL in that it allows you reference a resource located in another application on the same web server. You specify the start of the URL using . For example, write a URL in the following format: WebAppSkinmySkinimgerrorIcon.gif

20.6 Versioning Custom Skins

You can specify version numbers for your custom skins in the trinidad-skins.xml file using the version element. Use this capability if you want to distinguish between custom skins that have the same value for the family element in the trinidad-skins.xml file. Note that when you configure an application to use a particular custom skin, you do so by specifying values in the trinidad-config.xml file, as described in Section 20.2, Applying Custom Skins to Applications.

20.6.1 How to Version a Custom Skin

You specify a version for your custom skin by entering a value for the version element in the trinidad-skins.xml file. To version a custom skin: 1. In the Application Navigator, double-click the trinidad-skins.xml file. By default, this is in the Web ContentWEB-INF node.

2. In the structure window, right-click the skin node for the custom skin that you

want to version and choose Insert inside skin version. 3. In the Insert version dialog, select true from the default list if you want your application to use this version of the custom skin when no value is specified in the