About Flash Mobile Versatility

The Flash Platform as a compelling mobile solution across devices is enjoying an excellent momentum. I’m getting and seeing more and more Flash powered mobile apps. While this is interesting and cool this not what I want to focus on in this post.

Most people think about the Flash Platform for mobile as something that enables developers to build mobile apps for Android, iOS, and BlackBerry Tablet OS. What it is not so evident is it’s versatility: you can build almost whatever you want. And when I say this I mean it. You can build sophisticated games (and soon you will be able to build cool 3D games thanks to Stage3D), you can build beautiful apps for enterprise or consumer brands, you can build high performance apps for consumers, and the list can go on and on.

The last big thing that was a show stopper for some projects is about to be removed by the Native Extensions feature. This feature (it will be available in the soon-to-be-released next version of Adobe AIR) will enable developers to extend the runtime and achieve deeper integration with the device by accessing device/OS capabilities or other applications.

Let me give you just one example. Three applications that are quite different in what needs they solve while working and looking just great.

Cassandra Stand is a companion application for Android, iOS, and PlayBook devices. It picks your location automatically and displays time/date, temperature, and news. While this app is a simple one it works and looks great. Congratulations to Leonardo Risuleo and the team.

Web Reader is probably one of the best PlayBook apps for those who use RSS readers. It is fast and intuitive and it works great with Google Reader. I’d love to see these guys writing an article about how they built their app. As with the previous two apps I installed the app on my tablet and played with it. My RSS list is pretty big and I was curious about how they will display all the categories and how easy would be to navigate between the various items. All I can say is that they did a good job :)

Hungry Cho-Cho is a funny little game for iOS. Tomer Reiss of KWAZI shown me this app during my visit to Israel earlier this year. It worked just great on my iPod Touch (at that time they were using AIR 2.5; I’m curious how it would feel with AIR 2.7 as this release brought more speed and performance especially for iOS devices). They released their application and he wrote a blog post about some of the things he learned while developing the game.

If you created some cool mobile apps using the Flash Platform, you know how you can get in touch with me. I’m out!

September 19, 2011 | Filed Under Others | Leave a Comment

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.

August 30, 2011 | Filed Under AIR, Mobile | 6 Comments

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.

August 29, 2011 | Filed Under AIR, Mobile, Tutorials | 6 Comments

Future of Flex

Andrew Shorten (group product manager for Flex and developer tools at Adobe) just posted an interesting write-up about the future of Flex. If you are a Flex developer I’m sure you’ll find this worth reading. I know I did.

I won’t spoil the surprise but I have to say that I think this is good news!

If you have comments, please leave a message here! I will make sure it reaches Andrew’s inbox!

August 26, 2011 | Filed Under Others | 4 Comments

Introducing Adobe ColdFusion Developer Week

If you are a ColdFusion guy or maybe just curious to find what’s new in this space then you shouldn’t miss Adobe ColdFusion Developer Week. It is a free series of webinars presented by experts. It starts on September 12 and ends on September 16. Here is the schedule:

September 12- Getting Started with Web Application Developement Using ColdFusion ›
September 12 – Working with PDFs Made Easy with ColdFusion ›
September 12 – Introduction to ColdFusion Components (CFCs) ›
September 13 – Improve Your ColdFusion Code Through Unit Testing ›
September 13 – Using ColdFusion Frameworks for Application Development ›
September 14 – ColdFusion Builder: The Professional IDE to Boost Your Productivity ›
September 14 – Expand Functionality with ColdFusion Builder Extensions ›
September 15 – Developing Your First Application Using ColdFusion 9 and ORM ›
September 15 – ColdFusion and Mobile – Browser-Based Applications Made Easy ›
September 16 – Accessing ColdFusion Services From Flex Applications ›
September 16 – Make Your Site Searchable with Solr ›

You can register and read more here.

August 25, 2011 | Filed Under Presentations | Leave a Comment

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;

August 23, 2011 | Filed Under AIR, Mobile, Tutorials | 9 Comments

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)

August 18, 2011 | Filed Under AIR, Mobile, Tutorials | 5 Comments

What are your favorite iOS/Android apps?

I’m really curious to find out what your favorite iOS or Android apps are. If you don’t mind sharing your preferences with me and spending a couple of minutes on writing them down, please drop a comment. You’ll get my eternal gratitude!

PS. You can name as many as you want as long as you consider them killer (or favorite apps).

August 17, 2011 | Filed Under Others | 19 Comments

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.

August 16, 2011 | Filed Under AIR, Android, Flex, iOS, Mobile, PlayBook, Tutorials | 8 Comments

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: