09 Skinning

9Copyright © 2008, Oracle. All rights reserved.

Customizing the Application Look-and-Feel with Skins

Copyright © 2008, Oracle. All rights reserved.9 - 2

Objectives

After completing this course, you should be able to do the following:

• Describe the basics of Cascading Style Sheets (CSS) and Application Development Framework (ADF) Faces skinning

• Develop a custom skin

• Provide JDeveloper skinning support

• Explore a component skin example

• Change skins at run time


Agenda

• Skinning Overview

• Cascading Style Sheets Basics

• ADF Skinning Basics

• Developing Custom Skins

• JDeveloper Skinning Support

• Component Skin Example

• Changing Skins at Run Time


How JavaServer Faces Renders the UI

• JavaServer Faces (JSF) components are display agnostic:– Know about the state– Know about the behavior

• The component display is device-specific and is handled by component renderers.– External classes– One renderer per component– Device-related renderers grouped into render kits


To customize a layout: do not change the renderer; ADF Faces provides CSS hooks instead

ADF Faces Rich Client Components

ADF binding

ADF data control

RDBMS

ADF BC Web Service BPEL …

Ajax Render Kit

UI component

“Bindings” objectExpr. Language

MODEL UI RENDERING

ADF Ajax Page Life Cycle

Client


Skins

A skin:• Is a style sheet based on the CSS3 syntax that is specified

in one place for an entire application• Can change the styles, icons, properties, and text of an

ADF Faces component• Uses CSS to define the layout of ADF Faces and Trinidad

components– Does not operate on HTML elements– Uses component selectors

• Enables consistent change of the application look and feel• Is located relative to the public_html directory• Consists of:

– A CSS file– Images– Localized strings


More on Skins

• Any change to the skin is picked up at run time; no change to the code is needed.

• With custom skins, the component’s default CSS styles such as color, font, background images, images, default text strings, and component properties can be changed.

• Each component has skinning “hooks”:– Are known as keys or selectors– Define which pieces of a component you can skin

• Skin information can be created for a particular agent orreading direction.

• Skins automatically transform into the appropriate CSS2 page and component styles.

• Skins can be switched dynamically at run time.


Skin Examples


Agenda









Cascading Style Sheets (CSS)

• Are a World Wide Web Consortium (W3C) standard (the current version is CSS3)

• Separate mark-up from presentation

• Store the presentation definition in central location

• Help reduce HTML page sizes


Document Object Model

• Document Object Model (DOM) is a W3C specification and represents an in-memory hierarchical representation of the page.

• In Web pages, components may be nested in other components:– CSS definitions set on the inner component take precedence

over the definition on the parent component.– If the parent component has defined styles that are not

explicitly overridden on the child component, the child component inherits this style.

• Styles are added through styling rules that impact a single component or many simultaneously.


CSS Rules

• CSS rules are applied to elements, attributes, or ID selectors as property-value pairs:– Selector{attribute:value; attribute2:value}– h1{color:red; background:yellow}

• Rules can be grouped:h1, h2, h3 {color:red; background:yellow}

• Element selectors: Markup identifiers such as table, h1, h2, h3, button, and so on

• Class selectors:– .someClassName{color:red}– <p class="someClassName" >– h1.someClassName{color:red}


More CSS Rules

• ID selectors:– #SomeId {color:red}– <p id="SomeId">– Can only be used once per document because they are

unique identifiers

• Attribute selectors:– h1 [class] references all <h1> elements that have a

class attribute.– h1 [class = "value"] references all <h1> elements

that have a class attribute with exactly the given value.– They allow referencing attributes with partial value matches

as well.


Agenda









How Skinning Works

• ADF Faces skins are created as server-side CSS files by using defined ADF Faces component selectors.

• The skinning framework processes the skin file and generates regular CSS2 documents that are linked to the rendered page.

• Skin selectors are resolved to CSS classes:af:inputText::label to af_inputText_label

• Skin styles can be overridden for individual components by using the inlineStyle or styleClass properties.


Skinning Versus CSS

• In CSS, the <p> element is styled: P {color: red }

• In ADF Faces, the af:inputText component is styled by using a skin selector: af:inputText {color:red }

• To skin pieces of a component, CSS uses the pseudo-element syntax:p::first-line { text-transform: uppercase }

• Pseudo-elements also exist in ADF Faces components such as inputText:– The entire component: af:inputText {...}– The label: af:inputText::label {}– The content (the input): af:inputText::content {}


Artifacts

A skin consists of the following artifacts:

• A CSS file that defines the actual look of the components

• An entry in the trinidad-skins.xml configuration file:– Is located in your application’s WEB-INF directory– Lists all skins available for this application

• An entry in the ADF Faces configuration file trinidad config.xml

• Any other resources needed to create the actual look of the components, such as additional CSS files or images


Agenda









Building Custom Skins

To build a good skin, perform the following:

1. Consult the skin-selectors.html page. Create a .css file under the root of your Web application.

2. Make all resources that are required for the skin accessible.

3. Create a trinidad-skins.xml file in the WEB-INF directory or in a Java Archive (JAR) file’s META-INF directory.

4. Set the <skin-family> element value in trinidad-config.xml.


Configuration in trinidad-config.xml

• Static name:

• Expression:

<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config"> <skin-family>custom_de</skin-family></trinidad-config>

<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config"> <skin-family>

#{facesContext.viewRoot.locale.language =='de' ?'custom_de' : 'custom_en'} </skin-family></trinidad-config>


Using Skin Configuration Elementsin trinidad-skins.xml

Use the following elements to register a custom skin:

• <id>: Is used when referencing a skin in an EL expression

• <family>: Configures an application to use a particular family of skins

• <extends>: Extends an existing skin

• <render-kit-id>: Determines the render kit to use for the skin:– org.apache.myfaces.trinidad.desktop– org.apache.myfaces.trinidad.pda

• <style-sheet-name>: Is the fully qualified path to the custom CSS file

• <bundle-name>: Is not needed if no custom resource bundle exists


trinidad-skins.xml Example

<?xml version="1.0" encoding="ISO-8859-1"?><skins xmlns="http://myfaces.apache.org/trinidad/skin"> <skin> <id>blafplus-rich-extended.desktop</id> <family>blafplus-rich-extended</family> <render-kit-id>org.apache.myfaces.trinidad.desktop

</render-kit-id> <style-sheet-name> skins/blafplus-rich-extended.css </style-sheet-name> <extends>blafplus-rich.desktop</extends> </skin></skins>


Skinning Keys

Skin selectors:• A skin key is used to style a component or components in

an application, not a particular instance. • A skin key usually starts with af| and contains the name

of the component and the piece of the component to skin, using a pseudo-element, such as:– ::label– ::content – ::read-only

• A skin key cannot be used in a component’s styleClass property.

• A skin key may resemble styleClass, but ends with :alias.

• Skin keys can be used only in a skinning CSS file.


Connecting the Dots

• “.”:– Do not use for selectors.– Do not use in styleClass properties.– Use to define style class in CSS files.

• “:”– Refers to a CSS element of an ADF Faces or Trinidad

component

• “::”:– Refers to a part of the component– af|inputText::content

• Mixing styles:– af|panelHeader af|inputText:content– Refers to the content part of a text field in a panel header


Agenda









Skin Development Support

• Code editing support

• ADF Faces Skin Extension– Tool > Preferences > CSS

Editor: Check ADF Faces Extension

– Syntax help– Image selection– Code Completion: For

example, enter af:input, and then press Ctrl + Enter.

– Code folding:— Collapses CSS style

definitions— Offers mouse-over code

info

Syntax Help


Skin Development Support

Structure window support: Use to navigate and uncomment entries

• Classes

• Elements

• ID

Error Margin: When a syntax error is found, a red bar is displayed in the error margin.


Agenda









panelBox Example: Skin Selectors

• The panelBox component has the ramp and background attributes to provide eight color schemes.– :core :highlight– :default, :light, :medium, :dark– Example: af|panelBox::header-center:core:medium

• Skin selectors: af|panelBox, af|panelBox::header-start, af|panelBox::header-center, af|panelBox::header end, af|panelBox::content, af|panelBox::icon-style, af|panelBox::disclosure-link

• alias:– .AFPanelBoxHeaderCoreDefault:alias– .AFPanelBoxContentCoreDefault:alias– .AFPanelBoxHeaderCoreLight:alias – .AFPanelBoxContentCoreLight:alias– And so on...


panelBox Component Skin Example

af|panelBox {width:80%;}

af|panelBox::content {height: 200px;}

af|panelBox::header-start:core:default

{background-image:

url(/skins/images/ccont_p_header_start.pn

g;}

af|panelBox::header-center:core:default

{background-image:

url(/skins/images/ccont_p_header_bg.png);

}

af|panelBox::header-end:core:default

{background-image:

url(/skins/images/ccont_p_header_end.png)

;}

<af:panelBox icon="/skins/images/guy.gif"

text="PanelBox Skinned">

<f:facet name="toolbar"/>

</af:panelBox>


panelBox Component Instance Skin Example

• Use the additional styleClass property value; class name does not have to exist.

• Use style class name with the skin selector:panelBoxInstanceClass af|panelBox::disclosure-link{

display:none;

}

<af:panelBox

icon="/skins/images/guy.gif"

text="PanelBox Instance Skinned"

styleClass="panelBoxInstanceClass">


</af:panelBox>

<af:panelBox

icon="/skins/images/guy.gif"

text="PanelBox Skinned">


</af:panelBox>


Contextual Skins

• These are instance-specific skins that are based on the page where the component is located.

• Components that are added on a template may need to be skinned based on their context.

• Use the styleClass property on the component:– Reference the class property by EL.– Use Template parameters if the component is part of a

template.

• Contextual skins resolve context in a managed bean.


Contextual Skins Example

Example: References the current view ID for instance-specific skinning of a panelBox that is part of a template

template

page3 page2 page1

CSS: page1 af|panelBox::header-center:core:default {background-image: url(/skins/images/ccont_p_blue_header_bg.png);}

af|panelBox::header-center:core:default {background-image: url(/skins/images/ccont_p_header_bg.png);}

panelBox panelBox panelBox

panelBox

public String getViewId() {

FacesContext fctx = FacesContext.getCurrentInstance();

String viewID = fctx.getViewRoot().getViewId();

return viewID.substring(1); }

<f:attribute name="viewIdString" value="#{bean.viewId}"/>

<af:panelBox styleClass="#{attrs.viewIdString}">

<attribute>

<attribute-name>viewIdString</attribute-name>

<attribute-class>java.lang.String</attribute-class>

<default-value>"NONE"</default-value>

<required> true</required>

</attribute>


Changing the Splash Screen

The splash screen can be skinned:

• Change the image.

• Change the load message.

• Change the background color.

From ... To ...

af:document::splash-screen-content{background-color:Green;}af:document::splash-screen-icon {content:url("../images/piano.gif");}


Agenda









Using Multiple Skins in an Application

You can switch skins, for example based on:

• Client, such as Web or PDA

• Locale of the user’s browser

• The user’s choice in a list of values (LOV)


Changing Skins at Run Time: Defining an LOV

• Managed bean

• Trinidad Config file

• Select One Choice

<managed-bean>

<managed-bean-name>skinChooserHandler</managed-bean-name>

<managed-bean-class>view.SkinChooserHandler</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">

<skin-family>#{sessionScope.skinFamily}</skin-family>

</trinidad-config>

<af:selectOneChoice id="skinSelector" label="Select Skin" value="#{sessionScope.skinFamily}">

<f:selectItems value="#{skinChooserHandler.SkinChoices}"/>

</af:selectOneChoice>


Discovering Skins at Run Time: Configuring the Skin Family

Managed bean class:

public class SkinChooserHandler {

public SkinChooserHandler() { // Set the default skin to be "blafplus-rich"

ADFContext adfctx = ADFContext.getCurrent();

Map sessionScope = adfctx.getSessionScope();

sessionScope.put("skinFamily", "Oracle");

}

...

}


Discovering Skins at Run Time: Defining Skin Choices for the LOV

Managed bean class:

public List getSkinChoices() { List choices = new ArrayList(); String skinFamily; String skinLabel; SkinFactory sf = SkinFactory.getFactory(); FacesContext context = FacesContext.getCurrentInstance(); Locale locale = context.getViewRoot().getLocale(); for (Iterator i = sf.getSkinIds(); i.hasNext(); ) { String skinID = (String)i.next(); Skin skin = sf.getSkin(context, skinID); skinFamily = skin.getFamily(); if (skin.getRenderKitId().indexOf("desktop") > 0) { try { ResourceBundle bundle = ResourceBundle.getBundle(skinFamily, locale); skinLabel = bundle.getString("skinfamily"); } catch (MissingResourceException e) {

skinLabel = skinFamily;} choices.add(new SelectItem(skinFamily, skinLabel));}} return choices;}


Summary

In this lesson, you should have learned how to:

• Describe CSS and ADF Faces skinning basics

• Develop a custom skin

• Provide JDeveloper skinning support

• Explore a component skin example

• Deploy and debug skins

• Change skins at run time


Practice 9 Overview: Customize the Application Look and Feel

with Skins

This practice covers the following topics:

• Adding style sheets to an application

• Changing skins at run time

• Modifying a skin

09 Skinning

Documents