Join David Gassner for an in-depth discussion in this video Creating new Flex 4.5 projects, part of Flash Builder 4.5 and Flex 4.5 New Features.
Flash Builder organizes its MXML and ActionScript files in project. In Flash Builder 4.5, you can create projects for Web or desktop applications just as before, but you can also create mobile applications. To get started with a new project, go to the menu and choose File > New. Here are the new project types. Flex Mobile Project is used to create an application for Android devices. You can also choose ActionScript Mobile Project to create ActionScript-only applications that don't incorporate the Flex SDK.
These projects can be used to build Android or iOS applications. And finally, there is a new project type for Flash Catalyst compatibility. You use this kind of project when you're going to be going back and forth with a designer to create a strongly branded application. For this demonstration I'll choose the old Flex Project type. The New Flex Project wizard looks a little different than it did in version 4. It has some new graphics across the top, but its organization and capabilities are pretty much the same if you're working with an old-style Flex project.
That is, one that's built for the Web or the Desktop. I'll set my project name to HanselAndPetal45, so that means it's for version 4.5 of Flex. Then I'll uncheck the option Use default location, if it's checked, and click Browse so I can place the project where I wanted to go. By default, it would be placed underneath the workspace directory. Under my Exercise Files folder I'll go to 01_gettingstarted and then I'll create a new folder and I'll name it HandP45 and click Create, and then I'll choose that folder and when I come back to the New Flex Project wizard I'll click Next.
The application server types are the same as in version 4. You can associate a Flex project with ASP.net, ColdFusion, Java, or PHP. I won't choose any of them for this project, and then I'll click Next again. As with version 4, you can create an application that incorporates both MX and Spark components, or you can choose Spark only or MX only. In Flex 4.5 there is still a number of components that have not been converted to Spark. So I recommend choosing MX + Spark, unless your application is really truly not going to use any of the older components.
The Framework linkage option is the same as before. By default your application will be compiled with a very small applications SWF file and then a number of other files representing the Flex SDK. You can instead choose Merge into code and that will mean that all of the Flex SDK and your application are compiled into a single monolithic SWF file. You'll get better download performance by using the default, runtime shared libraries. The Main source folder default and the Main application file name default are the same as before.
That is, the source folder is SRC under the project folder and the main application file by default is set to the same as the project name with a .MXML extension. You can change the beginning of that file name to anything you want. I'll accept the default and click Finish. After a few moments your project is opened in the Package Explorer view and you'll find that the new application file name is loaded into the MXML editor. The structure of a new application looks exactly the same as it did in Flex 4.
It has a root element named Application. The s namespace prefix indicates that this is the Spark version of the application component, and all of the other namespaces that were included before are here still. You still have the fx:Declarations element as before. This is where you place any service components, such as HTTP service or remote object, or other non-visual elements such as formatters. Everything else about a project structure is exactly the same as in Flex 4.
You'll see the SDK folder link here, the bin-debug folder where the compiled debugged version of the application is placed, the html-template folder that contains the templates for the web and HTML files, and the libs folder, where you can drop swf files for easy linking into your project. To make this application do something I'll place the cursor after the Declarations element and create a label, set its text property to Hello from Flex 4.5.
I'll set the fontSize to something dramatic, 48 pixels, and then I'll place the label control center horizontally with horizontalCenter="0" and top="20", placing it 20 pixels from the top of the application. I've saved my changes by pressing Command+S on Mac or Ctrl+S on Windows and then click the Run button in the toolbar. And I can see that my application is working, correctly loaded into the browser.
So if you're an experienced Flex 4 developer, you'll find very little that's changed so far. What's really changed is the ability to create other types of applications. Mobile applications with Flex for Android or with ActionScript for both Android and IOS and also projects that you can trade back and forth with designers who use Flash Catalyst.
Recommended prerequisite: Flash Builder 4 and Flex 4 Essential Training.
- Coding with Quick Assist
- Using code completion on metadata tags and states
- Using new Design mode configuration and view capabilities
- Using the Spark versions of the DataGrid, Form, and Image components
- Creating a Flex project for Android applications
- Handling navigation in a view-based mobile application
- Using the Flash Catalyst CS5.5/Flash Builder 4.5 workflow
Skill Level Intermediate
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?
Q: I'm using the most recent versions of Flash Builder and Flex. The projects provided in this course's exercise files don't run correctly. How do I get the code working?
A: The course's exercise files were built for the original release of Flash Builder and Flex 4.5. There are two potential issues: the version of the Flex SDK linked into each project and the version of Flash Player you have installed on your system.
For each project, follow these steps after importing it into Flash Builder:
- In the Package Explorer view, right-click on the project name and choose Properties.
- Click Flex Compiler.
- Change the Flex SDK Version to Use default SDK.
- Click OK.
- The project should now compile correctly.
- Open Windows Explorer (Windows) or Finder (Mac).
- Navigate to the Flash Player installation folder.
- Open the player subfolder.
- Open the subfolder for your operating system (Mac or Windows).
- Open the version subfolder.
- If running on Mac, open the DMG file and install the Flash Player application.
- If running on Windows, run the Flash Player installer executable for whichever browser you use for previewing Flex applications.