Chapter 2: Using Flash Builder 4 71 Once you’ve created a simple document class successfully, you can then add as many ActionScript classes as your presentation requires. And when you set the linkage properties of a movieclip sym- bol in Flash Professional to a new ActionScript class, you can then jump to Flash Builder to create and edit the class just as you did with the document class. Summary In this chapter, I described the nature and behavior of Flash Builder 4. You learned the following: l Flash Builder 4 is a plug-in designed for use with Eclipse. l Flash Builder 4 is available for the Windows and Mac OS X operating systems. l Flash Builder’s stand-alone configuration includes everything you need to build Flex applications, including Eclipse 3.5.1. l Flash Builder’s plug-in installation option enables you to install Flash Builder on top of an existing Eclipse installation. l The Flash Builder plug-in installation requires Eclipse 3.4. l Flash Builder can be used by both Flex and Flash developers to edit their ActionScript files. l Flash Builder adds many tools in the form of Views and Editors to Eclipse to make coding faster and more productive. l Flash Builder includes many valuable code generation, searching, and refactoring tools to make your coding experience more productive. l Flash Builder 4 and Flash Professional CS5 are designed to work together to create a seamless ActionScript editing experience. l Many tools that are a part of the Eclipse workbench are critical to effective use of Flash Builder. 07_488959-ch02.indd 7107_488959-ch02.indd 71 3/5/10 2:19 PM3/5/10 2:19 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 07_488959-ch02.indd 7207_488959-ch02.indd 72 3/5/10 2:19 PM3/5/10 2:19 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 73 CHAPTER Building a Basic Flex Application IN THIS CHAPTER Creating a “Hello World” application Switching workspaces Creating a Flex project Understanding HTML templates Exporting a release build Deploying a Flex application on the Web Integrating Flex applications with Web pages in Dreamweaver CS4 I n this chapter, I describe how to create and deploy a basic “Hello World” Flex application for the Web. After the application is built, I describe the fundamental nature of a Flex application, including the relationship between the application SWF file and the supporting HTML (Hypertext Markup Language) files. I describe the contents of the HTML “wrapper” file that’s generated for you in Flash Builder and its associated JavaScript library file. Finally, I describe how to deploy the Flex application into a Web site in these ways: l As a distinct application that opens in its own window l As an applet that’s displayed as part of an existing Web page l As a desktop application deployed on Adobe AIR By the end of this chapter, you should have a good sense of what a Flex application is and how it’s delivered to the user. Note The code samples and screen shots in this chapter assume that you’re using Flash Builder 4 to build the application. If you’re using the Flex 4 SDK and your own text editor, the steps will be similar, but you won’t have access to some of the code completion and other productivity tools I describe. n 08_488959-ch03.indd 7308_488959-ch03.indd 73 3/5/10 2:20 PM3/5/10 2:20 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part I: Flex Fundamentals 74 Creating a “Hello World” Application In all programming languages, your first task is to write a “Hello World” application. The most simple of applications, it typically contains no more than a single line of text output. Note Throughout these instructions, I assume that you’re using the stand-alone version of Flash Builder. Where the steps are different in the plug-in version, I provide alternative steps in a Tip. n Switching workspaces As described in Chapter 2, your first step is to create a Flex project. The project hosts the applica- tion’s source code and other assets. Follow these steps to switch to a new workspace: 1. Open Flash Builder 4. 2. From the menu, choose File ➪ Switch Workspace. 3. Select a new folder named flex4bible anywhere on your hard disk and then click OK. If you’re working on Windows, the folder might be C:\flex4bible. On Mac OS X, the folder should be in your home directory; for example, /Users/[username]/ Documents/flex4bible . After selecting the workspace, you should see Flash Builder close and reopen. The new workspace, shown in Figure 3.1, should display the Flash Builder Start Page and the default Flash perspective. The newly created workspace is empty and contains no projects. Note Workspace folders are sometimes created as sibling folders to the projects they reference, rather than parent folders. This is because a workspace contains references to an absolute location on the hard disk and isn’t por- table. If you change the location of your project folders, you have to re-create the workspace. n Tip You can re-create a workspace from scratch by first closing Flash Builder and then deleting the workspace folder’s .metadata subfolder using Windows Explorer or Finder. When you reopen Flash Builder, the work- space data is recreated automatically. You’ll then need to import any existing projects to see them in the Package Explorer view. Choose File ➪ Import to open the Import dialog box. Then choose General ➪ Existing Projects into Workspace. Browse and select the project’s root folder. After verifying that your project is visible and has been selected, click Finish. n 08_488959-ch03.indd 7408_488959-ch03.indd 74 3/5/10 2:20 PM3/5/10 2:20 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 3: Building a Basic Flex Application 75 FIGURE 3.1 The default Flash perspective in a new workspace Creating the project Follow these steps to create a Flex project: 1. From the menu, choose File ➪ New ➪ Flex Project. Tip If you’re using the plug-in version of Flash Builder, choose File ➪ New ➪ Other. Then from the wizard that appears, choose Flash Builder ➪ Flex Project. n 2. In the first screen, shown in Figure 3.2, enter chapter03 as the Project name. 3. Confirm the Use default location option under Project location is selected. The proj- ect location defaults to a folder named chapter03 under the workspace folder. For example, on Windows the default folder might be C:\flex4bible\chapter03. 4. Choose the Web application (runs in Flash Player) option for the Application type. 5. Choose the Use default SDK (currently “Flex 4.0”) option for the Flex SDK version. 6. Select None/Other from the Application server type drop-down menu, and click Next. 08_488959-ch03.indd 7508_488959-ch03.indd 75 3/5/10 2:20 PM3/5/10 2:20 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part I: Flex Fundamentals 76 FIGURE 3.2 The first screen of the New Flex Project wizard 7. On the Configure Output screen, shown in Figure 3.3, accept the Output folder set- ting of bin-debug. This is the location of the compiled debug version of the application and its supporting files. 8. Click Next. Note In Flex Builder 2, the default Output folder was set by default to bin, and the folder contained both the debug and the release build of the compiled application. Starting with Flex Builder 3, the Output folder defaults to bin-debug to distinguish it from the separate folder you create when you export a release build. n 9. On the Create a Flex project screen, shown in Figure 3.4, accept these default settings: l Main source folder: src. l Main application file: HelloWorld.mxml. l Output folder URL: Accept the default setting, leaving it blank. 08_488959-ch03.indd 7608_488959-ch03.indd 76 3/5/10 2:20 PM3/5/10 2:20 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 3: Building a Basic Flex Application 77 FIGURE 3.3 The second screen of the New Flex Project wizard FIGURE 3.4 The third screen of the New Flex Project wizard 08_488959-ch03.indd 7708_488959-ch03.indd 77 3/5/10 2:20 PM3/5/10 2:20 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part I: Flex Fundamentals 78 10. Click Finish to create the project and the main application file. As shown in Figure 3.5, you should see the main application file appear in the Editor view. If you’re working in a completely new workspace, the file should appear in Source mode; that is, you should see the application’s source code. Note I’ve added line feeds after each of the starting tags attributes in Figure 3.5 to make it all fit on the screen. n FIGURE 3.5 The new main application file in Source mode Saying hello Flex 4 applications use a new architecture for laying out the application’s child objects. In Flex 3, the <mx:Application> component had a layout property that was set to a String value of absolute, horizontal, or vertical. In Flex 4, the <s:Application> tag’s layout is determined by an instance of a Layout class. You typically set the application’s layout property with an <s:layout> tag, wrapped around an instance of the layout class you want to use. The following code sets an application to use vertical layout: <?xml version=”1.0” encoding=”utf-8”?> <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955” minHeight=”600”> <s:layout> <s:VerticalLayout/> </s:layout> </s:Application> The default layout for a Flex 4 application is a scheme known as basic layout. This architecture is similar to Flex 3’s absolute layout, which caused visual objects to retain their positions relative to the application’s top-left corner. In your simple application, you’ll use vertical layout. Note A simple Flex 4 application uses more XML namespaces and MXML child tags than in Flex 3. I describe these in detail in Chapter 4. n 08_488959-ch03.indd 7808_488959-ch03.indd 78 3/5/10 2:20 PM3/5/10 2:20 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 3: Building a Basic Flex Application 79 Follow these steps to display a simple message in your Flex application: 1. Make sure your application is displayed in Source mode. 2. Delete the minWidth and minHeight attributes from the <s:Application> tag. This enables the application to automatically resize itself to adjust to the browser’s dimensions. 3. Delete the <fx:Declarations> element and its nested comment. This element is used to declare nonvisual objects in Flex 4 but isn’t required in this simple application. 4. Place the cursor between the <s:Application> tags. 5. Type <layout. As you type, you should see that a window appears (shown in Figure 3.6) that contains a list of proposed properties and objects you can use in this context. FIGURE 3.6 Using code hinting 6. Select s:layout from the list, and then type > to close the tag. You should see that Flash Builder auto-completes the <s:layout> tag: <s:layout> </s:layout> 7. With the cursor between the <s:layout> tags, type <vertical. Select s:VerticalLayout from the list, then complete the tag with XML empty tag syntax: <s:layout> <s:VerticalLayout/> </s:layout> 8. Add a paddingTop setting of 20 and a horizontalAlign setting of center to the <s:Vertical> tag: <s:VerticalLayout paddingTop=”20” horizontalAlign=”center”/> 08_488959-ch03.indd 7908_488959-ch03.indd 79 3/5/10 2:20 PM3/5/10 2:20 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part I: Flex Fundamentals 80 New Feature In Flex 4, the padding, alignment, and gap settings that help to determine automatic layout are now imple- mented in the VerticalLayout and HorizontalLayout classes, rather than in containers such as Application. Also, these settings are now implemented as properties rather than as styles. n 9. Place the cursor on an empty line of code between the </:layout> end tag and the </s:Application> end tag. 10. Type <label, then select s:Label from the class list. 11. Complete the Label object as follows: <s:Label text=”Hello World” fontSize=”36”/> New Feature The <s:Label> tag in this application creates an instance of the Spark Label component. Unlike the older MX version of Label, this new control is able to render right-to-left text and take advantage of other new text rendering features in Flash Player 10. There are also new text controls named RichText and RichEditableText. I describe these controls in Chapter 9. n 12. Check your completed application. The code should look like this: <?xml version=”1.0” encoding=”utf-8”?> <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx”> <s:layout> <s:VerticalLayout paddingTop=”20” horizontalAlign=”center”/> </s:layout> <s:Label text=”Hello World” fontSize=”36”/> </s:Application> 13. Choose File ➪ Save to save the file. 14. Choose Run ➪ Run HelloWorld to run the application in a browser. As shown in Figure 3.7, you see that the application opens in a browser window. FIGURE 3.7 The finished application running in a Web browser 08_488959-ch03.indd 8008_488959-ch03.indd 80 3/5/10 2:20 PM3/5/10 2:20 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Virtual Machine (AVM) Flash Player 10 (the version that runs Flex 4 applications) includes two versions of the AVM The first is for older documents and applications built in Flash and Flex 1.x that use ActionScript 1 and 2 The other, newer AVM is for documents and applications that use ActionScript 3 Understanding XML syntax Note Combining MXML and ActionScript Flash Player versions 9 and 10 can run either... requires Flash Player 10 or higher: n 96 Chapter 3: Building a Basic Flex Application Summary In this chapter, I described how to use Flash Builder 4 to create and manage simple Flex projects and applications You learned the following: l When using Flash Builder, Flex applications are built in Flex projects l Flex applications are compiled into SWF files and require... Flash Builder 4 or Adobe’s new graphic design application for Flex application development, Flash Catalyst The exercise file archives for this book were created in Flash Builder Follow these steps to import FXP files into a Flash Builder 4 workspace: 1 Choose File ➪ Import FXP from the Flash Builder menu 2 In the Import Flex Project dialog box that appears, shown in the following figure, browse and select... capabilities from within Flash Player For more information on the outbound script security model, see the article at www.adobe.com/go/tn_1 649 4 n Using the flashvars parameter You can pass arbitrary named parameters to the application in the flashvars object The object is defined and then passed into the Flex document You can add named parameters to the flashvars object: var flashvars = {}; var flashvars.param1... version of Flash Player 84 Chapter 3: Building a Basic Flex Application Tip When you create a new Flex Project in Flash Builder 4, the project’s required Flash Player version is determined by the Flex SDK’s configuration This setting is in the SDK folder’s frameworks /flex- config.xml file, in the element: 10.0.0 If you change the contents of flex- config.xml, you... chapter, import the chapter 04. fxp Flex project file from the Web site files into your Flash Builder workspace n MXML and ActionScript 3 Three versions of the MXML programming language have been developed by Macromedia and Adobe In the first version, MXML, which was used in Flex 1.0 and 1.5 applications, was rewritten into ActionScript 2 during the compilation process In Flex 2 and 3, you use a version... except the HTML and SWF files with the word debug in their filenames to the Web server Starting with version 3, Flex Builder separates the debug and release builds into separate folders and requires a manual export process for the release build n 88 Chapter 3: Building a Basic Flex Application To create a release build of a Flex Web application, follow these steps: 1 From the Flash Builder menu, choose... A Flash component built with ActionScript 2 that’s incorporated into an application built in Flex 2 or higher has its ActionScript code ignored by the Flash Player at runtime n Flash Player is doing the work at runtime, interpreting your ActionScript code and executing the application’s functionality And while a Flex application is typically built in a combination of MXML and ActionScript code, Flash. .. in Flash Builder 4 Using the new Spark Application component Part I: Flex Fundamentals Importing FXP Files into Flash Builder Most of the sample files for this book from the Wiley Web site are delivered in the new FXP (Flex Project) format FXP files have an fxp file extension but are really ZIP archive files that contain all of a project’s assets and properties FXP files can be created by either Flash. .. and playerProductInstall.swf files that were generated in Flash Builder and must be deployed to the Web site to ensure that the Flex application is displayed correctly FIGURE 3.17 Dreamweaver added the JavaScript library to the site Caution Dreamweaver is supposed to detect the Flex application’s required Flash Player version and generate HTML code that requires that version It might get it wrong and . Flash Builder 4 is a plug-in designed for use with Eclipse. l Flash Builder 4 is available for the Windows and Mac OS X operating systems. l Flash Builder s. to install Flash Builder on top of an existing Eclipse installation. l The Flash Builder plug-in installation requires Eclipse 3 .4. l Flash Builder can