In the first task, you created your project and an application page. Before you got a chance to run the application, the second task took you on a tour of the Flex Builder workbench. You will now get back to your application. You will run it, add code to it, and learn the basics of file manipulation.
Open the Project menu. Be sure the Build Automatically option has a check mark in front of it.
When you have Build Automatically checked, Flex continually checks your saved files, compiles them upon a save, and prepares them to run. Syntax errors are flagged even before you run your application, which does not occur if Build Automatically is not checked.
As your applications grow more complex, you might find that having this setting checked will take too much time, in which case you should uncheck this setting and the build will happen only when you run your application.
Run your application by clicking the Run button. You will not see anything in the browser window when it opens.
You have now run your first Flex application, and it wasn't that interesting. In this case, the skeleton application contained no tags to display anything in the browser. But you did see the application run and you saw the default browser open and display the results, as uninteresting as it was.
What exactly happened when you pushed the Run button? Actually, a number of processes occurred. First, the XML tags in the application file were translated to ActionScript. The ActionScript was then used to generate a SWF file, which is the format Flash Player understands. The SWF file was then sent to Flash Player in the browser.
Close the browser and return to Flex Builder.
Add an <mx:Label> tag by placing the cursor between the <mx:Application> tags; enter the less-than symbol (<) and then enter mx, followed by a colon (:). You will see a long list of tags. Press the letter L (upper or lower case) and select Label by highlighting it and pressing Enter or double-clicking it.
This is an example of code hinting, which is a very helpful feature of Flex Builder that you should take advantage of.
Press the spacebar and you'll see a list of options, including properties and methods, which you can use with the <mx:Label> tag. Press the letter t and then the letter e; then select the text property.
You can not only select tags with code hinting but you can also choose attributes that belong to those tags.
In these two cases of using code hinting, both the desired options happened to be at the top of the list. If the option were not at the top, you could either select it by pressing the down arrow key and then pressing Enter or by double-clicking the selection.
Enter My first Flex application for the value of the text property. Be sure that the text is in the quotes supplied by code hinting.
Proper XML formatting dictates that the value of the attribute be placed in quotes.
End the tag with a slash (/) and a greater-than symbol (>).
Check to be sure that your code appears as follows:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Label text="My first Flex application"/> </mx:Application>
Proper XML syntax gives you two ways to terminate a tag. One of them you just usedto place a slash at the end of the tag. The other option is to use the slash in front of the tag name that is completely typed out again, as follows:
The code in this example places the layout="absolute" attribute=value pair of the Application tag, on a separate indented line. The entire </mx:Application> tag could have been on one line; whether or not to add line breaks to code is a matter of personal preference. Some developers like the look of placing each attribute=value pair on a separate indented line.
<mx:Label text="My first Flex application"> </mx:Label>
You will usually use the slash at the end of the tag unless there is a reason to place something inside a tag block. For example, if you want to place the </mx:Label> tag inside the <mx:Application> tag block, you have to terminate the </mx:Application> tag on a separate line.
Save the file and run it. The "My first Flex application" text appears in your browser.
Finally, you get to see something appear in your new Flex application.
The <mx:Application> tag comes with a default look summarized in this table:
A gradient controlled by the fillAlphas and fillColors
[1.0,1.0], a fully opaque background
[0x9CB0BA,0x68808C], a gray background slightly darker at the bottom
If you do not want any of these defaults and want to start with the simplest possible look, you can set the styleName equal to plain, as shown here:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" styleName="plain"/>
With the style set to plain, you get the look summarized in this table:
Change the value of the text property from "My first Flex application" to "new text". Save the file and run it.
The next step shows another helpful feature of Flex Builder, but to see this feature you must have at least two saved versions of the file.
Right-click in the editor and from the context menu choose Replace With > Local History.
A large dialog box should appear.
Compare the current version of your file, which is located on the left side of the dialog box, to the older version on the right. A history of the last 50 versions of your file will be kept at the top of the dialog box. Click Replace to bring back your original text, which reads "My first Flex application".
You will find this feature very helpful when you want to roll back to a previous version of code.
You can alter the settings for the Local History by choosing Window > Preferences; then from the dialog box choose General > Workspace and click Local History.
Purposely introduce an error into the page by changing the <mx:Label> tag to <mx:Labe>, save the file, and then view where the error is reported.
After you save the file, the Build Automatically setting will check your code. The error will be found and reported in two ways. First, a small white x in a red circle will appear next to the line of code in which the coding mistake is located. Also, a listing of the error will appear in Problems view.
You can place the mouse pointer over the description of the error to see the complete description. You can also double-click the error listed in Problems view, and the cursor will be placed at that line of code in the editor.
Run the application. You will see the following warning, telling you there are errors in your project. In this case, click No so the launch does not continue.
If you click Yes in this dialog box, Flex Builder will run your last successfully compiled version of your application.
Correct the error, save the file, and run it to be sure that everything is again working properly. Close the file after it successfully runs.
You are now ready to move on to the next task.