Christophe Coenraets» Air http://coenraets.org/blog Mobile, Cloud, HTML, JavaScript, Java, PHP, Flex Fri, 03 Feb 2012 05:02:45 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 MobileTrader for iOS, Android, and PlayBook: Source code now available on GitHub http://coenraets.org/blog/2011/07/mobiletrader-for-ios-android-and-playbook-source-code-now-available-on-github/?utm_source=rss&utm_medium=rss&utm_campaign=mobiletrader-for-ios-android-and-playbook-source-code-now-available-on-github http://coenraets.org/blog/2011/07/mobiletrader-for-ios-android-and-playbook-source-code-now-available-on-github/#comments Wed, 20 Jul 2011 18:13:51 +0000 Christophe http://coenraets.org/blog/?p=1551 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> I made some changes to the MobileTrader application and took the opportunity to push the source code to GitHub. You can get it here: https://github.com/ccoenraets/MobileTrader

This version was built with the shipping version of Flex and Flash Builder 4.5.1 which has built-in support for iOS, Android and the BlackBerry PlayBook.

The most notable change in this version is that I enabled the real time collaboration feature (with your financial advisor). This includes video conference, user interface synchronization, etc. You will need a LiveCycle Collaboration Service room URL to enable this feature. You can sign up for a developer version here: https://afcs.acrobat.com. You can still use the application without enabling the real time collaboration feature.

Usual disclaimer about the source code: This is a sample application, I intentionally cut some corners, etc.

If you haven’t seen the application before, watch it here:

Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2011/07/mobiletrader-for-ios-android-and-playbook-source-code-now-available-on-github/feed/ 7 Flex Charts on the iPad http://coenraets.org/blog/2011/04/flex-charts-on-the-ipad/?utm_source=rss&utm_medium=rss&utm_campaign=flex-charts-on-the-ipad http://coenraets.org/blog/2011/04/flex-charts-on-the-ipad/#comments Wed, 20 Apr 2011 14:51:13 +0000 Christophe http://coenraets.org/blog/?p=1469 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> I continue to see a lot of interest for dashboards applications on mobile devices (particularly on tablets), and I think that interactive data visualization applications are really a sweet spot for Flex. As an example, I built a simple dashboard aggregator using the out-of-the box charting components available in Flex. The same application can run on iOS (iPhone/iPad/iPod Touch), Android devices, and on the BlackBerry PlayBook. If you are an existing Flex developer, this will look very familiar: these are the same charts you also run in the browser or on the desktop on traditional computers. Check out the video:

For more data-visualization applications built with Flex, check out the Mobile Trader and the Sales Pipeline applications.

Usual disclaimer: I’m not a designer, so this is mostly developer artwork. You can of course polish, customize and style the out-of-the-box-experience.

Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2011/04/flex-charts-on-the-ipad/feed/ 26 Flex-Powered Multi-Touch Data Visualization on the iPad, Android, and the BlackBerry PlayBook http://coenraets.org/blog/2011/04/flex-powered-multi-touch-data-visualization-on-the-ipad-android-and-the-blackberry-playbook/?utm_source=rss&utm_medium=rss&utm_campaign=flex-powered-multi-touch-data-visualization-on-the-ipad-android-and-the-blackberry-playbook http://coenraets.org/blog/2011/04/flex-powered-multi-touch-data-visualization-on-the-ipad-android-and-the-blackberry-playbook/#comments Fri, 15 Apr 2011 14:30:43 +0000 Christophe http://coenraets.org/blog/?p=1452 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]>

Over the past couple of weeks, I’ve visited many enterprise customers to spread the exciting news and discuss their mobile strategy. I found it interesting that most of them were focusing primarily on tablets (instead of phones), and that the application they were focusing on was almost always a dashboard or at least involved a lot of charting components. It is true that tablets such as the iPad, the Xoom, and the BlackBerry PlayBook are amazing devices for data visualization.

Multi-touch is revolutionizing the way we interact with applications. The idea of user interfaces behaving like real life objects has been kicked around for a long time, and touch screens remove an important barrier. In the area of data visualization, multi-touch can have a particularly transformative effect: there are definitely a lot of opportunities for more “natural” data manipulation and exploration.

So, as an exercise, I built an interactive sales dashboard using Flex to explore the possibilities.

Check out the video (running on an iPad). Of course, the same application can run on Android, on the BlackBerry PlayBook, and in the browser or as a desktop application on traditional computers.

This is just a small example of thinking about data visualization differently. Charts don’t have to be read-only: If the data isn’t right, change it right there (“in place editing”).

I’m looking forward to seeing what people will come up with in this exciting field.

Disclaimer: I’m not a designer. This is still mostly developer artwork. The goal of this demo is to experiment with new ways to visualize and modify data, and not to recommend this specific implementation.

Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2011/04/flex-powered-multi-touch-data-visualization-on-the-ipad-android-and-the-blackberry-playbook/feed/ 10 Flex on the iPad http://coenraets.org/blog/2011/03/flex-on-the-ipad/?utm_source=rss&utm_medium=rss&utm_campaign=flex-on-the-ipad http://coenraets.org/blog/2011/03/flex-on-the-ipad/#comments Wed, 23 Mar 2011 17:25:27 +0000 Christophe http://coenraets.org/blog/?p=1395 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> Here is a video showing a sample Flex application running on the iPad. This Mobile Trader application shows chart manipulation and drill-downs using touch events, real time market data updates (in lists and charts), as well as video-conferencing (with your financial advisor) and screen synchronization between clients (“simulations” and “what-ifs” collaboration use cases).

In addition to the iPad 2, I also show the same Flex application running on an iPod Touch and on an Android tablet (Samsung Galaxy Tab).

This application was built with the current engineering builds of Flex and AIR with iOS support.

Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2011/03/flex-on-the-ipad/feed/ 96 New Mobile Trader Desktop Demo App for Android http://coenraets.org/blog/2010/10/new-mobile-trader-desktop-demo-app-for-android/?utm_source=rss&utm_medium=rss&utm_campaign=new-mobile-trader-desktop-demo-app-for-android http://coenraets.org/blog/2010/10/new-mobile-trader-desktop-demo-app-for-android/#comments Tue, 26 Oct 2010 16:19:00 +0000 Christophe http://coenraets.org/blog/?p=1282 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> I built a new “Mobile Trader Desktop” application that I published on the Android Market. This is a demo application (with simulated data) built with Flex “Hero” and running on AIR for Android.

To install the application, just search for “Mobile Trader” on the Android Market, or access the following URL from your device’s browser: market://search?q=pname:air.MobileTrader.

You can download the source code (project file) here. You need Flash Builder Burrito (available here) to open this project.

Quick Application Walkthrough

The “Assets” tab shows a summary of your investment portfolio’s progress. You can use swipe and zoom gestures on the chart at the bottom of the screen to navigate through historical data. Notice that if you rotate your device (in landscape), the layout changes to display a full screen view of the chart. The charts in this application are built using simple FXG paths (not mx charts).


The “Watch” tab shows a price grid with values changing in real time. In this demo the feed is simulated at the client side, but I will post another version of the application that connects to an LCDS server. If you tap a stock in the list, you get a real time chart view of the updates of the selected stock.

If you rotate your device, the layout changes to better fit the chart in landscape view.

Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2010/10/new-mobile-trader-desktop-demo-app-for-android/feed/ 8 My Employee Directory Application Published on the Android Market http://coenraets.org/blog/2010/10/my-employee-directory-application-published-on-the-android-market/?utm_source=rss&utm_medium=rss&utm_campaign=my-employee-directory-application-published-on-the-android-market http://coenraets.org/blog/2010/10/my-employee-directory-application-published-on-the-android-market/#comments Wed, 20 Oct 2010 15:49:04 +0000 Christophe http://coenraets.org/blog/?p=1271 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> I just published my AIR-for-Android Employee Directory application to the Android Market. If you have an Android device you can find it by searching “Employee Directory” from within the Market application.

This is a new version of the application. One of the new features in this version is that it allows you to easily import your own data (click the Menu button on your device to access the “Import Data” screen).

You can find more information on the application companion page: http://coenraets.org/directory.




Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2010/10/my-employee-directory-application-published-on-the-android-market/feed/ 8 Real Time Trader Desktop for Android Updated http://coenraets.org/blog/2010/09/real-time-trader-desktop-for-android-updated/?utm_source=rss&utm_medium=rss&utm_campaign=real-time-trader-desktop-for-android-updated http://coenraets.org/blog/2010/09/real-time-trader-desktop-for-android-updated/#comments Thu, 02 Sep 2010 18:10:40 +0000 Christophe http://coenraets.org/blog/?p=1009 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> I updated my Real Time Trader Desktop for Android sample application to work with the latest AIR for Android build (8/26/2010). To make it easier to find the latest version of the application, I also created a project page for the application where you will always be able to download the lastest build. That way you won’t have to skim through blog posts to make sure you found the latest one.

Both the apk file and the source code are available for download on the project page.

Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2010/09/real-time-trader-desktop-for-android-updated/feed/ 4 Employee Directory for "AIR for Android" Updated http://coenraets.org/blog/2010/09/employee-directory-for-air-for-android-updated/?utm_source=rss&utm_medium=rss&utm_campaign=employee-directory-for-air-for-android-updated http://coenraets.org/blog/2010/09/employee-directory-for-air-for-android-updated/#comments Thu, 02 Sep 2010 18:03:07 +0000 Christophe http://coenraets.org/blog/?p=1000 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> I updated my Employee Directory on AIR for Android sample application to work with the latest AIR for Android build (8/26/2010). To make it easier to find the latest version of the application, I also created a project page for the application where you will always be able to download the lastest build. That way you won’t have to skim through blog posts to make sure you found the latest one.

Both the apk file and the source code are available for download on the project page.

Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2010/09/employee-directory-for-air-for-android-updated/feed/ 3 Multi-User Google Maps Collaboration on Android http://coenraets.org/blog/2010/08/multi-user-google-map-collaboration-on-android/?utm_source=rss&utm_medium=rss&utm_campaign=multi-user-google-map-collaboration-on-android http://coenraets.org/blog/2010/08/multi-user-google-map-collaboration-on-android/#comments Fri, 27 Aug 2010 13:26:23 +0000 Christophe http://coenraets.org/blog/?p=926 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> This application allows users in different locations to work together in Google Maps.

The collaboration features in this application include:

  • Video Chat
  • Map Synchronization on move, zoom, etc.
  • Whiteboarding
  • Cursor sharing

When running on Android, the application can use the device’s GPS to share your location.

This is just another example of “built-in” collaboration (go here and here for more). The point is really how easy it is to add these collaboration features to any application, and then to deploy these collaboration-enabled applications to multiple screens (browser, desktop, Android, and more devices soon).

Experience the application in the browser

Click here to experience the browser version of the application.

The application is written in Flex 4. The collaboration features are powered by LiveCycle Collaboration Service.

Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2010/08/multi-user-google-map-collaboration-on-android/feed/ 16 Multi-User Video Tic-Tac-Toe for Android http://coenraets.org/blog/2010/08/multi-user-video-tic-tac-toe-for-android/?utm_source=rss&utm_medium=rss&utm_campaign=multi-user-video-tic-tac-toe-for-android http://coenraets.org/blog/2010/08/multi-user-video-tic-tac-toe-for-android/#comments Thu, 26 Aug 2010 18:32:37 +0000 Christophe http://coenraets.org/blog/?p=883 Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> My previous post, “Video Chat for Android in 30 Lines of Code”, has generated a good level of interest. A slight twist on the same idea is to build collaboration into your applications. The use case here is slightly different: instead of enabling simple “video conversations” between remote users, this level of collaboration enables remote users to work together (or play together) within an application on their mobile device (or traditional computer).

To demonstrate this idea, I wrote a series of Flex applications with collaboration “built-in”. The same application can be deployed as an Android app, as a desktop app, or in the browser.

The first application in this series is a simple Tic-Tac-Toe game. The collaboration features built in this application are:

  • Videochat
  • Shared cursors: follow the other player’s mouse position
  • Real time messages: a player’s move is immediately sent to the other player
  • Shared states: whose turn is it to play etc.

These features are enabled by LiveCycle Collaboration Service.

Watch the video of the Android version:

Play Now!

Click here to play (with the Browser version). This is obviously a simple application, but the same concepts can easily be applied to sophisticated social or business apps. My 6 year-old loves it, especially when I’m on the road :)

Download the source code:

Click here to download the source code.

Retweet this Share on Facebook Follow @ccoenraets !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); ]]> http://coenraets.org/blog/2010/08/multi-user-video-tic-tac-toe-for-android/feed/ 13