Join David Gassner for an in-depth discussion in this video Understanding the anatomy of web applications, part of Flash Builder 4 and Flex 4 Essential Training.
Flex Applications have a unique architecture. They incorporate two programming languages: MXML and ActionScript 3.0, and are compiled as a combination of files that work together. I'm going to describe the basic anatomy of a Flex Application, both the simplest aspect of its code and also its compilation architecture. I will start with the code. First, I am going to expand the font size in Flash Builder. You do this by going to the menu and choosing Window > Preferences, and then under the General category, open Appearance and choose Colors and Fonts.
From there, go to the list of categories on the right and open the Basic category. Scroll down to the bottom of the list and choose Text Font. Click Edit and then select the font you want. I will choose 16 pixels and click OK and then click OK again, and now the font will be displayed in a nice, large size. Flex Applications are known in Flash Builder as MXML Applications. Every main application file is built as an MXML file.
MXML is a pure XML-based language. The root element of every web-based Flex Application is named Application, and it has a namespace prefix of 'S,' standing for Spark. Within a new Flex Application, you'll also see namespace prefixes declared for FX, which is used for many compiler tags, and also tags that describe certain ActionScript classs, and one named MX, which is used to describe older components that are now known as the MX components.
Wherever you see a tag with the 'S' prefix, that's an instance of a component that's a part of Flex 4. For example, this is the new Spark version of the Label component. Each tag describes an instance of an ActionScript class. So, this is an instance of the Label class, and it has certain styles and properties that are being set in the MXML Code. The X and Y properties determine the object's position on the screen. The text property describes the value that it displays and the fontSize and fontWeight settings describe its appearance.
I will be describing a lot more about the code architecture of MXML files throughout this video series. Now, I am going to show you the anatomy of the compiled files. Take a look in the bin-debug, or output folder, in your project, in the Package Explorer view. When you open the bin-debug folder, you'll see that there's an application file named HelloWorld.swf. That's your compiled application, and using your Flex Project's default settings, you will see a whole bunch of other SWF files.
These are known as Runtime Shared Libraries, or RSLs, and collectively, they include the entire Flex SDK in a compiled form. When you deploy your application, you need to deploy both your application's SWF file and all of these RSL files. There's also a file name HelloWorld.html. This is the HTML wrapper file that loads Flash Player, which in turn loads the SWF file, and then there's a folder named history, which contains three files: history.css, .js and historyFrame.html.
Now some developers prefer to deploy their SWF files as one large monolithic file. That means that the SWF file includes both the specific application code and also the entire Flex SDK. I will go to HelloWorld.swf, and I will right-click on it and select Properties, and I'll show you its initial size is 71,000 bytes, approximately. So, that's the size of the file without the entire Flex SDK. I will cancel out of that, and then I will go to top of the Package Explorer to the Project Name.
And I will right-click on the Project and choose Properties. Then I will go to the category labeled Flex Build Path. I am going to change the value of the Framework Linkage option. By default, the SDK files are compiled into runtime-shared libraries. I'm going to change that to Merged into code. I will click OK, and then I'm going to clean the project. When you clean the project, it clears out all of the files in the output folder and re-compiles the project from Scratch.
I will select Project > Clean and then click OK. It takes just a few moments to rebuild this very simple project. Then I will go to HelloWorld.swf. I will right-click on it, once again, choose properties and show that the file is much larger, 780,000 bytes, approximately. So, this SWF file includes both the specific application code and also the entire Flex SDK. I will cancel that.
Go back to the Project Properties. Once again, go to the Flex Build Path and change back to the SDK default of using runtime shared libraries and click OK again. That automatically rebuilds the project, and you'll see the RSLs, or Runtime Shared Libraries, reappear. So, that's a little bit about the basic anatomy of a Flex Application, both its basic code architecture and also how the files are created in the output folder. Now once again, these are not the files that you deploy to your Web Server.
This is the Debug version of the application. I'll show you how to create a deployable version known as the Release Build in a separate video.
- Understanding the history of Adobe Flex
- Installing the Flash Builder components
- Using Eclipse views and editors
- Programming with MXML and integrating MXML and ActionScript
- Debugging Flex applications
- Adding visual controls to a Flex application interface
- Displaying images and dynamic data
- Formatting with CSS
- Skinning Spark components with MXML graphics
- Creating data entry form components
- Integrating with Apache, PHP and MySQL
Skill Level Beginner
Q: After importing the Debugging.fxp file following the steps outlined in the “Importing and exporting projects as FXP files” video, several of the applications will not run.
When I attempt to debug or run the Variables.mxml or Watchpoints.mxml applications, I am unsuccessful. Pressing F11 to debug causes Flex to look for an application it CAN run, and runs that one. If I Right-Click one of the aforementioned applications and then click Run Application, an error appears that says “This file cannot be launched.”
What is causing this problem?
A: This is a common issue with Flash Builder. Before pressing F11 (or right-clicking and choosing Run Application), set the current MXML application file as the "default" by right-clicking it and choosing "Set as default application".
This should ensure that the application you want to preview opens in the browser when you press F11.
Q: When trying to specify the fontStyle as italic in both ways described in the first and second videos of the “Using Cascading Style Sheets (CSS)” chapter, only the literal string "italic" seems to work. If I use the constant for the same value like this:
I get a warning that reads:
"Design mode: Error during component layout. Choose Design > Refresh to refresh design mode."
Even if I try to refresh, design mode will not work until I change it back to the literal string. I made sure the import for this namespace was there by pressing Ctrl+spacebar, refreshed design mode several times, and even restarted Flash Builder. However, the only solution seems to be to use the literal. Is there a fix for this?
A: The use of constants and bindings in MXML style attributes results in unpredictable results in Design View, as evidenced by this error. Unfortunately, the best you can expect is that design view will render the presentation, but won't show the results of the style setting, because Design View isn't capable of evaluating MXML bindings without the benefit of Flash Player's runtime capabilities.
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?