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.


29 Comments
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! :-)
I’ve recently joined and wanted to introduce myself :)
Really good!
Good thanks ;)
güzeldi teşekkürler :)
thanks a lot ;)
Hi!
I would like extend my SQL capabilities.
I red that many SQL books and want to
get more about SQL for my work as mysql database manager.
What would you recommend?
Thanks,
Werutz
Реально занимательное место, мне тут понравилось, правда…
Столько всего суперского и позновательного, я тут задержусь на долго.
I have a flash website
i’m looking for the script who makes google ads on flash.
how can i get it?
Somehow, it gets to be his wedding day.
While he is walking down the isle, his father tugs his sleeve and says,
“Son, when you get to the hotel room…Call me”
Hours later he gets to the hotel room with his beautiful blushing bride and he calls his father,
“Dad, we are the hotel, what do I do?”
“O.K. Son, listen up, take off your clothes and get in the bed, then she should take off her clothes and get in the bed, if not help her. Then either way, ah, call me”
A few moments later…
Keep a good work man!,
Keep a good work man!,
x
x
madafakerimpresarionte
Never underestimate the power of the internet. An increasing number of people use the internet
to search for a business or service so having a web presence is an important media for promoting
your company. Web design is a real skill and if your website is to not only look good but work well,
it should be constructed by a professional web designer.
If you are interested, you can contact me: hqwebdesign (AT) gmail (DOT) com
Keep a good work man!,
Keep a good work man!
Mega Millions, Powerball, Lotto 6/49, Super 7, Euro million, New York Lotto – Be the Next Jackpot Winner With The Only Online Service That Enables You To Purchase Official Lottery Tickets From Around The World.
Если вы хотите узнать, как я взломали ваш сайт, послать $20 WMZ: Z385450145510 и электронной почте c3m3t3ry@gmail.com Спасибо.
Hello,
What is the best web hosting company?
I’m trying to build a web site for my boss.
thank you in advance,
-Michelle
thanx for example
how are you babyy aq
very very good
thanks for admin :)
How about making a contact form plugin with Hash-Cash? I want a contact form plugin, but I don’t want spam or captchas :)
how are you baby
thanks site
7 Trackbacks
[...] 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 …
tricare supplement insurance…
exhale.stifle salve expose undiminished locates …
internet poker black jack epassport…
kilobyte,freshwater viable sawtooth evidencing Sudanic …