After the debate that we had last week, Politifact came out and said that everything I said was true.

Did Politifact really give her a “True” rating across the board for a performance in the previous debate?

The best way to check if you are on the go, is to use Politifact’s mobile application which was built with Flex and runs on the iPhone, the iPad, the BlackBerry PlayBook, the Kindle Fire, the Barnes and Noble Nook, and other Android devices… using the exact same code. 100% code reusability.

100% Code Reusability
I’ll let you check Michelle Bachmann statements in Politifact’s Mobile app, but since I helped build it, I can tell you that the 100% Flex code reusability across devices statement is absolutely “True”!

The Politifact Mobile application is available in the following app stores:

Apple App Store
Android Market
Amazon App Store
BlackBerry App World
Barnes and Noble Nook Store

Follow @ccoenraets

The Flex Spring Mobile Test Drive is hosted on GitHub and documented here.

Follow @ccoenraets

This is still work in progress, but you can watch a video of the application here:

Source Code

Holly and I will be co-presenting at RIA Unleashed this year. We have a workshop on the 27th, and, if you attend, this is the application you will build (plus additional bonus features not demonstrated here like push notifications, etc). Since we want to keep the content fresh (and we still have to polish a few things), we will make the code available after the event.

Flex 4.6

You can read more about Flex 4.6 and the prerelease program here.

Follow @ccoenraets

Follow @ccoenraets

Flex is a powerful application framework for building first-class mobile applications for iOS, Android, and the BlackBerry PlayBook using a single programming model, a single tool, and a single code base.

If you are a Java developer, the Flex programming model is also easy to master because it is syntactically very close to Java. The Flex IDE (Flash Builder) is a plugin on top of Eclipse, which means that you can write, debug, and profile your client and server code in the same development environment.

You can also easily integrate Flex applications with a Java back end using the Remoting and Messaging services provided by BlazeDS (open source) or LCDS (commercial license). For Spring developers, the integration is even easier and more powerful using the Spring/BlazeDS integration project, which makes the Flex and Spring combination the best way to build cross-platform iOS, Android, and PlayBook applications with a Java back end.

I put together a new “Flex / Spring Mobile Test Drive” to help developers get started building these applications. The Test Drive consists of a web application with BlazeDS and the “Spring/BlazeDS integration” preconfigured and ready to use. It also includes two sample mobile applications running “out-of-the-box”: An Employee Directory and a Trader Desktop. The Employee directory demonstrates how to use Remoting to access Spring services. The Mobile Trader focuses on the Messaging integration: It shows a Spring component pushing real-time market data updates to a Flex applications.

The project is hosted on GitHub: https://github.com/ccoenraets/flex-spring-mobile-testdrive

Installation

1. Deploy flex-spring-mobile.war to your app server.
2. Import the projects into Flash Builder: (If you don’t have Flash Builder, you can download it here)
   • File > Import > General > Existing Projects into Workspace
   • Select ccoenraets-flex-spring-mobile-testdrive as the Root directory
   • Select all the projects (EmployeeDirectoryJ, flex-spring-mobile, and MobileTraderJ)
   • Click Finish
3. Running the EmployeeDirectory
   • Open config.xml in the src folder and modify the endpoint to match the hostname and port number of your app server
   • Right-click EmployeeDirectoryJ and select Run As > Mobile Application
   • Select a target platform (iOS, Android, or BlackBerry Tablet OS), select On desktop as the launch method and select a device to simulate
   • Click Run
4. Running the MobileTrader Application
   • Right-click MobileTraderJ and select Run As > Mobile Application
   • Select a target platform (iOS, Android, or BlackBerry Tablet OS), select On desktop as the launch method and select a device to simulate
   • Click Run
   • The Settings view is automatically activated the first time you run the application. Enter the MessageBroker base URL, for example: http://localhost:8080/flex-spring-mobile/messagebroker (modify the endpoint to match the hostname and port number of your app server), select a Channel type, click Save Settings, and click Start Server Feed.
   • Access the Watch tab: The list should be automatically updated with the (simulated) real time updates pushed from the Spring web app.

Follow @ccoenraets

The Flex application of course doesn’t care about — and is not aware of — the way your JavaScript is written and which libraries you use. However, I’m currently working on a hybrid mobile application where the HTML hosted in the StageWebView is powered by jQuery, and I find the combination of the two technologies powerful. So I figured I’d share a simple example here.

This is the same example as the one in my previous post with the exception that the HTML part is powered by jQuery.

You can download the Flex project here: http://coenraets.org/webview/StageWebViewJQueryDemo.fxp

The HTML and JavaScript files are here:

• http://coenraets.org/webview/indexjq.html
• http://coenraets.org/webview/js/scriptsjq.js

Follow @ccoenraets

The StageWebView allows you to render HTML content inside a Flex application using the underlying HTML rendering engine available on your mobile device.

In some situations, the Flex application may need to communicate with the HTML document hosted in the StageWebWiew. In other words, you may need to invoke a JavaScript function available in that document from the Flex application.

The basic approach is to use the StageWebView loadURL() function with the javascript: protocol as follows:

stageWebView.loadURL("javascript:myFunction()");

For example, if you need to invoke the addItem() function providing the firstName and lastName values captured in the Flex application, you’d do something like this:

stageWebView.loadURL("javascript:addItem('" +
        firstName.text + "', '" + lastName.text + "')");

iOS Technique

On iOS however, you can’t currently use the javascript: protocol to invoke a function using loadURL() as described above. What you can do is use the javascript: protocol to change the location of the document. So the trick is to just change the hashtag at the end of the URL as a “signal” to tell the page you want to execute an action (if the base URL doesn’t change, the page is not reloaded). You can come up with your own hashtag format convention to specify the method to invoke and parameters to pass. In this case, since I only have one method to invoke, I just use the hashtag to pass the values (first name and last name).

counter++;
webView.loadURL("javascript:window.location='http://foo.com/bar.html" +
        "#" + firstName.text +
        "&" + lastName.text +
        "&" + counter + "'");

NOTE: The incremented counter is used to ensure that the hashtag is changing on consecutive method invocations even if the first name and last name are the same (otherwise the onhashtag event would not fire).

In the HTML page, we use the onhashchange event to listen for hashtag changes and then trigger the appropriate action. My JavaScript looks as follows:

function addItem(firstName, lastName) {
	var list = document.getElementById('list');
	var li = document.createElement('li');
	li.appendChild(document.createTextNode(firstName + " " + lastName));
	list.appendChild(li);
}

window.onhashchange = function() {
	var newHash = window.location.hash.substring(1);
	var a = newHash.split("&");
	addItem(a[0], a[1]);
};

Final Note

The Flash Builder simulator does not support the onhashchange event. So to test my application in the simulator (and to use the default approach when not on iOS), I use the following code:

if (Capabilities.os.indexOf("iPhone OS") == -1)
{
	webView.loadURL("javascript:addItem('" +
		firstName.text + "', '" + lastName.text + "')");
}
else
{
	counter++;
	webView.loadURL("javascript:window.location='" + url +
		"#" + firstName.text +
		"&" + lastName.text +
		"&" + counter + "'");
}

You can download the Flex project here: http://coenraets.org/webview/StageWebViewJavaScriptDemo.fxp

The HTML and JavaScript files are here:

• http://coenraets.org/webview/index.html
• http://coenraets.org/webview/js/scripts.js

Follow @ccoenraets

https://github.com/ccoenraets/SalesbuilderMobile

If you haven’t seen the video, you can watch it here:

Follow @ccoenraets

As an example, I built a simple “dashboard portal” during the beta program. Now that Flex 4.5.1 is out with built-in support for iOS, Android, and the PlayBook, it’s time to share the source code publicly.

The source code is available here: https://github.com/ccoenraets/MobileDashboard

Usual disclaimer about the source code: This is a sample application, I intentionally cut some corners, used the out-of-the box look and feel, etc.

If you haven’t seen the application in action, you can watch it here:

Follow @ccoenraets

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:

Follow @ccoenraets