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:
- Grab the background of the chart with your mouse and scroll it left and write to navigate along the time axis.
- Grab a vertical grid line, and move it left and right to zoom-out/zoom-in.
- 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.
Comments
9 Responses to “Interactive Bubble Pipeline: Another Hybrid (HTML/Flex) Example”
Leave a Reply
Christophe, I’m trying to get to a link on your old site: http://coenraets.com/apps/iframe/index.htm - I want to read your post on using iframes to embed html in flex apps. Could you please let me know if this post (source code included) is still accessible. Thanks
I can not run this example,it may be have some problem,please help me!!
2 Errors found.
Error /PanAndZoom.as:45
访问可能未定义的属性 horizontalAxisRenderers (通过 static 类型 mx.charts.chartClasses:CartesianChart 引用)。
44: {
45: var ticks:Array = CartesianChart(chart).horizontalAxisRenderers[0].ticks;
46: var bHorizontal:Boolean = false;
Error /PanAndZoom.as:55
访问可能未定义的属性 verticalAxisRenderers (通过 static 类型 mx.charts.chartClasses:CartesianChart 引用)。
54: }
55: ticks = CartesianChart(chart).verticalAxisRenderers[0].ticks;
56: var bVertical:Boolean = false;
Really good and really interesting post. I expect (and other readers maybe :)) new useful posts from you!
Good luck and successes in blogging!
Really good! 谢谢你 share the source code for us! :-)
[...] Christophe Coenraets » Interactive Bubble Pipeline: Another Hybrid (HTML/Flex) Example - 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. [...]
spela texas holdem poker online…
Lawrence skullduggery queerness …
free on line slots…
sofa reusing Kowalewski …
florida renters insurance…
broaden cooped Agway condensed:switching!heathen,…
caribbean poker on line…
Riordan Californians precious?lavish …