Académique Documents
Professionnel Documents
Culture Documents
Best Practices
Developer Tips
∗ Form Layout Correctly
To keep the header and footer area to stay anchored to top and bottom, and the
center area to take the rest of the space when the zoom in-out is done or size
changed.
∗ Horizontal label sets created using adding input text fields inside panelGroupLayout
where its layout is ‘horizontal’
∗ Partial Page Rendering (PPR)
When change in one field should affect the values in some other fields
Behavior Partial Triggers edit expression
1. adfc-config.xml overview tab managed beans (edit and fine tune the
bean)
Best Practices
To save a great deal of development trouble and reduce maintenance costs:
• Branding Bar
• Form Layout
• Navigation-Master-Detail
• Stretched Header
• Tiled Flowing
• Tiled Stretching
Process for Creating Layouts: Artifacts
1. Create a stretchable outer frame
o Build up the outer structure of your page using a structure of components that
support being stretched and also stretch their children.
o Each layout or panel component's tag documentation will identify whether this is
supported and how to achieve it in its Geometry Management documentation.
Some components have attributes to determine whether children will be stretched
or not. For example:
document has its maximized attribute. Try the maximized attribute NOT
SET on the document component.
showDetailItem has its stretchChildren attribute.
o Inside of the stretchable structure created in step 1, you can create islands of
flowing (non-stretched) components. To make this transition from stretching to
flowing, use panelGroupLayout with layout="scroll" since it supports being
stretched but will not stretch its children.
o Many leaf components do not make sense by themselves. For example, if you
have a series of input components, you would never want to just place these in a
panelGroupLayout because it would be much better for usability if you placed
them in a panelFormLayout so the labels and fields align.
o Scrolling:
You should only have scrollbars around flowing island content. The
recommended transition component for switching from a stretching outer
frame into a flowing island is the panelGroupLayout with
layout="scroll". If the contents of this panelGroupLayout cannot fit in
the space allocated, the browser will determine whether scrollbars are
needed and will add them automatically.
There is a known scrolling issue that has been filed against Internet
Explorer 7.0.5730.11. The issue is only resolved in Internet Explorer 8
when running in pure IE8 rendering mode. If a scrolling box has contents
that are set to be as wide as the containing box and if the contents are large
enough to warrant the need for a vertical scrollbar, an unnecessarily-
needed horizontal scrollbar will be added. The browser is failing to adjust
the width of the contents for the presence of the vertical scrollbar and thus
a horizontal scrollbar appears. This horizontal scrollbar lets you scroll the
small amount of space equal to the width of the vertical scrollbar. With
this issue, it is not recommended to specify a width anywhere between
90% and 100%. Smaller widths will generally not encounter the bug.
Workarounds (as seen in this page) involve setting the widths of the
contents to be smaller than full width so that the browser has enough space
for a vertical scrollbar to fit. For your convenience, a styleClass named
"AFStretchWidth" is built into the skin to specify that a component with
this styleClass will get a reduced width in Internet Explorer 7 or full width
in other browsers. If you need a smaller size for an thin auxiliary column,
you can alternatively use "AFAuxiliaryStretchWidth" or you may
create a similar skin definition in your own skin like this: