JamesBranam's Blog

JSF 1.2 Layout Panel Component

Hi all,

I'm focusing on JSF 1.2 Woodstock components today. Today I'll talk about the Layout Panel component. This is what the NetBeans 6.5 Helpset has to say abou the component:

The Layout Panel component is a panel that groups other components visually. The Layout Panel component is called panelLayout in the JSP code, and the associated Java class in the page bean is PanelLayout.This component is a JavaServer Faces 1.2 component.

After you drag the Layout Panel to your page, you can add components by dropping them on the Layout Panel. The primary feature of this component is that it can be either in Grid Layout or Flow Layout, which affects how the components you drop on it are arranged. See below for more information on these two settings for the panelLayout property.

The IDE automatically adds a Layout Panel component to a new Tab Component. You see it below the tab component when you add a new tab to your page, for example, by dropping a Tab Set component on a page. If you select the Layout Panel component below the Tab component, you see the Layout Panel component's Properties window.

The Layout Panel component is rendered as a "div" element surrounding the group of child components, which puts the Layout Panel on its own line on the page, below any component that precedes it and above any component placed after it. If you want a panel that is rendered on the same line as the components that precede and follow it, use a Group Panel component.

Layout Modes

Depending on whether you choose Grid Layout or Flow Layout for the panelLayout property, there are a number of ways to position the components in the Layout Panel.

Flow Layout

Flow Layout is the default setting for this component. Setting the panelLayout property to this value aligns components from left to right on the top line as you drop them on the panel. When no more components fit, the components are lined up left to right on the next line, proceeding down the page.

• When you drag the component over a layout panel that already contains a component, an insert marker appears at the nearest insert position. For example, after dropping a button, if you want to drop another component and you hover over the left half of the button, you see the marker to the left of the button. Otherwise it is on the right side. When you drop the current component, it is positioned at the marker position.
• If you drop a component on the Layout Panel in the Navigator window the component is appended to the other components.
• You can select a component under the Layout Panel node in the Navigator window and drag it to a new position in the Layout Panel.

Grid Layout

Setting the panelLayout property to Grid Layout aligns components at the location where they were created on the panel. This is often called absolute positioning. If you are using snap to grid, each component is positioned relative to the nearest grid corner when it is created. If snap to grid is off, Grid Layout has no effect, and the panel acts as though it is in Flow Layout.

By default, when you drop components on the panel, they are positioned in a single column, one above the other. You can change the arrangement of the components by selecting the Panel Layout component and dragging the selection handles to change the panel's size.

Pretty sweet, eh?

See you tomorrow.

--James

Posted at 09:00AM Aug 15, 2008 by branajam in NetBeans  |  Comments[5]