Figure 1-13. Layout options in the Properties panel
11
INTRODUCING FLEX AND FLEX BUILDER 3
7. The panel component has a series of four layout handles. Each of these can be set to anchor,
unanchored, or center. By setting them to anchor, the component is scaled until it is a set number
of pixels from the edge of the application or the component it is nested in. Setting a layout
handle to be anchored also produces a field within the layout properties for the
component that lets you set the number of pixels from the edge of the application you want
the component to be anchored. Set each of the four layout handles to anchor and set the
value of each to 20 px (see Figure 1-14). This gives a gutter of 20 pixels.
Figure 1-14. Apply these layout settings.
8. Test the application at this stage by selecting Run from the menu (you can also click the green
play button). This will open your project in your default browser.
9. Play with the size of the browser to see how the fluid design works.
Displaying content
The white area of the panel is the content area, so next we need to put what kind of content we want
in it. Since RSS feeds are text, we want to put in a text area. You can find the TextArea component in
the Controls folder of the Component panel.
10. Drag and drop a TextArea component onto the white area of the panel; it is placed inside the
panel content area and so will be adjusted with the panel (see Figure 1-15).
11. Move the TextArea component to the top-left corner of the panel, and by grabbing the bottomright
corner, stretch it out to fill the entire white area of the panel, as shown in Figure 1-16.
Pages:
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37