Creating a Second Application Page and Working in Design Mode

Up to this point, you have been working with the file in Source mode. Although you might prefer to look only at the code, there are some tasks that would be much easier in Design mode; for instance, laying out the visual appearance of a page.

1.	Choose File > New > MXML Application. In the dialog box that opens, enter the filename Dashboard. From the Layout drop-down list, select horizontal. Click Finish. Flex Builder will remember your last choice for the layout next time you create an application. Remember that with a horizontal layout all the controls you add to the application will appear horizontally across the application. Note You do not have to enter the .mxml extension; Flex Builder automatically adds the extension.
2.	Click the Design mode button in the editor to open the new file in Design mode. Notice that a number of new views opened when you changed to Design mode. In the following example, examine the diagram to see some of the key views when working in Design mode.
3.	In the Components view, locate the Controls folder. Drag a Text control and position it in the upper portion of the editor. The Text control will center itself because you are in horizontal layout. The Components view contains the components you will want to use in your Flex applications. This view, which is available only in Design mode, permits you to drag and drop the components into your application. You'll see in a later lesson that you can also position the controls using a constraint-based layout.
4.	Locate the States view in the upper right of the editor. Click the minimize icon to minimize the States view. You should focus now on using the Flex Properties view.
5.	Click anywhere in the editor so the Text control is not selected and the application is selected. The name of the currently selected object will appear at the top of the Flex Properties view. Be sure it reads mx:Application. Locate the Layout section of the Flex Properties view. Choose absolute from the Layout drop-down list. When the layout is horizontal, you cannot specify the position of the Text control using x and y values, which you want to practice here. Absolute layout does allow this.
6.	Select the Text control and enter 160 for the x-position value and 180 for the y-position value. You have now positioned the Text control by setting values in Flex Properties view.
7.	Click the Text control and move it to the top left of the screen. Note that the x and y values have changed. You have now positioned the Text control by dragging and dropping it in Design mode.
8.	At the top of the Flex Properties view locate the Common section. For the value of the text property, enter the string I am using the Flex Properties view. Press Enter and you will see that the Text control contains the string you just entered. You have now seen two ways to enter values for properties. In Source mode, you enter the values in quotes following the property name and an equals sign. In Design mode, you select the control to which property values should be supplied and then use the Flex Properties view to enter property values. A third way to change the value of the text displayed is to double-click the control in Design mode and enter or change the text. Note One difference between the Label control and the Text control is that the Text control can contain multiple lines of text. This is not true for the Label control you used in Source mode; it can contain only one line of text.
9.	Switch back to Source mode. You see the code that represents what you have done in Design mode. You have a Text control with text, x, and y properties with values that you assigned in Flex Properties view. You will most likely develop a preference about which mode you work in: Source or Design. You have seen that you can do many of the same things in both views.
10.	Run the application by picking Dashboard.mxml from the drop-down list that appears when you click the down arrow next to the Run button. You will see the text from the Text control appear in the browser. When you run the application it will be positioned in the browser as you positioned it in Design mode. Congratulations! You have now run your second Flex application. Note There can be only one <mx:Application> tag per Flex application. At this point, both DataEntry.mxml and Dashboard.mxml contain an <mx:Application> tag. By using multiple <mx:Application> tags, you created two different Flex applications.
11.	Back in Flex Builder, remove the Text control in the Dashboard application. Also change the layout back to horizontal. You need to change this file to ready it for work in later lessons.