ADF - Layout Managers and Skinning

Click here to load reader

download ADF - Layout Managers and Skinning

of 82

  • date post

  • Category


  • view

  • download


Embed Size (px)


ADF - Layout Managers and Skinning

Transcript of ADF - Layout Managers and Skinning

  • 1. Advanced Oracle ADF Oracle A-Team Layout Managers and Skins

2. Layout Managers 3. Introduction to layout managers The case for layout managers We are not web designers! Abstraction from HTML (

, , , etc.) Consistent layout behavior Consistent behavior across browsers Manages browser geometry (stretching and flowing) 4. Working with layout managers To stretch or to flow? Stretching Maximizes browsers 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 5. Stretchable UI example 6. Flowing (fixed size) UI example 7. 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. (* instructors note) 8. The cost of geometry management isPoetry of Wisdomdirectly 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. 9. Stretchable Layout Managers af:panelStretchLayoutaf:panelSplitteraf:panelGroupLayoutaf:panelDashboard 10. Flow vs Stretch 11. You cannot place components that cannotPoetry of Wisdomstretch into facets of a component thatstretches 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. 12. Page layout containers cheat sheet Stretchable by Parent ?Stretch its children?panelStretchLayoutYESYESpanelSplitterYESYESpanelGroupLayout (scroll, vertical)YESNOpanelGroupLayout (default, horizontal)NONOpanelFormLayoutNONOpanelBorderLayoutNONOpanelDashboardYESYES (inside a grid; see also panelBox)panelTabbedYESYES (stretchChildren=first) 13. 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. 14. Do not attempt to stretch any of thePoetry of Wisdomcomponents 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. 15. panelGroupLayout=verticalpanelGroupLayout=scrollDeconstructing FacebookpanelStretchLayoutpanelGroupLayout=vertical panelGrouLayout=horizontal 16. Leverage JDeveloper Quick Layouts! 17. Page Templates 18. 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 19. Code review Switching the template dynamically [] public class YourBeanClass{ [] public String getTemplateURI(){ //Add your dynamic code herereturn /yourPageTemplate.jspx; } [] }TIP: viewId attribute can never be null; always use a fallback EL: viewId=#{empty bean.template ? /defaultTemplate.jspx : beanTemplate} 20. 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 21. ADF Faces Rich Client Components MODELUI RENDERING ADF Ajax Page LifecycleADF Binding Expr. LanguageADF DataControlAjax Render KitEJB 3.0Web ServiceBPELbindings ObjectUI ComponentClient RDBMS 22. 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 23. 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 24. Skin Examples 25. Skin Examples 26. Cascading Style Sheets Basics 27. 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 28. 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 29. 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}

h1.someClassName{color:red} 30. CSS Rules ID selectors #SomeId {color:red}

Can only be used once per document because it is a unique identifier Attribute selectors h1 [class] references all

elements that have a "class" attribute h1 [class = "value"] references all elements that have a "class" attribute with exact the iven vaue Allows to reference attributes with partial value matches as well 31. CSS Pattern MatchingSource: 32. 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 33. 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 34. 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 % 35. ADF Faces Skinning Basics 36. 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 37. Skinning vs. CSS In CSS the

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 {} 38. 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 39. Developing Custom Skins 40. Skinning is artwork. You cannot teach good taste, but you can show the techniques to achieve the goal 41. 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 accessib