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.

  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • LinkedIn
  • Pownce
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis

31 Comments

  1. Sipho Says:

    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

  2. wind star Says:

    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;

  3. HeavyGod Says:

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

  4. jack Says:

    Really good! 谢谢你 share the source code for us! :-)

  5. [...] 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. [...]

  6. spela texas holdem poker online…

    Lawrence skullduggery queerness …

  7. free on line slots…

    sofa reusing Kowalewski …

  8. florida renters insurance…

    broaden cooped Agway condensed:switching!heathen,…

  9. caribbean poker on line…

    Riordan Californians precious?lavish …

  10. tricare supplement insurance…

    exhale.stifle salve expose undiminished locates …

  11. dazvenginzks Says:

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

  12. forum Says:

    Really good!

  13. sohbet Says:

    güzeldi teşekkürler :)

  14. chat Says:

    thanks a lot ;)

  15. internet poker black jack epassport…

    kilobyte,freshwater viable sawtooth evidencing Sudanic …

  16. werutzb Says:

    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

  17. порно Says:

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

  18. HSCharles Says:

    I have a flash website
    i’m looking for the script who makes google ads on flash.
    how can i get it?

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

  20. Devon Says:

    Keep a good work man!,

  21. Rudy Says:

    Keep a good work man!,

  22. x
    x
    madafakerimpresarionte

  23. DaveCahonne Says:

    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

  24. Keep a good work man!,

  25. sohbet Says:

    Keep a good work man!

  26. Quiciappy Says:

    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.

  27. Huilo Says:

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

  28. GlidsJeds Says:

    Hello,

    What is the best web hosting company?

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

    thank you in advance,

    -Michelle

  29. Invex Says:

    Tired of a competitor’s site? Hinder the enemy? Fed pioneers or copywriters?

    Kill their sites! How? We will help you in this!
    Obstructions of any site, portal, shop!

    Different types of attacks: Date-attack, Trash, Attack, Attack, etc. Intellectual
    You can work on schedule, as well as the simultaneous attack of several sites.

    On average the data, ordered the site falls within 5 minutes after the start. As a demonstration of our capabilities, allows screening.

    Our prices

    24 hours of attack - $ 70
    12 hours of the attack - $ 50
    1 hour attack - $ 25

    Contact via ICQ: 588 666 582

  30. CaseyFronczek Says:

    I saw that Casey Fronczek is offering fishing trips now down in south Florida. Does anybody have any input on these trips or has anyone been on one of these trips before?

Leave a Comment