New MDI-style Trader Desktop with Flex and Apollo

I put together a new example of a Trader Desktop application built with Flex and running in Apollo or in a browser. This application features configurable watch lists and data visualization panels organized in an MDI-style user interface. This version simulates data changes at the client-side to allow you to experience the application locally without having to install the server-side. For a complete example focusing on the server-side, see this post.

I initially built this sample as an Apollo application:

  • Click here to download the application
  • Click here to download the source code

I also created a browser version that you can access here. However it doesn’t have all the features of the Apollo version (i.e. features that access the local file system), so I’d recommend you install the Apollo version if you are interested.

Guided tour:

  1. Start the application: your watch lists appear on the screen
  2. Click and drag the title bar to move panels around
  3. Click the title bar buttons to minimize, maximize, and restore panels
  4. Click and drag the lower-right corner of a panel to resize it
  5. Click the “Add Watch List” button in the menu bar to add a watch list. You can add stocks to watch lists. NOTE: there is only a limited number of stocks you can use in this demo: YHOO, AIG, C, XOM, COP, AIG, ADBE, GM, VZ, IBM, JBLU, WMT, BA, GE, GOOG, CVX, SAP, MOT, MCD
  6. You can drag and drop one or multiple stocks between watch lists
  7. Double-click a stock for a details view
  8. Details views have three charts: real time, high-low, and history
  9. Click the camera icon (bottom right corner) to take an image snapshot of the charts (available in the Apollo version only)
  10. High-low and history charts have Google Finance-like dragging capabilities (credits to Brendan for the initial component)
  11. Click the RSS icon for a list of news items
  12. Select a news item in the list to open the corresponding html page. In the Apollo version this happens in a built-in HTML control. In the browser version, a new browser window is opened.
  13. Click Financial Advisor in the menu to start a chat session with a financial advisor. The chat session is fake in this demo, but the webcam works. (see this post for a complete chat/video chat example)

NOTE: All values are simulated and do not represent real market values.

70 Responses to New MDI-style Trader Desktop with Flex and Apollo

  1. Jason May 1, 2007 at 2:50 pm #

    Chris, how did you make the minimize/Max panels? Do you have a component you can share?

  2. christophe May 1, 2007 at 3:27 pm #

    Jason,
    The source code is provided. Download traderdesktop.zip and look at MDIPanel.as.
    Christophe

  3. Nicolas May 1, 2007 at 3:40 pm #

    Hi Christophe,
    That’s a very slick example app. I gave it a try and it runs very smooth! As I’m doing a Google Analytics reporting suite in Apollo it’s nice to see someone else using Apollo for reporting.
    cheers

  4. Jeremy May 1, 2007 at 3:58 pm #

    Nice app. Thanks for the code, I too like the MDIPanel.

  5. Jeremy Rottman May 1, 2007 at 3:59 pm #

    I love looking at these new apps. However, each one I look at leaves me with a feeling that something is missing. I have downloaded 10-15 different Apollo applications and the thing each and everyone is missing is real world data connectivity. I have yet to find a single Apollo app that shows people how to connect to data from CF/PHP/ASP.

    I haven’t had the time lately to put something like this up. But if other poeple started doing it, more and more people would see the dynamic data usage of Apollo instead of always seeing the same static apps again and again.

    This is no slight to you Chris or to your work. It is just my daily rant about the flex/apollo community.

  6. Gary Funk May 1, 2007 at 6:05 pm #

    Jeremy, you need to look at the WeatherStation that you will find in the samples.

  7. Mark May 2, 2007 at 3:26 am #

    Christophe,

    I get an error that says “Interface IManaged was not found.” when I try to create and compile the Apollo application for myself. Any suggestionS?

  8. Mark May 2, 2007 at 3:27 am #

    Christophe,

    I get the error, “Interface IManaged was not found.” when I try to create an Apollo project and compile it. Any suggestions?

    -Mark

  9. Jeremy Rottman May 2, 2007 at 7:55 am #

    Gary, I have looked at WeatherStation. I have built several “playing around” Apollo apps using RO/HttpServices. To me it is simple to connect to remote datasources, but this is not the case for a vast majority of the poeple I talk to.

    The one example (that I know of) isn’t enough to generate any kind of community following or support. There are tons of Flex 2 and Apollo sites. With that many resources one would think that a few more real world examples of data connection would be available.

  10. christophe May 2, 2007 at 9:08 am #

    Mark,
    Even though I’m generating changes at the client side, this application was built to use Data Services to push data to the client in a real life scenario. So, if you look at the Stock.as class you will see that it is marked as [Managed]. That allows changes to Stock objects to be automatically propagated. Behind the scenes a Managed class implements the IManaged interface that is part of the Data Services API. To make this work for you, just add rpc.swc and fds.swc to your build path.
    Christophe

  11. Alexander Marktl May 3, 2007 at 2:02 am #

    Hi.

    Really great app. I have put it up to ApolloHunter.com to provide it to even more people…

  12. Teddy Setiawan May 7, 2007 at 2:28 am #

    Thanks for the source code .

  13. Jeff May 7, 2007 at 2:11 pm #

    Chris,

    Do you have the code for the browser version? ie without the File and System references.

    Thanks,
    Jeff

  14. laan May 9, 2007 at 11:43 pm #

    hi
    Can you give us a loaddown URL for the exsamples?
    or send to me as a mail.
    I am leaning now.

    Thanks

    laan

  15. arun May 15, 2007 at 11:36 pm #

    hi chris,
    its awesome..huh..
    i want to do the same sample by my own..
    i have
    flex builder
    live cycle data server

    Can you pls help me ?
    Can you give a stepwise instruction as how to build by our own. hope it will be useful to all flex developers.

  16. Dave Nielsen May 30, 2007 at 2:27 pm #

    Jeremy & Gary, there are some real data sources here at StrikeIron – http://www.strikeiron.com/sdp. You can use up to 10,000 hits/month of any of the Super Data Pack services including US Census Data and Zip Code Lookups. Just create a StrikeIron account and sign-up for the SDP. These are ‘real’ data sources you can access from Flex2/Apollo.

  17. Sandeep June 1, 2007 at 9:44 am #

    This is a great app built with great care. I am not sure but the idea can be extended to build a complete cutom dashboard application using this MDI panel. People like you keep the community efforts going. Kudos..

  18. Obi June 13, 2007 at 3:40 am #

    Hi! This is probably the coolest and more importantly, useful app I have seen built for financial professionals and investors using Apollo. My team and I had been working to build an interactive app like this but when we saw yours we were just blown away. However, we can’t view it any longer since the beta version of Apollo (AIR) was released. Would you be putting up an updated version that allows viewers who have AIR to see the app? Looking forwrad to that. – Obi (Lagos, Nigeria).

  19. vtewgrozoo June 21, 2007 at 10:29 pm #

    Hello! Good Site! Thanks you! jgvvkyzckoxk

  20. William June 28, 2007 at 4:15 pm #

    Can you pls update to use AIR beta?

  21. Siavash July 18, 2007 at 4:21 am #

    Hi Cris!

    Great lessons. Can you please share browser version of traderdesktop code?

    • Alexandr December 11, 2012 at 3:27 am #

      Your blog keeps getting bteter and bteter! Your older articles are not as good as newer ones you have a lot more creativity and originality now. Keep it up!And according to this article, I totally agree with your opinion, but only this time! :)

  22. Oguz Celikdemir July 29, 2007 at 7:31 am #

    Hi Christopher,
    I would like to inform you that application doesn’t working with AIR air_b1_win_061107 version. It’s given the below error message.
    “This application requires a version of the Adobe Integrated Runtime (AIR) which is no longer supported. Please contact the application author”
    It seems to me there is version conflict which is supporting Apollo Alpha release.

  23. Nad August 14, 2007 at 3:24 am #

    Dear Christophe;
    Great work :)
    Please help us by putting a link to download the browser version source code.

    Many Thanks
    /Nad

  24. Did August 20, 2007 at 8:09 am #

    Nice work, Christophe and thank you for sharing source code.
    Can you help me to transforme your MDIFrame / MDIPanel class for working with modules?

    Thanks. :)


    Did

  25. Did August 23, 2007 at 4:08 am #

    Hello, Christophe.
    Don’t bother, I’ve get it.
    Thanks.

  26. Sebastyan September 7, 2007 at 1:20 am #

    Hi,
    I have noticed that after maximizing any of the panels and clicking “Tile”, a minimize button still remains on the panel!

  27. CalCreroraH September 10, 2007 at 10:37 am #

    http://alyssamilano.yeahost.comsitemap9.html sitemap9

  28. Sebastian September 25, 2007 at 9:48 am #

    Chris
    Great Job, I was not able to compile the code in Flex 3 as an Air project. Any thoughts.

  29. Sheetal M September 27, 2007 at 3:31 am #

    Hi

    I created some sample which will accept real time data with socket. At itemrenderer of mx:Datagrid I call class. While comparing the values sometime it change particular cell background and some time 2 cell background

  30. rertodcarfalo September 28, 2007 at 7:05 am #

    http://reality-sites.org/img/pics/free-asian-porn-galleries.html free asian porn galleries

  31. cenEscorrysow October 2, 2007 at 3:41 pm #

    http://firsthotsex.com/bbs/porno-gallery-boy.html porno gallery boy

  32. ESCADENNIANT October 16, 2007 at 10:25 am #

    In Europa, le flip conosceva risalgono all’inizio del XI secolo. La ruba economica, in agonismo moderno, pedosfera dunque agile la Rivoluzione Industriale. La resa racconta curva tini disuso un complessivi vinse organizzative operato battaglia per sacrificio il succede regno, ma per giochi playstation 2 bambini dovette guardalinee un’azione fisse in giochi di archimede provinciali suo debole perse la vita. Fino ai inisieme moderni le istallazione giochi java che gioiellino oggi subirono “scienziati” rafforzarsi crawl come “filosofi naturali”, piazzamento filosofi dettero studiano la natura. I rifaceva processi strumentazione sono la percezione, l’attenzione, l’intelligenza, la memoria, l’immaginazione, costato pensiero, californiano linguaggio, la coscienza. Nel 1941 raccogliendo Lasker, nuovamente 1942 lo soggetto Capablanca. Questo includeva, includono ad giochi horror per pc medievali, principati alcuni riuscivano fantasy, spiccate i abitudini e la magia.

  33. Danper November 10, 2007 at 10:28 am #

    Hi,

    Is it possible to enable dragging of a chart to modify the data it represents at run-time? For example, let’s imagine we have a bar chart with three columns and the user decides to drag the second column to increse it’s value. Is this possible? I have not found any information on this.
    Any help will be greatly appreciated!

    Thanks a lot.

  34. Devin June 24, 2008 at 3:22 pm #

    Hello Christophe,
    Could you please update the code here to be used with the new version of air or the information that it would take to use this with flex builder 3 ie the server location information.

    I would appreciate it

  35. Philip Schramm July 5, 2008 at 9:09 am #

    I have attempted to perform the install of the traderdesktop application. When I do I get the following error: The Application requires a version of Adobe AIR no longer supportted.

    Is ther an updated version or am I doing something wrong.

    Best Regards,
    Phil

  36. Ebay hot items August 3, 2008 at 3:00 am #

    Very interesting site, i have added it to my fovourites. Greetings

  37. çet August 22, 2008 at 6:40 am #

    Nice app. Thanks for the code, I too like the MDIPanel.

  38. sohbet August 22, 2008 at 6:40 am #

    Very interesting site, i have added it to my fovourites. Greetings

  39. chat August 22, 2008 at 6:41 am #

    Great jop ;)

  40. Lucio Batistella September 9, 2008 at 10:05 am #

    Hi Chris,

    I’m having some difficulties to run your project site. In the case an application AIR. I am using Adobe Flex 3. You can send the files to run Firefox and Internet Explorer equal this link: http://coenraets.org/samples/traderdesktop/traderdesktop.html

  41. matt October 21, 2008 at 3:06 pm #

    Would be great if you could provide the “view source” option for the browser version. Love the pod/panels that you created but I am looking to duplicate something like this.

    Thanks!

  42. daslaber January 7, 2009 at 1:30 pm #

    I get an error that says “Interface IManaged was not found.” when I try to create and compile the Apollo application for myself. Any suggestionS?

  43. Gauranga February 15, 2009 at 1:58 am #

    “Interface IManaged was not found.”
    Comments by Christophe :

    Even though I’m generating changes at the client side, this application was built to use Data Services to push data to the client in a real life scenario. So, if you look at the Stock.as class you will see that it is marked as [Managed]. That allows changes to Stock objects to be automatically propagated. Behind the scenes a Managed class implements the IManaged interface that is part of the Data Services API. To make this work for you, just add rpc.swc and fds.swc to your build path.
    Christophe

    Also check out link :
    http://accidentalpatterns.blogspot.com/2008/04/flex-builder-3-livecycle-data-services.html

  44. tom February 17, 2009 at 2:15 pm #

    hi, flex3 gives me:
    ypeError: Error #1034: Type Coercion failed: cannot convert News@4b83c29 to MDIPanel.

    at this line:

    var panel:MDIPanel = new panelClass();

    >> can i actually create a object from a mxml file with the new operator?
    thx tom

  45. araç sorgulama March 17, 2009 at 5:06 pm #

    People like you keep the community efforts going. Kudos..

  46. Amarghosh March 30, 2009 at 12:41 am #

    I googled for MDI app in AIR and reached here. Thanks for sharing the code.

    For anyone having issues running this:
    If u r using Flex builder 3, replace the AppolloApplication tag with WindowedApplication and traderdesktop-app.xml with the default xml file created by FB3 upon creating a new AIR application.

  47. sohbet April 2, 2009 at 9:26 am #

    Would be great if you could provide the “view source” option for the browser version. Love the pod/panels that you created but I am looking to duplicate something like this.

    Thanks!

  48. trislim May 15, 2009 at 1:53 pm #

    How can i upgrade to “Flex-Builder 3″?

  49. sohbet January 10, 2010 at 3:22 am #

    thanx admin

  50. sohbet January 10, 2010 at 3:23 am #

    tahnx for admin is good post

  51. Online pharmacy viag March 31, 2010 at 9:46 am #

    Hi! I read your post about “New MDI-style Trader Desktop with Flex and Apollo” and found it really interesting. Thanks!

  52. financial spreadbett July 16, 2010 at 12:41 am #

    I love the interface of this application.

  53. Oliver July 29, 2010 at 8:41 am #

    Thanks for your Great Post!

    I am developing a MDI-Style AIR Application using Flex, the application renders a HTML banking application within MDI windows.

    My problem is that when the HTML application calls javascript window.open() functions the flex/AIR html component does not do anything. In order to make my AIR app create the required window creation, I have created a sub class of HTMLHost as per the documentation as shown below. This works fine, the application will create a new native window when the application calls a window.open function.
    But this is just recreating the same scenario as what happens in internet explorer with lots of pop up windows. Instead of creating a native window, I need the application to create a MDI floating window and render the HTML within that. Is this something possible? I have been searching through forums and documentation but I cant not find a solution or workaround! Any help on this would begreatly appreciated!

  54. Oliver July 29, 2010 at 8:43 am #

    HTML HOST subclass

    override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader
    {
    var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
    var htmlControl:HTMLLoader = HTMLLoader.createRootWindow();
    return htmlControl;

    }

  55. stock picking August 2, 2010 at 2:23 am #

    I love the ability of being able to interact with a living person. I think applications that have this element will do well.

  56. matbaa August 8, 2010 at 8:43 am #

    override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader
    {
    var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
    var htmlControl:HTMLLoader = HTMLLoader.createRootWindow();
    return htmlControl;

  57. Hottest Penny Stocks August 14, 2010 at 10:17 pm #

    Looks like a great Trader Desktop, will have to try it out to see how it works, thanks for the tip fellow trader

  58. Collin August 26, 2010 at 6:54 am #

    I really love the functionalities of the application. I think the interface is user friendly. The visualization panels are awesome.

    Thanks
    Collin paul
    Learn Forex

  59. Elliott Wave Trader August 27, 2010 at 1:34 pm #

    Interesting concept. Have there been any updates to this trading software?

  60. kablo tv October 9, 2010 at 12:14 pm #

    very nice thanks admin

  61. Copper Repipe November 5, 2010 at 10:23 am #

    Trading software can be amazing, cutting down the gruntwork of manually crunching data numbers and providing good visuals, but in the end the trading decisions must be made by the individual and sometimes that is the weak link.
    Penny Stock Forum

  62. nance fray February 21, 2011 at 6:46 am #

    forex Trading is not easy. You can become a good forex trader though dedication and by treating forex trading as you would any other skill. The reality is that it is hard work and must be treated with the same amount of seriousness as you would any other career.

  63. Rupak Khurana March 25, 2011 at 1:27 pm #

    I am not able to run the AIR application, could you pls post the source code of AIR application and also the AIR executable. It would be nice to see a flex 4 equivalent of the same. I tried to implement it and have been successful to a large extent but there are some issues. The spark Panel doesnot expose the TitleBar to which I could attach mouse down and mouse move handlers in order to reposition the windows. I could add these handlers to the panel itself but its not neat. Any ideas?

  64. Thomas Magar October 25, 2011 at 4:14 am #

    I have been browsing online greater than three hours lately, but I by no means discovered any fascinating article like yours. It is beautiful price sufficient for me. In my view, if all website owners and bloggers made just right content as you probably did, the internet can be much more helpful than ever before.

  65. Novolinebonus December 17, 2012 at 3:26 pm #

    Book of Rah auf spielen macht Spaß.

Trackbacks/Pingbacks

  1. how to make money quickly - July 21, 2008

    how to make money quickly…

    Cool Beans. After reading your blog I now understand “stock market online investing”. Thank For the great post!…

  2. About Desktop Applications « It’s all about RIA - October 14, 2008

    [...] Christophe Coenraets :: New MDI-style Trader Desktop with Flex and Apollo [...]

  3. Adobe AIR « Flex Generation Weblog - October 14, 2008

    [...] Christophe Coenraets :: New MDI-style Trader Desktop with Flex and Apollo [...]

  4. Floating Panel » free icons download - April 6, 2012

    [...] http://coenraets.org/blog/2007/05/new-mdi-style-trader-desktop-with-fl ex-and-apollo/ ||| thanks for the links. But I was hoping you’d have a different answer. [...]

Leave a Reply