MACROMEDIA FLEX-FLEX BUILDER, Tutorial, Page: 10 / 56

10 Flex Builder Tutorials
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.
With the insertion point still blinking in the VBox container, set the following property in the
Attributes panel:
■
Size > widthFlex:
0
Tip: To verify that the component is selected, check that <mx:VBox> and its associated icon
appear at the top of the Attributes panel.
4.
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.
5.
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.
6.
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.
7.
Save your work.