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
    "Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
    SYS-CON Events announced today that Conference Guru has been named “Media Sponsor” of the 22nd International Cloud Expo, which will take place on June 5-7, 2018, at the Javits Center in New York, NY. A valuable conference experience generates new contacts, sales leads, potential strategic partners and potential investors; helps gather competitive intelligence and even provides inspiration for new products and services. Conference Guru works with conference organizers to pass great deals to gre...
    The Internet of Things will challenge the status quo of how IT and development organizations operate. Or will it? Certainly the fog layer of IoT requires special insights about data ontology, security and transactional integrity. But the developmental challenges are the same: People, Process and Platform. In his session at @ThingsExpo, Craig Sproule, CEO of Metavine, demonstrated how to move beyond today's coding paradigm and shared the must-have mindsets for removing complexity from the develop...
    In his Opening Keynote at 21st Cloud Expo, John Considine, General Manager of IBM Cloud Infrastructure, led attendees through the exciting evolution of the cloud. He looked at this major disruption from the perspective of technology, business models, and what this means for enterprises of all sizes. John Considine is General Manager of Cloud Infrastructure Services at IBM. In that role he is responsible for leading IBM’s public cloud infrastructure including strategy, development, and offering m...
    "Evatronix provides design services to companies that need to integrate the IoT technology in their products but they don't necessarily have the expertise, knowledge and design team to do so," explained Adam Morawiec, VP of Business Development at Evatronix, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
    To get the most out of their data, successful companies are not focusing on queries and data lakes, they are actively integrating analytics into their operations with a data-first application development approach. Real-time adjustments to improve revenues, reduce costs, or mitigate risk rely on applications that minimize latency on a variety of data sources. In his session at @BigDataExpo, Jack Norris, Senior Vice President, Data and Applications at MapR Technologies, reviewed best practices to ...
    Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to work together. The number of software platforms, apps, hardware and connectivity standards is creating paralysis among businesses that are afraid of being locked into a solution. EdgeX Foundry is unifying the community around a common IoT edge framework and an ecosystem of interoperable components.
    Large industrial manufacturing organizations are adopting the agile principles of cloud software companies. The industrial manufacturing development process has not scaled over time. Now that design CAD teams are geographically distributed, centralizing their work is key. With large multi-gigabyte projects, outdated tools have stifled industrial team agility, time-to-market milestones, and impacted P&L stakeholders.
    "Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
    "IBM is really all in on blockchain. We take a look at sort of the history of blockchain ledger technologies. It started out with bitcoin, Ethereum, and IBM evaluated these particular blockchain technologies and found they were anonymous and permissionless and that many companies were looking for permissioned blockchain," stated René Bostic, Technical VP of the IBM Cloud Unit in North America, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventi...
    In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
    22nd International Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, and co-located with the 1st DXWorld Expo will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud ...
    "Cloud Academy is an enterprise training platform for the cloud, specifically public clouds. We offer guided learning experiences on AWS, Azure, Google Cloud and all the surrounding methodologies and technologies that you need to know and your teams need to know in order to leverage the full benefits of the cloud," explained Alex Brower, VP of Marketing at Cloud Academy, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clar...
    Gemini is Yahoo’s native and search advertising platform. To ensure the quality of a complex distributed system that spans multiple products and components and across various desktop websites and mobile app and web experiences – both Yahoo owned and operated and third-party syndication (supply), with complex interaction with more than a billion users and numerous advertisers globally (demand) – it becomes imperative to automate a set of end-to-end tests 24x7 to detect bugs and regression. In th...
    "MobiDev is a software development company and we do complex, custom software development for everybody from entrepreneurs to large enterprises," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
    Coca-Cola’s Google powered digital signage system lays the groundwork for a more valuable connection between Coke and its customers. Digital signs pair software with high-resolution displays so that a message can be changed instantly based on what the operator wants to communicate or sell. In their Day 3 Keynote at 21st Cloud Expo, Greg Chambers, Global Group Director, Digital Innovation, Coca-Cola, and Vidya Nagarajan, a Senior Product Manager at Google, discussed how from store operations and ...
    "There's plenty of bandwidth out there but it's never in the right place. So what Cedexis does is uses data to work out the best pathways to get data from the origin to the person who wants to get it," explained Simon Jones, Evangelist and Head of Marketing at Cedexis, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
    SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
    SYS-CON Events announced today that Telecom Reseller has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5-7, 2018, at the Javits Center in New York, NY. Telecom Reseller reports on Unified Communications, UCaaS, BPaaS for enterprise and SMBs. They report extensively on both customer premises based solutions such as IP-PBX as well as cloud based and hosted platforms.
    It is of utmost importance for the future success of WebRTC to ensure that interoperability is operational between web browsers and any WebRTC-compliant client. To be guaranteed as operational and effective, interoperability must be tested extensively by establishing WebRTC data and media connections between different web browsers running on different devices and operating systems. In his session at WebRTC Summit at @ThingsExpo, Dr. Alex Gouaillard, CEO and Founder of CoSMo Software, presented ...