1. Home
2. Developer Connection
3. Flex Developer Center

Flex Article

Delivering Rich Business Intelligence

David Meeker

WHITTMANHART

Ryan Carlos

WHITTMANHART

Since its announcement in fall 2003, Macromedia Flex has generated a lot of excitement among developers of Rich Internet Applications (RIAs). In addition to the numerous technical benefits that this new development platform provides, Flex applications also deliver tremendous benefits for businesses. For example, our team at WHITTMANHART used the Flex platform to create a mission-critical business application for our consulting organization; it has played a major part in the growth of our business by allowing us to visualize real-time, actionable data on which we base key business decisions. Our experience with Flex has been so overwhelmingly positive that we plan on using Flex as a platform for the delivery of applications for our clients.

In this article, we want to share with you some of our experiences working with Flex and demonstrate how you might be able to use the Flex platform to find and build creative solutions to your business challenges.

The Old-School Way of Doing Business

The best way for you to appreciate the benefits we gained by using Flex is to get a feel for what we do as a business—how we used to view our data before we were using Flex, and what we had to go through in order to distribute that data across the organization.

We have a variety of offices in different cities and several hundred of our consultants work in the field. As with any growing services firm, we face the constant challenge of keeping on top of our numbers, knowing where our resources are, and deciding what steps we need to take from a managerial perspective to stay profitable while doing the best possible work for our clients. We track our numbers on a weekly basis, including billable rate, use of staff, profit margin, revenue, sales, and other key metrics that enable us to keep tabs on the health of our consulting organization. And every week, our operations manager would collect this data and put it into a scorecard that would enable our employees to visualize the data they need to do their jobs. Figure 1 illustrates our old-school way of doing business.

Figure 1. Old school business intelligence data gathering

Essentially what this data-gathering process used to entail is a lot of manual manipulation of data, re-keying data from one presentation format to another, and as-needed changes to data should values change between the initial data-gathering process and the process of distributing the data across the company to department heads and other decision makers. As our operations manager once told me after explaining the process to me in detail, "There has to be a better way of doing this."

This is when we had our first revelation of how to solve our business problem, a solution that we decided to call rich business intelligence.

From Poor to Rich

The shortcomings to the old school data-gathering process are obvious: It is slow, leaves room for human error and data inaccuracy, and presents a very low-tech way to distribute data within our very high-tech times.

In our case, the solution to our problem had to meet several key requirements:

• The application would have to eliminate the "busy work" associated with the existing business process.
• The application must integrate into our existing processes and technical systems.
• The scorecard must be easy to view on a variety of devices.
• The application would need to provide real-time access to our most current data.
• The application must be secure.
• The application must be easy to maintain and enhance through ongoing revisions.
• The application must be able to run in "offline" mode, so that users can access the data they need when they are working without network connection at home or on the road.

Based on these requirements, we chose the Flex platform for the development of our software system. In the following section, we will look at each of these requirements as they relate to developing Flex-based solutions and explain how the Flex platform meets each of these requirements.

The Benefits of Using Flex

As we stated above, Flex was the natural choice for our development efforts, because it was the only platform that met all of our project requirements. The following list explains in detail how our requirements map to the Flex platform and the benefits that Flex brings to the table:

• Eliminate the "busy work" associated with the existing business process. We needed to find a development platform that could help us come close to performing a data visualization miracle! The existing process (see Figure 1) was not only labor intensive and inefficient, it also left room for human error because reports were generated manually by re-keying financial information into a static presentation.

  Our theory is that all positive digital experiences start with user-centered design and the user experience should be a key consideration when designing software systems. In our analysis of data visualization methodologies and through interviews with users of our existing system as well as other popular business intelligence systems, we realized that the best solution in our case was to create a custom interface for data viewing.

  Flex enabled us to create custom components in Macromedia Flash MX Professional 2004 and export them as SWC files for use in our Flex application. It also gave us the option to create components using MXML, the Flex XML-based markup language, and Macromedia Flash ActionScript 2.0.

• Integrate into our existing processes and technical systems. Standards are good! Isn't that why millions of dollars are spend by various industries to create and adhere to them? Keep in mind that Flex is not a back-end development platform. Flex is a technology used to render the "view" or "presentation layer" of RIAs.

  Making Flex applications work within your existing environment is a relatively painless process, because Flex is designed to allow standards-based communications between the Flex applications and other systems. In our case, we are using Flex to call our J2EE web services. These web services use SOAP to exchange data with our Cognos system’s datacube.

• Run the scorecard on a variety of devices. Perhaps the most obvious way that our use of Flex meets a project requirement is that Flex applications are executed within Macromedia Flash Player. As you know, Flash Player has evolved a great deal since the days of overwhelming "skip intro" animations. For the sake of our project we consider Flash Player as a cross-platform runtime engine for RIAs. To run Flex applications, the client must have Flash Player 7.x installed.
• Provide real-time access to our most current data. Although this requirement is partially addressed in the second bullet item above, we didn’t really touch on how this functions technically and what advantages we have gained by using Flex. While there are a wide variety of applications that enable real-time data reporting, none is as flexible when it comes to the presentation layer as an RIA running in the Flash client runtime. The advantages that Flex brought to us in this area are found in the myriad of ways that Flex applications can send, receive, and process data on the client.

• Be secure. The entire Executive Information System (EIS) dashboard that we’ve been talking about in this overview is designed to present critical business data to users that have the proper authentication credentials. Some users, such as the company CEO and other executives, have access to view all the data that the system offers. Other users can view only data that is relevant to their geographic location or their practice area.

  In short, the system provides role-based security that can be customized to accommodate different types of users. While our Flex application doesn’t manage the user authentication process, it does manage the content displayed to the user based on security rules delivered to the Flash interface from our back-end system. The advantage Flex provides in this regard is obvious: We can easily change user views of data and screen elements based on rules received from the application security model.

• Easy to maintain and enhance through ongoing revisions. When investing in a custom software solution, one of the most important factors to consider is the total cost of ownership (TCO) as applied to the ongoing maintenance of and upgrades to the software over time. Two key factors in this cost equation are flexibility of the software architecture and the skills needed to perform updates and maintain the system. Our experience with Flex makes it an ideal development platform when it comes to these TCO issues.

The Flex Application Model

The following list provides an overview of the features of the Flex application model that increasingly make it easier for developers to be more productive:

• Feature-rich set of customizable user interface and data components
• Ability to create custom components (MXML, Flash MX Professional 2004, ActionScript)
• Managers for layout, tooltips, overlays, history, and so on
• Interface behavior and effects library with the ability to easily create new custom behaviors and effects
• Media management
• Deferred instantiation

These features enable developers to spend less time creating custom code that handles everyday layout and user interaction issues and to focus instead on the code that drives the enhanced rich client interface.

Flex Data Management

There is a big difference between an application that simply looks good and an application that serves a business purpose—and Macromedia understands this difference! A key ingredient in an RIA is the display, manipulation, and binding of data.

In our system, we rely on both web service data connectivity (online mode) as well as the loading of XML files (offline mode). To integrate our back-end data with the Flex application, we use the built-in Flex data management components. These components support:

• The creation and manipulation of client-side data models
• Flexible data binding (including unidirectional and bidirectional data binding; user interface-to-model, model-to-model, and model-to-service bindings, and inline expression support)
• Data validation
• Result formatting
• Server-side data caching
• Rich client to enterprise data access through SOA (service oriented architecture)

Using these components, developers have an easier time working with Flex than with other, more intimidating solutions. Instead of wondering whether and how we can access the data, Flex enables us to focus on finding the perfect solution for a given situation.

Finding the perfect solution in our case also meant being able to run the application in both online and offline mode, There are two very valid reasons for this requirement. Firstly, users must be able to view mission-critical business intelligence data when they are on the road or in the field, or even at home as they work late at night on company strategy. Secondly, since we are developing our EIS system as a software solution for our clients, we need our sales force to be able to load a version of it on their laptops so that they can present it to prospective clients.

Following best practices for Flex application design allowed our team to completely separate the Model View Controller (MVC) aspects of the EIS system, turning the online and offline issue into something that was simple to achieve. By using an application configuration XML file that the Flex application loads when initialized, the rich client will be able to run as it is expected, without any changes to the application code-base.

Our software project had some pretty specific requirements, as do most custom software solutions. You have seen an overview of how the Flex development platform’s features have helped to meet these requirements for the development of our enterprise reporting system.

Now that we’ve explained how we used the features of Flex, let’s take a look at how we have combined the Flex MXML components, custom components, and ActionScript 2.0 to build part of our application!

Building a Rich Client Interface

Without getting into too much detail, we want to show how you can use basic MXML and Flex components to create a custom interface for an RIA. In this case, we are using our own EIS as an example.

In order to make it easier for you to follow our example, take a look at Figure 2, which shows the finished application screen and the underlying wireframe design document (see Figure 2).

Figure 2. The completed EIS screen (left) and the wireframe on which it is based (right).

The similarities between the completed application screen and the wireframe are obvious. For the sake of brevity, we are going to focus on only a few of the interface elements:

• TabBar (using a ViewStack element) –This component enables the user to switch between the scorecard view and the reports view in the application interface. The TabBar element is shown in the top right corner of the EIS screen and the wireframe in Figure 2.

  <mx:TabBar widthFlex="1" dataProvider="tnav" styleName="tabstyle" 
  	tabHeight="30" borderStyle="none" visible="true" horizontalAlign="right" 
  	id="tbar" tabWidth="160" marginRight="19" />
  <mx:ViewStack id="tnav">
  	<scorecard label="Scorecard" backgroundColor="#621619"/>
  	<report label="Reports" backgroundColor="#621619"/>
  </mx:ViewStack>

• The scorecard –The scorecard is defined as the entire area below the TabBar component. It is the container for the three elements listed below: filterBar, glanceBar, and glanceChart.

  <mx:VBox verticalGap="15" horizontalAlign="center">
  <filterBar id="fBar"/>
  <mx:VBox verticalGap="15" hScrollPolicy="off" backgroundSize="100%" 
  	backgroundImage="@Embed('assets/contentArea.swf')" vScrollPolicy="off" 
  	id="contentArea" marginBottom="15" marginTop="15" width="975" 
  	height="555">
  	
  <glanceBar id="compGlanceBar" marginLeft="25" marginRight="25"/>
  <mx:HBox marginLeft="25" marginRight="25" horizontalGap="25">
  <trendPane id="compTrendPane"/>
  <pipelinePane id="compPipelinePane"/>
  </mx:HBox>
  </mx:VBox>
  </mx:VBox>

• filterBar –The filterBar element is the black horizontal strip that sits below the tab-based navigation. This element is used to filter the data on the screen based on a variety of criteria.

  <mx:Canvas show="filterBarShow()" xmlns:mx="http://www.macromedia.com/2003/mxml">
  
  <mx:Script source="as/filterBar.as"/>
  <mx:Effect>
  
  <mx:Fade name="fade1" alphaFrom="0" alphaTo="100" duration="900"/>
  <mx:Sequence name="fade2">
  <mx:Pause duration="900"/>
  <mx:Fade alphaFrom="0" alphaTo="100" duration="900"/>
  </mx:Sequence>
  </mx:Effect>
  
  <mx:Image id="bar" source="assets/filterBar.swf" showEffect="fade1"/>
  
  <mx:Image id="barhighlight" source="assets/filterBar_highlight.swf" 
  	showEffect="fade2" draw="barhighlightInit()" endEffect="controlEndEffect()"/>
      <buFilter id="control" showEffect="fade1" marginLeft="25" marginTop="20"/>
  </mx:Canvas>

• glanceBar–The area in the middle of the screen which contains the series of charts is called the glanceBar element. The glanceBar and the glanceChart (introduced in the following bullet item) elements are so named because of our design approach to contain a high volume of data that is viewable by the reader at a glance. The glanceBar element is a container for each of the individual glanceChart components that you will see below.

  <mx:HBox showEffect="slideDown1" hScrollPolicy="off" widthFlex="1" 
  	vScrollPolicy="off" horizontalAlign="center" id="chartView" marginLeft="10" 
  	verticalAlign="middle" marginRight="10" hideEffect="slideUp1"> 
   
  <glanceMetric id="gm1" metricName="Revenue" queryName="REV" 
  	initialize="initChart(gm1)" mouseDown="getTrendData('REV')" /> 
  <mx:Spacer widthFlex="1"/> 
  
  <glanceMetric id="gm2" metricName="Utilization" queryName="UTIL" 
  	initialize="initChart(gm2)" mouseDown="getTrendData('UTIL')" />  
   
  <mx:Spacer widthFlex="1"/> 
   
  <glanceMetric id="gm3" metricName="Rate" queryName="RATE" 
  	initialize="initChart(gm3)" mouseDown="getTrendData('RATE')" />  
   
  <mx:Spacer widthFlex="1"/> 
   
  <glanceMetric id="gm4" metricName="Gross Margin" queryName="GROSSMARGIN" 
  	initialize="initChart(gm4)" mouseDown="getTrendData('GROSSMARGIN')" /> 
  </mx:HBox>

• glanceChart–The glanceChart custom component is our favorite part of the EIS application’s unique interface. While we can’t show you the code that makes up the glanceChart component itself, we can show you how unbelievably simple it is to include this (or any) custom component into your own Flex application. You will notice that we set the dataProvider property for this custom component as easily as with any of the other data-aware controls available in Flex.

  <glanceChart id="chart" title="{metricName}" threshold="0.5" 
  	dp="{trendWS.getEIS_Metrics.result}" 
  	mouseDown="_root.getTrendData(trendWS.getEIS_Metrics.request.QueryName)"/>
  

Conclusion

Rich client interfaces developed in Flex offer huge benefits, both to users of the finished product as well as to the development teams that put them together. Never before has it been possible to create such robust, interactive, and usable interfaces to users, not to mention that these applications can be deployed cross-platform and browser-independent by calling on Flash Player as a client runtime engine.

The open standards behind the Flex engine reduced the pains that our team felt during development; and the built-in features of Flex made it easy to pull in, work with, and display our complex data on the screen in ways we never thought possible in an application that is delivered over the web.

Who would have thought that you could take a team of J2EE developers and programmers that are used to working in a variety of text-based coding tools and have them develop Flash-based software? The times, they are a changin’ and Macromedia is leading the pack with the release of Flex.

Where to Go From Here

• Read more about the WHITTMANHART Flex application in the article, Case Study: The Development Life Cycle of a Flex Application, by Sean Schnoor.
• View the demo for the WHITTMANHART Flex application.
• Find articles about best practices, getting started, and visual design in the Macromedia Flex Developer Center
• Check out all aspects of RIAs in the Rich Internet Applications
• Usability Topic Center

About the authors