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.

, , ,

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

  1. Sipho November 18, 2007 at 2:19 pm #

    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 November 26, 2007 at 6:46 am #

    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 November 27, 2007 at 1:31 am #

    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 December 5, 2007 at 1:42 am #

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

  5. dazvenginzks August 3, 2008 at 5:02 pm #

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

  6. forum August 22, 2008 at 5:42 am #

    Really good!

  7. radyo dinle August 22, 2008 at 5:42 am #

    Good thanks ;)

  8. sohbet August 22, 2008 at 5:43 am #

    güzeldi teşekkürler :)

  9. chat August 22, 2008 at 5:44 am #

    thanks a lot ;)

  10. werutzb October 7, 2008 at 9:44 pm #

    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

  11. порно October 15, 2008 at 11:10 pm #

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

  12. HSCharles November 14, 2008 at 11:49 am #

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

  13. lapto battery November 20, 2008 at 9:22 pm #

    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…

  14. Devon November 27, 2008 at 10:58 am #

    Keep a good work man!,

  15. Rudy November 27, 2008 at 4:01 pm #

    Keep a good work man!,

  16. ReseItedews March 5, 2009 at 12:06 am #

    x
    x
    madafakerimpresarionte

  17. DaveCahonne March 10, 2009 at 10:11 am #

    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

  18. araç sorgulama March 17, 2009 at 4:59 pm #

    Keep a good work man!,

  19. sohbet April 2, 2009 at 9:21 am #

    Keep a good work man!

  20. Quiciappy April 4, 2009 at 1:21 am #

    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.

  21. Huilo April 5, 2009 at 6:04 am #

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

  22. GlidsJeds June 11, 2009 at 9:24 am #

    Hello,

    What is the best web hosting company?

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

    thank you in advance,

    -Michelle

  23. siemens servisi November 4, 2009 at 3:42 am #

    thanx for example

  24. sohbet odası November 24, 2009 at 6:11 am #

    how are you babyy aq

  25. chat December 3, 2009 at 12:01 pm #

    very very good

  26. Msn Nicks March 30, 2010 at 8:03 pm #

    Very Nicee

  27. Film Dizi Seyret June 10, 2010 at 3:09 am #

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

  28. rottweiler July 16, 2010 at 10:04 pm #

    thanks for information

  29. lottery software August 4, 2010 at 1:43 pm #

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

  30. matbaa August 8, 2010 at 9:41 am #

    Good thanks ;)

  31. kablo tv October 9, 2010 at 12:44 pm #

    thanks you

  32. how to win lottery October 24, 2010 at 11:42 am #

    Thanks for adding the source code, much appreciated.

  33. Sev Cabrera November 24, 2010 at 4:54 pm #

    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.

  34. thelotteryblackbook December 5, 2010 at 11:27 pm #

    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…

  35. audio recorder January 17, 2011 at 4:00 pm #

    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=http://www.topvideoconverter.com/dvd-to-ipod-converter/]dvd to ipod converter[/url]

  36. blackberry January 20, 2011 at 8:19 am #

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

  37. how to win the lotte January 21, 2011 at 8:09 am #

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

  38. how to win the lotte February 5, 2011 at 1:49 am #

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

  39. how to win at blackj February 10, 2011 at 12:30 pm #

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

  40. sports betting syste February 16, 2011 at 3:44 pm #

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

  41. Larry Blair February 17, 2011 at 5:43 am #

    great example thanks so much

  42. Site Launch System bonus February 24, 2011 at 12:11 pm #

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

  43. edelyn cabalhin March 15, 2011 at 6:08 pm #

    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.

  44. Lottery Black Book March 28, 2011 at 12:42 pm #

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

  45. Johann of How to get April 10, 2011 at 9:58 pm #

    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!

  46. Ryan June 17, 2011 at 10:55 am #

    Very helpful and informative, thanks a million

  47. Buy Christian Louboutin Sneakers July 14, 2011 at 9:29 pm #

    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.

  48. Best Lottery Numbers August 6, 2011 at 11:55 pm #

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

  49. cheap lv bags September 22, 2011 at 6:09 am #

    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.

  50. Blackberry messenger spy December 26, 2011 at 6:44 am #

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

  51. travel insurance for seniors reviews February 21, 2012 at 2:11 pm #

    is this real exaple for that nice and intresting

  52. travel insurance for seniors reviews February 21, 2012 at 2:16 pm #

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

  53. Android Spyware February 22, 2012 at 2:04 pm #

    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

  54. BlackBerry spy February 23, 2012 at 10:16 pm #

    nice

  55. 孤高之人 January 18, 2013 at 10:03 pm #

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

  56. 検査合格 エルメス 傘 November 3, 2013 at 3:13 pm #

    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.

Trackbacks/Pingbacks

  1. Vinny Carpenter’s blog » Daily del.icio.us for Dec 01, 2007 through Dec 03, 2007 - December 11, 2007

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

  2. spela texas holdem poker online - February 17, 2008

    spela texas holdem poker online…

    Lawrence skullduggery queerness …

  3. free on line slots - February 21, 2008

    free on line slots…

    sofa reusing Kowalewski …

  4. florida renters insurance - July 17, 2008

    florida renters insurance…

    broaden cooped Agway condensed:switching!heathen,…

  5. caribbean poker on line - July 19, 2008

    caribbean poker on line…

    Riordan Californians precious?lavish …

  6. tricare supplement insurance - August 3, 2008

    tricare supplement insurance…

    exhale.stifle salve expose undiminished locates …

  7. internet poker black jack epassport - September 18, 2008

    internet poker black jack epassport…

    kilobyte,freshwater viable sawtooth evidencing Sudanic …

  8. BRE U Value - January 2, 2012

    Hawt Post…

    Superb story to think through….

Leave a Reply