| Oracle® WebCenter Framework Developer's Guide 10g (10.1.3.2.0) Part Number B31074-05 |
|
|
View PDF |
| Oracle® WebCenter Framework Developer's Guide 10g (10.1.3.2.0) Part Number B31074-05 |
|
|
View PDF |
This chapter provides information about using core customizable component style selectors with Oracle ADF Faces skins and discusses how to register a skin and configure an application to use the skin. Additionally, it lists and describes core customizable component style and icon selectors as well as style-related properties. Finally, it describes how to build a skin selector, from which users can choose a skin at run time, and how to make selections persist across user sessions.
This chapter contains the following sections:
Section 9.1, "Introduction to Skins, Style Selectors, and Style-Related Properties"
Section 9.4, "Defining Styles Through the Property Inspector"
Oracle WebCenter Framework provides two opportunities for applying style information:
Build a skin using style selectors and apply the skin to a WebCenter application. Add defined style selectors to an Oracle ADF Faces skin to generate a standard cascading style sheet (CSS). The act of applying a skin to your application is called skinning.
Use Oracle JDeveloper style properties to specify style information through the Property Inspector. Using Oracle JDeveloper style properties overrides the style information from the skin CSS.
Before you begin, it is useful to have some understanding of the technologies at work. This section provides brief overviews of Oracle ADF Faces skins, style selectors, and style properties. It contains the following subsections:
A skin is a style sheet based on the CSS 3.0 syntax that is specified in one place for an entire application. Instead of styling each component, or inserting a style sheet on each page, you can create one skin for the entire application. Every component automatically uses the styles as described by the skin. No design-time code changes are required.
Oracle ADF Faces provides three skins for use in your applications:
Oracle—The default skin. The Oracle skin conforms to Oracle's user interface standards for applications (known as Oracle Browser Look and Feel, or Oracle BLAF).
Minimal—The Minimal skin provides a modest amount of formatting.
Simple—The Simple skin contains almost no formatting.
All of these skins are included in the ADF Faces 10.1.3 component library, but the source is not exposed to users in this release. You obtain access to these skins by including this and a few other libraries in the application. For information about including relevant libraries, see Section 9.2.1, "How to Make Default Skins Available in an Application".
In addition to the default skins, you can create your own custom skin with your company's preferred look and feel. Custom skins can extend or override the style definitions provided through the Simple skin. Currently, the Simple skin is the only extendable skin. This means that when you apply your own CSS, (that is, your custom skin) all the things you do not include in your CSS are inherited from the Simple skin.
Once you create a custom skin, you must register it as a valid skin in the application and then configure the application to use the skin. For more information, see Section 9.2.3, "How to Register a Skin" and Section 9.2.4, "How to Tell an Application to Use a Particular Skin".
When you use a custom skin, applying the Simple skin is implicit. There is no need to explicitly specify its use.
You can create three different color schemes for portlets and core customizable components (PanelCustomizable and ShowDetailFrame): Light, Medium, and Dark. For information about using these, see Section 9.3.6, "Applying Color Schemes to Portlets and Core Customizable Components".
Style sheet rules encompass a style selector, which identifies an element, and a set of style definitions, which describe the element's appearance. Example 9-1 illustrates a style selector and definition that apply to the ShowDetailFrame core customizable component.
af|showDetailFrame::main-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
width:110px
}
Example 9-1 defines styles for the main menu container of a ShowDetailFrame component. The style definition specifies menu background color, menu width, and the thickness and color of the menu's surrounding borders.
Oracle ADF Faces skins use three types of style selectors:
Standard selectors—Directly represent an element that can have styles applied to it. For example af|body represents the af:body component. You can set CSS styles, properties, and icons for this element.
Selectors with pseudo elements—Denote a specific area of a component that can have styles applied. Pseudo elements are easily recognizable by a double colon followed by the portion of the component that the selector represents. For example, af|showDetailFrame::header-top-border is the style selector for the top border of the header of a ShowDetailFrame component.
Selectors that use the alias pseudo class—Used for a selector that sets styles for more than one component or more than one portion of a component. For example, the .AFMenuBarItem:alias selector defines skin properties that are shared by all af:menuBar items, such as af|menuBar::enabled and af|menuBar::selected.
Any selectors that you do not override with your custom skin use the style selector style definition provided in the Simple skin.
Typically, you will not customize the look and feel of every component available in the Oracle ADF Faces component library. By reviewing your application using, for example, the Simple skin, you can determine the components to customize.
For lists, descriptions, and code samples of core customizable component style selectors, see Section 9.3, "Specifying Style Definitions for Portlet and Core Customizable Component Style and Icon Selectors". For information about selectors other than those for core customizable components, see "Selectors for Skinning ADF Faces Components," available on the Oracle Technology Network at:
http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
You can adjust the look and feel of ShowDetailFrame and PanelCustomizable components at design time by changing the style-related properties InlineStyle, ContentInlineStyle, and StyleClass. Any style-related property you specify at design time overrides the comparable style specified in the application skin or CSS for that particular instance of the component.
For example, imagine that you have placed two ShowDetailFrame components on an application page. You change the style-related properties of the first component. You do not change the style-related properties of the second. The change to style-related properties affects only the first instance.
On a given instance of a component, style specifications entered through the Property Inspector at design time take precedence over comparable style definitions supplied through a skin or CSS at run time.
For more information, see Section 9.4, "Defining Styles Through the Property Inspector".
To use a custom skin in an application, perform the following steps:
ADF Faces Components and ADF Faces HTML must be included in the application resources.
The skin or CSS must be added to the relevant project.
Custom skins must be registered with the application.
The application must be told which skin to use.
This section describes how to meet these requirements. It includes the following subsections:
Section 9.2.1, "How to Make Default Skins Available in an Application"
Section 9.2.4, "How to Tell an Application to Use a Particular Skin"
The default Oracle ADF Faces skins, Oracle, Minimal, and Simple are part of the ADF Faces 10.1.3 component library. Any application to which you will apply a skin must include the following libraries:
The following libraries, although not required, are useful additions to a WebCenter application:
This section provides information about how to include a library in an application and how to configure the application to use the library in the desired manner.
To include a library in an application, perform the following steps:
In the Applications Navigator, double-click the project that will use a skin.
This opens the Project Properties dialog box.
In the left pane of the Project Properties dialog box, select JSP Tag Libraries.
Click the Add button below the list of libraries, and select the following libraries:
ADF Faces Components
ADF Faces HTML
JSF Core
JSF HTML
Click OK to add the selected libraries.
In turn, select each library listed under Distributed libraries, and select the check box Execute Tags in JSP Visual Editor.
Click OK.
You have two options for adding a custom skin to an application:
Create a cascading style sheet (CSS) within Oracle JDeveloper, which will place the CSS properly in a project's source files.
Add an externally created CSS to the project root.
This section briefly describes both approaches. It includes the following subsections:
To create a CSS in Oracle JDeveloper, perform the following steps:
In the Applications Navigator, right-click a project (or a file within a project) that belongs to the application that will use a skin, and select New from the context menu.
In the New Gallery under Categories, expand the Web Tier and select HTML.
In the New Gallery under Items, select CSS file.
Click OK.
This starts the Create Cascading Style Sheet wizard.
In the File Name field, provide a name for the CSS.
In the Directory Name field, provide the path where the CSS will be stored.
Enter a path, accept the default, or click Browse and navigate to the location where the CSS should be stored. However you do this, always keep the CSS beneath the project root.
Click OK to create the CSS.
You can now open the CSS in the Editor pane and define styles for your application, and specifically for core customizable components. For information about core customizable component style selectors, see Section 9.3, "Specifying Style Definitions for Portlet and Core Customizable Component Style and Icon Selectors".
When you create a CSS outside the context of Oracle JDeveloper, you must move or copy the CSS to an Oracle JDeveloper project root. This ensures that the CSS is packaged along with other project resource files when the application is deployed
To add an externally created CSS to a project root, perform the following steps:
In your computer file system, copy the CSS.
Be sure to include referenced images files and other dependent resources in the copy or move to maintain link integrity between the CSS and any resources it references.
In the file system, navigate to the Web Content folder in the relevant project.
For example:
<JDev_Home> jdev mywork <Application Name> <Project Name> Web Content
Paste or move the CSS and other resources here, or create an additional folder for storing the skin and its resources at or below this level in the file-system hierarchy.
Registering a skin involves creating a file named adf-faces-skins.xml and populating it with a short list of tags that identify the skin's ID, family, location, and the like. This section describes how to create and populate the adf-faces-skins.xml file.
To create the adf-faces-skins.xml file, perform the following steps:
In the Applications Navigator, right-click the WEB-INF folder in a project belonging to the application to which you will apply a skin and select New from the context menu.
Under the General node in the New Gallery, select XML.
Note:
If the XML option does not display in the New Gallery under the General node, then expand the Filter By scope to All Technologies.In the right pane, select XML Document.
Click OK.
This displays the Create XML File dialog box.
In the File Name field, enter the file name adf-faces-skins.xml.
In the Directory Name field, enter the path to the location where the file should be stored, or accept the default.
The file must be stored in the WEB-INF folder.
Optionally, click the Browse button and navigate to the storage location.
Click OK to create the file.
The new file opens in the Editor pane.
In the Editor pane, enter the tags required to register a skin.
Example 9-2 shows a populated adf-faces-skins.xml file.
Example 9-2 A Populated adf-faces-skins.xml File
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin">
<skin>
<id>mycompany.desktop</id>
<family>mycompany</family>
<render-kit-id>oracle.adf.desktop</render-kit-id>
<style-sheet-name>skins/mycompany/myCompanySkin.css</style-sheet-name>
</skin>
</skins>
Table 9-1 lists and describes the tags to use in this file.
Save your work.
Table 9-1 Tags Used in the adf-faces-skins.xml File
| Tag | Description |
|---|---|
|
This tag opens and closes the specifications for all skins. Enter the <skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin">
<skin>[skin specification]</skin>
</skins>
|
|
|
This tag opens and closes the specifications for a particular skin. Enter one skin tag for each skin you want to register. Register multiple skins when you plan to use different skins under different conditions, for example one for desktop deployment and one for PDA deployment. |
|
|
Used for referencing a skin in an Expression Language (EL) expression. For example, to have different skins for different locales, you can create an EL expression that will select the correct skin based on its ID. |
|
|
Identifies the family to which a skin belongs. This value is used in the |
|
|
Determines which render-kit to use for the skin. Enter one of the following:
|
|
|
Defines the path to the custom skin or CSS file, relative to the project root. If your project is not picking up the skin, then it might be because this URL is improperly specified. |
|
|
(Optional) The fully qualified name of the resource bundle used to display text on the components. This is not discussed within the scope of this chapter. For additional information, see Oracle JDeveloper online help. |
To tell an application to use a particular skin, provide a value for the skin-family element in the adf-faces-config.xml file.
To provide a value for the skin-family element, perform the following steps:
Open the adf-faces-config.xml file, located in the project's WEB-INF folder.
Replace the default value for <skin-family> with the family name of the skin to be used or an Expression Language expression that references a skin bean.
You find this value between the <family></family> tag in the adf-faces-skins.xml file, also located in the WEB-INF folder. For example, suppose that the family tag in adf-faces-skins.xml appears as follows:
<family>mycompany</family>
Then, in the adf-faces-config.xml file, you enter the following:
<skin-family>mycompany</skin-family>
Or
<skin-family>#{skinBean.currentSkin}</skin-family>
Note:
This is also where and how you specify any of the default skins provided through the ADF Faces Component library. That is, Oracle, Minimal, and Simple.Only one <skin-family> can be entered in this file. When a value that references a custom skin is used, the Simple skin is implicitly included to style all otherwise unstyled component elements.
The <skin-family> value is not case-sensitive.
Save your work.
The appearance of core customizable components—PanelCustomizable and ShowDetailFrame—included with Oracle WebCenter Suite can be controlled with their own style selectors. This section includes a series of tables that list, describe, and provide examples for the style selectors associated with core customizable components. Additionally, it describes how to use the background property to choose one of three skin-defined looks for customizable components.
Note:
In addition to defining styles forShowDetailFrame components, ShowDetailFrame style and icon selectors define styles for portlets.To use style and icon selectors, add them to your CSS/skin, provide the desired style definitions, then apply the skin to your application (Section 9.2, "Applying Custom Skins to Applications").
This section contains the following subsections:
Section 9.3.5, "Icon Selectors for Core Customizable Components"
Section 9.3.6, "Applying Color Schemes to Portlets and Core Customizable Components"
Section 9.3.7, "What You May Need to Know About Oracle ADF Faces Skin Resources"
Use property keys to control the display of custom menu items and component action icons. Though you include property keys in your custom skin, they are not represented in the generated CSS that results from the skin.
To explain, skins go through a process that results in a generated CSS. In turn, the generated CSS is consumed by the application. Most customizable component style selectors are represented in the generated CSS. Property keys are the exception. Although they affect the application as much as any other component style selector, they are not represented in the final generated CSS.
Table 9-2 lists and describes property keys relevant to core customizable components.
Table 9-2 Property Keys of Core Customizable Components
| Property Key | Description |
|---|---|
showDetailFrame {-ora-additional-actions-position-last:true}
|
This property key positions additional actions relative to seeded actions on the component's Actions menu. Set to The default value is |
showDetailFrame {-ora-menu-icon-display:false}
|
This property key controls the display of icons next to their related commands on a Set to The default value is For information about specifying the icons to use when this property key is set to |
panelCustomizable {-ora-menu-icon-display:false}
|
This property key controls the display of icons next to their related commands on a Set to The default value is For information about specifying the icons to use when this property key is set to |
Use global style selectors to define styles for multiple components within the application. Table 9-3 lists and describes the global style selectors relevant to Oracle WebCenter Suite components.
The elements styled by global style selectors are illustrated in Figure 9-1:
Figure 9-1 Elements Styled by Global Style Selectors
Table 9-3 Global Style Selectors
| Style Selector | Description |
|---|---|
.AFCUSTFrameComponentBorderBaseLight:alias .AFCUSTFrameComponentBorderBaseMedium:alias .AFCUSTFrameComponentBorderBaseDark:alias Example .AFCUSTFrameComponentBorderBaseDark:alias
{
border-style:solid;
border-width:1px;
border-color:#979991;
}
|
Styles the left, right, and bottom border of the component. It does not include the top border. Note: See Section 9.3.6, "Applying Color Schemes to Portlets and Core Customizable Components" for an explanation of light, medium, dark. |
.AFCUSTFrameComponentTopBorderBaseLight:alias .AFCUSTFrameComponentTopBorderBaseMedium:alias .AFCUSTFrameComponentTopBorderBaseDark:alias Example .AFCUSTFrameComponentTopBorderBaseMedium:alias
{
border-style:solid;
border-width:1px;
border-color:#979991;
}
|
Styles the top border of the component. Note: See Section 9.3.6, "Applying Color Schemes to Portlets and Core Customizable Components" for an explanation of light, medium, dark. |
.AFCUSTFrameComponentHeaderBase:alias Example .AFCUSTFrameComponentHeaderBase:alias
{
color:#333333;
vertical-align:top;
font-size:11px;
font-family:Tahoma;
font-weight:bold;
height:20px;
border-style:none;
}
|
Styles the component header text. Note: To style the background color of a component header, use the component's |
.AFCUSTFrameComponentContentBase:alias Example .AFCUSTFrameComponentContentBase:alias
{
color:#333333;
vertical-align:top;
font-size:11px;
font-family:Tahoma;
font-weight:bold;
height:20px;
border-style:none;
}
|
Styles the content in the component. The border-style included here is for an internal content border apart from the border surrounding the component. |
.AFCUSTFrameComponentMenuGroupBase:alias Example .AFCUSTFrameComponentMenuGroupBase:alias
{
font-family:Tahoma;
color:#003366;
font-size:11px;
}
|
Styles the component main menu container. |
.AFCUSTFrameComponentMenuItemBase:alias Example .AFCUSTFrameComponentMenuItemBase:alias
{
font-family:Tahoma;
color:#003366;
font-size:11px;
}
|
Styles menu items. |
.AFCUSTFrameComponentMenuSeparatorBase:alias Example .AFCUSTFrameComponentMenuSeparatorBase:alias
{
padding:0px 2px 0px 2px;
}
|
Styles the menu item separator. |
Use the style selectors listed in Table 9-4 to skin the ShowDetailFrame and portlet components.
Note:
In WebCenter applications, each portlet is rendered with portlet chrome (see Section 14.2, "Portlet Anatomy"). Portlet chrome shares the same chrome rendering mechanism as aShowDetailFrame component. Thus, the style and icon selectors that apply to ShowDetailFrame also apply to portlet chrome. In other words, in addition to defining styles for ShowDetailFrame components, use ShowDetailFrame style and icon selectors to define styles for portlets.In Table 9-4, some ShowDetailFrame style selectors have light, medium, and dark color scheme options. For an explanation of these options, see Section 9.3.6, "Applying Color Schemes to Portlets and Core Customizable Components".
Figure 9-2 illustrates most of the elements styled by ShowDetailFrame style selectors. Not depicted are the submenu container, submenu items, hovered-over menu and submenu items, and the actions icon separator, which sets the space around header icons. Note that with ShowDetailFrame, the content style selector (af|showDetailFrame::content-[light,medium,dark]) styles the bottom, left, and right component borders. Compare this to global style selectors, which provide a selector specifically for the bottom and side borders and a style selector for the top border.
Figure 9-2 Elements Styled by ShowDetailFrame Style Selectors
Table 9-4 ShowDetailFrame Style Selectors
| Style Selector | Description |
|---|---|
af|showDetailFrame::header-top-border-light af|showDetailFrame::header-top-border-medium af|showDetailFrame::header-top-border-dark Example af|showDetailFrame::header-top-border-medium
{
border-top:1px #6699CC solid;
border-bottom:1px #6699CC solid;
background-color:#F7F7E7;
}
|
Specifies the style for the top and bottom border of a component header as well as the header background color. |
af|showDetailFrame::header-light af|showDetailFrame::header-medium af|showDetailFrame::header-dark Example af|showDetailFrame::header-medium
{
color:#336699;
font-family:Arial,Geneva,sans-serif;
font-size:small;
font-weight:bold;
white-space:nowrap;
vertical-align:middle;
width:100%;
position:relative
}
|
Specifies the style for text in the component's header. The header is usually a banner of color that contains a title and links to menus and other types of actions. Define the header background color with the |
af|showDetailFrame::content-light af|showDetailFrame::content-medium af|showDetailFrame::content-dark Example af|showDetailFrame::content-dark
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
position:relative;
width:100%
}
|
Specifies the style for the component's left, right, and bottom borders. |
af|showDetailFrame::main-menu-container Example af|showDetailFrame::main-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
width:110px
}
|
Specifies the style for the component's main menu container. |
af|showDetailFrame::sub-menu-container Example af|showDetailFrame::sub-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
}
|
Specifies the style for the component's submenu container. |
A.af|showDetailFrame::menu-item Example A.af|showDetailFrame::menu-item
{
font-family:Arial,Geneva,sans-serif; font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none; white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}
|
Specifies the style for an individual item on the component's main menu. |
A:hover.af|showDetailFrame::menu-item Example A:hover.af|showDetailFrame::menu-item
{
background-color:#CCCC99
}
|
Specifies the style to render when a user pauses the mouse pointer over a component main menu item. |
A.af|showDetailFrame::sub-menu-item Example A.af|showDetailFrame::sub-menu-item
{
font-family:Arial,Geneva,sans-serif; font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none; white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}
|
Specifies the style for an individual item on the component's submenu. |
A:hover.af|showDetailFrame::sub-menu-item Example A:hover.af|showDetailFrame::sub-menu-item
{
background-color:#CCCC99
}
|
Specifies the style to render when a user pauses the mouse pointer over a component submenu item. |
af|showDetailFrame::actions-image-separator Example af|showDetailFrame::actions-image-separator
{
padding-right:5px;
padding-top:1px;
padding-bottom:1px
}
|
Specifies the amount of padding to provide around the component's Actions, Minimize, and Restore icons. See also Section 9.3.5, "Icon Selectors for Core Customizable Components". |
af|showDetailFrame::menu-item-separator Example af|showDetailFrame::menu-item-separator
{
border-top:1px solid #969664;
border-bottom:1px solid #515151;
margin:4px 2px
}
|
Specifies the style for the line that separates a command or groups of commands on the component's Actions menu. In the default case, a separator appears to be a single thick line. This is achieved using |
A.af|showDetailFrame::title-clickable Example A.af|showDetailFrame::title-clickable
{
font-family:Arial,Geneva,sans-serif;
font-size:small;
font-weight:bold;
text-decoration:none;
display:block;color:#336699;
margin-left:5px
}
|
Specifies the style to render for the component's title when the title is a link. |
af|showDetailFrame::no-header-content-light af|showDetailFrame::no-header-content-medium af|showDetailFrame::no-header-content-dark Example af|showDetailFrame::no-header-content-medium
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
border-top:1px #6699CC solid;
position:relative;
width:100%
}
|
Specifies the style to render for all four component borders when the component header is turned off. |
Use the style selectors listed in Table 9-5 to skin PanelCustomizable components. See Section 9.3.5, "Icon Selectors for Core Customizable Components" for icon selectors relevant to the PanelCustomizable component.
In Table 9-5, you may note that some of the style selectors have three color-scheme selections: light, medium, and dark. For an explanation of these selections, see Section 9.3.6, "Applying Color Schemes to Portlets and Core Customizable Components".
Figure 9-3 illustrates most of the elements styled by PanelCustomizable style selectors. Not depicted are the submenu container, submenu items, and hovered-over menu and submenu items. Note that with PanelCustomizable, the content style selector (af|panelCustomizable::content-[light,medium,dark]) styles the bottom, left, and right component borders. Compare this to global style selectors, which provide a selector specifically for the bottom and side borders and a style selector for the top border.
Figure 9-3 Elements Styled by PanelCustomizable Style Selectors
Table 9-5 PanelCustomizable Style Selectors
| Style Selector | Description |
|---|---|
af|panelCustomizable::header-top-border-light af|panelCustomizable::header-top-border-medium af|panelCustomizable::header-top-border-dark Example af|panelCustomizable::header-top-border-medium
{
border-top:1px #6699CC solid;
border-bottom:1px #6699CC solid;
background-color:#F7F7E7;
background-image:url(/<path>/setJoin.gif);
}
|
Specifies the style for the top and bottom border of a component header as well as the header background color. |
af|panelCustomizable::header-light af|panelCustomizable::header-medium af|panelCustomizable::header-dark Example af|panelCustomizable::header-medium
{
color:#336699;
font-family:Arial,Geneva,sans-serif;
font-size:small;
font-weight:bold;
white-space:nowrap;
vertical-align:middle;
width:100%;
position:relative
}
|
Specifies the style for text in the component's header. The header is usually a banner of color that contains a title and links to menus and other types of actions. Define the header background color with the |
af|panelCustomizable::content-light af|panelCustomizable::content-medium af|panelCustomizable::content-dark Example af|panelCustomizable::content-light
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
position:relative;
width:100%
}
|
Specifies the style for the component's left, right, and bottom borders. |
af|panelCustomizable::main-menu-container Example af|panelCustomizable::main-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
width:110px
}
|
Specifies the style for the component's main menu container. |
af|panelCustomizable::sub-menu-container Example af|panelCustomizable::sub-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
}
|
Specifies the style for the component's submenu container. |
A.af|panelCustomizable::menu-item Example A.af|panelCustomizable::menu-item
{
font-family:Arial,Geneva,sans-serif; font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none; white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}
|
Specifies the style for an individual item on the component's main menu. |
A:hover.af|panelCustomizable::menu-item Example A:hover.af|panelCustomizable::menu-item
{
background-color:#CCCC99
}
|
Specifies the style to render when a user pauses the mouse pointer over a main menu item. |
A.af|panelCustomizable::sub-menu-item Example A.af|panelCustomizable::sub-menu-item
{
font-family:Arial,Geneva,sans-serif; font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none; white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}
|
Specifies the style for an individual item on a submenu. |
A:hover.af|panelCustomizable::sub-menu-item Example A:hover.af|panelCustomizable::sub-menu-item
{
background-color:#CCCC99
}
|
Specifies the style to render when a user pauses the mouse pointer over a submenu item. |
af|panelCustomizable::actions-image-separator Example af|panelCustomizable::actions-image-separator
{
padding-right:5px;
padding-top:1px;
padding-bottom:1px
}
|
Specifies the amount of padding to provide around the component's Actions, Minimize, and Restore icons. See also Section 9.3.5, "Icon Selectors for Core Customizable Components". |
af|panelCustomizable::menu-item-separator Example af|panelCustomizable::menu-item-separator
{
border-top:1px solid #969664;
border-bottom:1px solid #515151;
margin:4px 2px
}
|
Specifies the style for the line that separates a command or groups of commands on the component's Actions menu. |
af|panelCustomizable::no-header-content Example af|panelCustomizable::no-header-content
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
border-top:1px #6699CC solid;
position:relative;
width:100%
}
|
Specifies the style to render for all four component borders when the component header is turned off. |
The selectors described in Table 9-6 apply to the icons used with core customizable components. Icons are displayed or are not displayed depending on whether the component's ora-menu-icon-display property key is set to true or false. Property keys are described in Section 9.3.1, "Core Customizable Component Property Keys".
Each icon selector has a light, medium, and dark scheme. For an explanation of these color schemes, see Section 9.3.6, "Applying Color Schemes to Portlets and Core Customizable Components".
For easy, error-free portability, store all application icons under the WebCenter application's root folder.
Note:
In WebCenter applications, each portlet is rendered with portlet chrome (see Section 14.2, "Portlet Anatomy"). Portlet chrome shares the same portlet chrome rendering mechanism as aShowDetailFrame component. This being the case, the style and icon selectors that apply to ShowDetailFrame also apply to portlet chrome. In other words, in addition to defining styles for ShowDetailFrame components, use ShowDetailFrame style and icon selectors to define styles for portlets.Table 9-6 Icon Selectors for Core Customizable Components
| Selector | Description |
|---|---|
|
showDetailFrame::light-ActionsIcon:alias showDetailFrame::medium-ActionsIcon:alias showDetailFrame::dark-ActionsIcon:alias Example showDetailFrame::light-ActionsIcon:alias
{
content:url(/css/images/action.gif)
}
panelCustomizable::light-ActionsIcon:alias panelCustomizable::medium-ActionsIcon:alias panelCustomizable::dark-ActionsIcon:alias Example panelCustomizable::dark-ActionsIcon:alias
{
content:url(/css/images/action.gif)
}
|
This icon represents the Actions menu. The Actions menu lists the actions a user can perform on the component. In a WebCenter application, the Actions icon is rendered on the right corner of the component header. |
|
showDetailFrame::light-MinimizeIcon:alias showDetailFrame::medium-MinimizeIcon:alias showDetailFrame::dark-MinimizeIcon:alias Example showDetailFrame::light-MinimizeIcon:alias
{
content:url(/css/images/minimize.gif)
}
panelCustomizable::light-MinimizeIcon:alias panelCustomizable::medium-MinimizeIcon:alias panelCustomizable::dark-MinimizeIcon:alias Example panelCustomizable::medium-MinimizeIcon:alias
{
content:url(/css/images/minimize.gif)
}
|
This icon represents the Minimize option. Minimize collapses the view of the component like a window shade. In a WebCenter application, the Minimize icon is rendered on the left side of the component header. See also, |
showDetailFrame::light-MaximizeIcon:alias showDetailFrame::medium-MaximizeIcon:alias showDetailFrame::dark-MaximizeIcon:alias Example showDetailFrame::medium-MaximizeIcon:alias
{
content:url(/css/images/maximize.gif)
}
|
This icon represents the Maximize option, which expands the In a WebCenter application, the Maximize icon is displayed to the left of the Maximize command on the component's Actions menu. |
panelCustomizable::light-MaximizeIcon:alias panelCustomizable::medium-MaximizeIcon:alias panelCustomizable::dark-MaximizeIcon:alias Example panelCustomizable::dark-MaximizeIcon:alias
{
content:url(/css/images/maximize.gif)
}
|
This icon represents the Maximize option, which expands component display to the dimensions of the container. Where multiple components display in the same container, these are displaced by the maximized component. In a WebCenter application, the Maximize icon is displayed to the left of the Maximize command on the component's Actions menu. |
|
showDetailFrame::light-RestoreIcon:alias showDetailFrame::medium-RestoreIcon:alias showDetailFrame::dark-RestoreIcon:alias Example showDetailFrame::medium-RestoreIcon:alias
{
content:url(/css/images/restore.gif)
}
panelCustomizable::light-RestoreIcon:alias panelCustomizable::medium-RestoreIcon:alias panelCustomizable::dark-RestoreIcon:alias Example panelCustomizable::dark-RestoreIcon:alias
{
content:url(/css/images/restore.gif)
}
|
This icon represents the Restore option, which restores maximized views to their default display modes. In a WebCenter application, the Restore icon is rendered to the left of the Restore command on the component's Actions menu. |
|
showDetailFrame::light-ExpandIcon:alias showDetailFrame::medium-ExpandIcon:alias showDetailFrame::dark-ExpandIcon:alias Example showDetailFrame::medium-ExpandIcon:alias
{
content:url(/css/images/expand.gif)
}
panelCustomizable::light-ExpandIcon:alias panelCustomizable::medium-ExpandIcon:alias panelCustomizable::dark-ExpandIcon:alias Example panelCustomizable::dark-ExpandIcon:alias
{
content:url(/css/images/expand.gif)
}
|
The Expand icon represents the action that expands a component that has been minimized. The Expand icon toggles with the Minimize icon. That is, when the component is minimized, the Expand icon is displayed; when the component is expanded, the Minimize icon is displayed. In a WebCenter application, the Expand icon is displayed on the left side of the component header. |
|
showDetailFrame::light-MoveIcon:alias showDetailFrame::medium-MoveIcon:alias showDetailFrame::dark-MoveIcon:alias Example showDetailFrame::light-MoveIcon:alias
{
content:url(/css/images/move.gif)
}
panelCustomizable::light-MoveIcon:alias panelCustomizable::medium-MoveIcon:alias panelCustomizable::dark-MoveIcon:alias Example af|panelCustomizable::dark-MoveIcon:alias
{
content:url(/css/images/move.gif)
}
|
This icon represents the Move option, which enables rearrangement of a component's location in relation to the other components on the page. In a WebCenter application, the Move icon is displayed to the left of the Move command on the component's Actions menu. |
|
showDetailFrame::light-MoveLeftIcon:alias showDetailFrame::medium-MoveLeftIcon:alias showDetailFrame::dark-MoveLeftIcon:alias Example showDetailFrame::dark-MoveLeftIcon:alias
{
content:url(/css/images/left.gif)
}
panelCustomizable::light-MoveLeftIcon:alias panelCustomizable::medium-MoveLeftIcon:alias panelCustomizable::dark-MoveLeftIcon:alias Example panelCustomizable::light-MoveLeftIcon:alias
{
content:url(/css/images/left.gif)
}
|
This icon represents the Move Left option on the component submenu. Move Left rearranges the component horizontally, one position closer to the left boundary of the page. For example, imagine three horizontally arranged components. You select Move Left on the rightmost component. It becomes the middle component. In a WebCenter application, the Move Left icon is displayed to the left of the Move Left submenu item on the component's Actions menu. |
|
showDetailFrame::light-MoveRightIcon:alias showDetailFrame::medium-MoveRightIcon:alias showDetailFrame::dark-MoveRightIcon:alias Example showDetailFrame::medium-MoveRightIcon:alias
{
content:url(/css/images/right.gif)
}
panelCustomizable::light-MoveRightIcon:alias panelCustomizable::medium-MoveRightIcon:alias panelCustomizable::dark-MoveRightIcon:alias Example panelCustomizable::medium-MoveRightIcon:alias
{
content:url(/css/images/right.gif)
}
|
This icon represents the Move Right option on the component submenu. Move Right rearranges the component horizontally, one position closer to the right boundary of the page. For example, imagine three horizontally arranged components. You select Move Right on the leftmost component. It becomes the middle component. In a WebCenter application, the Move Right icon is displayed to the left of the Move Right submenu item on the component's Actions menu. |
|
showDetailFrame::light-MoveUpIcon:alias showDetailFrame::medium-MoveUpIcon:alias showDetailFrame::dark-MoveUpIcon:alias Example showDetailFrame::light-MoveUpIcon:alias
{
content:url(/css/images/up.gif)
}
panelCustomizable::light-MoveUpIcon:alias panelCustomizable::medium-MoveUpIcon:alias panelCustomizable::dark-MoveUpIcon:alias Example panelCustomizable::medium-MoveUpIcon:alias
{
content:url(/css/images/up.gif)
}
|
This icon represents the Move Up option on the component submenu. Move Up rearranges the component vertically in relation to the other components on the page. For example, imagine three vertically arranged components. You select Move Up on the middle component. It becomes the topmost component. In a WebCenter application, the Move Up icon is displayed to the left of the Move Up submenu item on the component's Actions menu. |
|
showDetailFrame::light-MoveDownIcon:alias showDetailFrame::medium-MoveDownIcon:alias showDetailFrame::dark-MoveDownIcon:alias Example showDetailFrame::dark-MoveDownIcon:alias
{
content:url(/css/images/down.gif)
}
panelCustomizable::light-MoveDownIcon:alias panelCustomizable::medium-MoveDownIcon:alias panelCustomizable::dark-MoveDownIcon:alias Example panelCustomizable::medium-MoveDownIcon:alias
{
content:url(/css/images/down.gif)
}
|
This icon represents the Move Down option on the component submenu. Move Down rearranges the component vertically in relation to the other components on the page. For example, imagine three vertically arranged components. You select Move Down on the middle component. It becomes the bottommost component. In a WebCenter application, the Move Down icon is displayed to the left of the Move Down submenu item on the component's Actions menu. |
|
showDetailFrame::light-HeaderLeftIcon:alias showDetailFrame::medium-HeaderLeftIcon:alias showDetailFrame::dark-HeaderLeftIcon:alias Example showDetailFrame::light-HeaderLeftIcon:alias
{
content:url(/css/images/headerleft.gif)
}
panelCustomizable::light-HeaderLeftIcon:alias panelCustomizable::medium-HeaderLeftIcon:alias panelCustomizable::dark-HeaderLeftIcon:alias Example panelCustomizable::medium-HeaderLeftIcon:alias
{
content:url(/css/images/headerleft.gif)
}
|
This icon provides an image for the top-left corner of the component header. |
|
showDetailFrame::light-HeaderRightIcon:alias showDetailFrame::medium-HeaderRightIcon:alias showDetailFrame::dark-HeaderRightIcon:alias Example showDetailFrame::light-HeaderRightIcon:alias
{
content:url(/css/images/headerright.gif)
}
panelCustomizable::light-HeaderRightIcon:alias panelCustomizable::medium-HeaderRightIcon:alias panelCustomizable::dark-HeaderRightIcon:alias Example panelCustomizable::medium-HeaderRightIcon:alias
{
content:url(/css/images/headerright.gif)
}
|
This icon provides the image for the top-right corner of the component header. |
|
showDetailFrame::light-ToolbarLeftIcon:alias showDetailFrame::medium-ToolbarLeftIcon:alias showDetailFrame::dark-ToolbarLeftIcon:alias Example showDetailFrame::dark-ToolbarLeftIcon:alias
{
content:url(/css/images/toolbarleft.gif)
}
panelCustomizable::light-ToolbarLeftIcon:alias panelCustomizable::medium-ToolbarLeftIcon:alias panelCustomizable::dark-ToolbarLeftIcon:alias Example panelCustomizable::light-ToolbarLeftIcon:alias
{
content:url(/css/images/toolbarleft.gif)
}
|
This icon provides the left portion of the component's FadeIn-FadeOut toolbar. The FadeIn-FadeOut toolbar comes into play when the The toolbar contains the Actions menu that would otherwise be displayed on the header. To invoke the toolbar, users move their mouse over the component content area. If the page design is very simple, then the FadeIn-FadeOut toolbar may not display, even when |
|
showDetailFrame::light-ToolbarRightIcon:alias showDetailFrame::medium-ToolbarRightIcon:alias showDetailFrame::dark-ToolbarRightIcon:alias Example showDetailFrame::medium-ToolbarRightIcon:alias
{
content:url(/css/images/toolbarright.gif)
}
panelCustomizable::light-ToolbarRightIcon:alias panelCustomizable::medium-ToolbarRightIcon:alias panelCustomizable::dark-ToolbarRightIcon:alias Example panelCustomizable::dark-ToolbarRightIcon:alias
{
content:url(/css/images/toolbarright.gif)
}
|
This icon provides the right portion of the component's FadeIn-FadeOut toolbar. See the description for |
|
showDetailFrame::light-ToolbarCenterIcon:alias showDetailFrame::medium-ToolbarCenterIcon:alias showDetailFrame::dark-ToolbarCenterIcon:alias Example showDetailFrame::medium-ToolbarCenterIcon:alias
{
content:url(/css/images/toolbarcenter.gif)
}
panelCustomizable::light-ToolbarCenterIcon:alias panelCustomizable::medium-ToolbarCenterIcon:alias panelCustomizable::dark-ToolbarCenterIcon:alias Example panelCustomizable::dark-ToolbarCenterIcon:alias
{
content:url(/css/images/toolbarcenter.gif)
}
|
This icon provides the center portion of the component's FadeIn-FadeOut toolbar. See the description for |
|
showDetailFrame::light-EditIcon:alias showDetailFrame::medium-EditIcon:alias showDetailFrame::dark-EditIcon:alias Example showDetailFrame::dark-EditIcon:alias
{
content:url(/css/images/edit.gif)
}
panelCustomizable::light-EditIcon:alias panelCustomizable::medium-EditIcon:alias panelCustomizable::dark-EditIcon:alias Example panelCustomizable::light-EditIcon:alias
{
content:url(/css/images/edit.gif)
}
|
This icon represents the Edit option on the component menu. In a WebCenter application, the Edit icon is displayed to the left of the Edit menu item on the component's Actions menu. |
|
showDetailFrame::light-HelpIcon:alias showDetailFrame::medium-HelpIcon:alias showDetailFrame::dark-HelpIcon:alias Example showDetailFrame::dark-HelpIcon:alias
{
content:url(/css/images/help.gif)
}
panelCustomizable::light-HelpIcon:alias panelCustomizable::medium-HelpIcon:alias panelCustomizable::dark-HelpIcon:alias Example panelCustomizable::light-HelpIcon:alias
{
content:url(/css/images/help.gif)
}
|
This icon represents the Help option on the component menu. In a WebCenter application, the Help icon is displayed to the left of the Help menu item on the component's Actions menu. |
You can define three distinct looks in your CSS/skin and specify which one to use through the background property in the Oracle JDeveloper Property Inspector.
Note:
In addition to defining styles forShowDetailFrame components, use ShowDetailFrame style and icon selectors to define styles for portlets.Portlets, PanelCustomizable, and ShowDetailFrame components include a background property for which you can select a value of light, medium, or dark. The default skins, Oracle, Minimal, and Simple, include three versions of style selectors: a light version, a medium version, and a dark version. Depending on which value is specified for a component or portlet instance's background property, the skin will apply the relevant style or icon selector version.
The same principal applies to custom skins. For example, imagine that you have created a custom skin and defined a light, medium, and dark version of the af|showDetailFrame::header-top-border style selector:
af|showDetailFrame::header-top-border-light af|showDetailFrame::header-top-border-medium af|showDetailFrame::header-top-border-dark
You have three portlets on your application page. You select light as the value for the first portlet's background property; medium for the second portlet's background property; dark for the third portlet's background property. At run time, the skin will apply style definitions in the following manner:
af|showDetailFrame::header-top-border-light to the first portlet
af|showDetailFrame::header-top-border-medium to the second portlet
af|showDetailFrame::header-top-border-dark to the third portlet
The terms light, medium, and dark are not necessarily meaningful in terms of lightness or darkness. You can define each version (light, medium, and dark) using unique colors. For example, for a given style selector, its light version can be defined using greens, its medium version using reds, and its dark version using yellows. The terms light, medium, and dark merely differentiate.
Set up a CSS/skin with three style options for the selectors that support them, then set the component's background property to specify which option to apply on a given instance.
The Oracle Technology Network offers a useful source of information about the selectors you can use for skinning Oracle ADF Faces components. The following article lists and describes many of the style selectors provided through Oracle ADF Faces:
http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
Note:
Core Customizable ComponentsPanelCustomizable and ShowDetailFrame are not included in this article because they are new to this release and specific to the WebCenter Suite extension to Oracle JDeveloper.The article, "Developing and Using Oracle ADF Faces Skins," includes a link to a WAR file that contains the Oracle, Minimal, and Simple skins and steps you through the process of applying them to a sample page. It includes information about creating an application from the WAR file to give you the full experience of its examples. You will find this article at the following URL:
http://www.oracle.com/technology/products/jdev/101/howtos/adfskins
Note:
To download the WAR file using Internet Explorer, go to:http://www.oracle.com/technology/products/jdev/101/howtos/adfskins/index.html
Right-click the adffaces-skin.war link, and select Save Target As from the context menu. Change the file extension from xml to war. Internet Explorer otherwise has difficulty downloading the WAR file.
You can override the look and feel of portlets and core customizable components by changing the style-related properties InlineStyle, ContentInlineStyle, and StyleClass. Any style you specify through the Oracle JDeveloper Property Inspector overrides the comparable style specified in an application skin/style sheet (CSS). Additionally, properties set on a portlet or a component instance affect only that instance of the portlet or component. Other portlet or component instances in the application are not affected.
Note:
Thebackground property is also useful in adjusting the look and feel of portlets and core customizable components. Unlike InlineStyle, ContentInlineStyle, and StyleClass properties, the background property works in conjunction with skins or CSSs. For more information about the background property, see Section 9.3.6, "Applying Color Schemes to Portlets and Core Customizable Components".This section describes style-related properties and their uses. It contains the following subsections:
Before you use style-related properties, you should have a good understanding of them. This section compares style-related properties and provides examples of their use. It includes the following subsections:
Section 9.4.1.1, "Understanding ContentInlineStyle and InlineStyle Properties"
Section 9.4.1.2, "What You Should Know About EL and the InlineStyle Property"
The style properties InlineStyle and ContentInlineStyle are alike in the types of attributes they support. They differ in their range of influence. While InlineStyle provides style information for the entire component, ContentInlineStyle provides style information only for component content.
For example, when you set the background-color attribute using InlineStyle property, the component and its content are set in the color specified. However, if you set a different background color for the ContentInlineStyle property, then the component header is styled by the InlineStyle color, while component content is styled by the ContentInlineStyle color.
This also means that, on component content, the value specified for ContentInlineStyle takes precedence over the value specified for InlineStyle. Additionally, ContentInlineStyle on a component instance takes precedence over both InlineStyle and the ContentInlineStyle values of a parent component (such as a portlet nested in a PanelCustomizable component).
Unlike InlineStyle, you can use ContentInlineStyle to turn portlet borders off, as shown in Example 9-3.
Example 9-3 Turning Portlet Borders Off
border-style:none; /*in the Property Inspector*/ contentInlineStyle="border-style:none;" /*in the adfp:portlet tag*/
In the Property Inspector, InlineStyle provides a list of style attributes for which you can provide values. ContentInlineStyle does not. Both ContentInlineStyle and InlineStyle support manual entry of style attributes. This includes attributes outside the scope of those listed in the Property Inspector, provided those attributes are in compliance with, at least, CSS 2.0. Figure 9-4 illustrates the inclusion of style-related properties in the Property Inspector.
Figure 9-4 Defining Styles for ContentInlineStyle and InlineStyle in the Property Inspector
Example 9-4 shows the format such attributes take in the adfp:portlet tag.
Example 9-4 Specifying Styles in the adfp:portlet Tag
<adfp:portlet value="#{bindings.RichTextPortlet1_1}"
portletType="/oracle/adf/portlet/RTPWSRP2_1157051886703/ap/E0default_65adffff_
010d_1000_800c_8d9049ad9bf7"
inlineStyle="border-color:rgb(0,0,0); border-style:dotted;"
contentInlineStyle="background-color:rgb(0,255,255);
background-repeat:repeat;"/>
You can also use Expression Language (EL) expressions for InlineStyle to conditionally set inline style attributes. Example 9-5 illustrates one approach.
The StyleClass property provides a means of overriding styles specified in a skin or CSS and a way to apply "unrelated" style classes to a component. For example, using the StyleClass property you can apply a PanelCustomizable style class to a ShowDetailFrame component.
Using the StyleClass property to override skin styles is the one way to use style properties to affect look and feel while still complying with accessibility guidelines. InlineStyle and ContentInlineStyle are not viewed as compliant.
Style classes are expressed differently than style selectors. Pipes (|) and double-colons (::) in a style selector are replaced by underscores when the selector is expressed as a style class in the Property Inspector or in a source code tag.
In a skin, a style selector can be expressed as shown in Example 9-6.
The same style selector is expressed as a style class in a component tag as shown in Example 9-7.
Example 9-7 Style Selector Expressed as a Style Class in Source Code
<cust:showDetailFrame id="showDetailFrame1"
text="showDetailFrame 1"
binding="#{backing_untitled1.showDetailFrame1}"
styleClass="af_panelCustomizable_no-headercontent">
In the Property Inspector, it is expressed as shown in Example 9-8.
Example 9-8 Style Selector Expressed as a Style Class in the Property Inspector
af_panelCustomizable_no-headercontent
Note:
Icon selectors are not used as style classes. For a list of core customizable component style selectors, see Section 9.3, "Specifying Style Definitions for Portlet and Core Customizable Component Style and Icon Selectors".The StyleClass property also enables for the entry of multiple style classes. Separate each style class by a space. You can enter style classes manually—that is, in the source code—or through the Property Inspector.
The Property Inspector provides a StyleClass dialog box for entering and arranging a list of style classes to be applied to the component. Click the Edit icon next to the StyleClass property in the Property Inspector to access the dialog box.
Change property values through the Oracle JDeveloper Property Inspector.
To specify style properties for a portlet or a core customizable component, perform the following steps:
In Oracle JDeveloper, open a page that contains a portlet or one or more core customizable components (PanelCustomizable or ShowDetailFrame).
In the Oracle JDeveloper editor, select the component to be styled.
The Property Inspector populates with component-related properties. Double-click the Property Inspector tab to maximize its display size for easy editing. Double-click again to restore the Property Inspector to its usual display size.
In the Property Inspector, provide values as desired for the ContentInlineStyle, InlineStyle, and StyleClass properties.
Note:
All valid CSS attributes are not listed in the Property Inspector. For example, if you want to set the width of aShowDetailFrame, you will not find the Width attribute in the Property Inspector under InlineStyle. You can go to the Source tab and type a style attribute into the component tag, as long as the attribute is compliant with at least CSS 2.0.Click in an attribute's value column, and change values as desired as the following:
The InlineStyle property automatically populates with these values in the appropriate syntax.
Set style values manually for the ContentInlineStyle property.
For the StyleClass property:
Click the column next to StyleClass, then click the Edit icon (...) to display the StyleClass dialog box.
In the StyleClass dialog box, click New to add a new skeleton item to the list of style classes.
Click the skeleton item to enter a style class.
Style classes already applied to page components are listed (and selectable) under the List heading in the StyleClass dialog box.
Save your work.
For information about the attributes associated with style-related properties, see Section 9.4.3, "Attributes of the ContentInlineStyle and InlineStyle Properties".
To override run-time CSS style definitions on a specific component instance, at design time use the style-related properties available in the Property Inspector. For information about how to do this, see Section 9.4.2, "Changing Style-Related Properties".
In the Property Inspector, the InLineStyle property provides a sublist of attributes for styling the component. When you provide a value for one of these sublist attributes, the appropriate syntax (including the attribute name) populates the InlineStyle property. For example, when you assign the value Arial,Helvetica,Geneva,sans-serif to the font-family attribute, the InlineStyle property automatically populates with the following:
font-family:Arial Helvetica Geneva sans-serif;
In addition to the attributes provided under InlineStyle, you can manually enter attributes that do not appear on the Property Inspector's attribute list for both InlineStyle and ContentInlineStyle, as long as those attributes are in compliance with at least CSS 2.0. Such attributes have the following format in the adfp:portlet tag:
inlineStyle="border-style:none;font-family:Arial Helvetica Geneva sans-serif;"
The attributes of the InlineStyle property come from the World Wide Web Consortium's CSS standard. For additional information, go to:
http://www.w3.org/Style/CSS/
Table 9-7 lists and describes some of the style attributes available for customizable components through the Oracle JDeveloper Property Inspector. Note that portlets also use these style attributes.
Table 9-7 Style Attributes of Portlets and Core Customizable Components
You may care to make the ability to switch skins at run time available to your portal administrators or to your users. This section describes two scenarios for providing a run-time skin switcher and persisting the switcher's changes across user sessions:
This section describes how to store skin changes on a browser-by-browser basis. When a user changes the application skin, the application displays the change, which is stored in a browser cookie on the user's local computer. Subsequent browser sessions on the local computer display the application using the selected skin. If you select a different browser, disable browser cookies, or display the application on a different computer, then the skin change is not reflected.
Making skin changes persistent on a browser-by-browser basis entails four steps:
Section 9.5.1.1, "Creating a Java Class to Serve As a Managed Bean (ClientSkinBean.java)"
Section 9.5.1.2, "Registering the ClientSkinBean Class As a JSF Managed Bean"
Section 9.5.1.3, "Using an Expression Language Expression to Reference the Bean"
Section 9.5.1.4, "Adding User Interface Components to the Page for Switching the Skin"
To create a Java class to serve as a managed bean, perform the following steps:
In the Applications Navigator, right-click the ViewController project and select New from the context menu.
In the New Gallery, expand the General node and select Simple Files.
In the New Gallery, under Items select Java Class.
Click OK.
In the Name field of the Create Java Class dialog box, enter a name for the Java class.
For example, ClientSkinBean.
Ensure that view is specified in the Package field, and java.lang.Object is specified in the Extends field; leave Optional Attributes at their default values.
Click OK.
The Java class appears in the Applications Navigator under the following hierarchy:
<project_name> */ For example, ViewController /* Application Sources view <Java_class_name> */ For example, ClientSkinBean.java /*
In the Applications Navigator, right-click the Java class and select Open from the context menu.
This opens the Java class in the Editor pane.
In the Editor pane, switch to Source view and add code for setting a persistent skin through a browser cookie.
Example 9-9 illustrates one implementation of this code.
Example 9-9 Java Class for Persisting a Skin Change Through a Browser Cookie
package view;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* ClientSkinBean is a class for persisting ADF JSF skin changes as
* a cookie in the user's browser.
* It is intended to be used as a JSF backing bean.
* It stores the skin setting under the cookie name "ADFSkin".
*/
public class ClientSkinBean {
private String _skin = null;
// You can modify the _cookieName for your own application.
private static String _cookieName = "ADFSkin";
public ClientSkinBean() {
}
/**
* Get the current skin setting. The default is oracle.
* @return the name of the skin to use
*/
public String getSkin() {
if (_skin == null)
{
FacesContext context = FacesContext.getCurrentInstance();
ExternalContext extContext = context.getExternalContext();
HttpServletRequest servletRequest =
(HttpServletRequest) extContext.getRequest();
Cookie[] cookies = servletRequest.getCookies();
for (int i = 0; i < cookies.length; i++) {
Cookie cookie = cookies[i];
if (_cookieName.equals(cookie.getName()))
{
_skin = cookie.getValue();
return _skin;
}
}
_skin = "oracle";
return _skin;
}
else
return _skin;
}
/**
* Make the skin setting persistent. The default is oracle.
* @param skin the name of the skin.
*/
public void setSkin(String skin) {
FacesContext context = FacesContext.getCurrentInstance();
ExternalContext extContext = context.getExternalContext();
HttpServletResponse servletResponse =
(HttpServletResponse) extContext.getResponse();
Cookie userCookie = new Cookie(_cookieName, skin);
// Set the cookie's age to a year. You can set this to your own value.
userCookie.setMaxAge(60*60*24*365);
servletResponse.addCookie(userCookie);
_skin = skin;
}
}
Save your changes.
Use the faces-config.xml file to register the Java class as a managed bean. The faces-config.xml file is stored in the project's WEB-INF folder.
To register the Java class, perform the following steps:
In the Applications Navigator, right-click the faces-config.xml file and select Open from the context menu.
Register the Java class that you created in Section 9.5.1.1.
Example 9-10 illustrates how to register the class created in Section 9.5.1.1. The portion related to skin is bold.
Example 9-10 Registering a Java Class as a Managed Bean
<faces-config xmlns="http://java.sun.com/JSF/Configuration"> <managed-bean> <managed-bean-name>clientSkinBean</managed-bean-name> <managed-bean-class>view.ClientSkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <application> <default-render-kit-id>oracle.adf.core</default-render-kit-id> </application> </faces-config>
Save your changes.
Use an Expression Language (EL) expression in the adf-faces-config.xml file to reference the managed bean. Referencing the bean enables for the expression of a variable value, rather than a fixed value, for application skin selection.
For more information about specifying an application skin, see Section 9.2, "Applying Custom Skins to Applications".
To enter an EL expression in an application's adf-faces-config.xml file, perform the following steps:
In the Applications Navigator, right-click the adf-faces-config.xml file and select Open from the context menu.
The adf-faces-config.xml file is located in the project WEB-INF folder.
Between the <skin-family></skin-family> tags, enter an EL expression that references the managed bean.
For example:
<adf-faces-config xmlns="http://xmlns.oracle.com/adf/view/faces/config">
<skin-family>#{clientSkinBean.skin}</skin-family>
</adf-faces-config>
Save your changes.
Once you put the logic in place to switch skins at run time, it is time to provide the User Interface (UI) components that render the skin switcher.
To create a skin-switcher UI, perform the following steps:
Create an application jspx file or open an existing file.
To open an existing file, right-click it in the Applications Navigator and select Open from the context menu. Application jspx files are stored in the project's Web Content folder. For information about creating an application jspx file, see "Requirements for Pages".
In the Editor pane, switch to Source view, and enter the logic for a skin switcher.
Example 9-11 illustrates one implementation of skin-switcher code.
Example 9-11 One Implementation of a Skin Switcher
<jsp:root version="2.0">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<afh:html>
<afh:head title="ClientChangeSkin">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252"/>
</afh:head>
<afh:body>
<h:form>
<af:selectOneChoice label="Select Look and Feel"
id="showOneChoice1" value="#{clientSkinBean.skin}">
<!-- Specify skins to display on selection list: default, custom, or both -->
<af:selectItem label="oracle" value="oracle"/>
<af:selectItem label="[menu item label]" value="[skin name]"/>
<af:selectItem label="[menu item label]" value="[skin name]"/>
<af:selectItem label="minimal" value="minimal"/>
<af:selectItem label="simple" value="simple"/>
</af:selectOneChoice>
<af:commandButton text="Apply Selected Look and Feel"
id="commandButton1"/>
</h:form>
</afh:body>
</afh:html>
</f:view>
</jsp:root>
Save your changes.
Run the page and try switching skins. Select a different skin from the list and click the command button to implement the change take effect. If you use the code provided in Example 9-11, then observe the changes to the command button, particularly between the oracle and simple skins. In creating your own code, you may want to reference your own skins instead of these default skins. When you close and then open the browser, the skin change persists.
This approach differs from the approach described in Section 9.5.1 in terms of who is affected by the skin change. In this approach, a skin change affects everyone who uses the application, and not just the browser where the change was made. If the application will run in an environment where browsers could have cookies disabled, then this approach should be used. Because the change affects all users, this approach is typically used in conjunction with some security mechanism to ensure that only authorized users can make the change.
Making skin persistent across all users entails four steps:
Section 9.5.2.1, "Creating a Java Class to Serve As a Managed Bean (ServerSkinBean.java)"
Section 9.5.2.2, "Registering the ServerSkinBean Class As a JSF Managed Bean"
Section 9.5.2.3, "Using an EL Expression to Reference the Bean"
Section 9.5.2.4, "Adding UI Components to the Page for Switching the Skin"
To create a Java class to serve as a managed bean, perform the following steps:
In the Applications Navigator, right-click the ViewController project and select New from the context menu
In the New Gallery, expand the General node and select Simple Files.
In the New Gallery, under Items select Java Class.
Click OK.
In the Name field of the Create Java Class dialog box, enter a name for the Java class.
For example, ServerSkinBean.
Ensure that view is specified in the Package field, and java.lang.Object is specified in the Extends field; leave Optional Attributes at their default values.
Click OK.
The Java class appears in the Applications Navigator under the following hierarchy:
<project_name> */ For example, ViewController /* Application Sources view <Java_class_name> */ For example, ServerSkinBean.java /*
In the Applications Navigator, right-click the Java class and select Open from the context menu.
This opens the Java class in the Editor pane.
In the Editor pane, switch to Source view and add code for making the skin persistent through a browser cookie.
Example 9-12 illustrates one implementation of this code.
Example 9-12 Java Class for Persisting a Skin Change that Affects All Users
package view;
import java.io.BufferedReader;
import java.io.FileNotFoundException;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletResponse;
/**
* ServerSkinBean is a class for making ADF JSF skin persistent as
* application customization. It is intended to be used as a JSF backing bean.
* It stores the skin setting under the application's context root in a
* simple text file called appSkinConfig.
*/
public class ServerSkinBean {
private String _skin = null;
private static String _defaultSkin = "oracle";
public ServerSkinBean() {
}
/**
* Get the current skin setting. The default is oracle.
* @return the name of the skin to use
*/
public String getSkin() {
FacesContext context = FacesContext.getCurrentInstance();
ExternalContext extContext = context.getExternalContext();
ServletContext svtCtx = (ServletContext)extContext.getContext();
String appSkinConfig = svtCtx.getRealPath("/" + "appSkinConfig");
try {
// Attempt to open the skin config file and read the setting
FileReader fileReader =
new FileReader(appSkinConfig);
BufferedReader bufferedReader = new BufferedReader(fileReader);
_skin = bufferedReader.readLine();
if ((_skin == null) || (_skin.length() == 0) || (_
skin.trim().length() == 0)) {
setSkin(_defaultSkin);
}
return _skin;
} catch (FileNotFoundException e) {
setSkin(_defaultSkin);
return _skin;
} // no saved state
catch (IOException e) {
System.out.println(e.getMessage());
_skin = _defaultSkin;
return _skin;
}
}
/**
* Make the skin setting persistent. The default is oracle.
* @param skin the name of the skin.
*/
public void setSkin(String skin) {
FacesContext context = FacesContext.getCurrentInstance();
ExternalContext extContext = context.getExternalContext();
ServletContext svtCtx = (ServletContext)extContext.getContext();
String appSkinConfig = svtCtx.getRealPath("/" + "appSkinConfig");
try
{
_skin = skin;
FileWriter writer = new FileWriter(appSkinConfig, false);
writer.write(_skin + "\n");
writer.close();
}
catch (IOException e) {
System.out.println(e.getMessage());
}
}
}
Save your changes.
Use the faces-config.xml file to register the Java class as a managed bean. The faces-config.xml file is stored in the project's WEB-INF folder.
To register the Java class, perform the following steps:
In the Applications Navigator, right-click the faces-config.xml file and select Open from the context menu.
Register the Java class you created in Section 9.5.2.1.
Example 9-13 illustrates how to register the class created in Section 9.5.2.1. The portion relevant to skin is bold.
Example 9-13 Registering a Java Class as a Managed Bean
<faces-config xmlns="http://java.sun.com/JSF/Configuration"> <managed-bean> <managed-bean-name>serverSkinBean</managed-bean-name> <managed-bean-class>view.ServerSkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <application> <default-render-kit-id>oracle.adf.core</default-render-kit-id> </application> </faces-config>
Save your changes.
Use an EL expression in the adf-faces-config.xml file to reference the managed bean. Referencing the bean enables for the expression of a variable value, rather than a fixed value, for application skin selection.
For more information about specifying an application skin, see Section 9.2, "Applying Custom Skins to Applications".
To enter an EL expression in an application's adf-faces-config.xml file, perform the following steps:
In the Applications Navigator, right-click the adf-faces-config.xml file and select Open from the context menu.
The adf-faces-config.xml file is located in the project WEB-INF folder.
Between the <skin-family></skin-family> tags, enter an EL expression that references the managed bean.
For example:
<adf-faces-configxmlns="http://xmlns.oracle.com/adf/view/faces/config">
<skin-family>#{serverSkinBean.skin}</skin-family>
</adf-faces-config>
Save your changes.
Once you put the logic in place to switch skins at run time, it is time to provide the UI components that render the skin switcher.
To create a skin switcher UI, perform the following steps:
Create an application jspx file or open an existing file.
To open an existing file, right-click it in the Applications Navigator and select Open from the context menu. Application jspx files are stored in the project's Web Content folder. For information about creating an application jspx file, see "Requirements for Pages".
In the Editor pane, switch to Source view, and enter the logic for a skin switcher.
Example 9-14 illustrates one implementation of skin-switcher code.
Example 9-14 One Implementation of a Skin Switcher
<jsp:root version="2.0">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<afh:html>
<afh:head title="ServerChangeSkin">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252"/>
</afh:head>
<afh:body>
<h:form>
<af:selectOneChoice label="Select Look and Feel"
id="showOneChoice1" value="#{serverSkinBean.skin}">
<!-- Specify skins to display on selection list: default, custom, or both -->
<af:selectItem label="[menu item label]" value="[skin name]"/>
<af:selectItem label="[menu item label]" value="[skin name]"/>
<af:selectItem label="oracle" value="oracle"/>
<af:selectItem label="minimal" value="minimal"/>
<af:selectItem label="simple" value="simple"/>
</af:selectOneChoice>
<af:commandButton text="Apply Selected Look and Feel"
id="commandButton1"/>
</h:form>
</afh:body>
</afh:html>
</f:view>
</jsp:root>
Save your changes.
Run the page and try switching skins. Select a different skin from the list and click the command button to make the change take effect. If you use the code provided in Example 9-14, then observe the changes to the command button, particularly between the oracle and simple skins. When you close and then open the browser, the skin change persists.
In creating your own code, you may want to reference your own skins instead of these default skins. Example 9-14 provides two entries where custom skins can be referenced. You can reference as many custom skins as you want. You can also omit referencing default skins.
