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.


    @ThingsExpo Stories
    In his session at @ThingsExpo, Greg Gorman is the Director, IoT Developer Ecosystem, Watson IoT, will provide a short tutorial on Node-RED, a Node.js-based programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using a wide range of nodes in the palette that can be deployed to its runtime in a single-click. There is a large library of contributed nodes that help so...
    With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
    Agile has finally jumped the technology shark, expanding outside the software world. Enterprises are now increasingly adopting Agile practices across their organizations in order to successfully navigate the disruptive waters that threaten to drown them. In our quest for establishing change as a core competency in our organizations, this business-centric notion of Agile is an essential component of Agile Digital Transformation. In the years since the publication of the Agile Manifesto, the conn...
    SYS-CON Events announced today that App2Cloud will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct. 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. App2Cloud is an online Platform, specializing in migrating legacy applications to any Cloud Providers (AWS, Azure, Google Cloud).
    WebRTC is great technology to build your own communication tools. It will be even more exciting experience it with advanced devices, such as a 360 Camera, 360 microphone, and a depth sensor camera. In his session at @ThingsExpo, Masashi Ganeko, a manager at INFOCOM Corporation, will introduce two experimental projects from his team and what they learned from them. "Shotoku Tamago" uses the robot audition software HARK to track speakers in 360 video of a remote party. "Virtual Teleport" uses a mu...
    Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
    Mobile device usage has increased exponentially during the past several years, as consumers rely on handhelds for everything from news and weather to banking and purchases. What can we expect in the next few years? The way in which we interact with our devices will fundamentally change, as businesses leverage Artificial Intelligence. We already see this taking shape as businesses leverage AI for cost savings and customer responsiveness. This trend will continue, as AI is used for more sophistica...
    SYS-CON Events announced today that SourceForge has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. SourceForge is the largest, most trusted destination for Open Source Software development, collaboration, discovery and download on the web serving over 32 million viewers, 150 million downloads and over 460,000 active development projects each and every month.
    SYS-CON Events announced today that Massive Networks will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Massive Networks mission is simple. To help your business operate seamlessly with fast, reliable, and secure internet and network solutions. Improve your customer's experience with outstanding connections to your cloud.
    SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
    SYS-CON Events announced today that WineSOFT will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Based in Seoul and Irvine, WineSOFT is an innovative software house focusing on internet infrastructure solutions. The venture started as a bootstrap start-up in 2010 by focusing on making the internet faster and more powerful. WineSOFT’s knowledge is based on the expertise of TCP/IP, VPN, SS...
    SYS-CON Events announced today that Akvelon will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Akvelon is a business and technology consulting firm that specializes in applying cutting-edge technology to problems in fields as diverse as mobile technology, sports technology, finance, and healthcare.
    SYS-CON Events announced today that TechTarget has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. TechTarget storage websites are the best online information resource for news, tips and expert advice for the storage, backup and disaster recovery markets.
    Real IoT production deployments running at scale are collecting sensor data from hundreds / thousands / millions of devices. The goal is to take business-critical actions on the real-time data and find insights from stored datasets. In his session at @ThingsExpo, John Walicki, Watson IoT Developer Advocate at IBM Cloud, will provide a fast-paced developer journey that follows the IoT sensor data from generation, to edge gateway, to edge analytics, to encryption, to the IBM Bluemix cloud, to Wa...
    SYS-CON Events announced today that Dasher Technologies will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Dasher Technologies, Inc. ® is a premier IT solution provider that delivers expert technical resources along with trusted account executives to architect and deliver complete IT solutions and services to help our clients execute their goals, plans and objectives. Since 1999, we've...
    DevOps at Cloud Expo – being held October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA – announces that its Call for Papers is open. Born out of proven success in agile development, cloud computing, and process automation, DevOps is a macro trend you cannot afford to miss. From showcase success stories from early adopters and web-scale businesses, DevOps is expanding to organizations of all sizes, including the world's largest enterprises – and delivering real r...
    No hype cycles or predictions of a gazillion things here. IoT is here. You get it. You know your business and have great ideas for a business transformation strategy. What comes next? Time to make it happen. In his session at @ThingsExpo, Jay Mason, an Associate Partner of Analytics, IoT & Cybersecurity at M&S Consulting, will present a step-by-step plan to develop your technology implementation strategy. He will discuss the evaluation of communication standards and IoT messaging protocols, dat...
    SYS-CON Events announced today that Massive Networks, that helps your business operate seamlessly with fast, reliable, and secure internet and network solutions, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. As a premier telecommunications provider, Massive Networks is headquartered out of Louisville, Colorado. With years of experience under their belt, their team of...
    Elon Musk is among the notable industry figures who worries about the power of AI to destroy rather than help society. Mark Zuckerberg, on the other hand, embraces all that is going on. AI is most powerful when deployed across the vast networks being built for Internets of Things in the manufacturing, transportation and logistics, retail, healthcare, government and other sectors. Is AI transforming IoT for the good or the bad? Do we need to worry about its potential destructive power? Or will we...
    SYS-CON Events announced today that App2Cloud will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct. 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. App2Cloud is an online Platform, specializing in migrating legacy applications to any Cloud Providers (AWS, Azure, Google Cloud).