Data presentation with Macromedia Flex: break free of the limits of HTML
Matt Woodward
Last month I introduced you to the wonderful world of building Rich Internet Applications with Macromedia Flex (“Flex Your ColdFusion Muscles,” CFDJ, Vol. 6, issue 12) and discussed some of the distinct advantages RIAs have over traditional HTML applications.
This month I’d like to go a bit deeper and discuss how Flex can give users a much better experience through its powerful interactive data presentation capabilities. Data presentation isn’t always given a great deal of attention because we’ve become accustomed to doing things “the HTML way” and assume that’s our only option. The reality is that Flex opens up exciting new possibilities for data presentation that are definitely worth a look.
Flex includes a vast range of building blocks that can be leveraged to solve even the most demanding data presentation problems. At a high level, Flex’s UI toolkit consists of two basic elements: containers and components (some of which are also referred to as controls). Containers are used to create the layout and navigation of the application. Components include simple elements such as buttons as well as more complex elements such as data grids, date choosers, and charts. Let’s take a moment to look at containers and components in a bit more detail, then we’ll see how these elements are used with one another to solve three different data presentation challenges.
Containers
If you have a background in traditional desktop application development with technologies like Visual Basic, or if you’ve done something along the lines of Java Swing development, Flex containers will seem very familiar to you. If you have a more traditional Web development/design background you may not have had exposure to containers, but not to worry; containers are easy to understand and even easier to use.
In simple terms, containers are rectangular layout elements that contain other UI elements, hence the name “container.” Containers have a great deal of built-in functionality and default behaviors to control aspects of the UI such as element positioning, layout, and resizing. You simply place elements within the container–these become the container’s children–and Flex’s layout manager monitors things behind the scenes, applying layout rules and behaviors as users interact with the application. Containers can even be nested within each other as needed to create more complex layouts.
The two types of containers available in Flex are layout containers and navigator containers. I won’t address them all here, but some of the layout containers available in Flex are as follows:
* Application: Top-level container that contains the Flex application.
* Canvas: Elements within the canvas container are positioned using specific x,y coordinates. The Canvas’ children are not governed by layout manager rules for positioning and resizing.
* HBox and VBox: Containers that display children horizontally or vertically respectively.
* HDividedBox and VDividedBox: Containers that display children either horizontally or vertically respectively, but also include a bar between each child so the width and height of each child may be adjusted by the user (similar to HTML frames).
* Form: Container used to automatically control the layout of form input elements. By default the form elements are left-aligned and arranged vertically. The form container also controls the size and spacing of the form elements.
* Tile: Container that arranges its children in a grid format either horizontally or vertically (direction is an attribute of the tile tag). Each cell within the grid is uniform in size and the number of total cells is calculated by the layout manager based on the number of children within the tile container.
* Grid: Similar to the tile container but the number of columns and rows may be specified, as opposed to being controlled by the layout manager. The grid container is very similar to an HTML table, complete with row and column span capabilities. Unlike the tile container, rows and columns may have varying widths and heights rather than each cell being identical in size.
For additional information on the types of layout containers available in Flex, please visit Macromedia’s Flex documentation site at www.macromedia.com/support/documentation/en/flex/.
Navigator containers serve a more specific purpose than the basic layout containers and allow for the creation of extremely rich UIs. The basic concept behind navigator containers is that they are used to contain related groups of elements of which only one is displayed at any given time, and a control of some sort allows for selection of the various elements within the group. Element selection may also be accomplished programmatically using ActionScript.
The navigator containers in Flex are as follows:
* TabNavigator: A horizontal tabbed interface that is visually similar to file folders. Each tab contains title text and users simply click on the various tabs to navigate between elements in the group.
* MenuBar: A menu bar similar to that found in desktop applications. Can contain nested fly-out menus.
* Accordion: A collection of vertically-stacked panels, each with a clickable title bar that expands that particular section of the accordion interface. Often used for multistep forms.
* ViewStack: A collection of separate independent “screens” or views within the application. The ViewStack does not have built-in means of switching between views, so developers are free to use ActionScript to display different views or provide some type of menu to allow users to switch between views.
* LinkBar: A simple horizontal box containing links with a horizontal divider separating each link. The LinkBar contains a built-in control for the ViewStack navigator so it is often used to control a ViewStack.
* TabBar: A horizontal collection of tabs, but unlike the TabNavigator, the TabBar does not have built-in content areas. As with the LinkBar, the TabBar has a built-in control for the ViewStack navigator.
As you might imagine, using these containers in conjunction with one another offers developers the ability to create incredibly rich, user-friendly UIs that can handle even the most complex data presentation challenges.
Components
Components are the low-level building blocks of Flex applications and are part of what is placed inside Flex containers. As with containers, Flex provides an extremely broad, rich set of components from simple controls such as the Button, Link, ComboBox, and TextInput to more complex, full-featured components such as the DateChooser, DataGrid, or one of the numerous charting and graphing components that are new to Flex 1.5. As you’ll see in a moment, when you start filling containers with Flex components the data presentation possibilities become extremely powerful.
Flex contains far too many components to list here, but following are some of the more commonly used components:
* Form Input Controls: Familiar form elements such as the TextInput, TextArea, Checkbox, and RadioButton are all available in Flex. Flex also adds form elements such as the NumericStepper, DateChooser, and DateField that are not available in HTML.
* List: Similar to an HTML select that allows multiple selections, but graphically richer and allows for data binding, runtime editing of options within the list, and the ability to include images within the List.
* ComboBox: A single-select version of the list component.
* HorizontalList: Displays a horizontal list of items with a scrollbar as needed; often used in conjunction with a custom cell renderer to display images in combination with other data.
* TileList: Similar to the HorizontalList, but displays elements in columns and rows of cells that are uniform in size.
* Tree: Provides a means of displaying hierarchical data in the form of an expandable tree.
* DateChooser: Graphical calendar control that allows for navigation across months and years as well as the selection of a single date.
* DateField: Text field that displays a date and also has a calendar icon to the right of the text field. Clicking the calendar icon launches a DateChooser, and selection of a date from the DateChooser populates the text field with the selected date.
* DataGrid: An extremely rich component for presenting rows and columns of data. The Flex DataGrid has built-in functionality for sorting, highlighting, column resizing, cell editing, multiple selection modes, data paging, and with Flex 1.5 the DataGrid allows for variable row height, word wrap, and custom cell renderers for the inclusion of images and other components within the DataGrid cells.
* Charting Components: New to version 1.5, the types of charts available in Flex are the AreaChart, BarChart, BubbleChart, ColumnChart, LineChart, PieChart, and PlotChart, all of which allow for dynamic data drill-down and animated transitions.
Believe it or not, the possibilities don’t end there! Many of these components (such as the DataGrid) also support drag-and-drop behavior and other advanced functionality that allows for the creation of extremely intuitive, rich UIs that users simply aren’t used to seeing in their Web browsers.
Now that you know some of what’s available in Flex, let’s get down to business and start combining containers and components to show off Flex’s data presentation capabilities.
Data Presentation Challenge #1: Multi step Data Entry Forms
I’m sure we’ve all had the frustrating experience of completing lengthy, multistep forms in Web applications, and building these types of forms in HTML isn’t any more fun than using them. By combining the navigator containers and form elements in Flex, however, even the most complex forms become simple, clear, and almost fun to complete. (OK, completing a mortgage application is no one’s idea of fun, but at least with Flex it’ll look nice and be easy to use!)
Reviewing the navigator containers discussed previously, the two obvious choices for creating multistep forms are the TabNavigator and the accordion. Both choices work quite well, but for the purposes of this example we’re going to take a look at the accordion navigator and how it can be used to present a typical job application form (see Figure 1).
[FIGURE 1 OMITTED]
By including all of the form steps within a single accordion navigator we are able to present a great deal of information in a limited amount of space, and we also remove the jarring page-refresh model of multistep HTML forms, something which causes many users to abandon form completion altogether. We can also use the accordion title bars to clearly label each step with a description and number so users know exactly where they are in the process.
This example also serves as an excellent illustration of the form container and some of Flex’s form controls. A discussion of data validation is beyond the scope of this article, but as you can see in Listing 1 (can be downloaded from sys-con/coldfusion/ sourcec.cfm), form elements can easily be flagged as required and Flex takes care of the visual indication to the user. Flex also includes advanced data validation for input such as e-mail addresses, credit card numbers, dates, phone numbers, and zip codes so the forms don’t just look great, they’re highly functional as well.
This is a relatively simple example (I left the forms beyond the first step for you to complete!), but it illustrates the vast improvement Flex offers for presenting complex forms and collecting data in a more user-friendly way. When the improved visual and data entry experience is combined with Flex’s powerful validation capabilities and features (such as data binding which allows for cross-field relationships, auto-completion, and more), Flex is clearly adept at handling forms.
Data Presentation Challenge #2: Charting and Graphing
As ColdFusion users we’ve bragged for quite some time about ColdFusion’s built-in charting and graphing capabilities, but as the saying goes, “you ain’t seen nothing yet.” One of the most requested enhancement features after the release of Flex 1.0 was for the addition of charting components. True to form Macromedia has created a solution that is as visually stunning as it is functional.
Using charts for data presentation is a topic that could fill an entire article on its own, so I’ll take just a moment to at least introduce you to what’s possible with Flex’s new charting and graphing components (see Listing 2 at sys-con/coldfusion/ sourcec.cfm). For simplicity’s sake this example will use hard-coded data, but of course in a real-world application your data would likely be coming from a database or some other dynamic data source.
This is a nice-looking column chart and the mouse-over tool tips are definitely slick (see Figure 2). While it’s true that beauty is only skin deep, Flex charts have both style and substance. I’m sure you’ve had as many requests as I have from users who want to be able to drill down into data and view it in different ways. With a few lines of code we can enable this functionality in Flex, and with a simple click on one of the bars in the chart, users can see a detailed view of that particular segment of the data.
[FIGURE 2 OMITTED]
Presenting data visually is always extremely compelling, and Flex takes this powerful method of data presentation to the next level by providing a tremendous amount of out-of-the-box functionality so we can not only present data visually to our users, but allow them to interact with it as well (see Figure 3). Charting functionality in Flex is incredibly rich so bear in mind that I am barely scratching the surface with this brief example.
[FIGURE 3 OMITTED]
Data Presentation Challenge #3: Search Applications
For our final data presentation challenge, let’s consider a more complex scenario that combines several of the containers and components we’ve outlined into a single application. Web users have become quite accustomed to the behavior of search applications and the way in which search results are displayed in traditional HTML, but this isn’t necessarily an ideal way to present this type of data. The page-based model is more or less a necessity with HTML, but by using Flex’s DataGrid along with a few other components, not only can we create a search tool that is more intuitive and requires no page reloads as we retrieve and navigate through search results, but we can also allow users to interact with search result data in completely new ways.
When I first started working with Flex I built a relatively simple search tool prototype. While still in its early stages, this single-screen model for searching a knowledge management system will give users a much better experience compared with what is typically a rather complex HTML-based search tool. Best of all, it was surprisingly easy to build with Flex and leveraged existing ColdFusion code to tap into data collections. (Note that in search result images company names have been removed, which is the reason for the gaps in the DataGrid content.)
The use of multiple containers clearly defines the search form, search results, and “My Documents” sections of the UI (see Figure 4). A pop-up window is used to perform more advanced searches, which keeps the screen clutter free. In the search results panel, the DataGrid component allows users to sort on columns, which is possible to build into HTML-based applications but requires a page refresh each time a column is sorted, sing the Flex DataGrid users can also change the widths of the columns as desired, something that simply isn’t possible with HTML. Even performing a new search repopulates the search results grid without requiring a page refresh.
[FIGURE 4 OMITTED]
The use of a custom cell renderer in the View/Download column makes it easy for users to see at a glance what type of document they will be viewing or downloading by clicking on the icon. Also, by using Tool Tips (new in Flex 1.5), a summary of the document can be presented to users when they mouse over the document title. This is an extremely powerful data presentation technique that allows for the maximum number of search results to be displayed in the available vertical space while not sacrificing the user’s ability to read more about the document before download (see Figure 5).
[FIGURE 5 OMITTED]
Through Extremely compelling so far, this little prototype has one last trick up its sleeve. I haven’t addressed the “My Documents” panel in the upper-right corner yet. You may recall my earlier mention of the DataGrid’s built-in drag-and-drop capabilities. By tapping into this powerful feature of Flex, users have the ability to drag documents from the search results grid and drop them into the “My Documents” grid for future use (see Figure 6).
[FIGURE 6 OMITTED]
Because this is a relatively extensive application behind the scenes, I don’t have space to show code for this particular example, but if I’ve inspired you to investigate further (and I hope I have!) you’ll be surprised how easy it is to implement even advanced functionality such as drag-and-drop with Flex.
This is very powerful stuff, and we can take it a lot further. By extending these basic concepts with additional components like a Tree or TabNavigator we can provide users with things such as multiple, tabbed search results and file folders for storing and sorting documents. This makes for an incredibly full-featured search tool that breaks the HTML model, adds a great deal of functionality, and presents data in better, more useful ways.
Conclusion
This was admittedly a bit of a whirlwind tour, but I hope it has opened your eyes to the fantastic data presentation possibilities offered by Flex. When the extremely capable containers and components available in Flex are used in combination with one another the data presentation capabilities are truly endless.
Resources
* Greenfield, Ely (2004). “Beyond the DataGrid Control: Better Data Visualization with Flex Charting Components.” www.macromedia.com/devnet/flex/ articles/charting.html
* Lally, Susan (2004). “Introducing Flex 1.5.” www.macromedia. com/devnet/.ex/articles/flex15_preview.html
* Macromedia, Inc. (2004). Flex 1.5 Documentation. www.macromedia.com/support/documentation/en/ flex/
* Meeker, David and Carlos, Ryan (2004). “Delivering Rich Business Intelligence.” www.macromedia.com/ devnet/flex/articles/rich_intelligence.html
* Sundermeyer, Mike (2004). “Understanding the Macromedia Flex Experience Model.” www.macromedia. com/devnet/flex/articles/halo.html
Matt Woodward is a Web application developer for i2 Technologies in Dallas, Texas, and also works as a consultant for his company, Sixth Floor Software. He is a Macromedia Certified ColdFusion Developer, a member of Team Macromedia, and has been using ColdFusion since 1996. In addition to his ColdFusion work, Matt also develops in Java and PHP.
mpwoodward@mac.com
COPYRIGHT 2005 Sys-Con Publications, Inc.
COPYRIGHT 2005 Gale Group
