ADOBE FLEX 3 BUILDING AND DEPLOYING ADOBE FLEX 3 APPLICATIONS ® ®
© 2008 Adobe Systems Incorporated. All rights reserved. Building and Deploying Adobe Flex® 3 Applications If this guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license.
iii Contents Part 1: Application Design Chapter 1: Application Development Phases Design phase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Configure phase Build phase .......................................................................... 5 ............................................................................... 6 Deploy phase ........................................................
iv CONTENTS Using deferred creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Creating deferred components Using ordered creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
v Creating libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Using standard and cross-domain RSLs Using the framework RSLs Troubleshooting RSLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 . . . . . . . . . .
vi CONTENTS Chapter 16: Creating a Wrapper About the wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Creating a simple wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Adding features to the wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1 Part 1: Application Design Topics Application Development Phases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Flex Application Structure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Applying Flex Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2 PART 1
3 Chapter 1: Application Development Phases It is difficult to define the exact process that all Adobe® Flex™ developers use to build and deploy applications. However, the process typically involves five distinct phases: design, configure, build, deploy, and secure. Topics Design phase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Configure phase . . . . . . . . . . . . . . . . . .
4 CHAPTER 1 Many types of design patterns have been catalogued and documented. For example, the Functional design pattern specifies that each module of your application performs a single action, with little or no side effects for the other modules in your application. The design pattern does not specify what a module is, commonly though it corresponds to a class or method.
ADOBE FLEX 3 5 Building and Deploying Adobe Flex 3 Applications Struts is based on a Model-View-Controller (MVC) architecture, with a focus on the controller part of the MVC architecture. In addition, it provides JSP tag libraries to help you create the view in a traditional JSP/HTML environment. Configure phase Before you write your first line of application code, or before you deploy an application, you must ensure that you configure your environment correctly.
6 CHAPTER 1 Build phase Building your application is an iterative process that includes three main tasks: 1 Compile 2 Debug 3 Test About compiling Compiling your application converts your application files and assets into a single SWF file. During compilation, you set compiler options to enable accessibility, enable debug information in the output, set library paths, and set other options.
ADOBE FLEX 3 7 Building and Deploying Adobe Flex 3 Applications When you compile your application, the Flex compiler creates a single SWF file from all of the application files (Adobe® MXML™, AS, RSL, SWC, and asset files), as the following example shows: main.mxml Custom components Client *.AS *.SWF *.MXML RSL files *.AS Use to write, import, or include ActionScript Web Server ActionScript Classes <..> Compiler/Linker *.AS *.AS <..> *.MXML *.
8 CHAPTER 1 About debugging an application Flex provides several tools that you use to debug your application, including the following: AIR Debug Launcher (ADL) A command line version of the Adobe® AIR™ debugger that you can use outside of Adobe® Flex™ Builder™.
ADOBE FLEX 3 9 Building and Deploying Adobe Flex 3 Applications What happens during a request to a SWF file When a customer requests the SWF file, the web server or application server returns the SWF file to the client computer. The SWF file then runs locally on the client. In some cases, a request to a Flex SWF file can cause multiple requests to multiple SWF files.
10 CHAPTER 1 Secure phase Security is not necessarily a phase of the application development process, but is an issue that you should take into consideration during the entire development process. That is, you do not configure, build, test, and deploy an application, and then define the security issues. Rather, you take security into consideration during all phases.
ADOBE FLEX 3 11 Building and Deploying Adobe Flex 3 Applications • Does not allow web content to read any data from a server that is not from the same domain, unless that server explicitly allows access • • Enables the user to disable the storage of information for any domain Does not allow data to be sent from a camera or microphone unless the user gives permission Application Development in Flex SDK The following example shows a typical development environment for a Flex SDK application: Flex applicati
12 CHAPTER 1 The following example shows a typical deployment environment for a Flex SDK application: Flex applications on client machine HTTP/SOAP Firewall/Router/DNS server Web server webserver.example.com Proxy server Web services server Application server appserver.example.com finance.example.com In this example, the customer requests the application SWF file from webserver.example.com, the server returns the SWF file to the customer, and the SWF file plays.
ADOBE FLEX 3 13 Building and Deploying Adobe Flex 3 Applications Build phase To build an application for Flex SDK, you define a directory structure on your development system for application files, and define the location of application assets. You then compile, debug, and test your application.
14 CHAPTER 1
15 Chapter 2: Flex Application Structure One of your first tasks when developing an Adobe® Flex™ application is to set up your development directory structure. As part of setting up this directory structure, you must decide how to organize your application assets, how to share assets across applications, and how to configure the compiler to create your application SWF file. Topics Installation directory structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16 CHAPTER 2 Directory Description /frameworks/projects Contains the Flex framework source code. /frameworks/rsls Contains the RSL for the Flex framework. /frameworks/themes Contains the theme files that define the basic look and feel of all Flex components. /lib Contains JAR files. /runtimes Contains the standard and debugger versions of Adobe ® Flash® Player and the Adobe® AIR™ components. /samples Contains sample applications. /templates Contains template HTML wrapper files.
ADOBE FLEX 3 17 Building and Deploying Adobe Flex 3 Applications Development directory structure As part of the process of setting up the directory structure of your development environment, you define the directory location for application-specific assets, assets shared across applications, and the location of other application files and assets. Flex file types A Flex application consists of many different file types. Consider the following options when you decide where to place each type of file.
18 CHAPTER 2 The following example shows an example of the directory structure of a simple Flex application: appRoot mainApp.mxml myValidators PriceValidator.mxml AddressValidator.as myFormatters PriceFormatter.mxml StringFormatter.as assets logo.gif splashScreen.gif .settings (Flex Builder only) bin (Flex Builder only) html-template (Flex Builder only) This application consists of a root application directory and directories for different types of files.
ADOBE FLEX 3 19 Building and Deploying Adobe Flex 3 Applications There are no inherent restrictions in Flex for the location of the root directory of your application, so you can put it almost anywhere in the file system of your computer. If you are using Flex Builder, the default location of the application root directory in Microsoft Windows is My Documents\Flex Builder 3\project_name (for example, C:\Documents and Settings\userName\My Documents\Flex Builder 3\myFlexApp).
20 CHAPTER 2 When you embed an asset, you compile it into your application’s SWF file. The advantage to embedding an asset is that it is included in the SWF file, and can be accessed faster than having to load it from a remote location at run time. The disadvantage of embedding is that your SWF file is larger than if you load the asset at run time.
ADOBE FLEX 3 21 Building and Deploying Adobe Flex 3 Applications The following example shows two Flex applications, appRoot1 and appRoot2. Each application has a subdirectory for local MXML and ActionScript components, and can also reference a library of shared components: my Apps appRoot1 myValidators PriceValidator.mxml AddressValidator.as myFormatters PriceFormatter.mxml StringFormatter.as appRoot2 myValidators myFormatters sharedLibrary sharedValidators SharedVal1.mxml SharedVal2.
22 CHAPTER 2 For shared MXML and ActionScript files that are outside of the application’s directory structure, you modify the source path to include the directories that the compiler searches for MXML and ActionScript files. The component search order in the source path is based on the order of the directories listed in the source path. You can set the source path as part of configuring your project in Flex Builder, in the flex-config.xml file, or set it when you open the command-line compiler.
ADOBE FLEX 3 23 Building and Deploying Adobe Flex 3 Applications You can also create SWC files that you package and reuse among multiple applications. You typically use static linking with SWC files, which means the compiler includes all components, classes, and their dependencies in the application SWF file when you compile the application. For more information on static linking, see “About linking” on page 196.
24 CHAPTER 2 Modules let you split your application into several separate SWF files. The main application, or shell, can dynamically load other SWF files that it requires, when it needs them. It does not have to load all modules when it starts, nor does it have to load any modules if the user does not interact with them. When the application no longer needs a module, it can unload the module to free up memory and resources. For more information, see “Creating Modular Applications” on page 981.
ADOBE FLEX 3 25 Building and Deploying Adobe Flex 3 Applications The mxmlc compiler has many options that you can specify on the command line, or that you can set in the flexconfig.xml file. For example, to disable warning messages, you set the warnings options to false, as the following example shows: $ mxmlc -warnings=false c:/myFiles/app.mxml You only specify the main application file, the file that contains the tag, to the compiler.
26 CHAPTER 2 Compiling a Flex Builder application When you compile a project with Flex Builder, you open the Flex compilers from within Flex Builder itself, not from the command line. You can build your projects manually or let Flex Builder automatically compile them for you. In either case, the Flex Builder compiler creates the SWF application files, generates a wrapper, places the output files in the proper location, and alerts you to any errors encountered during compilation.
ADOBE FLEX 3 27 Building and Deploying Adobe Flex 3 Applications However, if your application accesses assets at run time, the application requests assets during execution. You must ensure that you deploy all of the necessary assets, in the correct location, so that you can run the application correctly.
28 CHAPTER 2
29 Chapter 3: Applying Flex Security Developers (including programmers and other authors) who design and publish Flex applications can control the security aspects of the applications they develop by using Flex. Topics Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Loading assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30 CHAPTER 3 Flex supports working with the web application security of any J2EE application server. In addition, precompiled Flex applications can integrate with the authentication and authorization scheme of any underlying server technology to prevent users from accessing your applications. The Flex framework also includes several built-in security mechanisms that let you control access to web services, HTTP services, and server-based resources such as EJBs.
ADOBE FLEX 3 31 Building and Deploying Adobe Flex 3 Applications Declarative security is recommended over programmatic security for most applications because the design promotes code reuse, making it more maintainable.
32 CHAPTER 3 The only type of persistent storage is through the SharedObject class, which is embodied as a file in a directory whose name is related to that of the owning SWF file. A Flex application cannot typically write, modify, or delete any files on the client computer other than SharedObject data files, and it can only access SharedObject data files under the established settings per domain.
ADOBE FLEX 3 33 Building and Deploying Adobe Flex 3 Applications About sandboxes The sandbox type indicates the type of security zone in which the SWF file is operating. In Flash Player, all SWF files (and HTML files, for the purposes of SWF-to-HTML scripting) are placed into one of four types of sandbox: remote All files from non-local URLs are placed in a remote sandbox. There are many such sandboxes, one for each Internet (or intranet) domain from which files are loaded.
34 CHAPTER 3 The following table shows how the sandbox type is determined: use-network Loaded Sandbox type false locally local-with-filesystem true locally local-with-network true network remote false network n/a (causes an error) Browser security Flash Player clients can be one of the following four types: • Embedded Flash Player • • Debugger version of embedded Flash Player • Debugger version of stand-alone Flash Player Stand-alone Flash Player The stand-alone Flash Player runs on
ADOBE FLEX 3 35 Building and Deploying Adobe Flex 3 Applications SWF file loading and cross-scripting are always permitted between SWF files that reside in the same sandbox. For example, any local-with-filesystem SWF file can load and cross-script any other local-with-filesystem SWF file; any local-with-networking SWF file can load and cross-script any other local-with-networking SWF file; and so on.
36 CHAPTER 3 The navigateToURL() method The navigateToURL() method opens or replaces a window in the Flash Player’s container application. You typically use it to launch a new browser window, although you can also embed script in the method’s call to perform other actions. This usage of the navigateToURL() method relies on the domain-based security restrictions that the allowScriptAccess and allowNetworking parameters define.
ADOBE FLEX 3 37 Building and Deploying Adobe Flex 3 Applications You can also assign a SWF file to be in the local-trusted sandbox when you load it from the local file system. To do this, you configure a directory as trusted by Flash Player (which results in the SWF file being put in the localtrusted sandbox) by adding a FlashPlayerTrust configuration file that specifies the directory to trust.
38 CHAPTER 3 Deploy checklist Before you deploy your application, ensure that your proxy servers, firewalls, and assets are configured properly. Adobe provides a deployment checklist that you can follow. For more information, see “Deployment checklist” on page 304. Remove wildcards If your application relies on assets loaded from another domain, and that domain has a crossdomain.xml file on it, remove wildcards from that file if possible.
ADOBE FLEX 3 39 Building and Deploying Adobe Flex 3 Applications Loading assets The most common task that developers perform that requires an understanding of security is loading external assets. Data compared to content The Flash Player security model makes a distinction between loading content and accessing or loading data. Content is defined as media: visual media that Flash Player can display, such as audio, video, or a SWF file that includes displayed media.
40 CHAPTER 3 • Loading SWF file’s sandbox. To load an asset from a network address, you must ensure that your SWF file is in either the remote or local-with-networking sandbox. To ensure that a SWF file can load assets over the network, you must set the use-network compiler option to true when you compile the Flex application. This is the default.
ADOBE FLEX 3 41 Building and Deploying Adobe Flex 3 Applications Loading local assets In some cases, your SWF file might load assets that reside on the client’s local file system. This typically happens when the Flex application is embedded on the client device and loaded from a network. If the application is allowed to access local assets, it cannot access network assets.
42 CHAPTER 3 Authentication requires a website to store information about users. This information includes the role or roles assigned to each user. In addition, websites that authenticate user access typically implement a login mechanism that forces verification of each user’s identity by using a password. After the website validates the user, the website can then determine the user’s roles.
ADOBE FLEX 3 43 Building and Deploying Adobe Flex 3 Applications manager When the browser tries to load a resource that is secured by constraints in the web.xml file, the browser either challenges the user (if you are using BASIC authentication) or forwards the user to a login page (with FORM authentication).
44 CHAPTER 3 The results are submitted to the container’s JAAS system with base-64 encoding, which means they can be read by anyone that can view the TCP/IP traffic. Use encryption to prevent these so-called “man-in-the-middle” attacks. In both BASIC and FORM authentication, if the user accessed the resource through SSL, the username and password submission are encrypted, as is all traffic during that exchange.
ADOBE FLEX 3 45 Building and Deploying Adobe Flex 3 Applications Using secured services Secured services are services that are protected by resource constraints. The service itself behaves as a resource that needs authentication and the container defines its URL pattern as requiring authorization. You might have a protected Flex application that calls a protected resource. In this case, with BASIC authentication and a proxied destination, the user’s credentials are passed through to the service.
46 CHAPTER 3 Flash Player also provides support for versions of RTMP that are tunneled through HTTP and HTTPS. RTMP refers to RTMP transmitted within an HTTP wrapper, and RTMPS is RTMP transmitted within an HTTPS wrapper. Using sockets Sockets let you read and write raw binary or XML data with a connected server. Sockets transmit over TCP. Because of this, Flash Player cannot take advantage of the built-in encryption capabilities of the browser.
ADOBE FLEX 3 47 Building and Deploying Adobe Flex 3 Applications For more information about using the LocalConnection class, see Programming ActionScript 3.0. To facilitate SWF-to-SWF communication, you can also use cross-scripting. For more information, see “Crossscripting” on page 34. Using SSL A SWF file playing in a browser has many of the same security concerns as an HTML page being displayed in a browser.
48 CHAPTER 3 By default, a SWF file served over an unsecure protocol, such as HTTP, cannot access other documents served over the secure HTTPS protocol, even when those documents come from the same domain. As a result, if you loaded the SWF file over HTTP but want to connect to the service through HTTPS, you must add secure="false" in the crossdomain.xml file on the services’s server, as the following example shows: PAGE 55ADOBE FLEX 3 49 Building and Deploying Adobe Flex 3 Applications Disabling viewSourceURL If you enabled the view source feature by setting the value of the viewSourceURL property on the tag, you must be sure to remove it before you put your application into production. This functionality applies only to Flex Builder users.
50 CHAPTER 3 Input validation Input validation means ensuring that input is what it says it is or is what it is supposed to be. If your application is expecting name and address information, but it gets SQL commands, have a validation mechanism in your application that checks for and filters out SQL-specific characters and strings before passing the data to the execute method. In many cases, you want users to provide input in TextInput, TextArea, and other controls that accept user input.
ADOBE FLEX 3 51 Building and Deploying Adobe Flex 3 Applications Handling errors The SecurityError exception is thrown when some type of security violation takes place. Security errors include: • An unauthorized property access or method call was made across a security sandbox boundary. • An attempt was made to access a URL not permitted by the security sandbox. • A socket connection was attempted to an unauthorized port number, for example, a port below 1024, without a policy file present.
52 CHAPTER 3 } ]]> If no event listeners are present, the debugger version of Flash Player automatically displays an error message that contains the contents of the text property. In general, try to wrap methods that might trigger a security error in a try/catch block.
ADOBE FLEX 3 53 Building and Deploying Adobe Flex 3 Applications To ensure that passwords are transmitted from the client to the server safely, enforce the use of SSL or some other secure transport-level protocol. When you ask for a password in a TextArea or TextInput control, set the displayAsPassword property to true. This displays the password as asterisks as it is typed. Storing persistent data with the SharedObject class Flash Player supports persistent shared objects through the SharedObject class.
54 CHAPTER 3 About the mm.cfg file You configure the debugger version of Flash Player by using the settings in the mm.cfg text file. You must create this file when you first configure the debugger version of Flash Player. The settings in this file let you enable or disable trace() logging, set the location of the trace() file’s output, and configure client-side error and warning logging. For more information, see “Configuring the debugger version of Flash Player” on page 229. About the mms.
ADOBE FLEX 3 55 Building and Deploying Adobe Flex 3 Applications About FlashPlayerTrust files Flash Player provides a way for administrative users to register certain local files so that they are always loaded into the local-trusted sandbox. Often an installer for a native application or an application that includes many SWF files will do this.
56 CHAPTER 3 Access the Settings Manager for your Flash Player 1 Open an application in Flash Player. 2 Right-click and select Settings. The Adobe Flash Player Settings dialog box appears. 3 Select the Privacy tab (on the far left). 4 Click the Advanced button. Flash Player launches a new browser window and loads the Settings Manager help page.
57 Chapter 4: Optimizing Flex Applications After you have a working application, you can explore ways to make that application download faster and perform better. Topics Improving client-side performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Improving client-side performance Tuning software to achieve maximum performance is not an easy task.
58 CHAPTER 4 • Do not attempt to test a large application’s performance all at once. Rather, test small pieces of the application so that you can focus on the relevant results instead of being overwhelmed by data. • Test the performance of your application early and often. It is always best to identify problem areas early and resolve them in an iterative manner, rather then trying to shove performance enhancements into existing, poorly performing code at the end of your application development cycle.
ADOBE FLEX 3 59 Building and Deploying Adobe Flex 3 Applications
-
60 CHAPTER 4 public var sTime:Number; public var eTime:Number; public var pTime:Number; private function init():void { f1.addEventListener("preinitialize", logPreInitTime, true); f1.addEventListener("creationComplete", logCreationCompTime, true); } private var isFirst:Boolean = true; private function logPreInitTime(e:Event):void { // Get the time when the preinitialize event is dispatched. sTime = getTimer(); trace("Preinitialize time for " + e.target + ": " + sTime.
-
ADOBE FLEX 3 61 Building and Deploying Adobe Flex 3 Applications Calculating memory usage You use the totalMemory property in the System class to find out how much memory has been allocated to Flash Player or AIR on the client. The totalMemory property represents all the memory allocated to Flash Player or AIR, not necessarily the memory being used by objects. Depending on the operating system, Flash Player or AIR will be allocated more or less resources and will allocate memory with what is provided.
-
62 CHAPTER 4 Configuring the client environment When testing applications for performance, it is important to configure the client properly.
-
ADOBE FLEX 3 63 Building and Deploying Adobe Flex 3 Applications 4 Select High System Performance from the Power Schemes drop-down box. 5 Click OK. Changing timeout length When you test your application, be aware of the scriptTimeLimit property. If an application takes too long to initialize, Flash Player warns users that a script is causing Flash Player to run slowly and prompts the user to abort the application.
-
64 CHAPTER 4 // Set expiration date to a date in the past. response.setDateHeader("Expires", 946080000000L); //Approx Jan 1, 2000 // Force always modified. response.header("Last-Modified", new Date()); Reducing SWF file sizes You can improve initial user experience by reducing the time it takes to start an application. Part of this time is determined by the download process, where the SWF file is returned from the server to the client. The smaller the SWF file, the shorter the download wait.
-
ADOBE FLEX 3 65 Building and Deploying Adobe Flex 3 Applications import flash.printing.* // Error. This class is not used. import mx.controls.Button; // Error. This class is not used. import mx.core.Application; // No error. This class is used. public class Foo extends Application { } } The strict option also performs compile-time type checking, which provides a small optimization increase in the application at run time. The default value of the strict compiler option is true.
-
66 CHAPTER 4 The following table describes the tags used in this file: Tag Description
