With the Oracle ADF Faces Rich Client, have you ever wanted to divide a stretchable box into tiles?

Divided in Half

Let’s say you just wanted to divide a stretchable area in half, the top half gets 50% of the space and the bottom half gets the other 50%.  If your stretchable area is one created by a component that stretches its children (please read Layout Basics if this term doesn’t mean anything to you), you achieve this half-and-half layout by using a panelStretchLayout:

<af:panelStretchLayout id="half" topHeight="50%">
  <f:facet name="top">
    <!-- top half component rooted here -->
  </f:facet>
  <f:facet name="center">
    <!-- bottom half component rooted here
         (the center facet gets the remaining space) -->
  </f:facet>
</af:panelStretchLayout>

Remember, avoid inlineStyle if at all possible; do you see any inlineStyle values here?

Divided into Thirds

What if you wanted it to be divided into thirds?  Just add one more facet to the panelStretchLayout like this:

<af:panelStretchLayout id="thirds" topHeight="33%" bottomHeight="33%">
  <f:facet name="top">
    <!-- top third component rooted here -->
  </f:facet>
  <f:facet name="center">
    <!-- middle third component rooted here
         (the center facet gets the remaining space) -->
  </f:facet>
  <f:facet name="bottom">
    <!-- bottom third component rooted here -->
  </f:facet>
</af:panelStretchLayout>

Divided into Quarters

Okay so now what are you gonna do–the panelStretchLayout doesn’t have any more facets to choose from that would appear below “bottom”?!

Well, now you need to nest panelStretchLayouts where the inner panelStretchLayout uses 3 facets (space divided into thirds) and an outer panelStretchLayout that uses 2 facets (space divided into 25% and 75%) like this:

<af:panelStretchLayout id="outer" topHeight="25%">
  <f:facet name="top">
    <!-- first quarter component rooted here -->
  </f:facet>
  <f:facet name="center">
    <af:panelStretchLayout id="inner" topHeight="33%" bottomHeight="33%">
      <f:facet name="top">
        <!-- second quarter component rooted here -->
      </f:facet>
      <f:facet name="center">
        <!-- third quarter component rooted here
             (the center facet gets the remaining space) -->
      </f:facet>
      <f:facet name="bottom">
        <!-- fourth quarter component rooted here -->
      </f:facet>
    </af:panelStretchLayout>
  </f:facet>
</af:panelStretchLayout>

These all line up vertically, what if I wanted horizontal tiles?

Instead of using “top” and “bottom” facets, use “start” and “end”.

What if I don’t have a stretchable area?

Without being stretchable, you cannot evenly distribute space.  You would then use something like an Apache MyFaces Trinidad trh:tableLayout (as seen in the Tiled Flowing demo or even a layout=”vertical” af:panelGroupLayout.

Are there any other tiled layout solutions?

Yes, for the stretchable area case, you could:

• Use panelSplitters instead of panelStretchLayouts though splitter panels don’t use percentage units–only pixels, or
• Use grid structure to generate the tiles as seen in the Tiled Stretching demo.

For more info, refer to the demos, documentation, forums, news, etc. on the Oracle ADF Faces Rich Client Components page on the Oracle Technology Network:

• http://www.oracle.com/technology/products/adf/adffaces/index.html

There is now a tutorial for migrating from Sun’s Woodstock JSF component into Oracle ADF Faces Rich Client components:

http://www.oracle.com/technology/products/adf/adffaces/woodstock2adfMatix.html

Oracle JDeveloper 11g is now production.

The Oracle ADF Faces Rich Client Demos are also now available online.