Flexing the Flash Review - The NewFlex Project

(Page 4 of 6 )

This next picture shows the expanded view of the Flex project, NewFlex. As installed, the project is set to build automatically, which means adding a new file or saving the file compiles the project automatically. If not, you can set it to build automatically in the drop-down from the Project menu. After the build, the compiled Flash file (NewFlex.swf) is placed in the bin directory. The NewFlex.html file is a wrapper for displaying it on a web browser. This requires the Flash Player 8.5 that was conveniently installed when Flex Builder was installed.

The NewFlex.mxml file

The application file NewFlex.mxml is also created, as discussed earlier. A project can have several application files, but the main application file is the one that is complied and placed in the bin folder. When you click on the tab Source or Code in the NewFlex.mxml file, you will see the window shown next. It is an MXML file with Macromedia namespace, and absolute positioning as the default. The file has the  parent application tag <mx:Application/>. The Design shows an empty canvas as seen earlier. Clicking on the NewFlex with the globe icon on its left brings up a web rendering of this application file from its html wrapper.

MXML and ActionScript

MXML and ActionScript are the building materials for Flex applications. The application is defined with MXML and the interactivity is provided by the ActionScript. MXML will look very familiar if you are used to HTML. Like HTML it is tag based. Tags are available for both visible and invisible components. Visible components as in HTML provide the GUI objects such as buttons, text boxes, and so forth. The variety of GUI objects available with Flex Builder is much larger than with HTML. It provides tags for trees, tabbed navigators, menus and so on. The invisible components will do the data binding, animation, web services and so forth. The bigger difference is that the MXML is compiled into a SWF file, which uses the Flash Player to render it to the browser. This brings in an incredible user experience. Action Scripts bring in, of course action, like JavaScript. Of course you also have CSS for styling. An MXML application can be single or multiple file based depending on your choice.

Controls and their relations to the application

The next picture shows the completely expanded view of the window Components. It has mainly four folders that contain objects related to Layout, Navigation, Controls (several customs are also hidden in this picture), and Custom (this is hidden in this picture).

Next: Some hands-on experiments >>
 

More Flash Articles
More By Jayaram Krishnaswamy

Comments On: Flexing the Flash Review

· The tutorial was written when Flex2 was in beta 1. Now it is in Beta 3, but the same...   >>> Post your comment now!