Welcome!

You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Jeremy Geelan, Maureen O'Gara, Nancy Y. Nee, Tad Anderson

Related Topics: ColdFusion

ColdFusion: Article

Data Presentation with Macromedia Flex

Break free of the limits of HTML

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).

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.

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.

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.

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).

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).

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/flex/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
  • More Stories By Matthew Woodward

    Matt Woodward is Principal Information Technology Specialist with the Office of the Sergeant at Arms at the United States Senate. He was until recently a Web application developer for i2 Technologies in Dallas, Texas. A Macromedia Certified ColdFusion Developer and a member of Team Macromedia, he has been using ColdFusion since 1996. In addition to his ColdFusion work, Matt also develops in Java and PHP.

    Comments (0)

    Share your thoughts on this story.

    Add your comment
    You must be signed in to add a comment. Sign-in | Register

    In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


    IoT & Smart Cities Stories
    René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
    Early Bird Registration Discount Expires on August 31, 2018 Conference Registration Link ▸ HERE. Pick from all 200 sessions in all 10 tracks, plus 22 Keynotes & General Sessions! Lunch is served two days. EXPIRES AUGUST 31, 2018. Ticket prices: ($1,295-Aug 31) ($1,495-Oct 31) ($1,995-Nov 12) ($2,500-Walk-in)
    According to Forrester Research, every business will become either a digital predator or digital prey by 2020. To avoid demise, organizations must rapidly create new sources of value in their end-to-end customer experiences. True digital predators also must break down information and process silos and extend digital transformation initiatives to empower employees with the digital resources needed to win, serve, and retain customers.
    IoT is rapidly becoming mainstream as more and more investments are made into the platforms and technology. As this movement continues to expand and gain momentum it creates a massive wall of noise that can be difficult to sift through. Unfortunately, this inevitably makes IoT less approachable for people to get started with and can hamper efforts to integrate this key technology into your own portfolio. There are so many connected products already in place today with many hundreds more on the h...
    Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
    Charles Araujo is an industry analyst, internationally recognized authority on the Digital Enterprise and author of The Quantum Age of IT: Why Everything You Know About IT is About to Change. As Principal Analyst with Intellyx, he writes, speaks and advises organizations on how to navigate through this time of disruption. He is also the founder of The Institute for Digital Transformation and a sought after keynote speaker. He has been a regular contributor to both InformationWeek and CIO Insight...
    Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
    Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
    Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
    Nicolas Fierro is CEO of MIMIR Blockchain Solutions. He is a programmer, technologist, and operations dev who has worked with Ethereum and blockchain since 2014. His knowledge in blockchain dates to when he performed dev ops services to the Ethereum Foundation as one the privileged few developers to work with the original core team in Switzerland.