Edge Reflow, Edge Code, CSS Regions, and iOS 7 Mobile Safari

What do Edge Reflow CC, Edge Code CC, CSS Regions, and Mobile Safari have in common? As of today the CSS Regions feature is supported by Edge Reflow and Edge Code joining Mobile Safari which added support for CSS Regions with its latest update from last week (iOS 7 release).

Note: If you don’t know what CSS Regions is all about, then imagine a simple and elegant syntax that allows you, among others, to tell the browser to flow content through a chain of containers. And the browser will figure out how much content fits in each container.

Continue reading

CSS Regions in iOS 7 Safari

I am very excited about the latest iOS version (the 7th). Not only does it make me feel almost the same as the first time I ever used an iPhone (I’m only halfway kidding here :D) but it also manages to improve many things that were already quite good.

The browser is one of them. I have a number of websites that I visit almost on a daily basis and although they are “optimized” for mobile they are still quite heavy. On my iPhone 5, the new Safari mobile browser renders them much, much faster. I was actually blown away by the speed improvement. I am curious what they actually changed :).

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

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.

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.