Layout Tips - Stretching components to fit browser window

ADF Faces is packaged with rich set of layout managers which makes layout problems trivial. If you really want to have a feel of ADF Faces Layout components, please go through this ADF Faces Demo. If you come from Java Swing world, you can see lots of familiar faces here as well. I really like the ADF Faces stretchable layouts with which you can easily build hassle free, browser friendly web applications. Recently, I noticed an interesting post from Matt Cooper on exploring the richness of PanelStretchLayout - Stretchable Tiled Layout . This idea is very useful when you need to stretch multiple child components based on the browser size.

A Case Study

At this time, let me share some basic tips on lay outing components on a web page built using ADF Faces by taking a simple example.

Consider a use case where you need to build a web page as shown below.


Apparently, screen is split in two parts - left hand side contains basic search functionality and right hand side contain a tabbed pane. UI requirement here is that inside the right pane all the components are supposed to occupy maximum available size on the screen(i.e. components are supposed to be stretchable). ADF Faces lay outing mechanism got a PanelSplitters component to divide a region into two parts with a repositionable divider.

PanelSplitters are used to divide a region into two parts with a repositionable divider. The two parts are identified as the "first" facet and the "second" facet. If the contained component supports it, the contents of a section will stretch to fill up all available space in that section. The panel splitter can be adjusted with the mouse, by pressing a collapse button, or by use of the arrow keys when the splitter is selected. A panel splitter can split horizontally or vertically based on the orientation attribute.

So af:panelSplitter can be used to split the screen in the above mentioned case as well.

Tabbed panel on right hand side can be realized using af:panelTabbed

This component uses <af:showdetailitem> to organize content into each tab body panel. The <af:showdetailitem> will allow stretching if:
* It contains a single child
* It has stretchChildren="first" specified
* The child has no width, height, margin, border, and padding
* The child must be capable of being stretched


At this stage, the jspx may look like as shown below;


How to stretch child components?

Now the task left is to identify the layout for the container which is smart enough to stretch it children as well. Fortunately ADF Faces do support af:panelStretchLayout that fits well with our requirement.

The panelStretchLayout component stretches the child in the center facet to fill all of available space. The available space may be constrained by the presence of other children in the top/bottom/start/end facets. When these children are present, they occupy space defined by the topHeight/bottomHeight and startWidth/endWidth attributes.

So far, so good. Now’s the time to sweat your brain. <af:panelStretchLayout>  comes with only 3 facets. As per the above UI design requirement, it is required to have 4 graphs to be displayed in equal size, occupying the available area on the parent container. No worries, <af:panelStretchLayout>  is smart enough to stretch it child 'layout containers' as well and there is a provision to specify heights in percentage for each facets ( topHeight / bottomHeight). So let us go ahead and add a child panelStretchLayout to keep the additional elements. Now the web page may have the below shown structure.


How to stretch a table?

Before winding up this session, let us have a quick look at stretchable table as well. Consider the second tab of the above UI where the requirement is to stretch table to fill the entire available area.


Obviously table (Here table is added inside panel header) needs to be wrapped inside a af:panelStretchLayout. Interestingly af:table got one special attribute - columnStretching - for stretching one of its column to spread over the available space of its immediate parent container. And ideal column for stretching could be one with maximum length, say for example 'description' column.

Further Reading
Chapter 8 Organizing Content on Web Pages from Web User Interface Developer's Guide will help you to understand ADF Faces layout components better.
Learn More ...

If  you are curious to learn the internals of the ADF Business Components and ADF Binding Layer,  the following book is for you - Oracle ADF Real World Developer’s Guide.
More details about this book can be found in this post- http://jobinesh.blogspot.in/2012/07/pre-order-your-copy-of-oracle-adf-real.html

Comments

  1. Hi,
    Lets say there are 5 columns in a table. If we want all the columns to be equally spaced and occupy the entire browser width, would it be possible?

    ReplyDelete
  2. Bala
    There is no direct declarative support for this specific case, as of now

    ReplyDelete
  3. jobinesh,
    Thanks for the reply. I have one more question:
    How to assign width to columns in tables in a LOV window. In general, how to design model based LOV's.

    ReplyDelete
  4. Bala
    Currently ,this is not supported.But the default implementation is good enough to meet most of the use cases. That said, however there are plans to enhance this feature as well.

    ReplyDelete
  5. Great stuff!
    But I have another problem: how to get adf to give you scrollbars when content grows beyond page height? Using some other layout?

    ReplyDelete
  6. Hello!
    I have a "resizing" issue.
    I need to resize a table depending on the screen resolution. I wanted to resize the column width using percentages (%). Let's say:
    Table width: 100%
    Column1 width: 30%
    Column2 width: 50%
    Column3 width: 20%

    This doesnt work, and has some bugs I think. Working with pixels works fine for me.

    I tried to use your this stretchpanel but it did not work neither.

    Do you have any suggestions for this?

    Thanks,
    Beto

    ReplyDelete
  7. Beto
    You may need to try setting columnStretching if the requirement is to stretch column to fill the available area in a table

    ReplyDelete
  8. Thanks for sharing. Did you know that CSS enables you to control over the positions and dimensions of all page elements.

    ReplyDelete
  9. can your share the jspx page code. for me the page renders differently for different browsers

    ReplyDelete
  10. Hi,

    The post was very useful.. i have 2 showdetailitems inside panelaccordin ... I need the items inside the panel accordin of equal height... but the inline style in detailitem doesn support it... i am unable to set the height for the detail items inside the panel accordin.. can u pl suggest me a slution on the same ..

    ReplyDelete
  11. Vinitha,
    I don't think you need to specify inline style here. Keep discloseMany="true" for panelAccordion, and disclosed="true" for showDetailItem. Refer demo - http://jdevadf.oracle.com/adf-richclient-demo/faces/components/panelAccordion.jsp

    ReplyDelete
  12. Hey Jo,

    Does adf has both sides panel splitter or Is there a way to use a panel splitter for left and right splits.
    for example, when clicked on left arrow button, hide left pane and show right pane
    when clicked on right arrow button, hide right pane and to show left pane

    We have 2 big graphs on the left right sides of panel splitter(as shrieked graphs), we wanted to see the full view one at a time, on either sides.

    Thanks,
    Sanjay

    ReplyDelete
  13. Sanjay,
    Please see the demo -http://jdevadf.oracle.com/adf-richclient-demo/faces/components/panelSplitter.jspx

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. How to stretch the ADF table vertically, so that it occupies the entire dialog size.

    ReplyDelete
  16. Hi Jobinesh,

    I was wondering if it is possible to set up a table in ADF where each row is of a different size based on the data it contains. If not, are there any work arounds I could try to change the row heights on a table?

    ReplyDelete
  17. Nice article and great knowledge. Thanks for the share. I love this story and enjoy with your words!
    Split face Tile

    ReplyDelete

Post a Comment