panelGridLayout

Creating a panelGridLayout or tableLayout structure

Posted on Updated on

It may be tempting to go crazy with panelGroupLayout components in ADF Faces and ADF Mobile. The panelGroupLayout is not the universal hammer. In many cases, you will have a simpler structure (easier to maintain, more predictable, faster performing, more flexible) if you build your structure using a panelGridLayout or tableLayout instead.

structure

When you are given a mock-up of what the application should look like, you may not know how to break it down into something simple. Either print out the design on a piece of paper or open it up in a graphics program where you can draw some lines.

  1. Draw vertical lines representing potential column divisions (red)
  2. Draw horizontal lines for potential row divisions (green)
  3. Now that you have a basic grid structure, use a different color (yellow) to draw x marks where you see cells that need to span multiple columns or rows:
    Initial set of lines
  4. You may find that your column lines really don’t make sense (in this case, the 2 middle columns had no cells in them that didn’t need to span into a nearby column. This is an indication that there probably ought to be 2 separate grids or tables.  Use a new color (magenta) to draw a line where the division makes sense and repeat the process again:
    Refined lines

Now you can go back to coding your gridRow/gridCell or rowLayout/cellFormat components because you can visually see where the content goes and where you need to use a special columnSpan or rowSpan. As an added bonus, you now have the ability to specify the sizes for your cells as well as the horizontal and vertical alignments of your cells–something panelGroupLayout would not allow you to control.

Final structure

Notice that the labels and fields of grid 2 (columns 1 and 2) are showing separate components. This is done so that there can be matching horizontal alignment among the fields of the two rows. If these were input or select components, you would need to use simple=”true” (to hide the built-in label) and then use separate outputLabel components that reference them.

While we are only using consecutive grids in the example discussed in this article. You might come across a need to nest a grid inside of another grid. Do not excessively nest panelGridLayout nor tableLayout components (if you have 3 or more deep, consider a re-evaluation of your structure). You may find it helpful if someone else reviews your structure. Your goal should be to create something simple.

Advertisements

Stretchable Tiled Layout

Posted on Updated on

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%"
  dimensionsFrom="parent">
  <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%"
  dimensionsFrom="parent">
  <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%"
  dimensionsFrom="parent">
  <f:facet name="top">
    <!-- first quarter component rooted here -->
  </f:facet>
  <f:facet name="center">
    <af:panelStretchLayout id="inner" topHeight="33%" bottomHeight="33%"
      dimensionsFrom="parent">
      <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 panelGridLayout (don’t forget halign=”stretch” and valign=”stretch” on your gridCell components).
  • 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: