Table of Contents
Advertisement
Set the following property in the Attributes panel of the Tag inspector (Window > Tag
4.
Inspector):
Styles > verticalGap:
Note: The angle bracket means the verticalGap property is located in the Styles category of the
Attributes tab. This convention is used throughout the tutorials.
Save the file in the fbLayout folder by selecting File > Save, double-clicking the fbLayout folder,
5.
and naming the file as follows:
flexstore.mxml
Import your CSS styles
In this part of the tutorial, you import CSS styles into the flexstore.mxml file. You want to import
styles defined in an external CSS file to make sure your site has a consistent look and feel. CSS
styles also give you more flexibility when you want to change the design of your site.
Make sure the flexstore.mxml file is open in Flex Builder.
1.
Open the CSS Styles panel (Window > CSS Styles) and click the Attach Style Sheet button at
2.
the lower edge of the panel.
The Attach External Style Sheet dialog box appears.
In the Attach External Style Sheet dialog box, click Browse to select the external CSS style sheet
3.
called flexstore.css located in the fbLayout folder.
After you click OK twice to close the dialog boxes, the name of the external CSS style sheet
appears in the CSS Styles panel. You can click the Plus (+) icon to display a tree view of all the
styles in the style sheet and their properties.
Save your work.
4.
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.
0
7).
"Review the approved user interface
Tutorial: Creating a layout with Flex Builder
9
Advertisement
Chapters
Table of Contents
