Presentation

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.

Another Adobe Developer Week presentation that I viewed is called Building Flex Apps With Flex Builder by Ted Patrick. This presentation provided a useful example of building an application in Flex Builder and covered the following items:

• VBox and HBox containers automatically position controls within them. The Canvass container holds controls as well, but you specify the positioning (aided by automatic guides and snapping).
• Creation of an MXML component (project code | component code)
• Creation of a new ActionScript class (project code | class code)
• Illustration of the robust debugging capabilities
• Use of the [Bindable] directive to make data in a variable bindable to controls
• Deployment of the application in the bin folder along with "View Source" capability.
• You can specify a minimum size for the application by making the appropriate selections in the Flex project settings dialog box.

There are many presentations made available online from Adobe Developer Week. The first presentation I viewed was an Introduction to Developing with Flex by James Ward, which started with product overview slides from Adobe which describe the evolution of Rich Internet Applications over time.

The presentation then got into describing the Flex product offering and an overview of the technical architecture. And, there were several example applications displayed to illustrate the power of Flex.

One sample illustrated the basics of the code and the programming model. This sample application showed how quickly you can create a Flex application which reads data from an XML file via an HTTPService and then presents the data, including images (of cell phones) in a TileList using transitions between application states. The code is available in this screen shot.

This introductory presentation by Ted Patrick provided a basic overview of building a simple application in Flex Builder. It was interesting to learn about Layout Constraints, which position the main Flash content in the desired position within the browser window regardless of the window size.