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:
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:
- Start the application: your watch lists appear on the screen
- Click and drag the title bar to move panels around
- Click the title bar buttons to minimize, maximize, and restore panels
- Click and drag the lower-right corner of a panel to resize it
- 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
- You can drag and drop one or multiple stocks between watch lists
- Double-click a stock for a details view
- Details views have three charts: real time, high-low, and history
- Click the camera icon (bottom right corner) to take an image snapshot of the charts (available in the Apollo version only)
- High-low and history charts have Google Finance-like dragging capabilities (credits to Brendan for the initial component)
- Click the RSS icon for a list of news items
- 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.
- 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.
Chris, how did you make the minimize/Max panels? Do you have a component you can share?
Jason,
The source code is provided. Download traderdesktop.zip and look at MDIPanel.as.
Christophe
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
Nice app. Thanks for the code, I too like the MDIPanel.
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.
Jeremy, you need to look at the WeatherStation that you will find in the samples.
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?
Christophe,
I get the error, “Interface IManaged was not found.” when I try to create an Apollo project and compile it. Any suggestions?
-Mark
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.
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
Hi.
Really great app. I have put it up to ApolloHunter.com to provide it to even more people…
Thanks for the source code .
Chris,
Do you have the code for the browser version? ie without the File and System references.
Thanks,
Jeff
hi
Can you give us a loaddown URL for the exsamples?
or send to me as a mail.
I am leaning now.
Thanks
laan
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.
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.
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..
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).
Hello! Good Site! Thanks you! jgvvkyzckoxk
Can you pls update to use AIR beta?
Hi Cris!
Great lessons. Can you please share browser version of traderdesktop code?
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.
Dear Christophe;
Great work :)
Please help us by putting a link to download the browser version source code.
Many Thanks
/Nad
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
Hello, Christophe.
Don’t bother, I’ve get it.
Thanks.
Hi,
I have noticed that after maximizing any of the panels and clicking “Tile”, a minimize button still remains on the panel!
http://alyssamilano.yeahost.comsitemap9.html sitemap9
Chris
Great Job, I was not able to compile the code in Flex 3 as an Air project. Any thoughts.
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
http://reality-sites.org/img/pics/free-asian-porn-galleries.html free asian porn galleries
http://firsthotsex.com/bbs/porno-gallery-boy.html porno gallery boy
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.
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.
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
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
how to make money quickly…
Cool Beans. After reading your blog I now understand “stock market online investing”. Thank For the great post!…
Very interesting site, i have added it to my fovourites. Greetings
Nice app. Thanks for the code, I too like the MDIPanel.
Very interesting site, i have added it to my fovourites. Greetings
Great jop ;)
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
[...] Christophe Coenraets :: New MDI-style Trader Desktop with Flex and Apollo [...]
[...] Christophe Coenraets :: New MDI-style Trader Desktop with Flex and Apollo [...]
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!
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?
“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
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
People like you keep the community efforts going. Kudos..
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.
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!
How can i upgrade to “Flex-Builder 3″?
hi good thank you That allows changes to Stock objects to be automatically propagated.