MACROMEDIA FLEX BUILDER-USING FLEX BUILDER, Use Manual, Page: 30 / 158

30 Chapter 2: Flex Builder Tutorials
Position the page title
After importing the CSS styles, the next task is to create a basic layout for the user interface. In
this part of the tutorial, you position the page title (Flex Store) in the upper left corner of the
layout, as indicated in the mock-up of the user interface (see
“Review the approved user interface
mock-ups” on page 27 ).
You decide to use a VBox (for vertical box) container to position the page title at the top of the
file. The rest of the user interface will be positioned below the page title.
1.
In Design view, click the Expanded button on the Document toolbar and then click anywhere
inside the Application container.
Expanded mode adds borders and padding to controls and containers in Design view to help
you lay out your application. (The borders and padding appear only at design time.) You can
click the Standard button at any time to get a better representation of how your project will
look after it’s compiled.
2.
In the Containers category of the Insert bar, click the VBox button.
Flex Builder inserts a VBox container in the file.
3.
Insert the page title by clicking anywhere inside the VBox container and clicking the Label
button in the Controls category of the Insert bar.
Flex Builder inserts a Label control in the file and selects it.
4.
Modify the Label text by double-clicking the Label control to open the Quick Tag Editor, and
then changing the
text
property value to
"Flex Store"
as follows and pressing Enter.
5.
With the Label control still selected, set the following property in the Attributes panel:
■
Common > styleName:
appTitle
You can select the style from the pop-up menu that appears when you click the field for the
styleName
property.
You can see the effect of applying the style in Design view.
6.
Save your work.