Accessibility

Flex Article

 

Integrating Flex Charting 2 and Nitobi Grid with FABridge


Alexei White

Alexei White

www.nitobi.com

Dave Johnson

Dave Johnson

Nitobi

Agus Santoso

Agus Santoso

www.nitobi.com

Table of Contents

  1. Introduction
  2. Building the Flex 2 stub application
  3. Creating a basic Ajax application using the Nitobi Grid
  4. Putting all the pieces together
Comments
Created:
4 December 2006
User Level:
Intermediate

Note: This article was created based on Flex 2. Minor changes in the description and code may be necessary before it can be applied to Flex 3.

As developers of Ajax components that make their way into large-scale enterprise applications, we are always looking for new ways to visualize enterprise data in a web application, and bring the user closer to the desktop experience.

With the introduction of the Adobe Flex-Ajax Bridge (FABridge), we have an easy way to connect our JavaScript-based components like the Nitobi Grid (see Figure 1) to the powerful presentation-layer capabilities of Flex. It also means that developers accustomed to developing with traditional web technologies like PHP, J2EE, and JavaScript are able to take advantage of Adobe Flex without needing to invest a lot of time up front to learn the platform.

Nitobi Grid application

Figure 1. Nitobi Grid application

Flex has been a pleasure to learn, chiefly because it borrows a lot from Java and ECMAScript. Even so, developers using the FABridge can start benefiting right away from the things that Flex and Flash are really good at—not the least of which is Charting, which we'll be looking at here—while not needing to throw out all the existing code in their application. As developers' comfort level with Flex increases, a world of possibilities opens up for marshalling complex interactions between traditional web apps and Flex.

In this demo, the Nitobi Grid (an Ajax component) is used to build an application to review sales data for each month of the year. The FABridge is used to enable the Ajax part of the application to communicate with the Flex Charting component so that the sales data for a selected month can be displayed in a bar chart, offering a dynamic and responsive visualization of our data:

All of the sales data is transported from the server to the client using Ajax, but subsequently massaged using XSLT and rendered using the FABridge and Flex Charting 2. This approach is particularly attractive because it enables us to preserve the way each tier in our application works as an Ajax application, and simply extend the application to include Flex.

Requirements

To use this tutorial, download and install the following software and files. The Flex 2 SDK (free) and Flex Builder trial allow you to compile your own components for use with FABridge. You will also need PHP 4 or 5 to run the back end for the Nitobi Grid.

Flex Builder 2

Flex Charting 2

Flex-Ajax Bridge

Flash Player 9

Nitobi Grid 3.23

PHP 5.1.6

Sample files:

Note: This sample ZIP file contains all the tools required to build the sample. Extract the FABridge ZIP file to a location of your choosing. This will be referred to in the article as FABRIDGE_HOME.

Prerequisite knowledge

Familiarity with JavaScript and PHP. Some understanding of XML and XSLT is nice but not required.

Page 1 of 4
Next Page

About the authors

Alexei White is a Product Manager for Nitobi's suite of enterprise Ajax UI components. He has written on Ajax development for Developer.com, Network World, and IT Solutions Journal, and is co-author of the upcoming book Enterprise Ajax.

Dave Johnson is the co-founder and CTO of Nitobi Software, a Vancouver based Ajax component vendor and consulting firm. Dave spends most of his time on architecting and building high performance Ajax components for use in web based business applications. A core focus of Nitobi is building Ajax components and building business applications that deliver real value to customers through increased productivity and higher efficiency. Dave has shared his 8 years of Ajax knowledge in a recent book titled Enterprise Ajax.

Agus studies applied mathematics at Simon Fraser University and is currently working as an intern at Nitobi. He has been using Adobe products since 1997 beginning with Macromedia Director, Flash, and recently Flex.