Premise and Objective

• Every new technology uses a different

ADF Faces RC Screen strategy for UI layout
Layout Basics – Oracle Forms, HTML, Java apps
• This strategy is often a well-kept secret
– You often need to discover it or invent one
• The presentation discusses a strategy
Peter Koletzke and the palette of tools you use with it
Technical Director &
Principal Instructor • It also provides some tips
– All for ADF Faces RC, JDev 11g

Survey Agenda
• ADF Faces?
– 10g • The strategy White paper
– 11g includes hands-
• The palette on practices.
– Trinidad
• IDEs?
– Developer Forms/Reports
• The tips and techniques
– JDeveloper Slides and white paper are on
– Eclipse the quovera.com websites.
White paper will be in the
– NetBeans NYOUG journal and slides will
be on the NYOUG website.
– Other
3 4
 The Problem Strategy Principles
Sixteen million colors • Design the page using layout
in your palette components
are hard for any artist, • Use facets in the layout
especially a beginner, components
to turn down.
• Set properties for behavior
—Buffy Sainte-Marie
(1941-)

5 6

Know Thy Layout Components Know Thy Facets

• Subcomponent providing special
• ADF Faces RC components that hold other functionality for layout components
components – <f:facet> component (JSF library)
– Similar to <table> in HTML
– Nested within other component
– A.k.a., “container components”
• Like af:panelBorderLayout)
– Maintain relative layout across browsers
• One common function: precise
• Allow for sophisticated layouts
placement, for example:
– Nest layout components within layout components
– Footer facet:
– Virtually limitless possibilities • Contained components always appear at the bottom of
the component
• Hide or display the contents using the
– Center facet
layout component properties • Contained components always appear in the middle area
of the component

7 8
 Know Thy Properties Agenda
• Properties modify the behavior
drastically • The strategy
• Example, af:spacer
– Height=100
• The palette
– Width= 100
• Don’t forget the
• The tips and techniques
Style properties
for layout
components

9 10

Palette Item: Layout Components Some Layout Components

11.1.1
• Most are on the Layout page of
the Component Palette • af:panelAccordian
– Use them to hold other components – Like MS Outlook
• af:panelHeaderLayout – Alternative to tabs
– Region title
– Stack components under it
• af:panelStretchLayout
– Expands contained components to fill width
– Use if another container cuts a component
• af:panelGroupLayout
– Lay out components in a row or
in a column
horizontal
vertical

11 12
 More Layout Components Panel Form Layout
• af:popup
– Drop in an af:dialog or af:window
– Drop af:showPopupBehavior into an action item
(button or menu choice)
• Lay out fields in rows and columns
• af:menuBar
– Perfect for most input forms
– Panel Menu Bar
– Creates menu area, drop in af:menu • Right justifies prompts
then af:menuItem • Left justifies fields
• af:panelLabelAndMessage
– Provides a prompt for a group of
• Tab order is down the first column,
objects then across to the second column
– FirstName and LastName fields with – Not necessarily intuitive
a prompt of “Name” – Workaround discussed later
– Use inside af:panelFormLayout
13 Demo 1 14

Panel Border Layout Even More Layout Components

• af:panelBorderLayout • af:panelSplitter
– Predefined layout – Split pane control
areas – Optional: user can
move the drag bar
– Uses facets to hold • Horizontal or
the contents of each • Vertical
area • af:calendar
• Start, end, top, – MS Outlook style
bottom (and more)
• af:carousel
• Center area – Good for visual
stretches its contents browsing
to fill the area

15 16
 Important Property Setting Modifying the Visual Aspects
• styleClass=AFStretchWidth • Skins
– Use this so container – First and foremost – get this right
components (like af:table) fill • Properties - secondary
their width before AFStretchWidth
– ContentStyle
after
• Do not use width=100% • For data inside
the component
– Not as portable (foreground)
– InlineStyle
• Set from tab area
below it
• Or just type it in
• Last resort, though
Demo 2 17 18

inlineStyle == Last Resort? Another Visual Aspects Property

• Reasons • StyleClass
– Dialog is the same for all components – Equivalent to the HTML class property
– Some components ignore some or all – Apply existing style sheet selectors
settings – Can apply more than one to a component
– Other properties may Text Background Box Classification

achieve the goal

– Not reusable
• Consider a skin change
instead
– Will apply universally
– New skin editor in 11.1.2!
11.1.1
19 20
 Agenda Don’t Invent a Layout
• Quick Start Layouts: prebuilt functionality
• Access this window when creating the page,
• The strategy template, or
page fragment
• The palette • Find by
category, type,
and layout.
• The tips and techniques • Each QSL
has a “name”
• Copy the tags
to existing
pages
• 107 options

21 Demo 3 22

More Perfect Layout Tips Create a

• Design page fragments, not separate Template
pages • New gallery item for
• Use af:spacer to fine tune placement JSF page template
– Sparingly however! • Define facets
– Your own layout
• For scrollbars, use af:panelGroupLayout areas
with Layout = scroll • Add attributes
• Generalize layout into a template – Can transfer data
– Once per project/enterprise from page to
template
– Consistently repeatable
• Add container
– Easy to update components
11.1.2
23 24
 Use the Template Workaround for Tab Order Issue
• af:panelGroupLayout
• Application’s – Orientation = vertical
templates – af:panelFormLayout
• af:inputText
appear in the • af:inputText
JSF Page dialog – af:panelFormLayout
– Page Template • af:inputText
• af:inputText
pulldown
– af:panelFormLayout
• The layout elements • af:inputText
are referenced • af:inputText

from the template • Set fieldWidth and labelWidth for all

af:panelFormLayout components the same
For This Example
• White paper contains hands- fieldWidth = 300px
on practice with steps labelWidth = 100px
11.1.2 Inline Style = width:800px;
25 26

Result Dialogs and Windows

• af:dialog
– A window with preassigned buttons – modal or not
• Problems • OK/Cancel • Yes/No/Cancel
• Yes/No • Cancel
– Width of the browser window does not
affect the container • af:noteWindow
– Width of the column in the container is not – Floating window containing read-only information
based on the width of the widest field in • af:panelWindow
that column – A bordered box (“window”)
– Not immune to the user increasing the font • af:decorativeBox
size in the browser – Window with prebuilt “themes”
Hands-on practice
– Takes a bit of experimentation in the white paper (color gradiant schemes)

Demo 4 27 28
 Popup Window Example Tip: Use the Structure Window
• Add an af:popup • Drop on top of container into which you
– Anywhere in the form want the component to appear
– The visual editor will change to show just • Much more accurate
that window
– Click in another node to switch out of that • Other options
window editor – Click the component
• Add an af:panelWindow after selecting the
– Add contents to the window Structure window
node
• Drop an af:showPopupBehavior
onto a button or link – Use the bread
crumbs in the editor

29 30

Design This Container Approaching a Layout

• An option in the pulldown menu for the • Use Quick Start Layouts
layout component
• Use templates
• Familiarize yourself with the palette
– Components, facets, properties
• Know where to find information
• Allows you to resize container elements
visually • Above all:
– This action changes the property values
• Another tip: Assign color to the
borders so you can see the containers
Demo 5 31 32
 Visual Component Guide
JDeveloper Help Center
• Help | Table of
Contents
• Search engine
• Link to JDev
forum
• Favorites tab
• Dynamic tab
– Context-
sensitive list
based on the Memorize this one
task at hand
• Opening a topic
opens another
tab • JDev Help Center (help system)
– Search for “enhanced tag doc” (local doc)
33 34

http://rea.oracle.com af:panelFormLayout Demo Page

Sandbox

Rich Client

35 36
 ADF Faces RC Website Useful Oracle Blogs
• http://www.oracle.com/technetwork/developer
• Martin Deh
-tools/adf/overview/index-092391.html – martindeh.blogspot.com
– “ADF Layout Overview and Best Practices”
• The Web UI Developer’s Guide for Oracle
ADF • Steve Muench
– blogs.oracle.com/smuenchadf
• Tutorials • Frank Nimphius
• Demos – thepeninsulasedge.com/frank_nimphius/
• Cheat sheets • Shay Schmeltzer
– blogs.oracle.com/shay
• ADF Tips
– www.adftips.com

37 38

Oracle Press Resources

I’d Hammer in the Morning

All parts should go together

without forcing...
By all means,
do not use a hammer.

—IBM Maintenance Manual (1925)

39 40
 Summary Designer
Handbook
Developer
Advanced
Forms &
Reports
JDeveloper 3
Handbook
 www.quovera.com for files
 Books co-authored with Dr. Paul
Dorsey, Avrom Roy-Faderman, &
• The “secret” strategy: Duncan Mills

– Know your palette: Layout ORACLE9i

JDeveloper
ORACLE
JDeveloper 10g
Handbook

components, facets, properties Handbook

– Work declaratively http://www.quovera.com

• Founded in 1995 as Millennia Vision
– Collect tips and techniques Corp.
• Profitable for many years without
• Follow the hands-on practices in the outside funding
• Consultants each have 10+ years
industry experience
white paper • Strong High-Tech industry background
• 200+ clients/300+ projects
• Your layouts can achieve • JDeveloper Partner
• More technical white papers and
perfection! presentations on the web site

41 42