Below is the third episode of my HTML5 for App Developers series. In this episode, I cover how you can debug your JavaScript applications inside of Eclipse.

Debugging is available through a set of plugins that are available for Eclipse from the ChromeDevTools project on Google Code. So, you will need either Google Chrome or Chromium to make it all work.

Below you will find the second episode of my HTML5 for App Developers series. In this episode, I cover how you can use Eclipse, which is a free and open source IDE, to do your HTML5, JavaScript, and CSS work.

In the video, I point out a small bug that comes with Mac version of Eclipse. To download the patch you can use this link. You can find Eclipse itself here; I encourage you to download the Eclipse IDE for JavaScript Web Developers version.

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.

OK, I finally found some time to give HTML5 a try. Since Adobe (my employer) is actively participating in its development, I wanted to learn more about the actual state of the technology, understand what all the hype is about, and really not fall behind.

I have to be frank here. That the first three days were really hard for me I cursed a lot and pulled my hair out of my head. Well IMHO the learning curve is a bit steep, especially when you are coming from an OOP (Object-Oriented Programming) world like Flex/AS3, Java, or .NET. What I’m trying to say here is that things are just different and you need some patience to get used to it. But after those first few days I actually started enjoying it and I’m sure you will too if you give it a try.

So, to alleviate the pain for others that are taking their first steps with HTML5 I decided to record a series of short tutorials that should help The series will be titled “HTML5 for App Developers” and I will concentrate mostly on app development aspects – so things like tooling/IDEs, debugging, HTML layouts, JavaScript frameworks, architectural and design patterns, and much, much more.

The first video, which you can find below, is about Adobe Dreamweaver and how you can customize it to make it a more developer-centric tool/IDE. The next one will also cover tooling and it will be about Eclipse (the free and open source IDE). I think it is extremely important that when starting with a new technology to have the whole environment set up comfortably so it doesn’t get in your way. So go ahead and enjoy 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.

Recently I was looking for an example on how to create a skin that would work with the SkinnableContainer component class in a Flex mobile application. It turned out I couldn’t find any examples available in the wild so I had to dig it out myself. So below is the approach I took, which can also work for others.

The first thing I found out is that there is a SkinnableContainerSkin class in the spark.skins.mobile package that extends MobileSkin class. This is a basic implementation that works out-of-the-box when you use SkinnableContainer in mobile projects. Its only behavior is setting a contentGroup property with a new instance of the Group class and drawing a background rectangle filled with color based on the backgroundColor style.

Now my goal, instead of drawing the background with AS3, was to use a custom FXG file with some rounded corners, simple stroke and gradient. The screenshot below demonstrates what I was looking for:

In order to achieve the example above I extended SkinnableContainerSkin as in the following snippet:

package
{
	import spark.core.SpriteVisualElement;
	import spark.skins.mobile.SkinnableContainerSkin;
 
	public class MySkinnableContainerSkin extends SkinnableContainerSkin
	{
		protected var backgroundClass:Class;
 
		protected var background:SpriteVisualElement;
 
		public function MySkinnableContainerSkin()
		{
			super();
 
			// Here could be a DPI dependent logic, for demo purposes it is not necessary
			backgroundClass = MySkinnableContainerBackground;
		}
 
		override protected function createChildren():void
		{
			// Adding container background
			background = new backgroundClass;
			addChild(background);
 
			// Creating content group instance
			super.createChildren();
		}
 
		override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.layoutContents(unscaledWidth, unscaledHeight);
 
			// Setting size of background container
			setElementSize(background, unscaledWidth, unscaledHeight);
		}
 
		override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
		{
			// By default SkinnableContainerSkin draws Rect with backgroundColor but this is not
			// required in this case since background is constructed of MySkinnableContainerBackground fxg
		}
	}
}

My FXG file content looked like this:

<?xml version='1.0' encoding='UTF-8'?>
<Graphic xmlns:fc="http://ns.adobe.com/flashcatalyst/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" 
		 xmlns="http://ns.adobe.com/fxg/2008" version="2.0"
		 scaleGridLeft="10" scaleGridTop="10" scaleGridRight="90" scaleGridBottom="90">
 
	<Rect radiusX="10" width="100" height="100">
		<fill>
			<LinearGradient rotation="90">
				<GradientEntry alpha="1.0" color="#CCCCCC" ratio="0"/>
				<GradientEntry alpha="1.0" color="#666666" ratio="1"/>
			</LinearGradient>
		</fill>
		<stroke>
			<SolidColorStroke color="#FF0000" weight="2"/>
		</stroke>
	</Rect>
 
</Graphic>

And the way I can use it now in my Flex mobile projects is as follows:

<s:SkinnableContainer left="10" top="10" right="10" bottom="10" skinClass="MySkinnableContainerSkin">
	<s:Label left="10" top="10" right="10" bottom="10">
		<s:text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget arcu et nibh vehicula pulvinar sit amet sit amet ligula. Duis a orci at nisi faucibus luctus. Quisque congue vulputate porttitor. Curabitur ac turpis nulla, a malesuada diam. Sed ullamcorper massa ac libero tincidunt vel ultrices odio cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce pharetra varius tortor id rutrum. Duis tempor, nisl sit amet scelerisque dignissim, lorem nisl vehicula leo, in auctor dolor turpis at nisl. Quisque bibendum faucibus turpis vitae pulvinar. Sed mollis risus eget turpis molestie laoreet. Aenean metus nulla, vestibulum at egestas quis, aliquet tempus lectus.</s:text>
	</s:Label>
</s:SkinnableContainer>