| << Chapter < Page | Chapter >> Page > |
<?xml version="1.0" encoding="utf-8"?><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"
minWidth="955"minHeight="600"></mx:Application> Compile and run the project
You can compile and run the new project by selecting either Run or Debug on the Run menu. (The IDE provides a few other ways to run the project as well.) The new project should open in your browser looking pretty much like Figure 2. (Remember, gray background for Flex 3 and white background for Flex 4.) If you selected Debug , some debug text information should be displayed in the Console tab at the bottom of the IDE.
In this lesson, I will explain how to create two Flex projects. One is a simple Flex 3 project named AppBackground01 . The other is a (not so simple) Flex 4 project named AppBackground03 that replicates the output from the Flex 3 project.
Both projects are designed to produce the same output. To create the project using Flex 3, you will simply add attributesto the Application element shown in Listing 1, resulting in the XML code shown in Listing 2. However, you will need to do more than that to create theproject in Flex 4. (Remember, Flex 4 is more powerful but also more complicated to use.)
Finally, I will show you the output from another Flex 4 project and challenge you as the student to write a Flex 4 project that produces a matching output.
More complex Flex projects
In general, to create more complex Flex projects, you will also need to add child elements, (which may or may not include attributes) , to the Application element.
To incorporate logic in your Flex projects, you will need to learn how to write some ActionScript code and embed ActionScript code in your Flex code (or integrate ActionScript code in other ways) .
Layout versus behavior
As I mentioned earlier, you can develop your Flex applications using the XML-based Flex language to establish the layout for your application.
Although it is possible to use Flex alone to provide simple behavior for your applications (simple event handling for example) , you will probably need to use ActionScript 3 to produce more complex behavior for your applications. (Even the simple behavior requires some ActionScript, but it's not so obvious where the Flex code ends and the ActionScript code begins.)
The layout capability in Flex 3 consists of containers (that may contain other containers) with names like Canvas , HBox , VBox , etc. The containers can also contain controls with names like Button , CheckBox , ComboBox , etc.
The text editor
The upper-middle pane in the Flash Builder 4 IDE has two tabs labeled Source and Design . If you select the Source tab, this upper-middle pane becomes a text editor in which you can edit XML and ActionScript code. Inaddition, the lower-left pane becomes an outline showing the hierarchical structure of your XML or ActionScript code.
The visual design editor
If you select the Design tab, the upper-middle pane becomes a visual design editor and the lower-left pane becomes a toolbox containing a variety of components including Controls, Layouts, Navigators, and Charts. (Note that there are differences in the component sets for Flex 3 and Flex 4.) In this mode, you can drag components from the lower-left pane into the design paneand make physical adjustments to their location, length, width, etc.
Notification Switch
Would you like to follow the 'Introduction to xml' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|