This page describes my Flex demo apps. These apps explore both general RIA design and Flex 3 capabilities. Some demo apps have View Source enabled so if you see something interesting you can check out the code.

Note: Flex apps require the Flash player (so they will NOT run on mobile devices)

To launch a demo app just click on its name or its image. Demo apps will open in a new window/tab.

World Data Explorer (dev version)

The World Data Explorer demo app lets you explore CIA world factbook data in a variety of viewers - tabular views, interactive maps, graphical views such as column charts and bubble charts, etc. Of course, the purpose of this demo app isn't really to explore world data, it's to explore Flex capabilities.

The Data Explorer demo app is focused on:

• synchronized data views — all viewers immediately reflect Model state changes (thru events/data binding, all very loosely coupled, the Model defines no direct dependancies on the View)
• graphical presentation of data (i.e., charting) — so far I've only used Adobe's own data visualization components but on my TODO list is to explore IBM's iLog, the open source Axiis components, etc.
• display list manipulation — needed because the user can create many data viewers and then, to make things more interesting, the user can also switch between 3 different viewer managers
• drag and drop — used in the 2x2 Matrix viewerManager, you can drag a viewer from one cell to another's to swap their positions

In addition, this demo app continues earlier explorations:

• loose-coupling and MVC architecture as it applies to an RIA. The current version is my own MVC implementation but one of my TODOs is a rewrite using a framework like PureMVC or Parsely.
• the use of AMF (here just using AMFPHP)
• use of strongly typed data transfer objects (DTOs, aka VOs) to simplify data transfer

NOTE: Source View is enabled but keep in mind that Data Explorer is just a Flex exploration, it's not production quality code.

Flex3 Tips and Traps (FTT)

FTT surfaces a searchable db of Flex3/AS3 'tips and traps' — an informal repository of tips on best practices, efficient coding techniques, known bugs and workarounds. It employs many MVC principles, including aspects of both PureMVC and Cairngorm. Below is a summary of what FTT explores, for detailed info use the "About" option from within the application.

Summary of what FTT explores/demonstrates:

• maintaining state on the client using a Singleton data model (so, the Cairngorm way). Model is loosely coupled (i.e., uses Flex events to eliminate direct dependancies on the View).
• In some classes I play with segregating layout and logic using Code Behind
• the app delivers basic CRUD functionality to a MySQL datastore through PHP over HTTP (not using a binary protocol here, but see my demo app FTT Data Browser for a version that employs AMFPHP).
• many of its custom classes (both MXML and AS) make use of UIC lifecyle (i.e., overrride methods like commitProperties, updateDisplayList, etc.)
• Use of ItemRenderers/ItemEditors - FTT employs drop-ins, inlines, and custom renderers/editors, with emphasis on use in a DataGrid
• Use of Flex's wide variety of components (especially DataGrid and Tree) and dynamic layout to gracefully handle browser resizing
• XML, especially use of e4x, including the dynamic generation of a hierarchical XMLCollection from a linear ArrayCollection (this derived data drives the tree view).
• Other... Deep Linking, heavy use of CSS including dynamic load/unload of style SWFs, use of effects/animation/behaviors for some events, use of user-selectable sound assets, some TextArea controls' employ enhanced htmlText features using the styleSheet property, much more...

FTT Data Browser

FTT Data Browser (FTTDB) surfaces the Flex "Tips and Traps" data that I maintain through my FTT demo app. These data are an informal repository of tips on best practices, efficient coding techniques, known bugs and workarounds.

FTTDB is largely composed of classes created for my FTT demo app. My main goal here is to demonstrate code reuse and to validate the FTT demo app's MVC design. Apparently FTT's design wasn't a total mess since FTTDB's code reuse and data access mods were straightforward.

A major change from FTT is the data access method: while FTT's Tip VOs are populated through HTTPRequest/REST/XML, FTTDB employs RemoteObject/AMFPHP for binary transfer of strongly-typed data. And FTTDB makes greater use of the mid-tier, making RPC's to PHP classes which themselves fire the SQL into MySQL. This SQL generates summarizations/groupings and simple statistics (though wish I had SAS for this backend data manipulation, then I'd really be able to offer up some interesting data analysis...).

For more info on architecture see the online Help within both FTTDB and FTT.

Flex Explorations (FlexEx)

This demo app has some of my earliest exlorations of Flex functionality. Like FTT, the FlexEx demo app explores RIA implementation of some classic application functionality (e.g., drag and drop). However, it also explores more web-centric features (e.g., RSS feeds) and some of the more playful aspects of Flex (e.g., effects and animation).

Flex Data Presentation

When presenting data in Flex list-based controls you have enormous control over data presentation though custom renderers and editors. This demo app illustrates some of what can be done with renderers/editors in various list-based classes including List, TileList, Tree, ComboBox, and DataGrid.