Saturday May 07, 2005

You have probably noticed that when you create a new page or project in Creator, the page has a grid on it - and when you drag components on it, they get positioned precisely where you drop them. This is called "grid layout". Behind the scenes, we use CSS 2 absolute positioning to ensure that the component ends up at the exact same position in your browser.

In addition to Grid Layout, you can change your page layout to something called Flow Layout as well. Why would you use one over the other?

Grid Layout offers two main advantages:

• It's easy.
• It's fast.

However, Grid Layout does have some serious disadvantages:

• Your pages do not resize well. For example, if you want your components to stretch when the user resizes the browser, you cannot do that with Grid Layout. (This is almost true... we'll get back to that)
• Your pages will not adapt to differing font sizes in different browsers, or even user-overrides of font sizes. Many browsers offer a "zoom" functionality - I use it myself when I visit pages where the fonts are too small to be read comfortably. If you have designed a page where you have a label that is positioned exactly fourty pixels to the left of a text field, that will not work well if the page is zoomed to a much larger size since now the textfield will crop the label.
• You don't get baseline alignment for components you intended to be on the same line. For example, you typically want a textfield to be aligned with the baseline of its label (such that the bottom of the textfield is aligned with the bottom of letters like "a" and "x", not letters like "j", "g" and "y".)

So should you just switch to Flow Layout for your page designs?

That's not a slamdunk either. Creating pages with flow layout is a lot more tedious. You will basically be creating layouts the way pages were done in the Bad Old Days - using layout tables. The closest thing you can get to a layout table with the standard JSF components is the Grid Panel component. The main disadvantage of the Grid Panel however is that it doesn't offer cell merging with colspan and rowspan, so you'll need to nest grid panels instead.

The good news is that you can get a lot of mileage with a hybrid approach! The idea is that you can create the -rough- layout of your page using grid layout to drop your components - a page fragment as a header, a page fragment on the left as a navigation menu, and then a grid panel or two or three in different areas, along with some text label components, to finish your layout. You then drop your form components inside the layout components (like grid panel) to finish your page. The reason this is better, is that inside these layout components, the positioning is using flow mode. In the screenshot on the right, the label, textfield and error message in each row inside the grid panel will be laid out in flow mode inside the grid panel, meaning that if the label takes up more room, the adjoining textfield (and indeed the whole layout column) will move to the right to make enough room to fully display it. Try it - in Mozilla/Firefox, press Ctrl-shift-plus to zoom in on your page. Likewise, notice how the Data Table below it has been put inside a Grid Panel, along with the summary label below it. If we didn't do this, and simply placed the label below the data table using absolute positioning, then when the application is run, it's possible (and in fact, likely) that more rows will show in the data table, and the table will run on top of the label. With the label inside a grid panel, it will move down to always be right below the table.

I mentioned earlier that it isn't possible to have your grid layout components stretch when the browser is resized. That's not true; you can use percentages on your width and height settings for the components. This is tricky however and doesn't work very well. Let's say you drop a component at (100,100), and set its width to "100%". Now the width of the component will stretch to the full width of the browser. The problem is that this does NOT consider the position of the component. So if the browser window is 800 pixels wide, the component will be 800 pixels wide, but since it's positioned at (100,100), the right hand side corner will be at (900,100) and you will have a horizontal scrollbar - not what you intended I'm sure. The easiest way to "fix" this is to simply make the percentage less than 100%, say 80% (or gradually less the further your component is positioned to the right) but it should be clear that this is a hack. You can counteract some of these effects using negative margins and such but I don't recommend it.

The main point I wanted to get across in this blog is that even though the page layout property makes "Grid Layout" or "Flow Layout" an either/or-decision, the reality is more complex; every component can be positioned in flow mode or absolute positioning mode. What determines this is the style property on the component.