#91 brought to you by...

CONTENTS INCLUDE:

n About Builder 4 n Create a Project Getting Started with n Developing n Building ® ® ™ n Running and Debugging n Testing and more... Adobe Flash Builder 4 By Daugherty Visit refcardz.com Visit refcardz.com

Buy Flex Builder 3: http://www.adobe.com/products/flex/updrade ABOUT FLASH BUILDER 4 Getting Flash Builder 4 Adobe Flash Builder, part of the Adobe Flash Platform, is a Go to the Adobe download site - multimedia platform that utilizes browser plug-ins to deliver http://www.adobe.com/go/try_flashbuilder rich content via the web. With a market penetration over Choose the download for your from either 99% in most developed countries, it is a ubiquitous platform the Standalone Installer or Plug-in for sections. for developing rich content. Adobe Flex is an open-source For either the Standalone or Plug-in versions, the downloaded Software Development Kit (SDK) used to develop rich file is an installer. For Windows, simply run the downloaded file applications on the Flash platform. Flex applications can also (.exe). For OS X, mount the DMG file and run the installer app be delivered as applications that are installed locally using inside the disk image. The installers will launch a wizard with Adobe AIR®. instructions on how to complete the installation.

Flash Builder 4 is an Integrated Development Environment Once installed, the standalone Flash Builder can be run (IDE) from Adobe Systems Inc. for ActionScript® and Flex from the installed location (Program Files on Windows or development. Flash Builder is built on top of Eclipse, an open Applications on OS X), or the plug-in version can be run by source extensible development platform, and a popular launching Eclipse. IDE. Because it is built on Eclipse, Flash Builder 4 inherits When Flash Builder is first launched, it prompts the user for a an impressive list of plug-ins and is a familiar tool for many serial number, or you can elect to start a 60-day trial. During developers. the trial, it will display a dialog box that allows you to enter Flex® Builder™ is now Flash Builder a serial number or continue with the trial each time it is Hot The previous version of Flash Builder 4 was Flex Builder launched. Tip 3. Adobe changed the name for this release to avoid confusion between the open-source Flex framework and Applications created by Adobe Flash Builder can be Flash Builder 4, which is a commercial IDE. Hot www.dzone.com Get More Refcardz! Refcardz! Get More www.dzone.com Tip published in the browser using the , and outside the browser using Adobe AIR. This Refcard outlines how to use Flash Builder to develop Flex applications, including creating new projects in Flash Builder,

Developing, Building (compiling), Testing, and Debugging Flex CREATE A PROJECT applications. Flash Builder uses projects as the parent container for all Flash Builder 4 is supported on Windows and Mac OS X, and development activities. Before you start working, you must can be installed as an Eclipse plug-in or as a standalone install. first create a new project. Coexist Flex Builder 3 and Flash Builder 4 can coexist on the same system. However, they cannot coexist as plug-ins in the Hot same Eclipse install. If you have Flex Builder 3 installed as Tip an Eclipse plug-in, you should uninstall it before installing the Flash Builder 4 plug-in, or install Flash Builder 4 standalone.

Flash Builder 4 is a commercial product and must be purchased from Adobe (a 60-day free trial is available).Flash Builder 4 Adobe Flash Builder 4 pricing will be consistent with Flex Builder 3, with the Standard Edition available for $249 (USD) or $99 (USD) for an upgrade. The Professional Edition available for $699 (USD) or $299 (USD) for an upgrade. The Standard Edition is available free for Education, and Volume and Government pricing are also available.

For additional information on the differences between Flex Builder 3 Standard and Professional, see Adobe’s Reasons to Getting Started with

DZone, Inc. | www.dzone.com 2 Getting Started with Adobe Flash Builder 4

Create a new project using the menu: File -> New -> Flex Getting Started with Eclipse Project. This starts the New Flex Project wizard. Hot Flash Builder 4 is built on Eclipse, and inherits many of its The first step requires that you specify a name for your project. features and shortcuts. For more information on Eclipse, Tip please see the Getting Started with Eclipse Refcard. You can also override the default location. There are several http://refcardz.dzone.com/refcardz/getting-started-eclipse other important choices on this first page: Application Type Building Flex Applications Flash Builder supports two applications types, Web and Flex applications consist of two different types of source files. Desktop. Web projects create Flash . files that can be MXML files (.) are XML files that allow you to arrange distributed via a web server and run within a client browser. visual components, as well as include non-visual components Desktop projects create .air files that can be downloaded and and ActionScript code. ActionScript files (.as) contain installed as local applications. ActionScript code (classes, interfaces, etc.). You can achieve the same functionality with either type of file, but they are Sandbox tailored to different usages. Applications that run within the browser are limited to Hot a local sandbox. They do not have access to the local MXML files are ideal for visual components that contain small Tip computer’s file system and have limited network access. amounts of ActionScript code. ActionScript files are ideal for AIR applications have full local file system and non-visual code, including model or service classes. network access. Flash Builder provides powerful editors for both types of Server Technology source files. Flash Builder 4 supports integration with several server technologies, including ASP.Net, ColdFusion, J2EE, and PHP. Adobe Flash Catalyst is a tool that allows designers to Selecting one of these options allows Flash Builder to provide Hot easily create Flex applications from artwork created from automatic configuration for remote calls. If an option other Tip the . Flash Builder provides tools to than None/Other is selected, additional information will be import Adobe Flash Catalyst projects. For more information collected in step two. The specific data needed is dependent on Catalyst: https://www.adobe.com/go/catalyst on the selected technology. Flex can also interact with REST and SOAP services written in any technology. MXML MXML files can be edited in two modes, Source and Design. The additional steps in the wizard allow for further You can switch back and forth between these modes while customization of the project, but the default values are editing an MXML source file. This makes it easy to manage the acceptable for most beginner projects. visual layout using the designer while switching to the source Component Sets view to add ActionScript and non-visual components. The Flex SDK provides a rich set of components useful for developing applications, including everything from Buttons Hot and Labels to rich charting components. The components Tip in Flex 3 are called the MX components, while Flex 4 introduces the Spark components. Flex 4 projects will use a combination of these components. Flash Builder 4 continues to work with the Flex 3 SDK and MX components. Source mode provides an XML editor with robust code completion, syntax highlighting, and error highlighting. The DEVELOPING figure below shows the MXML editor in source mode with the code completion pop-up open. When a project is created or opened, Flash Builder displays the main window, called the workbench. ASDoc Tool Tips Hot You can quickly view the ActionScript documentation as a Workbench Tip ToolTip in the MXML Source Editor and ActionScript Editor The workbench consists of a set of Views, Editors, and by hovering the mouse over a Flex SDK class or method. Toolbars. Views provide visual access to some part of your project. The initial views include the Package Explorer, Outline, Problems, and several others. Editors allow you to edit the source files, and can be text based or visual. Toolbars provide easy access to commonly used menu items.

Perspectives can be used to manage your workbench. A perspective is a collection of views and toolbars appropriate for a certain activity. Flash Builder provides two default perspectives, Flash and Flash Debug. These perspectives open the appropriate Views and Toolbars for Development (Flash) or Debugging (Flash Debug). You can modify these perspectives or define your own to customize the Flash Builder environment to your individual taste.

DZone, Inc. | www.dzone.com 3 Getting Started with Adobe Flash Builder 4

Design mode provides a visual preview of your application. This is very useful for laying out the components, or simply checking to see how they will look without running the application. The Design mode features a list of available components in the bottom left window. You can drag and drop these onto your application to add them and adjust the layout.

Code Completion Flash Builder provides code completion for many common scenarios. Code completion can be triggered automatically based on context or manually, using Ctrl-Space. Code completion is automatically triggered after a period or colon, displaying either possible variable and property names, or available types. Each Flex container uses a specific layout to determine the Dynamic Methods size and position of the visual components. The Flex SDK ActionScript is a dynamic language. Therefore, the code provides four general-purpose layouts. Components can be Hot completion can only provide guidance for the statically configured using absolute or relative positioning. BasicLayout Tip known functions and properties. There will be occasions allows absolution positioning, where components are assigned when code completion will be unable to identify valid functions or properties. specific x and y coordinates. This mode allows pixel level control over the appearance of the application. However, it Code Generation also has several drawbacks. When using BasicLayout, users ActionScript is a relatively concise language, avoiding cannot (usefully) resize the application. It can also be very significant amounts of boilerplate code. However, there are difficult to internationalize an application, as buttons and labels still occasions where it is useful to have Flash Builder perform are often different sizes based on the language. VerticalLayout, common code generation. HorizontalLayout, and TileLayout all provide different approaches to layout components using relative positioning. Generate Getter/Setter provides the ability to generate a get and set method for a given variable. Name Positioning Description Generate Event Handler generates an event handler method BasicLayout Absolute Components are positioned using x and y coordinates. and assigns it to the event property on the MXML component. VerticalLayout Relative Components are positioned in a column. Generate Service Call generates code to integrated with server HorizontalLayout Relative Components are positioned in a row. classes when using Data Services.

TileLayout Relative Components are positioned in a grid. The following table provides a list of where and how these code generation functions can be invoked. Flex also provides a layout specifically for button bars skins Name Location Invoke (ButtonBarHorizontalLayout). Generate ActionScript Editor Right Click (Win)/Ctrl-Click(OSX) on Variable and You can create your own Layouts by extending one of these Getter/Setter select Source -> Generate Getter/Setter. layouts, or their base class, LayoutBase. Generate Event MXML Source View, Source: Ctrl-Space in event property. Handler MXML Design View Design: Right Click on a Component -> Generate Click Handler OR click the ActionScript button in the Flex Properties View and select When you move beyond simple components and need to Generate Event Handler. begin to create object models and complex logic, it is time Generate MXML Design View Right Click on a Component -> Generate Service to use the ActionScript editor. The ActionScript editor is a Service Call Call OR click the traditional source code text editor. button in the Flex Properties View and select Generate Service Call. The editor includes keyword highlighting, error highlighting, and provides a list of current problems (Errors and Warning) Refactoring in the view at the bottom of the workspace. The following Flash Builder provides support for some refactoring. figure shows a simple ActionScript class with two unresolved You can Rename variables and functions, and Rename or problems. Move classes using the menu: Source -> Refactor -> Move

DZone, Inc. | www.dzone.com 4 Getting Started with Adobe Flash Builder 4

(or Rename). You can also access the Refactor menu from the Export Release Build context menu (Right Click (Win) or Ctrl Click (OS X)). These When you are done testing and ready to distribute your menu items will open a dialog box allowing you to specify the application, you can use the Export Release Build command new name or location. (Project -> Export Release Build…) to create a packaged version of your application. Source Control Hot Flash Builder supports integration with many different Web projects are packaged into .swf files that can be Tip source control management tools. You can install an uploaded to your web server for distribution. Flash Builder Eclipse Plug-in for the source control management tool also generates an HTML page and supporting files for your you use. application. You can find the template in the html-template Data Centric Development directory. This enables easy deployment of an application, or The Flash Builder Data Centric Development feature allows can serve as a guide for a custom HTML page. developers to quickly and easily connect Flex applications to a Desktop projects are packaged into an .air file that can be backend service. installed on a user’s computer. Each Adobe AIR application must be signed using a digital certificate. You can purchase To use the Data Centric Development feature, the project must a certificate from a Root Certificate Authority, or generate be connected to a service. This can either be done when the your own self-signed certificate. If you generate your own project is created, or later when needed. certificate, users will receive a warning when they install If a service was not defined, Flash Builder will prompt to create the application. one when the Generate Service Call code generation feature is first used.

Therefore, it is important to use a valid certificate from a Root Certificate Authority when distributing applications to a broad user base.

You can also generate an intermediate file (.airi). This is an unsigned .air file that must be signed (and converted to an .air file) before it can be distributed. This is useful in situations where the person who builds the project is different from the person who is authorized to use the certificate. Select the type of service you are using. You will then be taken to the Project Properties page where you can setup your service (this the same options and inputs used by the New RUNNING AND DEBUGGING Project Wizard) Flash Builder provides the ability to launch and debug your application from within Flash Builder. Applications can be BUILDING launched as a separate process (Run), or Flash Builder can attach to the running application (Debug). Compiling Flash Builder performs a background compilation every time Flash Builder is configured by default to use your primary mxml a file is saved. This provides real time feedback to compile file as the entry point. However, you can configure multiple errors while also encouraging users to save regularly. You can Run/Debug configurations using different entry points. disable this feature by selecting the menu Project -> Build To run the default application, use the menu Run -> Run main Automatically. You can perform a manual incremental compile (where main is the name of your default mxml file), or use the at any time using Ctrl-B (Win) or Command-B (OS X). Ctrl-Shift-F11 (Win) or Command-Shift-F11 (OS X) keyboard You can perform a clean compile by selecting the Project -> shortcut. For web applications this will launch your application Clean… menu item. You can then opt to rebuild one or more in a browser using the html-template. Desktop applications of the projects in your workspace. will be run using Adobe’s runtime engine.

DZone, Inc. | www.dzone.com 5 Getting Started with Adobe Flash Builder 4

If you want to debug the application you can launch it using Execution Control Run -> Debug main, or use the Ctrl-F11 (Win) or Command-F11 Flash Builder allows fine-grained control over the execution (OS X) keyboard shortcut. This will launch the application in of each line of code while debugging. The Flex Debug the browser or runtime engine, and Flash Builder will connect perspective provides a toolbar with buttons to step Into, Over, to the running application, allowing control and introspection. and Out of (Return) the current line. You can tell Flash Builder to run to the current line using the keyboard shortcut Ctrl- Breakpoints (Win) or Command-R (OS X) When debugging an application, you can set breakpoints to indicate you want the application to pause when it reaches a Variables and Expressions certain line. Flash Builder allows even more control, allowing While debugging in the Flex Debug perspective, you can view break points that are conditional on the value of variables the current values for your variables using the Variables view. or functions.

Flex Debug Perspective Hot Remember to use the Flex Debug perspective when Tip debugging an application. Flash Builder will also prompt you to switch when a breakpoint is hit during debugging.

You can select Remember my decision to automatically switch to the Flex Debug perspective in the future. This view provides a convenient way to explore the variables

Breakpoints can be set by clicking to the left of the line that exist within the current scope. While this is useful, it can number in the Editor, or using the menu Run -> Toggle be time consuming to find a specific value during extended Breakpoint or using the keyboard shortcut Ctrl-Shift-B (Win) debugging sessions or across repeated debugging sessions. or Command-Shift-B (OS X). By default the will The Expressions view allows you to set and view the values of stop before the code on the selected line is executed. You specific expressions (Watched Expressions). can make a breakpoint conditional by opening the breakpoint properties (Right-Click on the Breakpoint and select A Watched Expression is a small code expression that Breakpoint Properties). produces a single value. Expressions can be simple variables or complex logic including function calls that evaluate to a single value. The following figure shows two watched expressions, the first is a variable while the second is a simple Boolean statement.

Network Monitor Many applications developed with Flash Builder communicate with external services to read or write data. This can be difficult to debug without additional visibility into what is happening.

Flash Builder includes the Network Monitor view, which provides visibility into the network calls made by the program. Select the Enabled checkbox and specify the condition The Network Monitor tracks all requests, including the URL, that must be true for the breakpoint. You can also choose Request and Response Times, Duration, and Operation. For to specify a value, and the breakpoint will pause when that each request, you can inspect the Request and Response using value changes. a view similar to the Variables view.

DZone, Inc. | www.dzone.com 6 Getting Started with Adobe Flash Builder 4

TESTING

Unit Testing is commonly used by development teams to provide automated initial and regression testing. Flex developers can use FlexUnit, an open-source testing framework modeled after the popular JUnit project used for Java Unit Testing. FlashBuilder supports FlexUnit testing by providing integrated code generation and execution features, including the ability to create TestSuite and TestCase classes, and the Run and Debug tests. FlashBuilder provides the ability to create TestSuite and TestCase classes from the menu File -> New -> Test Suite Class FlexUnit (or Test Case Class). These menu items open a Dialog box that Hot You can find out more about FlexUnit from the project allows you to specify the options to create the class. Tip home page: http://opensource.adobe.com/wiki/display/ flexunit/FlexUnit FlashBuilder supports the creation of both FlexUnit 1 and FlexUnit 4 code. After selecting the appropriate package, A FlexUnit test case is an individual method that executes a class name, and other parameters, you can select a specific portion of an application and asserts that the results received class to test, in this case Foo. The next step allows you to were the expected results. Test cases are grouped into a select individual methods to test. TestCase class. TestCase classes are grouped into a TestSuite FlexUnit tests can be run from the menu Run -> Run -> class, allowing groups of test to be organized and run as FlexUnit Tests. separate suites. An individual TestCase class could be added to multiple TestSuites. Try Flash Builder 4: www.adobe.com/go/try_flashbuilder

ABOUT THE AUTHOR RECOMMENDED BOOK Eric Daugherty is a Senior Architect at Gorilla Flex 4 in Action is an easy-to-follow, hands-on Flex Logic, Inc. (www.gorillalogic.com) where he develops 4 tutorial. Revised and updated from the previous enterprise applications using Flex and Java. He edition on Flex 3, this book is chock-full of examples, enjoys solving problems and is passionate about goes beyond feature coverage, and helps readers learning new technologies and tools. You can read put Flex to work in real day-to-day tasks. about his open source projects and blog at: BUY NOW http://www.ericdaugherty.com/blog/ books.dzone.com/books/flex4

#82

CONTENTS INCLUDE:

■ Browse our collection of over 100 Free Cheat Sheets About Cloud Computing ■ Usage Scenarios Getting Started with dz.com ■ Underlying Concepts ■ Cost ... ® efcar ■ #64 Data Tier Technologies . Cloud Computing omply brought■ Platform to you Management by and more... e. . Collaborat

isit r isit AldonChange By Daniel Rubio V

dz! also minimizes the needCONTENTS to make designINCLUDE: changes to support ABOUT CLOUD COMPUTING one time events. ■ HTML dz.com ■ Upcoming Refcardz HTML vs XHTML Web applications have always been deployed on servers Automated growth & scalable technologies ■ Validation connected to what is now deemed the ‘cloud’. Having the capability■ to support one time events, cloud efcar

e Refcar Useful Open Sour computing platforms also facilitate the gradual growth curves ■ Page Structur #84 However, the demands and technology used on such servers ce T faced by web applications.■ ools isit r Key Structural Elementse Elements and mor E: has changed substantiallyBy Paul in recent M. years, Duvall especially with V

tegration the entrance of service providers like Amazon, Google and Large scale growth scenarios involving specialized equipment Continuous Integration: CONTENTS INCLUD Microsoft. (e.g. load balancers and clusters) are all but abstractede... away by Patterns and Anti-Patternse changes dz! Network Security ■ About Continuouse at EveryIn Change atterns orkspace to isolat relying on a cloud computing platform’s technology. Cor ■ Build Softwar Description e in a Private W epository HTML BASICS These companies have long deployedntrol r web applications

■ Patterns and Anti-pol Develop softwar rging and to manage dz.com n that adapt and scale to large user bases, making them In addition, several cloud computing platforms support data e Patter fi les to a version-co ■ HTML Version Contr HTML and XHTML ar more... orkspaceknowledgeableCommit allin manyline aspects to minimize r meelated to cloud computing. tier technologies that exceed the precedent set by Relational ■ Build Management Private W hat utilizes multiple e Refcar HTML is used as the graphical user interface in client-side

Develop on a main Database Systems (RDBMS): Map Reduce,e the foundationweb service of APIs,all web development. efcar ■ Build Practices and Repository active code lines e within a system t ts of work pr TION This Refcard will introducear to you to cloud computing, with an etc. Some platformsograms support written lar gein JavaScript.scale RDBMS Server deployments. The sr By Hadoop e Mainline Developing softw by task-oriented uni and Java also r c attribute describes wher Andy Harris war Get Mor emphasis on these providers, so you can better codelines and the alt attribute describes alternate text that is displayed if

ask Level Commit isit r isit ce code changes ol as the output mechanism.eceive data The fr emer what it is a cloudganize computing sour es as aplatform T can offer your web the image is unavailable.

V ocess of building soft Codeline Policy Or ce without likewise use HTML and XHTML as their visual-side engine. languages HTML like PHP e the image Get Mor om web pages and use HTML s version contr applications.it and submit chang h unique name e from sour CLOUD COMPUTING PLATFORMS AND ABOUT CONTINUOUS INTEGRAoject’ was once a very loosely-defi Nested tags file can be found,

tion (CI) is the pr e.com Task-Level Comm Label the build wit ies to build softwar re minimum UNDERLYING CONCEPTS

dz! dz! oblem ging Ajax technologies T standar ags can be (and fr committed to a pr USAGE SCENARIOSAutomate all gurationactivit pendencies to the ba dization, but as it has become mor Continuous Integra Label Build manual confi same deployment need for standar ned language with very little cannot overlap, so zon onment , a solution to a pr e-installed tool de equently ar UML target envir Amazon EC2: Industry standard software and virtualization b> with every change. Automated Build Reduce pr whether you chooseds tohas write become HTML mor or XHTML, understanding e) nested inside each other patterns (i.e. ns (i.e., ineffectiver problem) .d deployment, use the is fi epository Pay onlyncies what you consumeAR or EAR) in each Amazon’s cloudthe curr computing platform is heavily based on ne. r For each tagged e important, the

x” the particulae solutions thatuce Web application deployment until a few years agoonment was similar ent standar e appar is not legal, but e Refcar e xt) and anti-patter Minimal Depende package (e.g. W dent libraries get envir industry standarthat willd simplifysoftwar alle and your virtualization other web coding. technology Fortunately. HTML s ar ent. Regar HTML VS XHTML . T CI can be explained via s used to “fi t can fi le that all tar ds will help you pr ags Binaryto Integrity most phone services:Centralize plans all depen withte alloted resources, with an and XHTML ar

Get Mor Get appear to befects. benefi They aresults when compar The various resources consumed by web applicationsly, continually (e.g. Every page (HTML or XHTML shar Perform a Private velopment team individual operating system sinstances. Browser manufactur

adverse ef egration Staged Builds Repository tion Build periodical common.) All ar

bandwidth, memory, CPU) are tallied on a per-unit basis oduce unintended r om CI server to de web developers came up with clever workar pr Private Build Perform an Integra edback fr extension. HTML e essentially plain text ers added many competing estandar than anybody term Continuous RefcarInt d (starting from zero) by all major cloud computingy occur platforms. As a user of Amazon’s EC2 cloud computinges certain platform, elements you inare result is a lack of standar the pattern. tion pr ch as Send automated fe ith builds based on assignedocessor an operating systemfiles should in the not same be cr way as on all hosting The latest web standar nal use of thend test” cycle, this Integration Build ors as soon as the er documentation w e.com

Continuous Integra clude concepts su While the conventioefers to the “build a Generate develop notion of CI to in expands on the DZone, Inc. ISBN-13: 978-1-934238-71-4 Cloud Computing 140 Preston Executive Dr. ISBN-10: 1-934238-71-6 Suite 100 50795 Cary, NC 27513 DZone communities deliver over 6 million pages each month to 888.678.0399 more than 3.3 million software developers, architects and decision 919.678.0300 makers. DZone offers something for everyone, including news, Refcardz Feedback Welcome [email protected] tutorials, cheatsheets, blogs, feature articles, source code and more. 9 781934 238714 $7.95 Sponsorship Opportunities “DZone is a developer’s dream,” says PC Magazine. [email protected] Copyright © 2010 DZone, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, Version 1.0 photocopying, or otherwise, without prior written permission of the publisher.