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

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.

BlackBerry Developer Challenge

This spring RIM offered a free PlayBook device to any developer who got his PlayBook app accepted in Blackberry App World store.

I know many of you didn’t get your apps done in time to qualify for this, but there is no need to be sad. RIM is running a developer challenge until August 12th. What does this mean to you? Well, if you are a Flash developer you can submit applications to the Best Adobe Flash/AIR app category. What can you win? Money and or fame :) They offer over $3 million in prizes.

You can read more and register for the contest here.

PS. A while ago I released my AIR application for splitting a restaurant bill to Android Market and BlackBerry App World. The stats are pretty interesting: I get about 10x more downloads on BlackBerry store than Android Market (my application has excellent reviews on both stores). Of course this has to do with the fact that PlayBook market is younger and there aren’t so many apps in there. I think this is an opportunity for developers/companies to get “THE APP” status for their apps :)

Flash Builder 4.5.1 and Flex 4.5.1 are out!

When we launched Flash Builder and Flex 4.5 in May we said that we will have an update a month later that brings Flex mobile development to all three platforms: Android, iOS, and PlayBook (BlackBerry Tablet OS). And this is the update we were talking about.

So starting today, you can build all sorts of amazing mobile apps that run across these different devices.

If you want to find more about this, make sure you register for Adobe Developer Week. This is a series of webinars that will start today.

In the meantime you can check Serge‘s videos.

Mobile Development: screen orientation and custom keyboards

I first started to create mobile applications last year once I got my hands on early builds of AIR 2.5 for Android. Since then I’ve built a number of mobile applications and I’ve talked to people smarter than me about mobile development.

Trust me, if you are like me, a developer with background in web/desktop applications, than this transition is not that easy. The “canvas” you have on mobile devices is much smaller, and the touch input user interface introduces a whole new universe.

So I thought I should share my experience by starting a series of articles. And hopefully I can get feedback from you, because as said, I’m not a user experience ninja. I’m just a developer.

In this first article of the series, I want to cover two topics: screen orientation and custom keyboards.

Screen Orientation

As if we didn’t already have enough complexity on mobile devices (different screen sizes and densities) on smartphones and tablets you have a feature called screen orientation. Basically, a user can hold a device in a portrait or landscape orientation. Adobe AIR provides support for this feature; you can code your application to account for screen orientation changes.

And this is great! Right? If some users prefer to work with your application in portrait mode and others in landscape, you can make them all happy by supporting both use cases.

Let’s stop for a bit and take a look at this feature in action. The screenshots are taken on my Android phone. In the picture below you can see the default soft keyboard pulled out when you want to type an URL in the browser. Obviously, what we have here is a landscape orientation.

The picture below shows the same application as the one before, but this time the device is held in portrait mode.

After I used this application in both orientations, this is what I thought about the pros and cons:

  • The soft keyboard takes a lot of space when is displayed. Thus you will see more of your application UI if the device is held in portrait rather than than landscape.
  • The bigger the device gets, the harder it is to type with both hands when holding the device in landscape. Indeed, if you’re not a basketball player, you will find it harder to type fast on a tablet when in landscape compared to portrait mode.

Custom Keyboards

All modern mobile OSes have built-in support for soft keyboards (on screen keyboard). Depending on the OS flavor you might have different keyboards, slightly optimized for a specific task (email/Internet, generic text, and so on).

All the Calculator applications I’ve seen running on these devices have a custom keyboard. The next picture is a screenshot of my Android phone running the default Calculator application.

Why does the Calculator use a custom keyboard rather than the standard soft keyboard? The answer in this case is obvious: because it has only the keys that are used by the application, this custom keyboard is much more optimized than the standard keyboard. The standard Android numeric keyboard has about 30 keys and the Calculator one has 16. Because of this difference, you not only get bigger keys but you don’t get noise (keys that are of no use in the Calculator context).

Below you can see a custom keyboard I created for an application that helps you to split the restaurant bill.

Conclusions

In conclusion, although people are used to changing the device orientation, you might want to reconsider this for your application and design your application for either landscape mode or portrait mode, but not both. Although this might seemed like a bit drastic, I do think that sometimes it could make sense.

For example, an email reader app if used in landscape mode on a tablet gives readers two panels at the same time: a panel displaying the messages and one displaying the content of the current selected email. You don’t even have to force your users to use one orientation though. In the example above, when the user wants to use the device in portrait mode you can hide the messages list panel.

Second, you should always ask yourself if your application can benefit from having a custom keyboard instead of the built-in keyboard.

This was my first post from the series. In the next posts I will go deeper on how to create custom keyboards, how to deal with screen orientation, and how to adapt your layout to resolution just to name a few.

Creating PlayBook apps with Flex and QNX UI Components

I got some requests about how to use both Flex and QNX UI components for building PlayBook apps. In this post I will show you how to do it.

Here are the basic steps.

1. Create a Flex mobile project. Make sure that you enable the project for BlackBerry Tablet OS development.

2. Edit project properties to include the QNX libraries in the project build path (right-click on the project name > Properties). Select BlackBerry Tablet OS section and then select the Include BlackBerry Tablet OS Libraries in Build Path option.

Once you apply these changes your project should be ready for QNX components. Of course you have to add QNX components using ActionScript code; you can’t use QNX components as MXML tags.

You have to remember that the QNX UI components don’t inherit or extend the Flex base UI components. And because of this you can’t add them, for example, directly to a View Flex class using view.addElement(QNX-UI-component); instead you can use an instance of Flex UIComponent as a wrapper. Here is a code snippet that illustrates this technique:

Here is screencast that walks you through the setup and shows a sample app:

Download

You can download the project code from here.

Conqu – one of the coolest Android apps outhere

Yesterday, fellow evangelist, Terry Ryan, showed me  a tablet app for Android called Conqu. After I installed and played with it for about 5 minutes, I said: “Wow! Mate, this is the coolest app for Android tablets ever!”.

The application helps you to “Get the things done” – by managing tasks. Here is a video and screenshots:

And by the way, this application is built using Flex 4.5 (“Hero”) and uses Adobe AIR for Android as a runtime. Now this is something pretty cool. Well done guys!!!

Because they use the Flash Plaform, it isn’t that hard to target other Flash supported devices such as: PlayBook, desktops, or iOS. In fact if you take a look at their roadmap, this is exactly what they are up to.

I really like the fact that they work on a feature that allows synchronization between devices over the cloud. This will facilitate team work and make this app an interesting and appealing choice for small/medium business.

Getting the App

You can install the application from here (for now there is only the tablet version) and here you can check the roadmap and features.

Congratulations to the people behind this project. I’m looking forward to testing their desktop/PlayBook/iPad versions and hope to meet them in person. I’m really curious to talk  about their experience building this app.

Animating QNX components in PlayBook apps

In this post I want to show you how you can use animations/transitions for QNX components to create a better user experience. User experience designers use transitions when they want to highlight or focus user attention to a specific part of the application.

For example, when you add a new component to the screen as a result of user interaction you can do it in two ways:

  • just add the new component to the display
  • create a transition or animation that gradually introduces the new component to the display

I think it is easiest to understand the subtle difference between the two approaches by seeing this screencast:

In my application I used the tweener library for animating the container that holds the list. This ActionScript library is one of the most used libraries out there for this task. You can grab it from here.

LATER EDIT: QNX is using Tweener internally. So you don’t have to add this library, is already part of the SDK (qnx-screen.swc). Thanks to Julian Dolce of RIM for pointing this out.

Once you get the SWC file, you have to add it to your ActionScript mobile project. The easiest way, especially if you plan to use more libraries, is to add a folder to the ActionScript build path and configure Flash Builder so that every SWC file you drop in this folder will be added to the project.

The steps are:

  • Create a folder in your project. I created a folder called libs for my project.
  • Copy the tweener.swc file into this folder
  • Open the project properties page (right-click the project name and select Properties) and select the ActionScript build path. Then click the Add SWC Folder button and select the folder you created earlier. Click the OK button and you are good to go.

How do you use this library? Actually it is pretty simple. There is a static method on the Tweener class called addTween(). You use this method to specify the display object you want to animate, the properties you want to animate (could be the x, y, size, etc), and the animation duration. You can also specify a number of functions to be called for example when the animation is completed or for each step of the animation.

Here is the code for animating the list in the screen:

// rightDock is the container that holds the list
// it is docked to the right-side of the screen
Tweener.addTween(rightDock, {size : 200, time : 1, onUpdate: onUpdateTween});

private function onUpdateTween():void {
    myMain.layout();
}

And this is the code for removing the list from the screen:

Tweener.addTween(rightDock, {size : 1, time : 1, onUpdate: onUpdateTween,
    onComplete: onCompleteTween});

private function onCompleteTween():void {
    myMain.removeChild(rightDock);
}

Why do I call myMain.layout() for each step of the animation? This method is executed in order to reposition and redraw the components on the screen so they account for the width change of the rightDock container.

You can download the project source code from here.

Upcoming webinar: Meet the PlayBook

If you want to find more about the PlayBook, make sure you don’t miss this free webinar: Meet the PlayBook. RIM will host a 60-minute presentation (15 minutes for Q&A). Here is the agenda:

  • Overview
  • APIs to build great apps
  • Skinning with QNX UI Components
  • BlackBerry App World (submitting apps & revenue generation)
  • Q&A

Depending on what works better for you, you can choose the 10AM CET or 4PM CET event,  both on March 23rd.