New MDI-style Trader Desktop with Flex and Apollo

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.

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
This entry was posted in Flex. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

59 Comments

  1. Posted March 31, 2010 at 9:46 am | Permalink

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

  2. Posted July 16, 2010 at 12:41 am | Permalink

    I love the interface of this application.

  3. Oliver
    Posted July 29, 2010 at 8:41 am | Permalink

    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!

  4. Oliver
    Posted July 29, 2010 at 8:43 am | Permalink

    HTML HOST subclass

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

    }

  5. Posted August 2, 2010 at 2:23 am | Permalink

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

  6. Posted August 8, 2010 at 8:43 am | Permalink

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

  7. Posted August 14, 2010 at 10:17 pm | Permalink

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

  8. Posted August 26, 2010 at 6:54 am | Permalink

    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

  9. Posted August 27, 2010 at 1:34 pm | Permalink

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

3 Trackbacks

  1. By how to make money quickly on July 21, 2008 at 8:55 pm

    how to make money quickly…

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

  2. By About Desktop Applications « It’s all about RIA on October 14, 2008 at 12:16 am

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

  3. By Adobe AIR « Flex Generation Weblog on October 14, 2008 at 2:53 am

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

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>