Native Extensions examples available now

Among of the biggest news of the Adobe AIR 3 release  is the Native Extensions feature. If you want to get started with this, or maybe just try it, you should check out the Native Extensions page on Adobe Developer Connection.

There are five examples so far:

  1. Gyroscope (iOS/Android)
  2. NetworkInfo (iOS) – retrieves information about the network interfaces on an iOS device
  3. Vibration (iOS/Android) – make the device vibrate
  4. iBattery (iOS) – gets the battery status (unknown, unplugged, charging, or full) of an iOS device
  5. .NET Image Encoder (Windows) – encodes a bitmap into BMP, JPEG, or PNG format using Microsoft .NET Framework 4

The first three extensions were created by Adobe engineers, the last two by community. As I said before I’m looking forward to seeing many more extensions created and having a central place to go for all of them.

Building an iPad game with Adobe AIR in a week

Radu Ticiu of Timisoara Mobile Development Group invited me to speak at their August event about Adobe’s solutions for mobile development. And I must say I’m glad I accepted. Not only because the event and the people were great but because the other speaker was quite interesting.

Stefan is his name and he runs one of the most creative companies in this part of the world. Just to give you some context: they’ve won three FWA awards so far. His presentation was about the making off of an iPad game using Adobe AIR and Flash Builder 4.5. So far nothing new or extraordinary. isn’t it?

Well what really caught my attention were these facts:

  • While they had great expertise in building Flash applications for the desktop, this was the first project they’ve done for mobile.
  • They completed the game from concept to final IPA file ready for publishing in a week.
  • The team who built this consisted of one designer, one developer, and Stefan.

Continue reading

Flex Mobile Development: skinning the ActionBar component

One of the important pieces of the Flex framework for mobile development is the ActionBar class. This class lets you create an application title bar with three distinct areas. Starting from left to right you can have a navigation area, a title area, and an actions area. Of course you are not forced to use all these areas.

Why would you want to use this component? There are many reasons for using it but probably the most important is that it is an established user interaction design pattern on Android and iOS. This is how you usually add things like an application or section title, navigation buttons, search input texts, or action buttons.

Continue reading

Flex Mobile Development: pay attention to list.itemRenderFunction

A colleague of mine who is building a Flex mobile application had some performance issues with a list. In short, when he used a pretty heavy custom item renderer (with checkboxes, buttons, and labels) the scrolling performance dropped a lot. When using just a label item renderer everything worked well.

So, we started to debug the code and, as I suspected, the culprit was the layout manager: the virtualization was off.

This was strange as he didn’t turn off the useVirtualLayout flag anywhere in the code – at least not explicitly. So why was the virtualization off? Because he used list.itemRenderFunction to change the item renderer at runtime. If you take a look at the documentation you will find this:

Function that returns an item renderer IFactory for a specific item. You should define an item renderer function similar to this sample function:

function myItemRendererFunction(item:Object):IFactory

Currently, when using itemRendererFunction with a virtual layout (useVirtualLayout=true), item renderer recycling is turned off. Because of this, using itemRendererFunction can cause a performance degradation and is not recommended for mobile. This may be fixed in future versions of Flex.

So, if you use a heavy item renderer and/or you have many items, don’t set the item renderer using the itemRendererFunction method.

Instead, you can wrap your custom item renderer in a ClassFactory object and then assign this object to the list.itemRenderer property. Like this:

var factory:ClassFactory = new ClassFactory(MyCustomItemRenderer);
// set the properties for custom item renderer
factory.properties = {iconField:"thumbnailSmall",
                  messageField:"description", iconHeight:180, iconWidth:180};
// set the ClassFactory object as the list item renderer
myList.itemRenderer = factory;

There is one more thing. In the example above I used the properties property of the ClassFactory object to set the properties I needed (for example what data property should be used for the message label). You can’t use this approach for setting CSS properties like fontSize. The only solution I found so far is to create setters that behind the scenes are doing something like this:

public class MyCustomItemRenderer {
   //...

   public function set fontSize(value:int):void {
      setStyle("fontSize", value);
   }

   //...
}

This was my tip of the week. And don’t forget, stay away from useVirtualLayout = false;

Flex Mobile Development: storing data locally

One way to improve the user experience for mobile applications is to save data locally. This technique is important for desktop applications and it is even more important for mobile applications (mostly because the network connection is expensive, slower, or intermittent).

When using applications such as mail or Twitter clients local storage enables users to see the messages or tweets loaded in the previous session. And while you are seeing these “old” items the application can pull in newer items behind the scenes. The main idea is to not to make the user stare at an empty screen each time he opens your application.

A second benefit of this technique is that your application will feel much more responsive. As I said it is possible that the user has a slow Internet connection and downloading 12 small pictures and some descriptions could be visibly slow. Local storage can offer a “performance” boost especially for applications that access data that changes rarely.

Depending on your specific use case you may want to save locally:

  • media assets (images, MP3 files, video files)
  • text or HTML resources
  • XML files
  • ActionScript data structures (an array of ActionScript value objects for example)

Continue reading

Flex Mobile Development: caching images using ContentCache

There are many places where you can optimize your code especially when working on mobile applications. In this post I will focus on caching images using the spak.core.ContentCache class (part of the Flex framework).

Right from the Flex documentation, you can see ContentCache could be useful:

Provides a caching and queuing image content loader suitable for using a shared image cache for the BitmapImage and spark Image components.

Why cache images?

So why would you cache images? Every time you set a new source for a Spark Image or a BitmapImage object a new flash.display.Loader object is created to load the image bytes.

Now, let’s suppose you display a list of items and each item has an image (could be an icon or could be a picture). Each image is hosted on a remote server so it has to be downloaded. Finally, some of these images are the same for different items in the list (for example for a Twitter client it is quite common to see many entries with the same avatar; each entry represents a tweet from the same user and the avatar is the same in this case).

If you don’t use a caching mechanism, you will notice that as you scroll through the list it will take some time to load images. And the same could happen for images stored locally especially if they are not very small. While waiting for images to load and be displayed the first time is OK (and there isn’t much to do other than preload them) waiting for the same image every time it is displayed is quite annoying.

Here comes the ContentCache class. This class stores the bytes loaded (actually it stores the LoaderInfo object used for loading each image) and every time an image must be loaded it first checks the cache; if is not there then it goes through the loading process. If it is cached already, then it provides the LoaderInfo object.

Continue reading

Flex Mobile Development: Creating Dialog Windows

Ever wondered how to create a modal dialog window in Flex mobile applications? For example, you may want to ask the user for a confirmation when he performs a delete operation or maybe to select an item from a list. Well, if you don’t know how to do it, then read on.

Flex has a class that just does this: SkinnablePopUpContainer. SkinnablePopUpContainer extends SkinnableContainer class and has a very simple API you can use in order to “open” and “close” the dialog.

Understanding SkinnablePopUpContainer

Because SkinnablePopUpContainer extends the SkinnableContainer it is extremely easy to create any kind of dialog window you want. You can create a new MXML component that extends the SkinnablePopUpContainer. Then you set a layout manager that works for you (VerticalLayout, HorizontalLayout). And finally, you add the UI components you need – labels, buttons, lists, and so on.

Suppose you want to create a simple alert window that looks like this:

Continue reading

AIR 3 Beta and Flash Player 11 Beta are out!

We just released AIR 3 Beta 2 for desktop and Flash Player 11 Beta for desktop. You can download them from here and here.

Here is a list of the most important news in these releases.

AIR 3 Beta:

  • You can download the AIR 3 SDK and start building mobile and desktop apps. You can also download the AIR 3 runtimes for Windows and Mac OS
  • Stage Video Hardware Acceleration for mobile ( previously, this was available only for desktops). This will enable developers to leverage hardware acceleration for decoding and composing the video on the screen. This means reduced memory and CPU usage and smoother video playback.
  • Captive Runtime Support (AIR for desktop and Android). You will be able to package your application with a captive runtime. This enables you either to use a specific version of the runtime instead of what the user might have or to push the app together with the runtime so the user doesn’t have to go through the installation process of the runtime. Needless to say that this was one popular request :)
  • iOS Background Audio Playback Support. You can write multi-tasking apps that can play audio in background.
  • Android Licensing Service Support. You have access to the Android Market Licensing Service so you can enforce licensing policies for paid apps that are published through Android Market.
  • Android Front-facing Camera Support. This is another popular request. This was already available on iOS and PlayBook; now you can use it on Android too.
  • Encrypted Local Storage for Mobile. Another feature that developers wanted badly. Now you can store encrypted data the same way you would do on AIR desktop apps. Great for storing passwords and other sensitive data.
  • H.264/AVC Software Encoding for Cameras for Desktop. You can stream high-quality video from your computer’s camera with better compression and industry-standard support.

You can read more here.

Flash Player 11 desktop Beta:

  • Stage3D APIs (AKA Molehill). 3D GPU accelerated graphics.
  • Native 64-bit support. For 64-bit operating systems (Linux, Mac OS, and Windows).
  • G.711 audio compression for telephony. Real-time voice and telephony capabilities and support for integration with existing phone systems using a G.711 codec.
  • Socket Progress Events. This was another feature requested by many developers.
  • JPEG-XR support. Support for JPEG-XR compression format so you can use higher quality images with less bandwidth. Plus you can use alpha channel transparency.

You can read more here.

Adobe Mobile Challenge

My fellow evangelist, Michael Chaize, has way too much time. During the weekend he put together this nice site to announce a contest to the world. Oops, not to the world, but to those living in the European Union.

So, if you live in European Union and you publish an AIR application to Android Market, Apple App Store, and BlackBerry App World by September 1st 2011 then you can enter in this competition. What can you win? Well, it depends. If the grand jury (all European Adobe Evangelists) picks you as  one of the winners then you can get a trip to Adobe MAX 2011 Los Angeles or Adobe Creative Suite software. If your application is not a winner than you can still win experience and maybe some good feedback from the jury :)

Here is the man himself introducing the contest (don’t ask me why he is talking like this. All I know is that he lives in Paris :D):

Now, don’t be lazy and start working on your amazing app! You can read more about the contest here.

Creating Flex Mobile Section Lists

For a mobile application I’m working on I need a section list. If you are familiar with the Flex framework you know that you don’t have built-in section list components (you can have vertical, horizontal, and tile lists). I played a little bit with the Flex List, IconItemRenderer, and BasicLayout classes and managed to put together two section lists: a vertical section list and a tile section list. In this post I will talk about how I did it and about some theory behind the list components.

Continue reading