
810
DEVELOPING
COLDFUSION 9 APPLICATIONS
Requesting and Presenting Information
Las
t
upda
te
d 8/5/2010
Styling layouts
The
cflayout
and
cflayoutarea
tags have
style
attributes. The
cflayout
tag
style
attribute controls the style of
the layout container, and sets default values for many, but not all, styles for the layout areas. For example, the color and
background color styles of the
cflayout
tag set the default text and background colors in the layout areas. But the
cflayout
tag
border
style sets only the color of the border around the entire layout, not the layout area borders. The
cflayoutarea
tag
style
attribute controls the style of the individual layout area and overrides any corresponding
settings in the
cflayout
tag.
As is often the case with complex controls, the effects of layout and layout area styles can vary. For example, do not
often specify the
height
style in the
cflayout
tag; instead, specify height styles on each of the
cflayoutarea
tags.
The following simple example shows a tab layout with two layout areas. The layout has a light pink background color,
and the layout areas have three pixel-wide red borders.:
<cflayout name="layout1" type="tab" style="background-color:##FFCCCC">
<cflayoutarea title="area1" style="border:3px solid red">
Layout area 1
</cflayoutarea>
<cflayoutarea title="area1" style="border:3px solid red">
Layout area 2
</cflayoutarea>
</cflayout>
Using pods
The cfpod control creates a content region with a title bar and surrounding border. You can define the pod content in
the
cfpod
tag body, or you can use a bind expression to dynamically get the content from a URL. Pods are frequently
used for portlets in a web portal interface and for similar displays that are divided into independent, possibly
interactive, regions.
You control the pod header style and body style independently by specifying CSS style properties in the
headerStyle
and
bodyStyle
attributes.
The following example uses multiple pods inside
cflayoutarea
tags to create a simple portal. The time pod gets the
current time from a CFML page. The contents of the other pods is defined in the
cfpod
bodies for simplicity. Each pod
uses the
headerStyle
and
bodyStyle
attributes to control the appearance.
The cfpodExample.cfm application has the following code: