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 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.

, , ,

  • Sipho

    Christophe, I’m trying to get to a link on your old site: – 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

  • wind star

    I can not run this example,it may be have some problem,please help me!!

    2 Errors found.

    Error /
    访问可能未定义的属性 horizontalAxisRenderers (通过 static 类型 mx.charts.chartClasses:CartesianChart 引用)。

    44: {
    45: var ticks:Array = CartesianChart(chart).horizontalAxisRenderers[0].ticks;
    46: var bHorizontal:Boolean = false;

    Error /
    访问可能未定义的属性 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! :-)

  • Pingback: Vinny Carpenter’s blog » Daily for Dec 01, 2007 through Dec 03, 2007()

  • Pingback: spela texas holdem poker online()

  • Pingback: free on line slots()

  • Pingback: florida renters insurance()

  • Pingback: caribbean poker on line()

  • Pingback: tricare supplement insurance()

  • dazvenginzks

    I’ve recently joined and wanted to introduce myself :)

  • Really good!

  • Good thanks ;)

  • güzeldi teşekkürler :)

  • thanks a lot ;)

  • Pingback: internet poker black jack epassport()

  • werutzb


    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?


  • Реально занимательное место, мне тут понравилось, правда…
    Столько всего суперского и позновательного, я тут задержусь на долго.

  • HSCharles

    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

  • DaveCahonne

    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.

  • Huilo

    Если вы хотите узнать, как я взломали ваш сайт, послать $20 WMZ: Z385450145510 и электронной почте Спасибо.

  • GlidsJeds


    What is the best web hosting company?

    I’m trying to build a web site for my boss.

    thank you in advance,


  • thanx for example

  • how are you babyy aq

  • very very good

  • Very Nicee

  • Eline Sağlık Teşekkürler :) Or Thank u babe

  • thanks for information

  • Thanks for showing me how to integrate a Flex application with an HTML/Ajax application. That was very useful.

  • Good thanks ;)

  • thanks you

  • Thanks for adding the source code, much appreciated.

  • Renters insurance provides coverage for damage or loss of personal property for people in rental housing. It’s to insure the renter’s belongings from theft or damage. In addition, renters insurance also provides liability coverage for people in rental housing if somebody is injured while in the rental place. In this case, the renter is sheltered from lawsuits or liability for the problems cause by him/her.

  • Okay… I want to thanks because it work’s and the step-by-step was so easy to understand… even for a not-well-english speaking person like me… So, thanks again…

  • Hello.
    See the thing is I bought DVDxcopy for my main burning and now I would like to back up my backup. I have Nero and want to us the dvdshrink and Nero for that pupose. Because of the fact that they are both dvd rippers they might have to share certain things. For example I had Sonic which is very similar to Nero and you cant have both of them installed at once it just won’t happen. So I guess I will settle for an answer for someone that has both Dvdxcopy and Dvdshrink working on there pc. Thank You

    [url=]dvd to ipod converter[/url]

  • Hey Guys, This article is very informative. Thank you for posting the additional resources. Thanks for share with us. Take care!

  • interesting post ! Good Job, thanks for adding the source code

  • Heii..Thanks for showing me how to integrate a Flex application with an HTML/Ajax application. All the best

  • Heii ..Keep a good work man! Congrats :)

  • Thanks for this example of Another Hybrid (HTML/Flex) :) useful one’ All the best

  • great example thanks so much

  • Really good and really interesting post. I expect (and other readers maybe :)) new useful posts from you!
    Good luck and successes in blogging!

  • This is cool. Sharing source codes is really generous. Thank you so much. It helps me a lot for my website to keep it running thoroughly.

  • That is something I am going to try. Thank You.

  • Hi! thanks for a very useful post. I have been trying to look for a better (HTML/Flex) example and i finally fund one. good job!

  • Very helpful and informative, thanks a million

  • Thanks for discussing your ideas with this blog. Furthermore, a fantasy regarding the financial institutions intentions any time talking about home foreclosure is that the bank will not have my payments. There is a degree of time in which the bank will take payments here and there. If you are far too deep inside hole, they may commonly require that you pay the payment completely. However, that doesn’t mean that they will have any sort of repayments at all. In the event you and the financial institution can manage to work a little something out, the particular foreclosure practice may end. However, should you continue to miss out on payments within the new program, the home foreclosure process can just pick up where it left off.

  • Wow, for an old post this is still packed with useful information. THanks!

  • I have noticed that credit restoration activity needs to be conducted with techniques. If not, you are going to find yourself causing harm to your standing. In order to reach your goals in fixing your credit score you have to see to it that from this time you pay all your monthly expenses promptly before their appointed date. It really is significant on the grounds that by not necessarily accomplishing so, all other steps that you will choose to use to improve your credit rank will not be helpful. Thanks for expressing your tips.

  • Thanks for the information. I can now add one more tool to my tool box.

  • Pingback: BRE U Value()

  • is this real exaple for that nice and intresting

  • I also used this ExternalInterface to communicate between Flex and JavaScript. ican easily navigate to the heell fire simply downloadead and installed

  • I am agreed with you html is so easy to implement and one can start the career in html pretty well i have learned some new technique i will share those with you let the day come in

  • nice

  • Excellent way of describing, and pleasant piece of writing to take facts
    about my presentation focus, which i am going to present in academy.

  • I am now not sure the place you are getting your information,
    however great topic. I needs to spend a while learning
    much more or understanding more. Thanks for excellent information I used to be on the lookout for this info
    for my mission.

  • thnx for u

  • obrg amigos

  • kaliteli,seri üretim ve uygun fiyatlarda burda.

  • yes lot thank u