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:

Read more

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

AIR 3 Beta and Flash Player 11 Beta are out!

We just released AIR 3 Beta 2 for desktop and Flash Player 11 Beta for desktop. You can download them from here and here.

Here is a list of the most important news in these releases.

AIR 3 Beta:

You can read more here.

Flash Player 11 desktop Beta:

You can read more here.

August 10, 2011 | Filed Under AIR | 4 Comments 

About Different Types of Fragmentation

If you are a developer fragmentation is part of your life. Everywhere you look you find it:

Judging fragmentation in terms of good or bad is counter productive. It is what it is, right? In the end it gives us more work which is not that bad :)

There is fragmentation and fragmentation

However, there is another type of fragmentation that is becoming more and more visible. And this version is quite annoying. It is about having all these devices like islands in a big ocean. And all these islands are not aware of each other and they don’t even know they are islands.

What am I talking about? Let’s take a look at a typical household. You’ll find devices like:

And the simple truth is that all these devices are not aware of each other. Or in other words, if I have a smartphone and I’m home enjoying some TV time on the latest television set I don’t get any extra functionality on either device.

All together now

So what could we do to improve this simple scenario (a smart TV and a smartphone/tablet)? Well think of the “ultimate” remote control”. In a perfect world, when I want to find something interesting to watch at TV, I’d pull out my tablet (or smartphone) and open up the remote control app. This app will connect to television or set-top box and retrieve all the programs that are available.

Then it will present them in a useful way. Today, we think in terms of channels. You have x channels and you zip through them. Instead of this, this Remote Control app would display the available programs sorted on categories: SF movies, nature, cooking, news, fashion, sports, and so on. So with a quick flip through movie sections I could find easily an interesting movie. Or if I love football or tennis I can find what’s available right now.

Next, suppose that I select a tennis match (the US Open is coming by the way). While I’m watching the match I could choose the social section of the Remote Control app and I can check to see if my buddies are online. I could ping them to watch the match together and chat using text messages, VOIP, or video calls directly from the tablet device.

While enjoying the match together with my friends, my wife is on the way home. She has a smartphone as well and because of that I can get a notification on my smartphone or tablet that she is quite close to home. So I can go to the kitchen and start preparing the dinner. She could have left for me instructions for me (using her smartphone or personal computer) and I could check them on my device or using the fridge integrated tablet (did I mention the fridge has an integrated tablet?).

While cooking some delicious dishes somebody rings the doorbell. My tablet pop ups a notification and with one tap I can see who’s outside and decide to open the door or to ask him what he wants.

My wife wants a new couch and I start browsing for options using my laptop. Once I found something that looks great I choose to display the web site on my TV so we can see what it looks like. While the images are displayed on the TV I use my laptop to navigate, rotate, or zoom the images.

The next morning, as we are getting ready to leave the house I could check the car status on my phone: fuel level, service notifications, outside temperature. As I arrive at the office I realize that I forgot to program the air conditioning unit. I just fix this using my mobile phone.

Present or the land of opportunities

Now back to reality. Most of what I have described here is already possible. Of course there is no off- the-shelf solution but a smart developer can create software that makes different devices work together. I’ve been thinking about this a lot lately and also I’ve been talking to others smarter than me (fellow evangelist Mark Doherty has lots of idea about this cross device experience).

And the reason we don’t have off-the-shelf solutions (or solutions that do exist are very expensive) is that we don’t have a standard that is implemented by all the manufacturers who build smart devices. Manufacturers will have to expose some of the core functionality of their devices to third parties as well if we want to build software like my “Remote Control” example. Today it is pretty hard to come in as a third party developer/company and try to build in some interoperability.

How is this post related to what I’m usually talking about on my blog? Well, you can do many things with the Flash Platform since you can use it to build stuff for so many devices (personal computers, embedded devices, mobile devices, Arduino and Phidgets). Maybe we can start building cool prototypes and go after the big consumer electronics manufacturers and show them what is possible to do. This is one way to turn around this issue.

I don’t have enough insight into the consumer industry so what I’m about to say could be horribly wrong. I have the impression that many of the big players (companies who build TVs, cars, broadcasters and content providers) are just missing this. There is no doubt in my mind that one way or another we will end up talking about this type of fragmentation using the past tense. Until then, I wish you an amazing weekend and don’t forget to post a comment if you have something to share!

PS 1. Almost two years ago I wrote a post on a somehow related matter (augmented reality + always connected/synced). Back then I was pretty sure that in about two years we would have something like that available.

PS 2. There are some companies who are working in this direction (use your mobile device with your television, making home automation more accessible) but these examples are far too few.

August 5, 2011 | Filed Under Others | 4 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 

Adobe AIR and Sony Tablet Opportunities Webinar

Today, July 20th, join Adobe & Sony for a webinar on Sony Tablet devices and the Adobe AIR App Challenge. Fellow evangelists, Ryan Stewart and Mark Doherty, will present the two webinars:

You can register here.

July 20, 2011 | Filed Under Others | 4 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:

  1. Android Market
  2. iTunes App Store
  3. BlackBerry App World
  4. Amazon Appstore for Android
  5. Nook Color

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 

Adobe AIR App Challenge for Sony Tablets

Yes, you heard me right! Sony has just announced not one but two tablets based on the Android 3.x (Honeycomb) operating system. As you can see in the picture above they look pretty impressive. What’s more, one of them has a two screen design. I really look forward to seeing what creative Flash/Flex developers can put together for such a device.

And what better way of getting you mobilized and working on your AIR app for the Sony tablets than entering in the Adobe AIR App Challenge for  Sony tablet.

The big prize is nothing short of $100,00 and there are many more (in fact there are another 7 prizes ranging from $10,000 to $20,000).

All you have to do is write your app optimized for these tablets, make sure you upload the final app to http://www.airappchallenge.com/, and publish it to the Android Market before November 11th. Pretty simple, isn’t it?

All the finalists (top 80) will receive a prototype of these two tablets so they can test and fine tune their apps before the final round.

If you want to get a shot at the MAX Showcase App prizes you have to finish your app by September 16th.

Now get started because the contest just started today :). You can read more here.

PS. In case you’re wondering how you’ll be able to create your app for the Sony Tablet S2 (code name for the one with two screens) then here is the answer: you’ll be able to use one of the coolest features of AIR 3 (the upcoming version of AIR) called Native Extensions. Using this feature you can expose Android APIs to your ActionScript code and use them in your AIR app.

July 13, 2011 | Filed Under Others | 4 Comments 

July Events

This week I will speak at the Munich Google Technology User Group (July 14th, Google Munich Dienerstrasse 12) and the Oporto Adobe User Group (July 16th, Adobe @ Museum).

On July 28th I will be in Köln talking at the Meet the PlayBook event.

See you there and in case you’ve already taken your vacation, enjoy the summer :)

July 12, 2011 | Filed Under Presentations | Leave a Comment 

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.

Read more

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

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.

July 6, 2011 | Filed Under AIR, Android, iOS, PlayBook | 2 Comments 

← Previous Page — Next Page →

Switch to our mobile site