Advanced Oracle ADF Layout Managers

Advanced Oracle ADF
Oracle A-Team
<Insert Picture Here>

Layout Managers and Skins

Introduction to layout managers
• The case for layout managers
• We are not web designers! 
• Abstraction from HTML (<div>, <table>,
<li>, etc.)
• Consistent layout behavior
• Consistent behavior across browsers
• Manages browser geometry (stretching
and flowing)

Working with layout managers
• To stretch or to flow?
• Stretching
• Maximizes browser‟s viewport usage
• Can also stretch its child components

• Flowing
• Isolated components not supposed to stretch

• Where do I start?
• Start with a stretchable outer frame
• Inside this frame, have flowing islands, e.g., scrollable areas

Flowing (fixed size) UI example

UI layout with JSF – general tips
• Try to minimize the number of layout
containers on the page. It will make it smaller
and faster.
• Minimize the number of components you
need to stretch; it will make the page faster
• Use spacer instead of padding/margin*
• Use JDev built-in page style gallery
• Make sure to test everything in multiple
browsers. Yes, it can still behave differently.
(* instructor„s note)

“The cost of geometry management is

Poetry
of
Wisdom

directly related to the complexity of
child components. Therefore, try
minimizing the number of child
components that are under a parent
geometry-managed component. ”

Oracle® Fusion Middleware Web User Interface Developer's Guide - Chapter 8, section 8.2.1.

Stretchable Layout Managers
af:panelStretchLayout

af:panelSplitter

af:panelGroupLayout

af:panelDashboard

“You cannot place components that cannot

Poetry
of
Wisdom

stretch into facets of a component that

stretches its child components. Therefore, if
you need to place a component that cannot be
stretched into a facet of the panelStretchLayout
component, wrap that component in a transition
component that can stretch
(eg, panelGroupLayout=scroll).”

Page layout containers cheat sheet
Stretchable by Parent ?

Stretch its children?

panelStretchLayout

YES

YES

panelSplitter

YES

YES

panelGroupLayout
(scroll, vertical)

YES

NO

panelGroupLayout
(default, horizontal)

NO

NO

panelFormLayout

NO

NO

panelBorderLayout

NO

NO

panelDashboard

YES

YES
(inside a grid; see also
panelBox)

panelTabbed

YES

YES
(stretchChildren=“first”)

ADF Faces Page Layout – DONTS
 Do NOT embed raw HTML in your pages.
 Do NOT use inlineStyle. Use skinning instead or at least a
peer CSS file. Use the af:resource tag
 Do NOT try to stretch something vertically when inside of a
flowing (non-stretched) container.
 Do NOT specify a height value with percent unit.
 Do NOT use the position style.

“Do not attempt to stretch any of the

Poetry
of
Wisdom

components in the list of components
that cannot stretch by setting their width
to 100%. You may get unexpected
results. Instead, surround the
component to be stretched with a
component that can be stretched”

panelGroupLayout=“vertical”

panelGroupLayout=“scroll”

Deconstructing Facebook

panelStretchLayout

panelGroupLayout=“vertical”
panelGrouLayout=“horizontal”

Leverage JDeveloper Quick Layouts!

Page Templates
• Provides layout and behavior
• Layout

• Uses default ADF Faces layout managers
• Can have custom facets for content stamping
• Template is referenced, not compiled: easy to
change at design time and run time
• Behavior
• Can have bindings
• Can have attributes

Code review
• Switching the template dynamically
<af:pageTemplate id=“pt1” viewId=“#{yourBean.templateURI}”>

<f:facet name=“Master”>[…]
</f:facet>
</af:pageTemplate>
public class YourBeanClass{ […]
public String getTemplateURI(){
//Add your dynamic code here

return “/yourPageTemplate.jspx”;
} […]
}

TIP: viewId attribute can never be null; always use a fallback EL:
viewId=“#{empty bean.template ?
„/defaultTemplate.jspx‟ : beanTemplate}”

How JavaServer Faces Renders the UI
• JavaServer Faces components are display
agnostic
• Know about state
• Know about behavior

• The component display is device specific
handled by component renderers
• External classes
• One renderer per component
• Device related renderers are grouped to renderer kits

• To customize a layout you don't change the
renderer
• ADF Faces provides CSS hooks instead

ADF Faces Rich Client Components
MODEL

UI RENDERING
ADF Ajax Page Lifecycle

ADF Binding
Expr. Language

ADF DataControl

Ajax Render
Kit

EJB 3.0

Web Service

BPEL

“bindings” Object

UI Component

…

Client
RDBMS

About Skins
• A skin is a style sheet based on the CSS 3.0 syntax that is
specified in one place for an entire application
• Developers can change the styles, icons, properties, and text of
an ADF Faces component using skinning
• Skins use CSS to define the layout of ADF Faces and Trinidad
components
• Do not operate on HTML elements
• Use component selectors

• Consistent change of the application look and feel
• Skins are located relative to public_html directory
• Skins consist of
• CSS file
• Images
• Localized strings

About Skins
• Any changes to the skin is picked up at runtime
• No change to code is needed

• With custom skins, the component's default css styles like color,
font, background-images, images , default text strings and
component properties can be changed
• Each component has skinning 'hooks'
• Also known as keys or selectors
• Define what pieces of a component you can skin

• Skin information can be created for a particular agent or
reading direction
• Skins automatically transform into the appropriate CSS-2 page
and component styles
• Skins can be switched dynamically at runtime


Cascading Style Sheets
Basics

Cascading Style Sheets (CSS)
• W3C Standard

• Current Version is CSS 3
• Separates Markup from Presentation
• Stores presentation definition in central
location
• Helps reducing HTML page sizes
• Cascading rules define that local definitions
overrule global rules

Document Object Model
• Document Object Model (DOM) is a W3C
specification and represents an in memory
hierarchy representation of the page
• In web pages, components may be nested in
other components

• CSS definitions set on the inner component
precede the definition on the parent
component
• If the parent component has defined styles that are not
explicitly overridden on the child component, then the child
component inherits this style

• Styles are added through styling rules that
impact a single component or many at once

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 identifers like table, h1, h2, h3, button etc

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

CSS Rules
• ID selectors
• #SomeId {color:red}
• <p id="SomeId">
• Can only be used once per document because it is a unique
identifier

• 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 exact the iven vaue
• Allows to reference attributes with partial value matches as
well

CSS Pattern Matching

Source: http://www.w3.org/TR/REC-CSS2/selector.html

CSS in ADF Faces
• ContentStyle
• controls the width of a form
control
• Styles "box around value"
• Works for

•
•
•
•
•

Input components
listboxes
Choices
richTextEditor
Shuttle
• contentStyle applied to
each list in a shuttle

CSS in ADF Faces
• StyleClass
• Can be used in conjunction with
skinning
• Applies styles to the root DOM
element
• Can use EL for context specific
CSS

• InlineStyle
• Styles the root DOM element
• Can use EL for context specific
CSS

Adding Inline Styles Dynamically
•
•

Reference InlineStyle string in
managed bean method using EL
In managed bean, access table cell
value and determine CSS to return
• Salary > 1000
background-color:green
width: 100 %
height: 100 %
• Salary > 5000
background-color:orange
width: 100 %
height: 100 %
• Salary > 10000
background-color:red
width: 100 %
height: 100 %


ADF Faces Skinning
Basics

How Skinning Works
• ADF Faces skins are created as server side
CSS files using defined ADF Faces
component Selectors
• The skinning framework processes the skin
file and generates regular CSS-2 documents
that are linked to the rendered page
• Skin selectors are resolved to CSS classes
• af:inputText::label to af_inputText_label

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

• In ADF Faces the af:inputText component is styled 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 like
inputText
• The entire component: af|inputText {...}
• The label: af|inputText::label {}
• The content (the input): af|inputText::content {}

Artefacts
• A skin consists of the following artifacts:
• A CSS file that defines the actual look of the components
• A configuration file – trinidad-skins.xml - that lists all skins
available for this application
• trinidad-skins.xml has to be located in your applications
WEB-INF directory
• An entry in the ADF Faces configuration file – trinidad config.xml
• Any other resources need to create the actual look of the
componets - additional CSS files, Images


Developing Custom Skins

“Skinning is artwork. You cannot teach good
taste, but you can show the techniques to
achieve the goal ”

How-to build Custom Skins
• Consult the skin-selectors.html page for all
skinning keys defined for each component
and global keys
• Creates a skinning .css file that uses the
skinning keys to style the icons, properties,
and styles
• The CSS file for your skin must be stored
under the root of your Web application

• Make sure that all resources like images and
other CSS files required for the skin are
accessible

How-to build Custom Skins
• Create a trinidad-skins.xml that gives the skin
an id, family, render-kit-id, resource bundle
• Set the trinidad-config.xml's <skin-family>
element value to the skin family name
• Place trinidad-skins.xml into WEB-INF
directory or a JAR file's META-INF directory

Configuration in trinidad-config.xml
• Static name
<trinidad-config
xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>custom_de</skin-family>
</trinidad-config>

• Expression
<trinidad-config
xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>
#{facesContext.viewRoot.locale.language =='de' ?'custom_de' : 'custom_en'}
</skin-family>
</trinidad-config>

Skin Configuration Elements
• <id>
• 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 render kit to use for the skin
• org.apache.myfaces.trinidad.desktop
• org.apache.myfaces.trinidad.pda

• <style-sheet-name>
• Fully qualified path to the custom CSS file

• <bundle-name>
• 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>
<bundle-name>AdcsResourceBundle</bundle-name>
</skin>
</skins>

Creating a Custom Resource Bundle
• Replace default string labels of ADF Faces
• Component labels
• Validator message text

• Create message bundle class
• Extending java.util.ListResourceBundle
public class AdcsResourceBundle extends ListResourceBundle {
public Object[][] getContents() { return contents; }
static final Object[][] contents =
{
{"af_dialog.OK","Okay"},
{"af_panelWindow.CLOSE", "Close"},
{"af_document.SPLASH_SCREEN_MESSAGE","Hello and Welcome"}};
}

Inherit from Selector
• -tr-rule-ref
• Avoids CSS code duplication
• Improves readability
.DarkBackground:alias{background-color:#323232}
.MediumBackground:alias{background-color:#707070}
af|document{
-tr-rule-ref:selector(".DarkBackground:alias");
}

af|panelTabbed::body {
-tr-rule-ref:selector(".MediumBackground:alias");
}

Inhibit Inheritance
• -tr-inhibit
• inhibits styles from a base skin
• -tr-inhibit:all
• -tr-inhibit:background-color
• -tr-inhibit: …
af|document::splash-screen-content{
-tr-inhibit:background-image;
-tr-inhibit:background-repeat;
border:transparent;
background-color:transparent;
}

Skinning Keys
• Skin Selector
• 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|, contains the name of the
component, the piece of the component to skin, via a pseudoelement
• ::label
• ::content
• ::read-only

• A skin key might look like styleclass, but ends with :alias
• skin keys can only be used in a Skinning CSS file
• Skin key cannot be used in a component's styleClass attribute

Connecting the Dots
• "."
• Do not use leading dot for selectors
• Do not use leading dot 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 textfield in a panelHeader

Functionality Available to "Skinners"
• Skinning keys to skin pieces of a component, including icons

• Resource bundle keys to skin text of a component
• @platform {/skin definitions go here/}
• Possible values are: windows, macos, linux, solaris, ppc
• Does not work for icons

• @agent {/skin definitions go here/} - >
• Possible values are: netscape, ie, mozilla, gecko, webkit , ice
• Does not work for icons

• :lang or :locale
• :rtl pseudo-class to create a style or icon definition when the
browser is in a right-to-left language
• :alias skinning keys

Using Images in Skins
• Absolute
• .AFErrroIcon:alias {content: url(http://foo.com/images/err-logo.gif)};

• Relative
• No protocol and no leading "/"
• .AFErrroIcon:alias {content: url(images/err-logo.gif)};

• Context relative
• Resolved relative to the web application context root
• Starts with a single "/"
• .AFErrroIcon:alias {content: url(/images/err-logo.gif)};

• Relative to server
• Allows to reference resources that are not part of the application
deployment
• URL starts with "//"
• .AFErrroIcon:alias {content: url(//<folder>/images/err-logo.gif)};

Skin Custom Tree Icons

af|tree::expanded-icon
{

content: url(/skins/mycompany/skin_images/expand.gif);
width:16px;
height:16px;
}
af|tree::collapsed-icon
{
content: url(/skins/mycompany/collapse.gif);
width:16px;
height:16px;
}


JDeveloper Skinning Support

Skin Development Support
• Code editing support
• ADF Faces Skin Extension
• Tool > Preferences >CSS
Editor
• Check ADF Faces Extension

• Syntax Help
• Image selection
• Code Completion
• E.g. type "af|inputr" then press
ctrl+Enter

• Code Folding
• Collapses CSS style
definitions
• Mouse-over code info

Syntax Help

Skin Development Support
•

Structure Window Support
•
•
•
•

•

Classes
Elements
ID
Use to navigate and
uncomment entries

Error Margin
• E.g. syntax error

Theme
• Provide a consistent look and feel
across multiple components for a
portion of a page
• A component that sets a theme,
exposes that theme to its children
components
• Common usage for themes is in a
page template where certain areas
have a distinct look
•
•
•
•

af:document
af:decorativeBox
af:panelStretchLayout
af:panelGroupLayout

Theme
•

A theme is exposed to skinning
developers as an attribute
af|panelTabbed[theme="dark"] {color: red;}

<af:document theme="dark">
<af:panelTabbed>...</af:panelTabbed>
</af:document>

•

BLAF+ skins that provide theme
support are medium and rich
desktop skins
•
•
•
•

dark
medium
light
none (default)

Theme
• Enabling themes in web.xml
<context-param>
<param-name>
oracle.adf.view.rich.tonalstyles.ENABLED
</param-name>
<param-value>false</param-value>
</context-param>


Component Skin Example

PanelBox Skin Selectors
• The panelBox component has attributes "ramp" and "background"
to provide 8 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
more ...

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.png;}
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 additional styleClass
property value
• Class name doesn't need to
exist

• Use style class name with
skin selector
• .panelBoxInstanceClass
af|panelBox::disclosure-link
{
display:none;
}

<af:panelBox
text="PanelBox Instance Skinned"
styleClass="panelBoxInstanceClass">
</af:panelBox>
<af:panelBox
text="PanelBox - Skinned">
</af:panelBox>

Contextual Skins
• Instance specific skins that are based on the
page the component is in
• Components that are added on a template
may need to be skinned based on the context
they are in
• Use styleClass property on component
• Reference class property by EL
• Use Template parameters if componen part of a template

• Resolve context in managed bean

Contextual Skins
• Example: references the current view ID for instance specific
skinning of a PanelBox that is part of a template
<af:panelBox styleClass="#{attrs.viewIdString}">

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

panelBox

<attribute-class>java.lang.String</attribute-class>
<default-value>"NONE"</default-value>
<required> true</required>
</attribute>

page3

page2

panelBox

page1

panelBox

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

CSS:

public String getViewId() {

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

FacesContext fctx = FacesContext.getCurrentInstance();

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

return viewID.substring(1); }

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

Changing the Splash Screen
• The Splash Screen can be skinned
• Change image
• Change load message
• Change background color
af|document::splash-screen-content{background-color:Green;}
af|document::splash-screen-icon {content:url("../images/cow.gif");}

From ...

To ...

Skin the Unskinnabel
• Some of the generated HTML is not
accessible by a skin selector because it is an
implementation detail of the component
rendering
• How to skin a generated HTML fragment
anyway?
• Use your CSS knowledge
HTML Body

First DIV

<body class="af_document p_AFMaximized">
...
<div id="j_id__ctru1">
...
</div>
Skin CSS

af|document > div { ... }


Skin Deployment

Option 1: Adding the Skin Sources to
the Application Sources
• The Skin definition file is contained in the application's
WEB-INF directory
• Trinidad-skins.xml
• The skin CSS is located in the application's PUBLIC_HML
directory
• The images are located relative to the CSS file
• In PUBLIC_HTML directory
• Subfolder of PUBLIC_HTML directory
• Subfolder of CSS folder
• All sources are deployed with the application
• Easy to do but hard to maintain if a consistent look and
feel should be ensured across applications

Option 2: Deploying a Custom Skin in
a JAR file
• A skin can be deployed and developed separately from the
application
• Specific rules must be followed when creating the JAR file
• The trinidad-skin.xml file that defines the skin and that
references the CSS file must be within the META-INF
directory
• All image resources and CSS files too must be under the
META-INF directory
• The images - and this is important - must be in a
directory that starts with an "adf" root directory or any
directory name that is mapped in the web.xml file for the
resource servlet.
• Place the JAR file in the WEB-INF/lib directory of the
ViewLayer project of the application to deploy

How-to: Deploy Custom Skins in JAR (I)
• Create a directory structure similar to the
following
c:tempMETA-INFadforacleskinimages
META-INFskinscustom.css
META-INFtrinidad-skins.xml

• The image directory in the META-INF
directory must start with "adf" or whatever
string that is defined as the resource loader
path in web.xml
af|inputColor::swatch-overlay-icon:rtl {
content:url(../adf/oracle/skin/images/cfsortl.gif);
width: 12; height: 12;
}

How-to: Deploy Custom Skins in JAR (II)
• trinidad-skin.xml file in the META-INF
directory has the following content
• Example to create "custom" skin
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>custom.desktop</id>
<family>custom</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/custom.css</style-sheet-name>
</skin>
</skins>

How-to: Deploy Custom Skins in JAR (III)
• Create jar file
• jar -cvf customSkin.jar META-INF/

• Copy JAR file to WEB-INFlib
• Configer trinidad-config.xml
<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>custom</skin-family>
</trinidad-config>


Example: Skin Discovery at Runtime

Changing Skins at Runtime
Managed Bean
<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 file
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>#{sessionScope.skinFamily}</skin-family>
</trinidad-config>

SelectOneChoice
<af:selectOneChoice id="skinSelector"
label="Select Skin"
value="#{sessionScope.skinFamily}">
<f:selectItems value="#{skinChooserHandler.SkinChoices}"/>
</af:selectOneChoice>

Discover Skins at Runtime Example

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");
}
...
}

Discover Skins at Runtime Example
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) {
choices.add(new SelectItem(skinFamily, skinLabel));
}
}
return choices;
}

Product Demonstration
Skin Discovery and Setting at Runtime


Skin Debugging

Disable Content Compression
• web.xml
<context-param>
<param-name>
org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION
</param-name>
<param-value>true</param-value>
</context-param>

Firebug
• Use within FireFox

• Inspect and edit HTML
• View and Visualize CSS
• Instantly change CSS definitions

• Exploring the DOM tree
• Execute JavaScript
• https://addons.mozilla.org/firefox/1843/

Web Developer PlugIn
• Firefox and Mozilla
• Menu and a toolbar various
web developer tools
• http://chrispederick.com/work
/web-developer/

Advanced Oracle ADF Layout Managers

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Advanced Oracle ADF Layout Managers

Semelhante a Advanced Oracle ADF Layout Managers (20)

Último

Último (20)

Advanced Oracle ADF Layout Managers