Interactive Bubble Pipeline: Another Hybrid (HTML/Flex) Example

A customer recently pointed out to me that many of our examples feature full-page Flex applications, and wanted to me to demonstrate how a Flex application can integrate with an HTML/Ajax application. Hybrid applications are definitely part of our vision for Flex, and there are many real-life examples of mixing Flash and HTML content out there (see http://finance.google.com/finance?q=adbe). This customer wanted to look at the integration at the code level. Instead of the usual “Hello from Flex”/”Hello from JavaScript” message exchange example, I wanted to show something more meaningful that would also show “why” you would actually want to do this…

Click here to start the sample application.

I extracted this example from my Salesbuilder sample. The application is a simple sales pipeline. The X axis is a time axis, the Y axis represents the probability of closing deals (in percent), and the bubbles represent deals: the bigger the bubble, the bigger the deal.

The bubble chart features many “direct manipulation” options:

1. Grab the background of the chart with your mouse and scroll it left and write to navigate along the time axis.
2. Grab a vertical grid line, and move it left and right to zoom-out/zoom-in.
3. To modify your pipeline, grab a bubble with your mouse and move it up and down or left and right to adjust the probability and the expected closing date respectively

Flex to JavaScript:
When you move bubbles, the Flex application invokes a JavaScript method to update the Projected Revenue which is displayed in plain HTML on the page.

JavaScript to Flex:
You can also add opportunities (deals) using the HTML form at the bottom of the page.
For example, specify “Adobe” as the account, “Big Deal” as the project name, 500000 as the expected revenue, “50” as the days to close, and “70” as the probability.
When you click “Add Opportunity”, we use JavaScript to invoke the addOpportunity() method in the Flex application.

In this example, I use ExternalInterface to communicate between Flex and JavaScript. You can also use the Flex Ajax bridge which provides a higher level API and which is now integrated in FlexBuilder (version 3).

Click here to download the source code.

No rocket science here… just another example of a hybrid application.