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:

August 10, 2011 | Filed Under AIR, Android, Flex, iOS, Mobile, PlayBook, Tutorials | 5 Comments

About Tablets and Smartphones

Lately, it is quite impossible to attend a software conference and not see sessions dedicated to mobile development. This is the hot topic of the day and rightly so, I believe. However, I have the impression that many people think that tablets and smartphones are almost the same thing. This is something that I do not believe is true. Furthermore, I think that because of this belief held by others many tablet applications end up being just a scaled up version of smartphone apps. If a tablet is just a phone with a bigger screen then a tablet app is just a bigger resolution smartphone app, right?

Let’s see why do I think that a tablet it is not just a bigger phone.

Tablets are more powerful than smartphones

This seems to be just a truism. Well, it is and yet most applications that run on tablets and smartphones tend to offer the same set of features and experience.

This is suboptimal because on a tablet you have more storage space, a more powerful processor, and a bigger screen. And, if the battery doesn’t last for a full day it is not a tragedy. Is not like you end up in the middle of nowhere with a dead phone :)

All these differences should be exploited to create tablet applications that help people to do more than what they are able to do on a smartphone. If you take into account only the bigger screen you have something that enables people to read for hours without getting teary eyed. When more storage space is available , for example, why not let the user decide how many GB your application can use and offer him a true offline experience for things like email, news, RSS feeds, videos, and so on.

Tablets are shared smartphones are personal

Correct me if I’m wrong, but I have the feeling that, at least in the case of home users, a tablet is shared. This is not the case with your smartphone. You don’t say “hey mate, here is my phone. Just return it in four hours.”

And if this is true, why are so many tablets apps built with a single user in mind? How can you have a tablet shared when you have to logout from your social or email accounts in order to let the other user do something?

Again, this feels to me like a big opportunity that it is missed. Why not enable multiusers for them and support on all the apps for which it makes sense? Remember, you do have plenty of storage space…

The Missed Opportunity

I think that this tablet shortsightedness is part of the reason for what we are seeing today: there a far fewer apps for tablets than for phones. And this is true for all the application stores.

I think that developers have a real opportunity here, and that for now it is just being missed. Once we fully understand that tablets and smartphones are different and people want and should use them differently, we will see much more innovation.

July 29, 2011 | Filed Under Mobile, Others | 3 Comments

Using Adobe AIR to reach multiple devices: Conqu

About three or four months ago I wrote a blogpost about Conqu – an AIR application for managing tasks. Since then, Conqu has been one of the best demos I have at hand when talking about mobile development with the Flash Platform. Most people couldn’t believe that Conqu was built using Adobe AIR and Flex.

Back then, it was available only for Android tablets. But today, Conqu is available in:

Running on an iPad:

Running on an Android Tablet:

Conqu is running today on three different OSes: Android (including Nook Color), BlackBerry Tablet OS, and iOS. And this is not all. They are working on making it available on Android phones, iPod Touch/iPhone, and desktop computers.

I tried the app myself on Samsung Galaxy Tab, iPad 2, and PlayBook. On each device it worked just great and looked beautiful at the same time.

I think that, with all modesty, this is a proof that the Flash Platform does deliver on multiple devices and OSes. Because the Conqu team used Adobe AIR and Flex, and applied the same tools and workflows for each version it was much easier to distribute their app across so many devices.

If you want to learn about mobile development with the Flash Platform make sure you show up at one of the events that the evangelism team is participating in all over the world. And of course take a look at the Adobe Developer Center page.

Nahuel Foronda of the Conqu team was kind enough to answer some questions I had. So here is a short interview with the team behind Conqu:

Me: What is Conqu?
Nahuel Foronda: Conqu is an easy to use yet powerful task management tool designed to help you conquer your inbox and get things done. With Conqu, you can organize the tasks by criteria that makes sense to you and then find the right task to do at the right time and place. Whether you are a GTD pro or you just need a simple to-do list, Conqu will provide you with all the tools you need.

Me: What is your business model for this app because you offer the application for free?
Nahuel Foronda: Conqu is free because we want to reach as much as people as we can. By removing the monetary barrier we believe that more people will try it out. From those that try it, some will use it once in a while but others will use it daily. People that find value on it are our real customers. They are the ones that appreciate other features like cloud synchronization between devices or the ability to interact with other APIs. Our business model is based on the synchronization service, which is a monthly subscription.

Me: Did you use the Flex framework or pure ActionScript?
Nahuel Foronda: We used the Flex Framework. It was a simple decision for us because we were already working with Flex in all of our previous projects. We really wanted to use a CSS system powerful enough to make the look and feel of our app as close to our Photoshop mockups as possible. Flex gives us that flexibility and it also has the advantage of being a great layout framework.

Me: Conqu doesn’t look like a Flex app. How did you do it?
Nahuel Foronda: We used Flex as the foundation but we created a lot of custom components. We used the List, TextInput, TextArea, Flex layouts and containers but the rest is all custom. All of the components (including those included in the framework) are highly skinned with ActionScript skins and graphics. The look and feel was very important for us, so that’s why you don’t find out-of-box Flex skins or regular Flex components in our app.

Me: The app not only looks great but performs greatly on all devices I tested. How did you do it?
Nahuel Foronda: The key for us was to use a very lightweight class as base for our components: SpriteVisualElement. That allowed our components to be very responsive. All the Flex layouts work great with this class, so we are able to include our lightweight components in any view. For the animations, we created our own layouts and use the Tweener library.
Another important optimization we did was to make all our skins in ActionScript as opposed to use MXML. In 95% of the cases we used bitmap graphics for things like backgrounds or icons instead of vectors to avoid runtime calculations.

Me: Your first supported device was Android tablet. How hard was to deliver the app for PlayBook?
Nahuel Foronda: It was not that bad, but it could have been great if we didn’t have to monkey-patch the Flex Framework to make the app that was running in AIR 2.6 run on the Playbook, which supported only AIR 2.5. I want to clarify that right now it is simple because both run the same version (2.7). At that moment, however, it took me some time to make it work. That’s what happens when you are working with a device that is not even out yet and is under development :)

Me: What about the iPad version?
Nahuel Foronda: That was perfect, very easy to make it work. We only had a couple things here and there but overall, it worked amazingly.

Me: Did you think about going native for Conqu? What made you change your mind?
Nahuel Foronda: Not really. We thought at some point about making an iOS-only version, but never three different versions. I don’t like the idea of developing an app three times for three different markets. We don’t really have the resources to do that. We also don’t have the time to develop and maintain three different platforms.

AIR allows you to focus on one code base with maybe a few differences in the layout, but still one code. What made me believe it was possible was the schedule app developed for MAX last year. That app was working very well on the small devices and because tablets would have more memory and CPU, if you built something for them, it would run even better. Now, a year later, the phones are faster too, so I believe we made a good choice.

Me: I know you have in the works versions for phones, Android and iPhone. How did you solve the problem of multiple resolutions/screen densities?
Nahuel Foronda: I’m working with the CSS queries that the Flex Framework provides. They give us the ability to use different bitmaps for the different resolutions and it is working very well for us because it keeps our code clean. Only the CSS has a reference to all the different resolutions.

Me: What about the team who build the app? I mean what experience did they have with the Flash Platform and mobile development and how large is the team?
Nahuel Foronda: We are three people on the team: a designer (Mark) that created all the mocks in Photoshop, a server side developer and Flex developer (Laura), and myself. Laura has great experience in ColdFusion and she takes care of all that plus half the Flex side (using Mate Framework). For example, she is in charge of all the model and most of the business logic in Flex. I’m complementing the team doing the optimization and all the ActionScript code such as custom component and skin development

Me: Do you have any other killer app in your pipeline?
Nahuel Foronda: We have a lot of ideas! But we are trying to focus on this one until we have released the desktop and phone versions.

Me: Is there anything you want to add?
Nahuel Foronda: Thank you so much for the interview and if your readers want to know more about the whole development process I have a very detailed post that I did not long ago.
http://www.asfusion.com/blog/entry/design-first-and-the-process-behind

July 18, 2011 | Filed Under Mobile | 2 Comments

Creating Flex Mobile Lists Part II – Using Virtualization

This is the second part (and the final one for that matter) of my post about creating Flex mobile lists (you can read the first part here). In this post I will show you how I modified the custom layout manager that I created in the first post to add support for virtualization. Also I will discuss the theory behind Flex list virtualization and creating custom item renderers.

As a reminder, in the first part I talked about you how you can create a custom list and layout manager that can be used for displaying vertical and tile section lists:

In this post I will show you how you can create layout managers that support virtualization and custom item renderers. You can see the two custom item renderers below:

I won’t discuss how I created the custom list component to support sections. For this read the first part of this series.

July 11, 2011 | Filed Under Flex, Mobile, Tutorials | 7 Comments

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.

July 4, 2011 | Filed Under AIR, Flex, Mobile, Tutorials | 6 Comments

Another great AIR app running on multiple mobile devices

The guys from Avant Goût Studios released an interactive book for Android tablets, iPad, and PlayBook last week. It is called Apolline & Léon and it looks just great. If you don’t believe me, watch the video below.

It was created using Flash CS 5.5 and Adobe AIR 2.7. It is already available in App Store, Android Market ~~(and soon it will be available on BlackBerry App World)~~, and BlackBerry App World.

This is just another great example of how easy you can reach multiple devices using the Flash Platform with high quality content and great performance. Well done guys and I’m looking forward to seeing more apps like this!

June 28, 2011 | Filed Under Mobile | 3 Comments

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.

June 20, 2011 | Filed Under AIR, Android, Flex, iOS, Mobile, PlayBook | 1 Comment

Adobe AIR 2.7 is out!

We’ve just released Adobe AIR 2.7 for desktop, Android, iOS, and PlayBook. In terms of features, here is a list of the most important.

Mobile:

Improved performance for AIR apps (including those built with Flex) running on iOS. You will see up to a 4X improvement for the same app when running on AIR 2.7.
Faster development time for iOS applications – there is a new mode for testing and debugging your AIR app on iOS devices that will enable faster cycles.
And this is one I’m sure you’ll love: you can install the AIR runtime on the SD card of your Android device.

Desktop:

Integrated support for Media Measurement – allows companies to see how content is distributed and viewed by users
Acoustic echo cancellation – this is the same feature already available in Flash Player 10.3. It means you can enable users to do VoIP using speakers and microphone (no need for headsets).
Navigation Improvements for HTML Content – developers can now respond to a new event to be notified when content within the HTMLLoader control attempts to change the location of a page. This enhancement provides developers with a better way to implement intra-application navigation.

Watch my fellow evangelist, Renaun Erickson, showing AIR app performance on an iPad:

You can download AIR 2.7 from here. This month, Flash Builder 4.5 will get an update to enable support for AIR 2.7 and PlayBook will receive an update OTA of AIR 2.7 by the end of June.

June 15, 2011 | Filed Under AIR, Mobile | 5 Comments

GUIMark 3 – Mobile Performance Test for HTML5 and Flash

Sean Christman of EffectiveUI has released the results for his latest test that measure HTML5 and Flash performance on mobile devices (smartphones and tablets). GUIMark 3 tests different tasks like bitmap drawing, vector drawing, compute tests, and video playback (all in all there are 200 tests).

The results might be a surprise for some but not for me. As Sean put it “Flash maintains a 2x performance lead over HTML5 on average”. I encourage you to read his post and let others know about this. I think this test confirms all the effort Adobe put in optimizing the Flash Platform for mobile. And it shows that it wasn’t just talk.

Disclosure: Adobe funded this effort, but anyone knowing Sean will know that he is more interested in finding the truth than favoring a particular side.

June 14, 2011 | Filed Under Mobile | Leave a Comment

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).