Programming with Adobe Flex

Panels, Divided Boxes, Text Areas, and Color Pickers

Run the Flex programIf you have the Flash Player plug-in (version
9 or later) installed in your browser you should be able
to run the program from this lesson by clicking on DividedBoxes01. This should cause the
program to run in your browser.

(Depending on how you have your browser is configured,
it should either run in a new tab or run in a new browser
window.)

If you don't have the proper Flash Player installed, you
should be notified of that fact and given an opportunity to
download and install the Flash Player plug-in program.

Learn how to nest divided boxes in a Panel object, how to use the TextArea
class to display non-editable text, and how to use the ColorPicker class to
allow the user to assign colors to components.

In this lesson, you will learn how to nest divided boxes in a Panel
object, how to use the TextArea class to display non-editable text, and
how to use the ColorPicker class to allow the user to assign colors to
components.

Panel - consists of a title bar, a caption, a
border, and a content area for its children (see Figure 1).
Typically, you use Panel containers to wrap top-level application
modules.

HDividedBox - lays out its children
horizontally in the same way as the HBox container, but it inserts a
draggable divider in the gap between each child. A user can drag the
divider to resize the area allotted to each child.

VDividedBox - lays out its children
vertically in the same way as the VBox container, but it inserts a
draggable divider in the gap between each child. A user can drag the
divider to resize the area allotted to each child.

ColorPicker - provides a way for a user
to choose a color from a swatch list. The default mode of the component
shows a single swatch in a square button. When the user clicks the swatch
button, the swatch panel appears and displays the entire swatch list
(see Figure 2).

TextArea - a multiline text field with a
border and optional scroll bars. The TextArea control supports the
HTML rendering capabilities of Flash Player and AIR. You can also set a
TextArea control to read-only to disallow editing of the text.

In this lesson, I will present and explain an application named
DividedBoxes01 that illustrates the use of the following classes:

Panel

HDividedBox

VDividedBox

TextArea

ColorPicker

The application displays the title and three verses of a poem in four
TextArea objects that are placed in two VDividedBox objects
(see Figure 1).Â The two VDividedBox objects are nested in a
single HDividedBox object. I recommend that you run the online version of this program before continuing
with this lesson.

Program output at
startup

Figure 1 shows the output that should appear in your browser
when the application first starts running.Â Because of the use of a gradient
background, you will probably need to manually resize your browser window to
that shown in Figure 1 to cause your output colors to match those shown in
Figure 1.

As the labels indicate, you can use the two ColorPicker objects at
the bottom to assign new colors to the border of the Panel object and
the dividers that separate the panes in the divided boxes.Â For example, if you
click on the color picker for the Border, you should see something like that
shown in Figure 2.

That's enough about colors.Â Let's take a look at our ability to drag the
dividers to expose the title, author, and verses of the poem.

As you can see in the above images, this user interface contains four panes
with draggable dividers separating them.Â None of the panes are sufficiently
large to allow for reading the material contained in the pane without using the
scroll bars.Â In some cases scroll bars work well, and in other cases they
don't work so well.

The title and the author of the poem

The upper-left pane contains the title of a poem named A Hunting
Morning by Sir Arthur Conan Doyle.

The pane in Figure 5 is not sufficiently wide to allow for reading either
the full name of the poem or the full name of the author.

Expose the title and author

The vertical divider has been dragged sufficiently far to the right to
expose the full name of the poem and its author in Figure 6.

The poem has three verses. Each verse of the poem is displayed in a
different pane, with the first verse being displayed in the lower-left pane.Â
The complete verse has not been exposed in any of the images that you have seen
so far.

Expose Verse 1

The leftmost horizontal divider has been dragged sufficiently far up and the
vertical divider has been dragged sufficiently far to the right to expose the
entire verse with no requirement for the use of scroll bars to read the verse
in Figure 7.

Discussion and sample code

Now that you know how the application works, it's time to take a look at the
code behind the user interface.

Will explain in fragments

I will explain this Flex application in fragments.Â A complete listing of
the XML code is provided in Listing 7 near the end of the lesson.

Beginning of the XML code

The XML code for the application begins in Listing 1.Â In addition to
creating the Application container element and setting its background
gradient colors, Listing 1 also defines the beginning tag for a Panel element.

The visual manifestation of the Panel object is the structure in
Figure 9 containing the title bar, the caption, a border, and a content area
for its children.

Setting the border color

Of particular interest is the syntax of the attribute named
borderColor in Listing 1.Â However, I will defer a discussion of that
syntax until later when I explain the use of a ColorPicker object.

The backgroundAlpha value

Perhaps the only other attribute in Listing 1 that needs to be mentioned is
backgroundAlpha.Â This is the alpha value for the content area of the
Panel exclusive of the title bar and the border, which have their own
alpha value.Â The backgroundAlpha is set to 0.0 in Listing 1 causing the
content area to be totally transparent.Â This allows the gradient colors of the
Application to show through.Â You can see those colors (mixed with
pure green) showing through the dividers in Figure 9.

The borderAlpha value

There is another important property of the Panel named
borderAlpha that is not set in Listing 1 because the default value is
accepted instead.

The default value of borderAlpha is 0.4.Â Therefore, when the color
of the border is set to pure green, as is the case in Figure 9, the gradient
background partially shows through causing the border to be brown at the top
and yellow-green at the bottom.

An HDividedBoxAn HDividedBox can have many
children separated by draggable dividers in the gaps between
the children.Â The children of an HDividedBox are laid out
horizontally.

Each of these children also has two children of type TextArea.Â The children of a VDividedBox are laid
out vertically and separated by draggable dividers.

The four children of the vertical divided
boxes

The four children of the vertical divided boxes are all objects of the class
named TextArea.Â One of the text areas is populated with the name of the
poem and the name of the author (see Figure 6).Â Each of the other three
text areas is populated with one verse from the poem (see Figure 7, Figure
8, and Figure 9).

The containment structure in XML code

Listing 2 shows the hierarchical containment structure down to and including
the text that defines the name of the poem and the name of the author.

For example, the backgroundColor of the HDividedBox is
determined by the selected value of the rightmost ColorPicker object at
the bottom of Figure 1.Â This color determines the color of the vertical
divider because that part of the background is visible between the two
VDividedBox objects.

The backgroundAlpha value of the
HDividedBox

The backgroundAlpha value of the HDividedBox is set to 0.4 to
cause it to match the default borderAlpha value of the panel.Â This
causes the color of the vertical divider to match the border of the
Panel when both ColorPicker objects are set to the same color
value.

The backgroundAlpha value of the
VDividedBox

The backgroundAlpha value of the VDividedBox is set to 0.0 to
make it totally transparent.Â This causes the color of the horizontal dividers
to match the color of the vertical divider at the point where they intersect.Â
Rather than trying to explain it, I will leave it as an exercise for the
student to understand why this is true.

Attributes of the TextArea element

By now, you should have no difficulty understanding the values assigned to
all of the attributes of the TextArea element.

The htmlText property

The TextArea class has a text property and an htmlText
property, either of which could be used in this application.Â I elected to use
the htmlText property as shown in Listing 2.

An XML CDATA block

The syntax involving the htmlText property is unusual and involves
the use of an XML CDATA block.Â I will simply refer you to a good XML
textbook for an explanation of the CDATA block.Â Suffice it to say that
in this and many other cases, a CDATA block can be used to insert large
amounts of text into an XML document without the requirement to replace
characters such as >, <, and the apostrophe with entities such as
&gt;, &lt;, &apos;.

Listing 2 contains everything necessary to populate the upper-left pane in
Figure 6 with the name of the poem and the name of the author.

Populate the lower-left pane with Verse
1

Listing 3 contains everything necessary to populate the lower left pane in
Figure 7 with the first verse from the poem.

<mx:TextArea width="100%"
height="124"
wordWrap="false"
color="#0000FF"
editable="false">
<mx:htmlText>
<![CDATA[Verse 1
Put the saddle on the mare,
For the wet winds blow;
There's winter in the air,
And autumn all below.
For the red leaves are flying
And the red bracken dying,
And the red fox lying
Where the oziers grow.
]]>
</mx:htmlText>
</mx:TextArea>
</mx:VDividedBox>

Listing 3 also contains the end tag for the VDividedBox element that
populates the left half of the HDividedBox.

Define and populate the rightmost
VDividedBox

Listing 4 contains everything necessary to define and populate the rightmost
VDividedBox that is contained in the HDividedBox.

<mx:VDividedBox
backgroundAlpha="0.0">
<mx:TextArea width="100%"
height="124"
wordWrap="false"
color="#0000FF"
editable="false">
<mx:htmlText>
<![CDATA[Verse 2
Put the bridle on the mare,
For my blood runs chill;
And my heart, it is there,
On the heather-tufted hill,
With the gray skies o'er us,
And the long-drawn chorus
Of a running pack before us
From the find to the kill.
]]>
</mx:htmlText>
</mx:TextArea>
<mx:TextArea width="100%"
height="124"
wordWrap="false"
color="#0000FF"
editable="false">
<mx:htmlText>
<![CDATA[Verse 3
Then lead round the mare,
For it's time that we began,
And away with thought and care,
Save to live and be a man,
While the keen air is blowing,
And the huntsman holloing,
And the black mare going
As the black mare can.
]]>
</mx:htmlText>
</mx:TextArea>
</mx:VDividedBox>
</mx:HDividedBox>
</mx:Panel>

The text areas and the CDATA blocks

The two text areas and their respective CDATA blocks in Listing 4
make it possible to display Verse 2 in Figure 8 and Verse 3 in Figure 9.

The end of the Panel element

Listing 4 also contains the end tag for theHDividedBox element that
began in Listing 2 and thePanel element that began in Listing 1.Â
Therefore, Listings 1 through 4 contain everything necessary to display
everything above the "Select Colors" label at the bottom of Figure 9.

The most important aspects of the ColorPicker elements in Listing 6
are the values of the id attributes:

cp01

cp02

Accessing the ColorPicker values

Referring back to the yellow highlight in Listing 1,Â we see that the color
assigned to the borderColor attribute for the Panel element is
the selected color from the ColorPicker object identified as
cp01.

Similarly, referring back to Listing 2, we see that the color assigned to
the backgroundColor attribute for the HDividedBox element is the
selected color from the ColorPicker object identified as cp02.

These colors are selected by the user who first clicks on the
ColorPicker button and then clicks on a particular color when the
swatches of available colors are exposed as shown in Figure 2.Â (Colors can
also be selected using code but that is not done in this application.)

The end of the application

Listing 6 also signals the end of the Application element and hence
the end of the application.

Run the program

I encourage you to run the online version of this
program. Then copy the code from Listing 7.Â Use that code to create a Flex
project.Â Compile and run the project.Â Experiment with the code, making
changes, and observing the results of your changes.Â Make certain that you can
explain why your changes behave as they do.Â

In this lesson, you have learned how to nest divided boxes in a Panel
object, how to use the TextArea class to display non-editable text, and
how to use the ColorPicker class to allow the user to assign colors to
components.

Richard Baldwinis a
college professor (at Austin Community College in Austin, TX) and private
consultant whose primary focus is object-oriented programming using Java and
other OOP languages.

Richard has participated in numerous consulting projects and he
frequently provides onsite training at the high-tech companies located in and
around Austin, Texas.Â He is the author of Baldwin's Programming Tutorials, which have gained a worldwide
following among experienced and aspiring programmers. He has also published
articles in JavaPro magazine.

In addition to his programming expertise, Richard has many years of
practical experience in Digital Signal Processing (DSP).Â His first job after
he earned his Bachelor's degree was doing DSP in the Seismic Research
Department of Texas Instruments.Â (TI is still a world leader in DSP.)Â In the
following years, he applied his programming and DSP expertise to other
interesting areas including sonar and underwater acoustics.

Richard holds an MSEE degree from Southern Methodist University and has
many years of experience in the application of computer technology to
real-world problems.