| Mike Jones
Published by Addison-Wesley Professional
ISBN-10: 032160413X
ISBN-13: 9780321604132 |
This chapter also includes how to install and configure Flash Builder for developing components.
Flex
In the beginning, Flex was a J2EE application server that "lived" on the server and took flat, plain text files and produced compiled content (an SWF) from them when a visitor requested the relevant file. This was fine, but it had its limitations. It was expensive—really expensive. Plus, as a developer, it was a fairly niche skill to have. Unless you worked for an organization that was large enough to buy a copy of Flex, or had a client willing to do likewise, it was fairly unlikely that you would get the opportunity to learn how to develop for the Flex server product. That said, Flex was becoming the technology of choice for rich reporting and data visualization web applications; however, it was a big-ticket item, so in the grand scheme of things, the market for Flex wasn’t huge.
Eventually, Adobe (as Macromedia) made a landmark decision. It realized that, as a server-side only product, Flex was unlikely to set any sales records, or more important, provide a ubiquitous way to develop and deploy Rich Internet Applications (RIAs). Adobe, instead of End of Life-ing Flex,1 refocused Flex from a server-side solution to a developer toolset. This enabled developers to create, test, and deploy applications created entirely in Flex without needing the original costly server-side product. That decision may have just changed the way we forever develop and deploy web applications.
1 End of Life is the polite term used when a product is no longer going to be developed.
What Is Flex?
In a nutshell, Flex is an application framework built with, and harnessing, ActionScript 3.0 that leverages the Flash Player as its deployment platform on the web. More recently, it can now harness the capabilities of the Adobe Integrated Runtime (AIR) for the development of desktop-based applications.
To make the development process as streamlined and time efficient as possible, Flex enables you to create applications with ActionScript 3.0 or combine it with MXML. MXML is a subset of the XML language and, as such, conforms to the basic structure and rules that apply to XML. The advantage MXML has over pure ActionScript is two- fold. First, you don’t need to be an ActionScript guru to create Flex applications because MXML takes most of the complexity out of the equation, leaving you to simply develop your application. Second, because of its hierarchical nature, MXML is easy to understand from a structural and relationship point of view, which makes the design and development of user interfaces efficient and conceptually easy to visualize compared to ActionScript.
From a pure development perspective, Flex has additional benefits, especially to those who work in teams or collaboratively. By harnessing the power of MXML, a section of your team can rapidly develop the graphical user interface (GUI) elements of your application separately from the actual logic. This has several advantages, such as enabling you to use the actual GUI as the basis for any prototyping and interactive client concepts without generally having to wire in the full functionality of your application. MXML is easy to restructure compared to ActionScript, and much of the low-level functionality that you would normally create with ActionScript is already present, be that layout management, styling, effects, and events or my personal favorite, Tooltips.
A common misconception is that MXML and ActionScript are two mutually exclusive languages used by Flex. This isn’t the case. MXML exists only within the "eye of the compiler." When you compile a Flex application, any MXML is initially compiled/converted to ActionScript before finally being compiled into an SWF. You don’t, by default, see this in between the ActionScript stage because the compiler does this in the background and then discards it after it creates the final SWF. You can set a compiler flag that keeps the generated ActionScript if you want to see what your MXML becomes when it’s converted into this intermediary ActionScript phase. (See Appendix A, "Flex Resources," for some compiler commands and flags.)
Flex SDK
The Flex Software Development Kit (SDK) is the core of Flex development. It contains the Flex framework, which is provided as both source code (in the form of ActionScript classes) and compiled libraries (in the form of SWCs). (For more information about the SWC format, see Chapter 12, "The Flex Library Project.") The SDK also contains sample files and the relevant standalone and browser plug-in debug Flash players. Additionally and more important, it contains the mxmlc compiler, which compiles Flex applications, and the compc compiler, which creates SWCs. (Again, see Chapter 12 for details about the compc and the SWC format.)
The Flex SDK is free to download and use as a development tool. However, it is a "warts and all" solution that requires you to know and be comfortable with executing applications with the command line or via an automation tool, such as ANT. That said, this is the bare minimum that you need to start developing Flex components and applications.
In addition to being free to download, the Flex SDK is now part of the open source movement and, as such, you can submit updates and bug fixes to improve it. To do so, head over to http://opensource.adobe.com and download the latest build of the Flex SDK.
The command line isn’t for everyone, so if all that sounded like a chore, don’t worry. Adobe realized that most developers want the capability to develop Flex applications in a purpose-built editor, so it created Flash Builder (formerly Flex Builder). Before we move on to Flash Builder, let’s look at probably the longest and most contentious debate regarding the Flex frameword: the Flex versus Flash debacle.
Flex Development Versus Flash Authoring
If you are reading this because your expertise is in Flash and ActionScript, you need to know a few things before we proceed. As mentioned earlier, Flex is, at its core, just a set of ActionScript 3.0 classes. Therefore, if you were to lock yourself in a room with nothing more than the Flash Authoring tool (or a text editor, for that matter), you too could probably produce something that works in a similar vein as Flex. And if you were truly committed, you could probably write something in Python or Java that would let you use an XML-derived language to quickly and easily define layout controls for your applications. The thing is, you don’t actually need to do that; Macromedia/Adobe already did that hard work and produced Flex.
Also, there is nothing stopping you from creating content in Flash and including it within your Flex applications. Chapter 11, "Creating Flex Components with Flash Professional CS5," looks at how to leverage Flash for that very purpose.
Most of the Flash versus Flex debate centers on the development tools, primarily Flash Builder and Flash (or Flash Authoring, as it is officially referred to). For ease of distinction, my use of Flex refers to the Flex framework; Flash Builder refers to the Flex Authoring tool; and Flash refers to the Flash Authoring tool unless indicated otherwise.
Flash Builder Has No Drawing Tools or Timeline
The visual tools in Flash Builder are not reflective of the Flash Authoring tool because they are targeted at different solutions. The Flash Authoring tool is, at this point, aimed at more visually creative solutions. On the other hand, Flash Builder is more application-oriented, but it’s not any less creative. Flash has a host of visual tools for the creation of assets. Flash Builder has a visual layout system, but it cannot create content visually because it has no toolset that’s comparable to Flash. Flash Authoring has a timeline; the Flex framework technically doesn’t. That is not to say that Flex cannot manipulate content over time; it is just that Flex uses programmatic means to achieve this. Flash uses ActionScript and can export backward-compatible content for earlier versions of the Flash Player. The Flex 4.x framework uses MXML and ActionScript 3.0 and, therefore, only targets the Flash Player 10 and beyond.
Flex SWFs Are Massive
In general, Flex applications have a large footprint. This is because Flex is framework-based and, therefore, needs this framework to operate. Recently, however, Adobe has updated the Flash Player to enable application caching on users’ machines, so if they have already been to a site that uses this, it will download the Flex framework and cache it within the Flash Player. Then, when they visit your web application, it will only need to download the actual content, not the framework. This change in Flex applications brings Flex SWF file sizes in line with pure Flash Authoring SWF sizes.
Flash Builder Has No Symbol Library
Although it is true that Flash Builder doesn’t have a symbol library, it does enable you to create simple MXML objects (sometimes referred to as application components) that are fairly close in concept to Flash’s symbol library. The advantage Flash Builder has over Flash symbols is that there is no risk of hiding source code within a Flex application because of its plain-text nature. This makes for ease in searching compared to the risk of losing where code is instantiated when it is attached to symbols or timelines.
At the end of the day, they both have their benefits and deficits. It isn’t about which is better or how much you can achieve with A or B because of your 1337 S|<!11z. It’s more about picking the right technology and toolset for your requirements, although that would clearly be Flash Builder and the Flex framework.
Let’s look at Flash Builder in detail and install it so that we can start making some cool things.
Flash Builder
When Flex first emerged, its development environment was based off of Dreamweaver and code named Brady (after the Brady Bunch).2Versions 2 and 3 of Flash Builder were called Flex Builder to draw symmetry between this new development tool and the Flex framework. However, because Flex Builder could be used to create pure ActionScript applications that didn’t use the Flex framework, Flex Builder was renamed Flash Builder to coincide with the launch of the Flex 4 framework, positioning it under the Flash Platform banner alongside Flash CS5 and Flash Catalyst.
2 Initially, there was going to be an alternative development tool code, named Partridge, that was more approachable for Java developers because it was built on the Eclipse platform. However, for one reason or another, Partridge never saw the light of day until Flex Builder 2 was announced and Adobe made its dramatic turn from server-side to client-side development of Flex applications. With the arrival of Flex 2, it heralded the demise of the original Dreamweaver-inspired Flex development environment, which, although serviceable, was clunky and more Dreamweaver than Flash Builder.
What Does This Actually Mean to You?
Flash Builder is an Integrated Development Environment (IDE), which means that it provides all the tools necessary to develop and deploy Flex applications. However, if we stopped there, there isn’t that much to separate this from the Flex SDK. Interestingly, Flash Builder actually contains the Flex SDK and provides a more user-friendly workflow that makes the development of Flex applications easier because it provides productivity tools and features to assist you when developing.
Built on the Eclipse platform, Flash Builder comes in two versions: Standard and Premium. The Premium version has a memory profiler, unit testing, and network monitoring. If that weren’t enough, these versions come in two variants. You can either install the standalone version of Flash Builder, or if you already use the Eclipse platform for other development needs, you can install Flash Builder as a plug-in on top of your copy of Eclipse. Honestly, the way you choose to install Flash Builder is entirely up to you because there is no other difference between the two options. The more important decision you need to make is whether you need the added functionality offered by the Premium version. At this point, it is probably prudent to mention that, unlike the SDK, Flash Builder isn’t free, but it won’t break the bank, either. The Standard version of Flash Builder is probably the cheapest piece of development software that Adobe sells.
Wrapping the Flex SDK
Flash Builder can use more than one version of the Flex SDK, so as updated versions are released, you can include them within your Flash Builder IDE and select the one you want to use on a global and project basis. Flash Builder 4 comes with the Flex 3.5 and 4.0 SDKs already installed. Although you can just plug in new versions of the SDK (from Adobe’s open source site, for example), it does not add additional functionality, wizards, or tools to Flash Builder beyond those already present; so, don’t view this as an easy path to upgrading Flash Builder. Now that you have an understanding of the basic makeup and mechanics of Flash Builder, let’s actually download and install it.
Installing Flash Builder
Installing Flash Builder is virtually identical on Windows and Mac OS X. This is partly because Eclipse already works on these operating systems. For brevity, I explain how to install Flash Builder on OS X and, where applicable, I indicate the key differences if they exist on Windows. As mentioned in the previous section, Flash Builder comes in two variations: a standalone and plug-in version. I won’t go over the installation of both, because there isn’t a huge difference. But, if you are already using Eclipse for the development of other forms of web or desktop software, you can obviously choose whether you want to include Flash Builder as part of that workflow or use it in isolation as the standalone version.
Downloading Flash Builder
Flash Builder is available as a 60-day free trial that can be downloaded directly from the Adobe website. The download isn’t huge, but it is fairly substantial (about 500MB). So, you might want to get it going while you read through this chapter, and after it’s downloaded, go back through the section, "Starting the Installation of Flash Builder."
To install Flash Builder, the first thing you need to do is download the Flash Builder installer for your respective operating system. Windows and OS X users can download it from Adobe’s download page (www.adobe.com/go/flex_trial).
Select your operating system from the drop-down box, scroll to the Download button, and click it to start downloading the free trial. If you want to receive an email or two to get you started with the Flex framework, check the appropriate boxes as you move down the page. If you want to download the plug-in version of Flash Builder instead of the standalone, scroll to the bottom of the download page; you’ll see a text link that takes you to the plug-in page. There, you can download it in the same manner.
Starting the Installation of Flash Builder
After your download completes, locate the installer and start it. For most of you, this is as simple as double-clicking.
When the installer fires up, you are presented with the initial installer screen, which includes the End User License Agreement (EULA) that everyone—myself included—ignores and clicks right on through via the Accept button (see Figure 1.1). In a bid not to break with convention, accept the agreement...only if you agree with it, that is. Proceed to the next screen.
Figure 1.1 Flash Builder start screen and license agreement (OS X)
On the next screen, enter a serial number or run Flash Builder in trial mode (see Figure 1.2). Whichever option you select presents you with a drop-down list of language options. Pick one and click Next.
Figure 1.2 Choose whether to enter a serial number or install as a trial.
The Adobe login screen appears (see Figure 1.3). This is an optional screen, so if you don’t want to log in to Adobe, just click the Skip button. (Logging in can help you access help and other features, but you can log in later, if needed.) If, on the other hand, you want to login or register an Adobe ID, select the relevant option and, once authenticated, click Next to proceed.
Figure 1.3 Adobe ID login screen
You’re halfway through the installer set up. On the screen shown in Figure 1.4, you choose where to install your copy of Flash Builder. Personally, unless there is some administrative reason or quirk that requires you to install it in another folder, just click Next, and leave the installer to put Flash Builder in the default installation directory on your machine.
Figure 1.4 Flash Builder installation options (OS X)
The default installation paths are as follows:
- Windows 32bit:C:\Program Files\Adobe\Flash Builder 4
- Windows 64bit:C:\Program Files (x86)\Adobe\Adobe Flash Builder 4
- Mac OS X:/Applications/Adobe Flash Builder 4
If you’re happy, it’s time to start the actual installation. If anything is incorrect or you change your mind about a particular option, you can use the Back button to return to the relevant screen and make changes. Just click Next to get back to the Install Options dialog after you make your corrections. Click the Install button to start the actual installation, and grab a cup of tea or coffee while it installs.
After you finish your refreshing beverage, the installation will likely be complete. (It doesn’t take that long, but if you grab the drink now, you can settle in for the remainder of this chapter without being disturbed.) If all went according to plan, you should be looking at the Congratulations screen (see Figure 1.5). Close the installer by clicking the Done button. You just successfully installed Flash Builder, and we can now fire it up for the first time.
Figure 1.5 Congratulations! Flash Builder has installed A-OK.
Failed Installations
If you have problems or if the installer fails during installation, note the error you receive, and head over to Adobe’s Support Center for Flex (www.adobe.com/support/flex/). The Installation Help tab can likely offer you a solution. However, problems seem to be few and far between these days, so you shouldn’t have anything to worry about.
Launching Flash Builder
As part of the post-installation process, the installer placed shortcuts to Flash Builder on Windows (Start > Program Files > Adobe). On OS X, the installer opened a Finder window of the Flash Builder folder, so you can make an alias for it, if you want. To open Flash Builder on OS X in the future, you’ll find it located in the Applications Directory. (If you opted to install it in another location, it will be located where you placed it.)
When you are ready to proceed, click or double-click (depending on your personal setup) the Flash Builder application to start it. This might take a few seconds because Flash Builder needs to create the default files on its first run through. After the splash screen disappears, you see the Flex Start Page within Flash Builder (see Figure 1.6). Feel free to explore the Flex Start Page tutorials. After you look around, we’ll create your first project so that you are ready to develop.
Figure 1.6 Flash Builder initial Start Page (OS X)
Creating Your First Project
Now that you’ve familiarized yourself to the IDE, you can set up the IDE and get ready to create components. There aren’t any specific guidelines on how to configure Flash Builder for component development. But I’ve made my fair share, so I’ve had the opportunity to test various setups, and I think the way you will learn to develop components with Flash Builder is simple, practical, and—above all—productive. With that in mind, let’s start creating our first project.
As the IDE is functionally identical on both Windows and OS X, I use OS X for all the screen shots from here on out; where applicable, I provide file locations and shortcut keys in both Mac and PC format.
From the File menu, select New > Flex Project (see Figure 1.7). Don’t worry about the other options in that menu. We’ll cover the various entries as we go.
Figure 1.7 New Flex Project entry (OS X)
After you click the Flex Project entry, the project wizard launches. The first dialog is fairly straightforward. The only thing you need to do is give your project a name (see Figure 1.8).
A few pointers here: Your project name cannot have spaces; it should be descriptive of the project but not verbose; it cannot contain special characters beyond underscores or hyphens; and I recommend not using any numbers. Also, it is common to format the name in CamelCase; that is, capitalize each individual word that is concatenated together, just like the word CamelCase is in this sentence. If you want to prefix or suffix your project name, that casing is up to you. If you want more information on naming standards within ActionScript and Flex, Adobe provides a coding standards document that you can read at your leisure; see Appendix A for the URL.
With this information in mind, give your project the name DFC_DevelopingComponents. For now, leave the rest of the settings set to their defaults. Throughout this book, we create a few projects, so the screen shown in
Figure 1.8 and the following ones will become second nature to you.
Figure 1.8 Initial Create a Flex Project screen
Click Next to proceed to the next step in the process.
On the next screen, we have the default output folder into which our Flex-compiled files are placed. Notice that it is called bin-debug. This is because, by default, Flex compiles the SWF binaries with the debug information included; therefore, the name of the folder because they are binary files with debug information: bin-debug. You can leave these settings as is (we cover this later). Click Next to proceed to the next step in the project-creation process.
Figure 1.9 holds a lot of information about your project. Here, you can add external source directories to the project through the Source Path tab. Think of this as providing access to assets and classes without actually importing them. You can also link library items via the Library Path tab. At this point, I’m not going to explain the library elements because we use them and external sources in Part II, "Developing Components," and
Part III, "Distribution," of this book.
At the bottom of the screen shown in Figure 1.9 are three text fields that hold the defaults for the project structure. First, you have the main source folder. By default, this is src. Flash Builder previously enabled you to just dump your content in the root of the project, but that can get messy and cause issues when deploying your applications. So, in Flash Builder, the default root for all your assets and content was set to src.
Figure 1.9 Final step in creating a new Flex project
The next field is the main application file. Notice that it has the same name as the project. Again, you can change this, keeping in mind the restrictions and advice given earlier for project names. Many developers rename the main application file to Main.mxml, including myself. For clarity here, we keep the name the same as the project.
Finally, the output folder URL is generally populated only if your Flex project is used with a server-side solution and, therefore, needs to be pathed and deployed slightly differently than a nonserver-side project and can safely be left blank. As with the previous screen, I wanted you to view this screen so that you were aware of its existence and that we will revisit it in the future. Click the Finish button to complete the wizard.
As soon as the wizard completes, you see two things happen: The Package Navigator now contains your new project, which has been expanded, and the DFC_DevelopingComponents.mxml has been opened in a tab next to the Flex Start Page (if you still have the Start Page open).
Summary
This chapter introduced Flex the framework and Flex the SDK, and briefly overviewed the differences between Flash and Flex from a development perspective. You also downloaded and installed Flash Builder and created your first project. You are ready to move on!
That’s it for this chapter. We are now ready to get deep into the Flex components, so put the kettle on and make another hot drink. Make one for me while you’re at it.
