Position The Page Title - MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual

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
mock-ups" on page
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.
In Design view, click the Expanded button on the Document toolbar and then click anywhere
1.
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.
In the Containers category of the Insert bar, click the VBox button.
2.
Flex Builder inserts a VBox container in the file.
Insert the page title by clicking anywhere inside the VBox container and clicking the Label
3.
button in the Controls category of the Insert bar.
Flex Builder inserts a Label control in the file and selects it.
Modify the Label text by double-clicking the Label control to open the Quick Tag Editor, and
4.
then changing the
With the Label control still selected, set the following property in the Attributes panel:
5.
Common > styleName:
You can select the style from the pop-up menu that appears when you click the field for the
property.
styleName
You can see the effect of applying the style in Design view.
Save your work.
6.
30 Chapter 2: Flex Builder Tutorials
27).
property value to
text
appTitle
"Review the approved user interface
as follows and pressing Enter.
"Flex Store"