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
    Nordstrom is transforming the way that they do business and the cloud is the key to enabling speed and hyper personalized customer experiences. In his session at 21st Cloud Expo, Ken Schow, VP of Engineering at Nordstrom, discussed some of the key learnings and common pitfalls of large enterprises moving to the cloud. This includes strategies around choosing a cloud provider(s), architecture, and lessons learned. In addition, he covered some of the best practices for structured team migration an...
    Recently, REAN Cloud built a digital concierge for a North Carolina hospital that had observed that most patient call button questions were repetitive. In addition, the paper-based process used to measure patient health metrics was laborious, not in real-time and sometimes error-prone. In their session at 21st Cloud Expo, Sean Finnerty, Executive Director, Practice Lead, Health Care & Life Science at REAN Cloud, and Dr. S.P.T. Krishnan, Principal Architect at REAN Cloud, discussed how they built...
    In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and simple way to introduce Machine Leaning to anyone and everyone. He solved a machine learning problem and demonstrated an easy way to be able to do machine learning without even coding. Raju Shreewastava is the founder of Big Data Trunk (www.BigDataTrunk.com), a Big Data Training and consulting firm with offices in the United States. He previously led the data warehouse/business intelligence and B...
    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...
    With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, examined the regulations and provided insight on how it affects technology, challenges the established rules and will usher in new levels of diligence arou...
    The 22nd International Cloud Expo | 1st DXWorld Expo has announced that its Call for Papers is open. Cloud Expo | DXWorld Expo, to be held June 5-7, 2018, at the Javits Center in New York, NY, brings together Cloud Computing, Digital Transformation, Big Data, Internet of Things, DevOps, Machine Learning and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding busin...
    Smart cities have the potential to change our lives at so many levels for citizens: less pollution, reduced parking obstacles, better health, education and more energy savings. Real-time data streaming and the Internet of Things (IoT) possess the power to turn this vision into a reality. However, most organizations today are building their data infrastructure to focus solely on addressing immediate business needs vs. a platform capable of quickly adapting emerging technologies to address future ...
    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, presented a step-by-step plan to develop your technology implementation strategy. He also discussed the evaluation of communication standards and IoT messaging protocols, data...
    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 ...
    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 ...
    DevOps at Cloud Expo – being held June 5-7, 2018, at the Javits Center in New York, NY – 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 results. Among the proven benefits,...
    @DevOpsSummit at Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, is co-located with 22nd Cloud Expo | 1st DXWorld Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to wait...
    Cloud Expo | DXWorld Expo have announced the conference tracks for Cloud Expo 2018. Cloud Expo will be held June 5-7, 2018, at the Javits Center in New York City, and November 6-8, 2018, at the Santa Clara Convention Center, Santa Clara, CA. Digital Transformation (DX) is a major focus with the introduction of DX Expo within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive ov...
    SYS-CON Events announced today that T-Mobile exhibited at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. As America's Un-carrier, T-Mobile US, Inc., is redefining the way consumers and businesses buy wireless services through leading product and service innovation. The Company's advanced nationwide 4G LTE network delivers outstanding wireless experiences to 67.4 million customers who are unwilling to compromise on qua...
    SYS-CON Events announced today that Cedexis 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. Cedexis is the leader in data-driven enterprise global traffic management. Whether optimizing traffic through datacenters, clouds, CDNs, or any combination, Cedexis solutions drive quality and cost-effectiveness. For more information, please visit https://www.cedexis.com.
    SYS-CON Events announced today that Google Cloud has been named “Keynote 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. Companies come to Google Cloud to transform their businesses. Google Cloud’s comprehensive portfolio – from infrastructure to apps to devices – helps enterprises innovate faster, scale smarter, stay secure, and do more with data than ever before.
    SYS-CON Events announced today that Vivint to exhibit at SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California. As a leading smart home technology provider, Vivint offers home security, energy management, home automation, local cloud storage, and high-speed Internet solutions to more than one million customers throughout the United States and Canada. The end result is a smart home solution that sav...
    SYS-CON Events announced today that Opsani 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. Opsani is the leading provider of deployment automation systems for running and scaling traditional enterprise applications on container infrastructure.
    SYS-CON Events announced today that Nirmata 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. Nirmata provides a comprehensive platform, for deploying, operating, and optimizing containerized applications across clouds, powered by Kubernetes. Nirmata empowers enterprise DevOps teams by fully automating the complex operations and management of application containers and its underlying ...
    SYS-CON Events announced today that Opsani to exhibit at SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California. Opsani is creating the next generation of automated continuous deployment tools designed specifically for containers. How is continuous deployment different from continuous integration and continuous delivery? CI/CD tools provide build and test. Continuous Deployment is the means by which...