Tip:
Highlight text to annotate it
X
In this video I'm going to describe how to build a basic application.
The application will contain a data entry form that allows the user to enter their name
and e-mail address so that they can submit a request for information.
I'll start by creating a brand-new application that's a part of the Chapter01begin project.
You can create as many Flex applications in a single project as you like.
From the menu I'll select File, New, MXML Application.
When you create a brand-new application, the file name must have an MXML extension.
You can either put in just the first part of the name or include the .MXML extension.
If you leave it out, the Flex Builder will add it for you. I'm going to call this application
TravelRequest.MXML. The layout property is set to one of these
three values: vertical, horizontal or absolute.
I'll describe the purpose of the layout property later,
but for now, I'm going to set the layout to vertical and click Finish.
When you create a brand-new Flex application, it always starts off with a pair of application
tags. And again I'll describe the nature of these
application tags and their syntax a little bit later.
For now I'm going to go into design mode, and I'm going to build the application visually.
First I'll set the background of the application. Notice that in design mode the application
is selected. You can tell that it selected by the presence of the handles,
the little icons in the corners and on the sides of the application work area.
With the application selected, I'll go to the Flex Properties view in the lower right-hand
corner of Flex Builder. I'm going to scroll down toward the bottom
to the Fills section. The Fills section allows me to specify the
background of the application. There are two fill color selectors, one on
the left, one on the right. The fill selector on the left is the basic
background color of the application. I'll click and I'll select a color.
Notice that you have a complete color wheel to select from.
Or if you already have the color that you know and want to enter, you can enter the
hexadecimal color value in the # text entry box in the lower right.
I'm going to select a bluish color as the beginning color of my background and click
OK. And notice that the background color that
I selected is shown now in the design area. Next I'll click the second fill color selector.
And this is going to be the second color of the background gradient.
I'm going to choose a white value which can be phrased either as a set of red, green and
blue values or as simply the hexadecimal color value,
FFFFFF. And I'll click OK.
That creates a gradient from top to bottom from the first color to the second.
Now I'm going to add a container that will contain my form.
I'll go over to the Components view, which is in the lower left-hand corner of Flex Builder
and scroll down to the Layout section. I'll drag in a Panel container.
A Panel is a container that can contain other objects.
By default, the Panel has a certain amount of transparency.
So the background color of the application shows through the border of the Panel
The Panel has a title area and you can set the title either through the Flex Properties
view, by clicking into the Title property and typing
in a value, or you can double-click on the Panel in the header area
and type the title in directly. I double-clicked on the Panel and then typed
in the label that I wanted to show at the top of the Panel
and notice that that same value is also displayed in the Flex Properties view in the Title property.
Not I'm going to create a form style interface that includes labels and text input controls.
I'm going to let the Panel and then confirm that it has a layout property set to absolute.
That means when I drop objects onto the Panel they will retain their position relative to
the top left corner of the Panel. Next I'll add a label control.
The label control will go in the upper left-hand corner.
I'll add the label control and then go to the Flex Properties view and change its text
value to First Name. I'll add a second label control,
place it under the first, and notice that I can click and drag it and I'll get an automatic
alignment guide that lets me make sure that the two label controls are
nice and lined up. This time I'll double click on the label control
to change its text value and type in Last Name.
Now I'm ready for text input controls. Text input controls allow users to type in
values. I'll drag in a text input control.
Resize the Panel so that I can see more of the control
and drag in a second text input control and place it right below first.
I'll add in one more label. This will have a text value of E-mail Address.
And I'll drag in another text input control and place it below the first two.
Now to line everything up, I'm going to click on the first text input control,
Hold down the Shift key, click on the second let go of the keys and then click and drag
the first two text input controls so that they align with the third.
Finally I'll add a button control. I'll click and drag and place the button control
in the Panel. To change the text on the face of the button,
I'll set its label property. The value of the label it will be Click Me.
Finally, I'll resize the Panel so that it's about the right size for all of its content.
I'll save my change. To save the file I can need to go to the menu
and select File, Save, or I can click the Save button on the toolbar.
Finally to run the application, I'll click the Run button
and the application loads into the browser, looking exactly the same as it did in Flex
Builder's Design view. Now in the next video, I'll show you what
the code looks like that was generated during this design process and I'll talk
about the syntax of the MXML code that generates this user interface.