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.

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.

Creating Flex Mobile Apps with Flash Builder for PHP

As you might have heard, we released earlier this week Flash Builder and Flex 4.5. Part of this release is a new product called Flash Builder for PHP 4.5. This is something you should make sure you try if you are a PHP and Flash/Flex developer.

So what is Flash Builder for PHP? This product will install Flash Builder 4.5 with Zend Studio 8.1 as a plugin plus some additional plugins that integrate these two products. Using this IDE you can create mixed projects (Flex and PHP both for desktop and mobile devices) and you can streamline testing, deploying, debugging, and consuming PHP services via Flex remoting (with the help of Zend Framework).

Instead of writing a pretty long article, I decide to shoot a video tutorial on how you can create a Flex mobile app that uses a PHP service. This tutorial will walk you through:

  • Using the new project type Flex Mobile and PHP
  • Creating a mobile application that has two views/screens. I will explain how to use the ViewNavigator and View classes to control your application state
  • Consuming a PHP service from a Flex mobile app using remoting
  • Testing and debugging the code (Flex and PHP) on the desktop simulator and physical device

I hope you will enjoy this. If you want to download the files used for this tutorial, click here (unzip the file and you will get the Flex project you can import it and the PHP files plus the database dump).

Flash Player 10.2 for Android Honeycomb is out

If you have an Android Honeycomb tablet and you go to Android Market you’ll be able to download the final release of Flash Player 10.2. This version enables hardware accelerated playback for 720p video. However you will not enjoy this feature with the current Android 3.0.1; the next Android update will turn on this feature.

Finally, I want to point this out: the teams behind the Flash Player and AIR runtimes are working harder and faster than ever. The number of platforms and devices supported by these runtimes has grown a lot in the last couple of years and still, they are able to keep up the pace and add new features. Big round of applause to you!

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.

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.

Android Pictures and MP3 Remote Control Reloaded

Last year, I made two Android applications that connect to desktop apps: AndroidPictures (you can see the phone’s camera roll on a desktop) and Remote Control for desktop MP3 player (you can control an AIR desktop MP3 player from your mobile phone). At that time, Flex “Hero” wasn’t available, so last week I decided to rewrite these apps, this time using the mobile components from Flex “Hero”.

The reason I rewrote them with Flex “Hero” is quite simple: to see if it simpler or more complicated compared to plain Flex. And not surprisingly it is much simpler with Flex “Hero”. Actually I like the Views and ViewNavigator so much, that I’d love to have them available for desktop applications too.

One note on how these apps connect to each other: I used the new Peer 2 Peer capabilities from AIR/Flash Player. This part is extremely simple actually and if you have a look at the source code you’ll find that I wrap this functionality in a library that is used in both projects.

You can download them from here:

Working with Flex RPC Services in ActionScript Mobile Projects

In a previous post I showed you how you can use  QNX UI components in a Flex Mobile project that uses Flex RPC services (REST Style Services/Web Services/Remoting). What if you want to use Flex RPC services in an ActionScript Mobile Project? It isn’t possible, isn’t it? Wrong, you can make it work with a little bit of extra work.

This works because, as my colleague Renaun Erickson said, Flex != MXML. In other words if you add the right parts from the Flex framework to your project you will be able to reuse these Flex services. Though, you won’t be able to write MXML code. Everything will be just ActionScript code.

Once you created a new ActionScript Mobile Project (these project supports Android and BlackBerry Tablet OS as target platforms) there are two steps you have to complete to enable Flex RPC support.

Step 1. Right-click on the project name and choose Properties. Then click on the ActionScript Build Path entry. You will notice there are already some parts of the Flex framework added.

Continue reading