Flex

Vinereader is an innovative newsreader application that creatively displays today's latest news in any subject. I built the application using the Adobe Flex development framework, and it served as a useful focus of mine as I was learning the technology over the past several months.

Given its robustness and seamless cross-platform capabilities, Flex has proven to be well suited for developing a rich internet application such as Vinereader, especially considering the dynamic and data-driven nature of the user interface.

The data presented in Vinereader is obtained from Newsvine, which is an exciting source of news with a mixture of community-driven content and news wire stories. Newsvine makes its structured news data available through RSS feeds available to the public, and Vinereader consumes this data strictly in a non-commercial manner.

As of today, Vinereader is available for anyone to use by clicking this Vinereader link. I hope you find it as enjoyable as I do to see the interesting stories that appear on the screen throughout the day.

When you want to rotate an object in Flex, it seems like it would be simple enough to use the "rotation" property of the DisplayObject class to set the number of degrees to rotate the object.

However, when you adjust this value, it assumes that the center point of the rotation is x=0 and y=0, and I have not been able to find a way to specify a different center point (also called a registration point) about which to perform the rotation.

Although there may be a better solution out there, the workaround I have employed involves using the Rotate class. The Rotate class in the "mx.effects" package allows you to create a motion tween for rotating an object over a specified time duration.

The benefit of the Rotate class is that it allows you to specify a center point for the rotation by setting the "originX" and "originY" values. All you have to do is set the duration of the effect to 1 millisecond before invoking the tween, and when played, the object instantaneously rotates about any center point you desire.

There is a Flash Users Group that conducts all of its meetings online once per month. The meetings are recorded so that you can watch the presentation later. The group has not actually met as frequently as monthly, but the following recorded meetings provided some high-level introductions to Flex:

• Flex Data Binding and Events - This presentation illustrated methods for binding data between components using the BindingUtils class and the bindProperty method.
• Flex Containers and Event Bubbling - Part 1 discussed the basics of containers and the presentation aspects of them. Part 2 illustrated the difference between the capture, target and bubble phases of events.
• Object Oriented Programming in Flex - This presentation illustrates the construction of a custom list box control using custom components, custom events and click handlers.
• Simple Singletons in Flex - Singletons are classes that have only one instance in the entire application. The Singleton class illustrated in the presentation extended the UIComponent class so that events could be dispatched from the Singleton.

Since my original post on the subject, there are 2 additional tutorials for handling data in the Flex Quick Starts area of the Adobe Flex Development Center.

• Accessing XML data: ActionScript 3.0 used in Flex 2 leverages the ECMAScript for XML (E4X) specification to make available improved functionality for working with XML data. Because XML is a native data type in Flex, you write XML and assigning it to a variable. The tutorial explains how to access data values and assign data values with XML by using dot notation. Another example illustrates how to assemble and transform XML objects using the prependChild, appendChild, insertChildBefore, and insertChildAfter methods. (There was also a note about a known issue in Flex: when deleting an item from the data provider of a list control, the selectedIndex value is set to an incorrect value.) Another example illustrated various ways to query XML data right within ActionScript.
• Loading external data with HTTPService: This tutorial provides an example of using the HTTPService to obtain external data via HTTP calls. Data can be obtained from other domains, but they have to employ the proper use of a crossdomain.xml file. In this particular example, the resultFormat was set to "e4x", and the namespace was set to the atom namespace.

Eylon put together a cool example of Flex's skinning capabilities, illustrating why there's no reason to rely just on the default look and feel when publishing a Flex application. Eylon's napkin skin example is presented in 3 stages (1 | 2 | 3) that explain the various skinning techniques employed. I found this information from Sho Kuwamoto's blog posting.

Since my original post on the subject, there is an additional tutorial for building an advanced user interface with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

• Working with Tree controls: Regarding the choice of data provider for a Tree control, if you have well formed XML and plan on manipulating the data as XML, you should use an XMLListCollection object as the data provider; if you have object data that changes dynamically, you should use an ArrayCollection object as the data provider. In either case, you should always use collection objects (XMLListCollection instead of XMLList and ArrayCollection instead of Array). Examples are provided in this tutorial to explain how to a) add / remove leaf nodes and branch nodes at run time, b) open the tree to a specific node, c) read an XML document with multiple node names, d) keep a Tree control expanded when its data provider is updated with new data, and e) dragging and dropping to and from a Tree control.

Lynda.com offers some great training videos on Flex (subscription required) and many other subjects. The step-by-step instruction in the following two videos was very helpful in getting up to speed on Flex technology: Flex 2 Essential Training and Flex 2 Beyond the Basics.

Ted Patrick created a community-driven repository of ActionScript and MXML code called "Just MXML and AS3". His blog posting announcing the forum can be found here. I learned about this forum from Brian Riely's blog posting.

There's a post on Josh Buhler's blog about a great presentation called "Tips and Tricks for Delivering More Responsive Flex Applications" by David George of Adobe. Here are my notes from the session:

Regarding object creation, it's best to delay the creation of objects until they become visible. And, you can stagger the creation of objects to improve the perceived startup time. You can set the creationPolicy property to "queued" in order to have the contents of a container initialize over time. Be careful when using the Repeater and avoid when possible (here's how).

Regarding measurement & layout, there are costly computations involved when the Flash player has to draw the screen, which involves a Measurement Phase (traversing tree from the bottom up) and a Layout Phase (traversing the tree from the top down).

You should reduce container nesting by using HBox and VBox instead of Grid. Avoid nesting a VBox inside a Panel or Application because those containers already know how to do that. You should keep in mind that the root of an MXML component doesn't necessarily need to be a container. When you use a canvas container with constraints, it typically means a flatter and faster application. Be on the lookout for containers with only a single child.

Avoid redundant redraws by being careful not to have child object changes trigger parent redraw each time. You should delay data requests until creationComplete fires so that user is at least looking at an initialized application instead of a progress bar. Limit the geometry changes when a response arrive, and you can also stagger data requests and queue responses

If an object's properties are changed, it's bounding box is a redraw region, and all objects inside the bounding box will have to be redrawn. You can use the debug player to visualize redraws by using the "show redraw region" setting. Objects that overlap the redraw region are redrawn.

You can use the cacheAsBitmap property so that complex vector graphics is rendered into an offscreen bitmap. But, you need to be careful, especially when an object is resized often because the cache has to be stored as well. The cacheAsBitmap technique is especially useful when an alert box is going to be shown (and then when it's done being displayed). "Blitting" is the process of moving something from cache back into the object.

You can use Resize.hideChildren to hide children during state transition. "As you're animating, simplify." Avoid the mixture of device text and vector graphics (interweaved together). Place device text on top of the vector graphics (instead of interweaved in a z-order). If an effect is not rendering well, you can use Effect.suspendBackgroundProcessing to cause the effect to play first.

In order to reduce memory usage, discard unused objects by using removeChild. Remove event listeners or use weak references when calling addEventListener. You should reduce the amount of data hanging around by clearing references to unused data by setting properies to null or undefined. The memory profiling tools in the debugger are helpful to use.

When there are a large number of UI screens, load screens on an as-needed basis by loading subordinate SWFs using . You can use a runtime shared library (RSL) so that each subordinate SWF does not need to have the application model or redundant class information. More information about RSLs is available in on the Adobe site. More information about modular applications is available on Roger Gonzalez's blog (here and here). When there are large amounts of data being used in an application, implement a paging scheme.

When setting styles, changing a rule set is very expensive (i.e. setting all buttons to red) and should be avoided. The only time the setStyle() method is cheap is during object creation (before being attached to the display list). If a style needs to change at runtime, initialize it at authoring time to something so that there's a slot available for the data to be stored in. In order to change styles using inline code, you should set the property in the MXML instead of using the setStyle() method.

There is a 4-part overview for handling data with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Defining data models: Data models are defined and used in Flex applications to store application-specific data in a structured format. You can define data models in an MXML tag, ActionScript function or an ActionScript class. An example was provided that illustrated the use of a Transfer Object (aka Value Object), which contains just the data required to interact with a piece of business logic.
2. Using data binding: You can tie data between one object and another with binding. Data binding can be achieved by using curly braces syntax, using ActionScript expressions in curly braces, using the tag in MXML, or using bindings in ActionScript.
3. Validating data: Flex has built-in mechanisms you can use to validate data entered by users. Validation logic can be implemented using MXML and/or ActionScript.
4. Formatting data: Flex formatters are components that give you the ability to format currency, dates, numbers, phone numbers and ZIP codes.

There is a 4-part overview for building custom components with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Building components in MXML: Custom components defined as separate MXML files that are saved in a folder structure in the project. The root tag of the custom component identifies the control that is being extended, just as would be done using ActionScript. Components that contain multiple component definitions are called composite MXML components. If you want to extend the functionality of a composite component, you need to create a custom component that uses the composite component as its root tag. You can create reusable loosely coupled components by defining implicit accessors (setter and getter methods) in order to pass information back and forth. It is helpful to use the [Inspectable] metadata tag to indicate that the property should appear in the code hints of Flex Builder. It is considered a best practice to return information from a component back to the main application through the dispatching of events.
2. Building components in ActionScript: Custom components can be coded in ActionScript and stored in a folder structure just like custom components for MXML files. You can use the setStyle() method in the constructor of the custom component in order to override the default settings of the component superclass.
3. Building components using code behind: In practice you will use a combination of MXML and ActionScript to build Flex components; MXML is useful for layout of controls, and ActionScript is useful for defining the logic. With the release of Flex 2 comes a new technique for coupling the two together: code behind. You make this work by creating an MXML component and make its root tag correspond to an ActionScript class. In order for this to work, child controls must be declared as public properties in the ActionScript class. There is a thorough example provided using a best practices architecture that conforms to the Arp framework.
4. Deploying components: You can deploy components as SWC files or as part of a Runtime Shared Library (RSL) for convenience, runtime efficiency and security purposes. In order to use SWC files when building a Flex application, you specify the SWC file on the Library path tab of the Flex Build Path in the Properties window of your project in Flex Builder.

There is a 6-part overview for building an advanced user interface with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Using the Repeater component: You can use the Repeater component to emulate loops by executing multiple times instructions for creating components or containers that associate to the number of items in an array. One important thing to remember is that the Repeater component instantiates all objects that are repeated, whereas the HorizontalList, TileList and List controls only instantiate objects visible in the list, so there are performance considerations here.
2. Skinning your components: You can skin components in various status either graphically or programmatically using either inline code, using the setStyle() method or using CSS.
3. Using item renderers: There are several controls derived from the ListBase class that you can use to represent lists of items: DataGrid, HorizontalList, List, Menu, TileList and Tree. Drop-in item renderers allow you to customize the display of items using components that implement the IDropInListItemRenderer interface. You can exert more control over the rendering by defining in-line item renderers, either in a separate area of the application code using the Component tag or in their own MXML files as custom components.
4. Creating item editors: You can use item editors to let users modify the value of a cell in list controls such as the DataGrid, List and Tree. You use drop-in item editors just like you do drop-in item renderers.
5. Using data providers: You can use the ArrayCollection mechanism to robustly bind object data to list-based controls. If a control needs to handle different types of collections (i.e. ArrayCollection and XMLListCollection, then you should bind the data provider to a type ICollectionView. There was an example illustrating the use of an HTTPService that stores XML data into an ArrayCollection. Another example illustrated modifying data in data providers and listening for events.
6. Adding drag-and-drop support: There are several components with drag-and-drop capability in Flex: DataGrid, HorizontalList, List, Menu, PrintDataGrid, TileList and Tree. You can also create custom drag-and-drop behaviors with components.

Sho Kuwamoto put together a nice 3-part discussion on Flex MXML tags and how they map to ActionScript so that you know the implications of implementing various MXML code directives. Part 1 - Part 2 - Part 3.

There is an 8-part overview for building a simiple user interface with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Using controls: Examples of using Text controls (Label, Text, TextArea, TextInput and RichTextEditor), Button controls (Button, LinkButton, CheckBox, RadioButton and PopupButton) and List controls (ComboBox, List, HorizontalList, DataGrid, Tile, Menu, and Tree).
2. Using containers: Examples of Layout containers (Panel, HDividedBox, VDividedBox, Tile, Form, ApplicationControlBar and ControlBar) and Navigation containers (Accordion, TabNavigator and ViewStack). The Spacer control was also discussed. In order to use the ViewStack container, you must also use a LinkBar, TabBar, ButtonBar or ToggleButtonBar control.
3. Styling your components: Using local style definitions, external style sheets, inline styles and the setStyle() method (which is computationally expensive and should be avoided when possible).
4. Adding effects: Example of defining effects and binding them to triggers.
5. Creating states: Example of multiple view states that correspond to different application conditions.
6. Defining state transitions: Example of using transitions when a view state change occurs, either in parallel or in sequence.
7. Using tooltips: Example of using ToolTips to provide helpful information to users.
8. Controlling the cursor: Example of controlling the (standard or custom) cursor image.

There is a 5-part overview of getting started with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

1. Coding with MXML and ActionScript: MXML gets compiled into ActionScript classes, so you can use MXML or write the equivalent code in ActionScript directly -- examples of both methods are shown.
2. Creating your first application: Basic structure of an application.
3. Handling events: There are three ways to receive event notifications:
   • Registering an event handler in MXML
   • Creating an inline event handler in the MXML definition (not recommended)
   • Registering an event listener through ActionScript
4. Positioning and laying out Flex components: There are three ways to position components in a Flex application:
   • Automatic positioning
   • Absolute positioning
   • Constraint-based layout, which allows you to anchor the edge of a component, stretch a component, or anchor the center of a component.
5. Embedding application assets: Examples provided of embedding images, stretching images with scale-9, using CSS for skinning, embedding SWFs (and their library assets), and embedding sounds and fonts.