adf - layout managers and skinning
DESCRIPTION
ADF - Layout Managers and SkinningTRANSCRIPT
![Page 1: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/1.jpg)
<Insert Picture Here>
Advanced Oracle ADF
Oracle A-Team
Layout Managers and Skins
![Page 2: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/2.jpg)
Layout Managers
![Page 3: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/3.jpg)
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)
![Page 4: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/4.jpg)
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
![Page 5: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/5.jpg)
Stretchable UI example
![Page 6: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/6.jpg)
Flowing (fixed size) UI example
![Page 7: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/7.jpg)
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)
![Page 8: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/8.jpg)
Poetry of
Wisdom
“The cost of geometry management is 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.
![Page 9: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/9.jpg)
Stretchable Layout Managers
af:panelStretchLayout af:panelSplitter
af:panelGroupLayout af:panelDashboard
![Page 10: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/10.jpg)
Flow vs Stretch
![Page 11: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/11.jpg)
Poetry of
Wisdom
“You cannot place components that cannot 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).”
Oracle® Fusion Middleware Web User Interface Developer's Guide - Chapter 8, section 8.2.2.
![Page 12: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/12.jpg)
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”)
![Page 13: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/13.jpg)
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.
![Page 14: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/14.jpg)
Poetry of
Wisdom
“Do not attempt to stretch any of the
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”
Oracle® Fusion Middleware Web User Interface Developer's Guide - Chapter 8, section 8.2.2.
![Page 15: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/15.jpg)
Deconstructing Facebook
panelStretchLayout
pan
elG
rou
pL
ay
ou
t=“s
cro
ll”
pan
elG
rou
pL
ay
ou
t=“v
ert
ical
”
panelGroupLayout=“vertical”
panelGrouLayout=“horizontal”
![Page 16: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/16.jpg)
Leverage JDeveloper Quick Layouts!
![Page 17: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/17.jpg)
Page Templates
![Page 18: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/18.jpg)
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
![Page 19: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/19.jpg)
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}”
![Page 20: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/20.jpg)
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
![Page 21: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/21.jpg)
ADF Faces Rich Client Components
ADF Binding
ADF DataControl
RDBMS
EJB 3.0 Web Service BPEL …
Ajax Render
Kit UI Component
“bindings” ObjectExpr. Language
MODEL UI RENDERING
ADF Ajax Page Lifecycle
Client
![Page 22: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/22.jpg)
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
![Page 23: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/23.jpg)
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 orreading direction
• Skins automatically transform into the appropriate CSS-2 page and component styles
• Skins can be switched dynamically at runtime
![Page 24: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/24.jpg)
Skin Examples
![Page 25: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/25.jpg)
Skin Examples
![Page 26: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/26.jpg)
<Insert Picture Here>
Cascading Style Sheets
Basics
![Page 27: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/27.jpg)
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
![Page 28: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/28.jpg)
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
![Page 29: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/29.jpg)
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}
![Page 30: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/30.jpg)
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
![Page 31: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/31.jpg)
CSS Pattern Matching
Source: http://www.w3.org/TR/REC-CSS2/selector.html
![Page 32: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/32.jpg)
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
![Page 33: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/33.jpg)
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
![Page 34: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/34.jpg)
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:greenwidth: 100 %height: 100 %
• Salary > 5000background-color:orangewidth: 100 %height: 100 %
• Salary > 10000background-color:redwidth: 100 %height: 100 %
![Page 35: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/35.jpg)
<Insert Picture Here>
ADF Faces Skinning
Basics
![Page 36: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/36.jpg)
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
![Page 37: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/37.jpg)
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 {}
![Page 38: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/38.jpg)
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
![Page 39: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/39.jpg)
<Insert Picture Here>
Developing Custom Skins
![Page 40: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/40.jpg)
“Skinning is artwork. You cannot teach good taste, but you can show the techniques to achieve the goal ”
![Page 41: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/41.jpg)
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
![Page 42: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/42.jpg)
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
![Page 43: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/43.jpg)
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>
![Page 44: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/44.jpg)
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
![Page 45: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/45.jpg)
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>
![Page 46: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/46.jpg)
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"}};
}
![Page 47: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/47.jpg)
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");
}
![Page 48: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/48.jpg)
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;
}
![Page 49: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/49.jpg)
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 pseudo-element • ::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
![Page 50: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/50.jpg)
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
![Page 51: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/51.jpg)
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
![Page 52: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/52.jpg)
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)};
![Page 53: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/53.jpg)
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;
}
![Page 54: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/54.jpg)
<Insert Picture Here>
JDeveloper Skinning Support
![Page 55: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/55.jpg)
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
![Page 56: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/56.jpg)
Skin Development Support
• Structure Window Support• Classes• Elements• ID• Use to navigate and
uncomment entries
• Error Margin• E.g. syntax error
![Page 57: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/57.jpg)
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
![Page 58: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/58.jpg)
Theme
• A theme is exposed to skinning developers as an attribute
• BLAF+ skins that provide theme support are medium and rich desktop skins • dark• medium• light• none (default)
af|panelTabbed[theme="dark"] {color: red;}
<af:document theme="dark">
<af:panelTabbed>...</af:panelTabbed>
</af:document>
![Page 59: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/59.jpg)
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>
![Page 60: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/60.jpg)
<Insert Picture Here>
Component Skin Example
![Page 61: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/61.jpg)
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 ...
![Page 62: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/62.jpg)
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>
![Page 63: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/63.jpg)
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
icon="/skins/images/guy.gif"
text="PanelBox Instance Skinned"
styleClass="panelBoxInstanceClass">
<f:facet name="toolbar"/>
</af:panelBox>
<af:panelBox
icon="/skins/images/guy.gif"
text="PanelBox - Skinned">
<f:facet name="toolbar"/>
</af:panelBox>
![Page 64: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/64.jpg)
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
![Page 65: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/65.jpg)
Contextual Skins
• Example: references the current view ID for instance specific skinning of a PanelBox that is part of a template
template
panelBox
page3 page2
panelBox
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);}
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}">
panelBoxpanelBox
<attribute>
<attribute-name>viewIdString</attribute-name>
<attribute-class>java.lang.String</attribute-class>
<default-value>"NONE"</default-value>
<required> true</required>
</attribute>
![Page 66: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/66.jpg)
Changing the Splash Screen
• The Splash Screen can be skinned• Change image• Change load message• Change background color
From ... To ...
af|document::splash-screen-content{background-color:Green;}
af|document::splash-screen-icon {content:url("../images/cow.gif");}
![Page 67: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/67.jpg)
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
<body class="af_document p_AFMaximized">...
<div id="j_id__ctru1">
...
</div>
HTML Body
First DIV
Skin CSS
af|document > div { ... }
![Page 68: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/68.jpg)
<Insert Picture Here>
Skin Deployment
![Page 69: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/69.jpg)
Option 1: Adding the Skin Sources to the Application Sources
• The Skin definition file is contained in the application'sWEB-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
![Page 70: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/70.jpg)
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
![Page 71: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/71.jpg)
How-to: Deploy Custom Skins in JAR (I)
• Create a directory structure similar to the following
• 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
c:\temp\META-INF\adf\oracle\skin\images
META-INF\skins\custom.css
META-INF\trinidad-skins.xml
af|inputColor::swatch-overlay-icon:rtl {
content:url(../adf/oracle/skin/images/cfsortl.gif);
width: 12; height: 12;
}
![Page 72: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/72.jpg)
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>
![Page 73: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/73.jpg)
How-to: Deploy Custom Skins in JAR (III)
• Create jar file• jar -cvf customSkin.jar META-INF/
• Copy JAR file to WEB-INF\lib
• 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>
![Page 74: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/74.jpg)
<Insert Picture Here>
Example: Skin Discovery at Runtime
![Page 75: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/75.jpg)
Changing Skins at Runtime
<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>
Managed Bean
Trinidad Config file
SelectOneChoice
![Page 76: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/76.jpg)
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");
}
...
}
![Page 77: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/77.jpg)
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;
}
![Page 78: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/78.jpg)
Product Demonstration
Skin Discovery and Setting at Runtime
![Page 79: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/79.jpg)
<Insert Picture Here>
Skin Debugging
![Page 80: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/80.jpg)
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>
![Page 81: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/81.jpg)
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/
![Page 82: ADF - Layout Managers and Skinning](https://reader035.vdocuments.mx/reader035/viewer/2022081413/547cb13fb4af9f635b8b4742/html5/thumbnails/82.jpg)
Web Developer PlugIn
• Firefox and Mozilla• Menu and a toolbar various
web developer tools• http://chrispederick.com/
work/web-developer/