The Space For App Developers

Below you will find a recording with a tutorial of my as3c2dm ANE. Since I published this lib I have received tons of messages and comments with help requests so I hope this will work

BTW this is the first video tutorial I’ve recorded from my new home studio. I still need to work a bit on some light and audio presets in Premiere Pro but I think in general it’s starting to look and sound as I imagined. You can expect a short walkthrough around my studio in some of my next posts

With the holiday season just around the corner you may be wondering what and how you are going to cook (or maybe your mom or wife does ). Well here comes help: a really great looking and innovative app called Cooklet for tablets  (of course built with Adobe AIR). This app is a great addition to the Cooklet.com portal.

My favorite feature is the way you can navigate between the steps of the recipe. It is actually controlled via a front-facing camera and your hand gestures; this way your precious tab can stay clean Another great thing is that the cooking steps are actually read for you so you can keep your tab at a safe distance from your stove. Also the steps’ text is presented with a much larger font so again it can be read from further away. The Cooklet team did really amazing job on the UI and UX of the app!

So go ahead and download it from Android Market or BlackBerry App World (hopefully the iPad version will come soon). You can also check it out in action in the video below.

To celebrate the best ever release of Flex SDK marked with 4.6 version number I decided to publish source code of my little tablet demo app called BlueChips. The video below demonstrates BlueChips in action together with an overview of new Flex 4.6 components that target tablet development. You can go ahead and download the source code from github and do whatever you want with it

If you prefer vimeo over youtube you can watch the same recording here.

In this short video recording you will see my new and first AIR native extension (ANE) that I created for C2DM (Android Cloud to Device Messaging Framework).

C2DM allows you to push notifications to your Android applications. The cool thing about it is that your application doesn’t have to run in the background in order to receive messages. In this case, my ANE creates a notification with a specified ticker, title and text. When the user taps on the notification it runs an AIR application and passes the sent message text that is displayed in the app. Check out the magic for yourself in the video below.

The source code is available here. You can also download the packaged ANE and the C2DM Messanger app from here and here.

Check out some more already built ANE’s here.

At the beginning of this week a beta 2 version of the AIR 3 SDK was released. The AIR 3 SDK and AIR 3 runtime will be a major release that will bring a lot of really cool features. One of the features that I’m really excited about is Captive Runtime, which lets you package your applications with a bundled AIR runtime. This is something that was available for the iOS platform from day one, and now it is also supported for both Android devices and desktops.

I think this is a really important feature for AIR. I heard many times from our customers and the community that we need a solution that enables users to install AIR applications without administrator rights. This is a common scenario especially in the enterprise environments where users don’t have full privileges. Also in some other cases it may improve user experience as there is no need to ask the user to install an additional runtime. It will also help when you need to distribute your application on a CD or other media that doesn’t let you use the browser-based badge installer.

Now how do you package your app for both Windows and Mac? It’s really simple. First thing what you need to do is to download and unzip the new SDK from Adobe Labs. Next compile your application either with the command line mxmlc compiler or using Flash Builder. To do it in Flash Builder, right-click your AIR application project, select Export… -> Flash Builder -> Release Build, and complete just the first step of this wizard without finishing it. This will create a bin-release-temp folder under your project directory with a compiled SWF and app descriptor file. Now go to the command line and invoke following adt command from your project/bin-release-temp folder.

On Windows:

c:\path\to\air3sdk\bin\adt.bat -package -storetype pkcs12 -keystore c:\path\to\certificate.p12 -target bundle myapp.exe myapp-app.xml -C . myapp.swf


On Mac:

/path/to/air3sdk/bin/adt -package -storetype pkcs12 -keystore /path/to/certificate.p12 -target bundle myapp.app myapp-app.xml -C . myapp.swf


You will receive slightly different results depending on your platform. On Mac your application is packaged into myapp.app, which is a single Mac package file. You can just double-click it to run the app. Also if you want to introspect its content you can right-click it and select the Show Package Contents option. On Windows you will get myapp.exe folder that has all the runtime files and the executable myapp.exe file in it. Now you can use your favorite installer builder to build a setup package for your application.

Generated folders structure on Windows:

Generated package structure on Mac:

For Android options check out this blog post by my new fellow evangelist Andy Trice.

If you’ve ever wondered if you can register your own URL schemes for your AIR mobile applications running on iOS or Android platforms the answer is yes! Actually it is very simple and you can do it by adding few extra lines in the *-app.xml document. Once you do your application can be invoked directly from other applications or browser with a simple <a href="my-scheme:">open app</a> link click.

(Custom URL schemes are especially useful if you are doing OAuth authentication in your app and you want to redirect the user back to your application after the authorization in the browser. You can find out more about OAuth in AS3/Flex applications in my ADC tutorials.)

To register a custom URL scheme like my-scheme: you simply add the following code in your *-app.xml.

Android settings:

<android>
    <manifestAdditions>
    <![CDATA[
        <manifest android:installLocation="auto">
            <application> 
                <activity> 
                    <intent-filter> 
                        <action android:name="android.intent.action.VIEW"/> 
                        <category android:name="android.intent.category.BROWSABLE"/> 
                        <category android:name="android.intent.category.DEFAULT"/> 
                        <data android:scheme="my-scheme"/> 
                    </intent-filter> 
                </activity> 
            </application> 
 
            <uses-permission android:name="android.permission.INTERNET"/>
 
        </manifest>
    ]]>
    </manifestAdditions>
</android>

iOS settings:

<iPhone>
	<InfoAdditions>
	<![CDATA[
		<key>UIDeviceFamily</key>
		<array>
			<string>1</string>
			<string>2</string>
		</array>
 
		<key>CFBundleURLTypes</key>
		<array>
			<dict>
				<key>CFBundleURLSchemes</key>
				<array>
					<string>my-scheme</string>
				</array>
				<key>CFBundleURLName</key>
				<string>com.myapp</string>
			</dict>
		</array>
 
	]]>
	</InfoAdditions>
        <requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>

Also you can pass additional arguments to your app from the invoking source. Arguments can be passed in the URL scheme after the colon; for example: my-scheme:myparam. Then in your application you can listen for InvokeEvent.INVOKE event on the NativeApplication.nativeApplication instance. The received event object contains an arguments property that returns an Array with the invoking scheme and parameters in the first item, so it would be my-scheme:myparam value. Next you can parse the value of your argument, and take some action in the application based on its value.

In a Flex Mobile app you can register an InvokeEvent.INVOKE event listener in the preinitialize phase as in following snippet:

 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   preinitialize="application_preinitializeHandler(event)">
 
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			protected function application_preinitializeHandler(event:FlexEvent):void
			{
				NativeApplication.nativeApplication.addEventListener(
					InvokeEvent.INVOKE, onInvoke);
			}
 
			private function onInvoke(event:InvokeEvent):void
			{
				// You can parse argument value from event.arguments property
				lblArguments.text = "Arguments: " + event.arguments;
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:Label id="lblArguments" horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

One caveat is that invoking other apps with the custom URL schemes from AIR apps is not possible. The AIR security model is more restrictive and it limits schemes to: http:, https:, sms:, tel:, mailto:, file:, app:, app-storage:, vipaccess: and connectpro:. You can find more about it here and here.

Very recently I was looking for a simple and affordable solution to host Java-based services for the mobile version of my LCDS Samples application. Unfortunately, with the Java development, life is not as easy as with PHP where you can get affordable hosting that is managed and secured by your hosting provider. The reality is that with Java you usually end up having a VPS or an instance of a dedicated Linux server (of course Windows would work also). This is certainly a very good solution that gives you a lot of flexibility but you have to remember that the tasks of administering and securing your box are usually on your shoulders. Although I have some knowledge of Unix-type systems, to be honest I wouldn’t feel comfortable doing the whole administration on my own.

So after some research and trying out different options I ended up with an AWS Elastic Beanstalk service provided by Amazon (you can see it in action running here). I’m really excited about this service because it provides an instance of Tomcat (both 6.x and 7.x versions are available) hosted and managed on Amazon’s cloud infrastructure. On top of that and out-of-the-box, it provides a load balancer that will automatically launch additional instances if your application encounters the increased load. Also you have full access to your Tomcat logs and you can receive email notifications with the status and health of your running services.  Another important thing is that it is extremely easy to use, especially when you install the AWS Eclipse plugin that can also work well with Eclipse/Flash Builder.

The good thing is that the cost of all this is not really high, the entry level service is just about $35.27 a month, more details about pricing are available here.

Getting started

Follow these steps to get up and running:

1. Get an account (if  you don’t already have one) with AWS (Amazon Web Services). Once you get an account you can sign up for Elastic Beanstalk via the “Manage Your Account” section.
2. Configure your IDE environment. By default Flash Builder comes with a standard version of Eclipse that has only the JDT available. I suggest downloading the Eclipse IDE for Java EE Developers and to configure FB with this environment. It will give you additional tools to handle Tomcat instances and Java Web Projects, which you can use when developing for Elastic Beanstalk. Configuring FB with a custom installation of Eclipse is really straightforward. Once you download Eclipse from here and you extract it somewhere to your hard drive, you can go to the folder where you have FB installed and find the Adobe Flash Builder 4.5 Plug-in Utility application located in the utilities folder. In my case it is here “/Applications/Adobe Flash Builder 4.5/utilities/Adobe Flash Builder 4.5 Plug-in Utility.app” but it all depends where you have your FB installation and also on what OS you are on. Run this application and it will guide you with a few simple steps through the whole Flash Builder – Eclipse integration process.
3. Install the AWS Eclipse plugin. This can be done directly from Eclipse. Just go to the Help -> Install New Software menu and enter the following update site URL: http://aws.amazon.com/eclipse
   
4. Create a new AWS Java Web Project. After a successful install of the AWS plugin you will have an option to create new AWS projects. Use the wizard available from the top bar of Eclipse (with an AWS icon on it) to create a New AWS Java Web Project. First you will need to enter a project name, and credentials like Access Key ID and Secret Access Key. These values are generated when you sign up for an AWS account and you can copy them from the Security Credentials section of your AWS account.
   You can select the Basic Java Web Application option (see the screenshot above), this will be enough for the LCDS/BlazeDS scenario. More info about other options is available through this site, with an in-depth video tutorial.
5. Configure the LCDS/BlazeDS  environment. In order to do that you need to, copy all necessary jars into the WebContent/WEB-INF/lib folder of the newly created project. In my case I used a turnkey installation of LCDS and I just copied jars from the lcds-samples application and also jars from tomcat/lib/activemq4.1.1, tomcat/lib/jotm2.0.10 and tomcat/lib/lcds (this wouldn’t be necessary for BlazeDS but for LCDS it was required to make the DataServices and Messaging work properly). Next you will also need to copy all configuration files from the WEB-INF/flex folder and the web.xml that has all necessary LCDS/BlazeDS servlets/listeners configured. The important thing to note here is that by default the AWS Elastic Beanstalk service enables only port 80 and HTTP channels; in order to enable other ports that could be required for RTMP channels you can modify the AWS EC2 Security group settings (but that is a topic for another blog post and I will not cover it here). Another solution you have is to stick to the default settings and to configure LCDS services to use only HTTP channels; this is actually what I did for my lcds.riaspace.comservice.    One last thing I had to do to make the LCDS function properly was to create a WebContent/META-INF/context.xml file in which I defined the transaction configuration as in the following snippet:

   <?xml version="1.0" encoding="UTF-8"?>
   <Context reloadable="true">
     <Transaction factory="org.objectweb.jotm.UserTransactionFactory" jotm.timeout="60"/>
   </Context>

6. Deploy your application to the cloud. Once you have the configuration completed and all the services built you can deploy your application directly from Eclipse. Just right-click on the project and select the Amazon Web Services -> Deploy to AWS Elastic Beanstalk… option. Another wizard will pop up that will ask you to specify names for your application and environment.Next you will need to select the server type, which would be AWS Elastic Beanstalk for Tomcat 6 (you also have the option to deploy to Tomcat 7 instances).
   At last you will be able to specify the CNAME of your server (you can assign your own domain name in the DNS configuration, that is actually what I used to get the default lcds-samples.elasticbeanstalk.com configured as lcds.riaspace.com). Another valuable option here is to enter your email address, which will receive notifications of any changes to the service’s state and health.

   

   Now you are ready to click the Finish button and it will start uploading and configuring your application in the cloud. Be aware that this process may take several minutes the first time. Once it is done you will be able to access your services via the following URL: http://yourcname.elasticbeanstalk.com. To redeploy any changes made to your services you just need to follow this last step all over again.

You may remember one of my previous posts about LCDS Messaging on tablet devices, well I went further with porting these demos and this time I brought also: CRM, Inventory Management and Notes to tablets. Not only I ported these but I also published it to Android Market for anyone to give it a try.

The app that has all the demos is called “Adobe LCDS Samples” and is available here (be aware that I applied market filter to restrict it only to tablets, I managed to do this with <supports-screens /> Android specific tag in *-app.xml).

The hosted LCDS Samples service is located here and you may use it to play around with those samples (the service is thanks to Greg Wilson fellow Adobe Evangelist). UPDATE 2011-07-04: I moved the service to AWS Elastic Beanstalk serivce (blog post about will come soon) and it is now hosted here. The one I really like the most is a Dashboard app because it is easy to use and it shows nicely/visually the real-time capabilities of LiveCycle Data Services (LCDS).

Samples source code is available here in GitHub.

Below you can see few screenshots of the application running on my Motorola XOOM:

Below you will find links to my two video tutorials about OAuth authorization with Flash and Flex apps:

1) Introduction to OAuth for secure user and application authorization

2) OAuth in Adobe AIR applications built with Flash or Flex

You can also download example code from here.

As you may know AIR 2.6 SDK was released yesterday. It brings a lot of improvements especially for iOS devices (you can find the release information here). Now if you already have a certificate and provisioning profile from Apple and want to try out your existing code to deploy on an iOS device you can use the following ADT command:

[AIR_SDK_HOME]/bin/adt -package -target ipa-test -provisioning-profile [MOBILE_PROVISION_FILE_PATH] -storetype pkcs12 -keystore [CERTIFICATE_FILE_PATH] ./MyApplication.ipa ./bin-debug/MyApplication-app.xml -C ./bin-debug MyApplication.swf -C ./bin-debug assets


Of course, replace the capitalized blocks with your appropriate paths, and then execute it from the root folder of your AIR application project. It will package the app SWF file and any accompanying assets from the bin-debug folder. Bear in mind that this is not a final build ready to be published to the App Store. In order to do that you want to package a release build from the bin-release folder and also use ipa-app-store target parameter instead of ipa-test. UPDATE: Flash Builder may overwrite an application ID in -app.xml with a “.debug” suffix; you should remove it prior to packaging. The ID should match the one registered with your mobile provisioning.

You can achieve the same thing with the following ANT script:

<?xml version="1.0" ?>
<project>
    <!-- SDK properties -->
    <property name="SDK_HOME" value="PATH TO AIR SDK"/>
    <property name="ADT.JAR" value="${SDK_HOME}/lib/adt.jar"/>
 
    <!-- Project properties -->
    <property name="APP_NAME" value="MyApplication"/>
    <property name="APP_ROOT_DIR" value="."/>
    <property name="BUILD_DIR" location="${APP_ROOT_DIR}/bin-debug"/>
    <property name="APP_ROOT_FILE" value="${APP_NAME}.swf"/>
    <property name="APP_DESCRIPTOR" value="${APP_NAME}-app.xml"/>
    <property name="IPA_NAME" value="${APP_NAME}.ipa"/>
    <property name="STORETYPE" value="pkcs12"/>
    <property name="KEYSTORE" value="PATH TO YOUR CERTIFICATE"/>
    <property name="STOREPASS" value="CERTIFICATE PASSWORD"/>
    <property name="PROVISIONING_PROFILE" value="PATH TO PROVISIONING PROFILE FILE"/>
 
    <target name="package">
        <java jar="${ADT.JAR}" fork="true" failonerror="true">
            <arg value="-package"/>
            <arg value="-target"/>
            <arg value="ipa-test"/>
            <arg value="-provisioning-profile"/>
            <arg value="${PROVISIONING_PROFILE}"/>
            <arg value="-storetype"/>
            <arg value="${STORETYPE}"/>
            <arg value="-keystore"/>
            <arg value="${KEYSTORE}"/>
            <arg value="-storepass"/>
            <arg value="${STOREPASS}"/>
            <arg value="${APP_ROOT_DIR}/${IPA_NAME}"/>
            <arg value="${BUILD_DIR}/${APP_DESCRIPTOR}"/>
            <arg value="-C"/>
            <arg value="${BUILD_DIR}"/>
            <arg value="${APP_ROOT_FILE}"/>
            <arg value="-C"/>
            <arg value="${BUILD_DIR}"/>
            <arg value="assets"/>
        </java>
    </target>
 
</project>