Dr. Dobb's Journal - August 2008 - (Page 41)

Builder 3 provides code editing with full code-assist and documentation for both ActionScript 3.0 and MXML, the two languages used to create classes in Flex. ActionScript 3.0 is an ECMA language designed for developers accustomed to Java, C#, JavaScript, or C. It uses semicolons at the end of lines and curly braces for blocks. In a Flex RIA, ActionScript 3.0 is used primarily to model application entities and behavior. MXML, on the other hand, provides a simple tag-based language for declaratively creating classes. It is a flavor of XML, and is primarily used to define user interfaces. To handle events and behavior, it can contain embedded ActionScript 3.0 code. In addition to its code editor, Flex Builder 3 provides a full-featured visual editor for MXML interfaces. You can drag-and-drop controls from tool palettes into desired locations within the interface. Once you place the controls, you can use toolbars to modify control properties, apply Cascading Style Sheet (CSS) attributes to change their lookand-feel, and even bind controls to data or ActionScript 3.0 classes. Because the visual editor is extensible, you can add and manipulate your own developer-defined controls as if they were native Adobe controls. To examine your application at runtime, Flex Builder 3 provides an interactive debugger built on top of the existing Eclipse debugger framework. This provides a view of breakpoints, variables, and expressions that’s almost identical to ColdFusion or Java debuggers. If you need to examine memory or processor utilization, an interactive profiler is also available. To begin building Task List, install ColdFusion 8, Flex Builder (which includes the Flex SDK), and the CFEclipse Eclipse plug-in for ColdFusion (www.cfeclipse.org). Use the Flex Builder 3 New Project wizard to choose a ColdFusion server deployed within a JBoss environment. When the wizard completes (and if you were creating a Flex project using Java as a back end), you create and edit a number of Flex-specific XML files in the server-side Java application server’s configuration directories. The instant the wizard completes, ColdFusion creates a Flex application that is already connected to a ColdFusion server. The Flex application’s source code and debugging builds are stored in your Eclipse workspace. With a client-side Flex project created, you can now create a client-side model of your single domain object. Right-click the Task List project in the Flex Builder 3 Flex Navigator pane and choose New ActionScript Class to get started. Using the wizard, create a Task class and place it within the com.firemoss.tasks package. When the wizard completes, the actual source-code file is in the project’s src/com/firemoss/tasks directory. (When you download the code accompanying this article, you’ll find the source code for this class in Tasks/src/com/ firemoss/tasks.) Listing One provides ActionScript 3.0 Javadoc-like comment capabilities for automatically generating documentation. Annotations within square braces let metadata be added to the class. Using the ASDoc utility within the Flex SDK, you can produce API documentation for your ActionScript 3.0 classes. In the Task class, annotations are used to add two key metadata items: • A Bindable annotation states that an instance of the class may act as a subject for data binding, meaning that an instance of Task dispatches events when its properties change. • RemoteClass, which states that there is a server-side equivalent to this class, also named com.firemoss.tasks.model.Task. Figure 1: The Task List application. With the model of a Task created, turn to the UI. When the Flex project wizard completes, it creates the Tasks.mxml file to act as the main interface. Because the application is simple, it employs the Autonomous View pattern for its sole UI, embedding within Task.mxml all knowledge of the model, services, and control code. (In larger Flex applications, you should use more scalable architectures, such as Model View Controller.) Inside Tasks.mxml, MXML tags define properties and server connections. In Listing Two, Task instances are stored using classes from the Flex SDK’s Collections API. An ArrayCollection stores a list of all tasks, and a ListCollectionView subscribes to the master collection and defines an automatically updated subset of tasks that are com- plete. Both of these collections are “bindable,” which means they can serve as a subject for observation by other classes and UI controls. When the subject object changes its properties, observers are notified and may update themselves accordingly. This provides a loosely coupled architecture ideal for creating flexible, engaging UIs. Once data is stored in collections, Task List needs to display a list of tasks. It does this in Listing Three with a List component that shows a vertically scrolling list of items. The List instance is bound to the currently selected collection of tasks. As the collection changes, List automatically redraws itself. By default, List shows a label for each of its items. However, Task List needs to show both the label and a CheckBox to enable user interaction. Any of Flex’s list-based controls can employ a custom item renderer, which is typically an MXML-based class that defines a UI for each item. In Task List, I use a custom renderer that displays a CheckBox and the task’s name. Below the list of tasks, the application must display a form to let users enter new tasks; see Figure 2. MXML includes a rich set of form controls. By combining tags like August 2008 l www.ddj.com l Dr. Dobb’s Journal 41 http://www.cfeclipse.org http://www.ddj.com

Table of Contents Feed for the Digital Edition of Dr. Dobb's Journal - August 2008

Dr. Dobb's Journal - August 2008 Contents Friday Night Fish Fry Alia Vox Developer Diaries Developer’s Notebook A Conversation with Christos Papadimitriou OpenGL and Mobile Devices: Round 2 Ellipse Specification Using Vectors Embed Custom GUIs in WPF Building RIAs on J2EE Foundations Disentangling Concepts in Object-Oriented Systems The Agile Edge Effective Concurrency Swaine’s Flames

Dr. Dobb's Journal - August 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.