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

Mobile Development: scaling content depending on the screen resolution

The Flex framework offers a number of methods to adjust the size of the application UI depending on the device screen resolution and density. For example, you can set the applicationDPI attribute or you can use different CSS files.

In this post I will show you how you can scale or adapt the application UI at runtime using the Capabilities API. But first, why would you want to change the size of the application UI? Consider these two pictures.

Nexus One:

Samsung Galaxy Tab:

The first one is a screen capture taken on a Nexus One phone and the second is taken on a Samsung Galaxy Tab. Obviously, the Samsung Galaxy Tab has a higher screen resolution (600 X 1024) compared to the Nexus One (480 x 800). So, if you don’t make any adjustments to your UI, everything will be smaller on the bigger screen (as you can see from these pictures).

Sometimes, this is not a problem. In other situations, you might want to increase the size for some parts of your design due to aesthetic or usability reasons, or maybe both.

Using scaling to adjust the content size

When I worked on the aTabSplitter application, the first thing I did regarding the UI was to make sure that it wouldl fit nicely on a screen with a resolution of 400 x 800. By using Flex containers (VGroup, TileGroup, and HGroup) and playing with a mix of absolute and relative sizes I was able to easily create a “liquid” design. For example the keyboard is designed to take up about 320 pixels x 320 pixels. The TextArea at the top is set to fill in all the available space. Why did I choose this resolution? By looking at various Android devices I felt that this is the smallest resolution. Here is the code:

For the aTabSplitter application I wanted to increase the size of the virtual keyboard when the application runs on devices with a screen resolution higher than 480 x 800. And the simplest solution is to use the Capabilities API. When you run your application on a device, Capabilities.screenResolutionX gives you the horizontal resolution. If you want to check for the screen density, you can use Capabilities.screenDPI.

Back to the code, I set an ID to the HGroup that holds the buttons and then I registered a listener for the creationComplete event on the view. Using this listener I can check for the screen resolution and if needed I can change the size of the HGroup using its scaleX and scaleY properties. When the container scale is changed, all the contained components are scaled too. Thus everything is kept in place, nicely aligned.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 title="HomeView" creationComplete="layoutButtons()">
<fx:Script>
<![CDATA[

private function layoutButtons():void {
  if (Capabilities.screenResolutionX == 600) {
     buttonsHolder.scaleX = buttonsHolder.scaleY = Capabilities.screenResolutionX / 450;
   }
}
]]>
</fx:Script>

[...]

<s:HGroup id="buttonsHolder" gap="5">
[...]
</s:HGroup>

And here is how the keyboard looks when I run the code on a Samsung Galaxy Tab (compare to the previous screenshot taken on the same device):

Of course, you can apply scale in the other direction – decreasing the size of a component.

Conclusions

This is a pretty simple trick yo can use to adjust your content to different screen sizes. In the next post I will show you how you can adapt the content to screen orientation changes – device held in portrait or landscape mode.

You can download the project code from here (you’ll need Flash Builder 4.5 and Flex 4.5 to run and compile the project).

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.

Understanding Flex Mobile View and ViewNavigator

The Flex framework “Hero” makes the task of creating mobile applications for BlackBerry Tablet OS, Android, and soon iOS extremely simple. I think that one of the best looking apps for Android is MAX Companion 2010 and please bear in mind that this app was created using an early build of Flex “Hero”.

This is a reasonably complex application with lots of screens and social integration (Twitter) and yet on my Nexus One and Samsung Galaxy Tab it still works great. This is exactly where the Flex framework can shine on mobile devices: fast and easy development of applications that can connect to virtually anything (web services, REST services, RPC).

In this article I will talk about Flex Mobile Views and ViewNavigator. If you want to use Flex “Hero” to create mobile apps you need to understand how these components work.

Oh and one more thing, if you want to try this yourself you’ll need the Flash Builder “Burrito”. You can download it from here. Continue reading

Developing for mobile devices with the Flash Platform

The dust has settled over this year Adobe MAX conference (my colleague, Serge Jespers, has been thinking about the next year’s conference for the past two months but this is another story :D).  So, by now, you should have heard most of the news around the Flash Platform and mobile devices. However, if you haven’t yet tried to build your first “Hello World” application, read on because it is really simple for us, Flash developers.

In this post I want to help you understand what tools and workflows you can use and what devices you can target. Please keep in mind that this post is about what is available today. We are working hard to make mobile development easier so expect to see more news from us in the future.

Continue reading

Radar – cool AIR app for Android

My fellow evangelist Mark Doherty was quite busy this summer building an AIR application for Android. Now, why I am taking my time and your time to talk about his application? Because this application is an excellent resource for learning how various capabilities of the Flash Platform fall together on Android.

This application enables users to make peer2peer video calls. It uses Google Maps in 3D mode, Twitter or Facebook for authentication (we just released a new version of the Adobe ActionScript SDK for Facebook platform), and Adobe Cirrus (formerly Stratus) for sending the data from one user to another. Of course it uses the location API to place the users on the map, and it uses Mic & Camera access as well.

Mark published this application on Android Market and built a desktop version too. You can find more about Radar on Mark’s blog.

Start making money with AIR apps for Android: AIR is available on Android Market

Adobe AIR 2.5 for Android was just released. So, if you have an Android phone running FroYo (Android 2.2) you can go to Android Market, search for “air” and install the runtime like you’d do with any other application. Next, if you want to try some AIR applications for Android, just search the Internet for AIR Android application. Or you can have a first run with the three applications I’ve built this year (on the right side of my blog you’ll find the links for these apps).

If you want to start developing AIR apps for Android, then the first thing you need to do is to sign up with the AIR prerelease group. And once you grab the AIR 2.5 SDK and the Android SDK (from Google) you are ready to start creating AIR apps. You can use your favorite text editor, Flash Builder 4, or Flash Professional. Quick note: AIR for Android doesn’t support the HTML/JavaScript/CSS workflow for creating AIR apps (AIR apps for desktop can be created using these technologies); it supports only ActionScript/Flex.

How do you get your AIR apps for Android on the Android Market? Basically you need to follow these steps:

  • set up an Android developer account (it costs $25)
  • next you have to create a certificate for signing the application. As with AIR apps, the Android Market accepts self-signed certificates. This means, you can use adt to generate a certificate if you don’t want to buy one
  • now you are ready to upload your APK files

My fellow evangelist Ryan Stewart wrote a post on this topic.

Obviously, I’ve been playing with AIR and Flash Player for Android all this year. And I’ve seen the hard work our engineering teams put in in order to make these runtimes, designed initially for the desktop, to run fast and reliably on mobile devices. I hope that people who have enjoyed Flash Player on Android will love AIR too.

BlackBerry Tablet OS supports Flash Player 10.1 and Adobe AIR 2.5

Great news for the Flash community: today, at BlackBerry Developer Conference in San Francisco, RIM announced that the BlackBerry Tablet OS will support Flash Player 10.1 and Adobe AIR 2.5. And I don’t mean you’ll be able to install them at some point in time. No! They will be available right out of the box.

In fact, Adobe AIR is so tightly integrated, that even the apps launcher and as well as the apps on the tablet are built on AIR 2.5.

Now that’s a nice present for all the Flash developers out there and it’s not even Christmas :). I mean on top of the desktop and Android 2.2, now you have BlackBerry tablets to target with the same tools and skills. And more importantly with virtually the same code base.

Furthermore, in the coming weeks RIM will make available the BlackBerry Tablet OS SDK: a collection of tools to help you build and package AIR apps for BlackBerry Tablet using Flash Builder and Flash Professional. The AIR 2.5 SDK will be available soon on http://labs.adobe.com (still in private beta for now).

If you are a Java developer and you want to get started with Flash Builder, ActionScript 3, and Flex then you’ll find useful this resource: http://www.adobe.com/go/bbtabos

Last week, I was highly impressed by Samsung’s Android 2.2 based tablet. Now, I have to see this one before buying a new device!

Hero is available

The next version of the Flex SDK, codename Hero, is available to you for download now. If you want to check this special builds just go here and download.

What is so special about Hero? Well, the most important thing is the added support for mobile development. So far you’ll find in this builds: Spark DataGrid, Spark Image, Spark Form, OSMF 1.0 integration, Mobile Application, View & View Navigator, and ActionBar. You can read more here.

No go and start play with it already :D!

Flash for mobile contests

This summer you have many contests to pick from if you want to create Flash content for mobile (Android 2.2) and win something while doing it. You can win fame/money/software/mobile devices — not neccesary in that order and not all at once– but you get the point :D.

For more details, check out these contests:

Good luck!