Build iOS applications with Flex and Flash Builder 4.5.1
You already know that you can use Flex 4.5 and Flash Builder 4.5 to build applications for Android and BlackBerry Tablet OS devices. Today we’re releasing an update to Flash Builder that will enable the exact same workflow to build iOS apps. You’ve probably see us demo this a million times already but today it’s here for you to start building your applications!
In this video I’m showing you have easy it is to do this and where to get all the developer and device certificates from.
The coolest thing is that you can now use the exact same code to build apps for Android, BlackBerry Tablet OS and iOS devices in one go! When you’re app is ready you only need to press the release build button to package your application for all these platforms.
“But my application won’t look native, Serge“. Well… I kinda like that. Flex gives you the freedom to make your application look however you want. But if you really need that native iOS feel then check out this Flex theme.
Want to find out more about Flash Builder 4.5? Then don’t forget to sign up for our Developer Week. It starts today and tomorrow I’ll be talking about mobile application development using Flex and Flash Builder 4.5.1.
If you already have Flash Builder 4.5 then go to the HELP menu and select SEARCH FOR FLASH BUILDER UPDATES to download the 4.5.1 update. If you haven’t upgraded to Flash Builder 4.5 yet then try it for 60 days. I guarantee you’ll love it. Oh… And yes… The iOS workflow also works on Windows!
AIR 2.7 now available for desktop, Android, iOS and Blackberry Tablet OS.
When I think about the new features in AIR 2.7 I can’t help but think about this Daft Punk song… Harder, Better, Faster, Stronger. That’s exactly what this release is all about… Well… You know what I mean ;-)
On mobile my favorite new feature is the improved rendering on iOS. With this release AIR apps for iOS render up to 4x faster in CPU mode. This change will improve the performance of many AIR for iOS apps, including those built with the Flex framework.
But don’t believe our words for it… Try it out yourself! There are already some really cool AIR apps in the appstore today. Try the Rossignol app for instance.
Or try one of Terry Paton’s games like Meteor Storm or Mazeball!
Another one of my favorite new features is probably the most requested feature for AIR for Android. You can now install or move the AIR runtime onto the SD cards within your Android devices!
An update for Flash Builder will be released soon but you can already grab the AIR SDK today and start building your apps!
Displaying ads in your mobile AIR application
I’ve seen a few Tweets from people who were asking about adding ads to their mobile AIR applications… Well… There’s actually a hidden gem in the AIR documentation… But… As most of you probably never read any docs ;-) I thought I’d highlight it here.
The trick is simple… Use the StageWebView class. You set the StageWebView object viewport to cover the area in your application in which you want to display the ad. Then you load an HTML page that contains the code for requesting and displaying ads. And tadaaaa… You have ads in your mobile AIR application.
Here’s an example of an HTML page that loads an ad from AdMob.
<html>
<head>
<title>Ad jig</title>
<script type="text/javascript">
var admob_vars = {
pubid: 'admob_pubID', // change to your publisher id
bgcolor: 'ffffff', // background color (hex)
text: '000000', // font-color (hex)
test: true, // test mode, set to false if non-test mode
manual_mode: true
};
function showAd()
{
_admob.fetchAd(document.getElementById('adspace'));
}
</script>
<script type="text/javascript" src="http://mm.admob.com/static/iphone/iadmob.js"></script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body onload="showAd()">
<div id="adspace"></div>
</body>
</html>
The following ActionScript code will display the ad page in your mobile AIR application.
//Set up web view object
var webView:StageWebView = new StageWebView();
webView.stage = this.stage;
var adViewPort = new Rectangle( 0, 0, this.stage.stageWidth, 60 );
webView.viewPort = adViewPort;
webView.addEventListener(ErrorEvent.ERROR, onWebViewError );
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, onWebViewLocChanging );
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, onWebViewLocChange );
//Copy the html file outside the app directory
var templateFile:File = File.applicationDirectory.resolvePath( "adview.html" );
var workingFile:File = File.createTempFile();
templateFile.copyTo( workingFile, true );
try
{
webView.loadURL( workingFile.url );
}
catch (e:Error)
{
trace( e );
}
function onWebViewLocChange( event:LocationChangeEvent ):void
{
trace( "Change to" + event.location );
if( event.location != workingFile.url )
{
//Reset location back to our ad display page
navigateToURL( new URLRequest( event.location ) );
try
{
webView.loadURL( workingFile.url );
}
catch (e:Error)
{
trace( e );
}
}
}
function onWebViewLocChanging( event:LocationChangeEvent ):void
{
trace( "Changing " + event.location );
event.preventDefault();
navigateToURL( new URLRequest( event.location ) );
}
function onWebViewError( error:ErrorEvent ):void
{
trace( error );
}
But what if you want to use the mobile Flex framework? Well… Sönke Rohde actually wrote a wrapper around the StageWebView class so you can use it as a Flex component. By using this wrapper it becomes as easy as adding this one line of code to your app.
<components:WebView source="adview.html" width="300" height="50"/>
Note: This approach will most likely also work with other ad networks. Also not that this only works on mobile AIR applications. The example does not work in desktop applications, or when testing mobile applications on the desktop, due to local-versus-remote sandbox restrictions.
Kudos to Adobe’s learning resources team for putting this example together and to Sönke for creating the StageWebView UIComponent.
Now go make some money ;-)
Flash Builder sneak peek: Mobile application development
I’m sure you all know that Flash Builder will enable you to build applications with Flex and/or ActionScript and then compile them for distribution on the Android Market. An upcoming version of Flash Builder will also enable the same workflow for iOS and BlackBerry Tablet OS applications. You’ll even be able to package these different types of installers in one go.
Android activations visualized
We all know that the device market is changing rapidly. We also know that Android is rapidly gaining market share but this video is still pretty amazing to see. It visualizes Android device activations from October 2008 until now.
(Hat tip AndroidCentral)
Feel free to follow me on: 
