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:

Desktop:

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 

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:

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

May 5, 2011 | Filed Under AIR, Android, Flex, Mobile, PHP, Tutorials | 27 Comments 

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

April 28, 2011 | Filed Under AIR, Mobile, Tutorials | 3 Comments 

Adobe AIR 2.7 Beta 1 is on Labs

We just released the first beta of Adobe AIR 2.7 on Adobe Labs. You can get the bits from here. What’s new with this release?

First, this beta is available just for desktops for now. Second, the main features are:

Some of these features have already made their first appearance in the Flash Player 10.3 beta released a couple of weeks ago. Now, they are integrated into Adobe AIR as well. The final version should come not later than Q2 2011.

Now go and download the bits :)

April 1, 2011 | Filed Under AIR | 2 Comments 

Creating PlayBook apps with Flex and QNX UI Components

I got some requests about how to use both Flex and QNX UI components for building PlayBook apps. In this post I will show you how to do it.

Here are the basic steps.

1. Create a Flex mobile project. Make sure that you enable the project for BlackBerry Tablet OS development.

2. Edit project properties to include the QNX libraries in the project build path (right-click on the project name > Properties). Select BlackBerry Tablet OS section and then select the Include BlackBerry Tablet OS Libraries in Build Path option.

Once you apply these changes your project should be ready for QNX components. Of course you have to add QNX components using ActionScript code; you can’t use QNX components as MXML tags.

You have to remember that the QNX UI components don’t inherit or extend the Flex base UI components. And because of this you can’t add them, for example, directly to a View Flex class using view.addElement(QNX-UI-component); instead you can use an instance of Flex UIComponent as a wrapper. Here is a code snippet that illustrates this technique:

Here is screencast that walks you through the setup and shows a sample app:

Download

You can download the project code from here.

March 28, 2011 | Filed Under AIR, Flex, PlayBook | 4 Comments 

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.

March 25, 2011 | Filed Under AIR, Android, PlayBook | 4 Comments 

Animating QNX components in PlayBook apps

In this post I want to show you how you can use animations/transitions for QNX components to create a better user experience. User experience designers use transitions when they want to highlight or focus user attention to a specific part of the application.

For example, when you add a new component to the screen as a result of user interaction you can do it in two ways:

I think it is easiest to understand the subtle difference between the two approaches by seeing this screencast:

In my application I used the tweener library for animating the container that holds the list. This ActionScript library is one of the most used libraries out there for this task. You can grab it from here.

LATER EDIT: QNX is using Tweener internally. So you don’t have to add this library, is already part of the SDK (qnx-screen.swc). Thanks to Julian Dolce of RIM for pointing this out.

Once you get the SWC file, you have to add it to your ActionScript mobile project. The easiest way, especially if you plan to use more libraries, is to add a folder to the ActionScript build path and configure Flash Builder so that every SWC file you drop in this folder will be added to the project.

The steps are:

How do you use this library? Actually it is pretty simple. There is a static method on the Tweener class called addTween(). You use this method to specify the display object you want to animate, the properties you want to animate (could be the x, y, size, etc), and the animation duration. You can also specify a number of functions to be called for example when the animation is completed or for each step of the animation.

Here is the code for animating the list in the screen:

// rightDock is the container that holds the list
// it is docked to the right-side of the screen
Tweener.addTween(rightDock, {size : 200, time : 1, onUpdate: onUpdateTween});

private function onUpdateTween():void {
    myMain.layout();
}

And this is the code for removing the list from the screen:

Tweener.addTween(rightDock, {size : 1, time : 1, onUpdate: onUpdateTween,
    onComplete: onCompleteTween});

private function onCompleteTween():void {
    myMain.removeChild(rightDock);
}

Why do I call myMain.layout() for each step of the animation? This method is executed in order to reposition and redraw the components on the screen so they account for the width change of the rightDock container.

You can download the project source code from here.

March 23, 2011 | Filed Under AIR, PlayBook | 4 Comments 

Extending QNX TileList: Liquid Tile List

After I tried the available list components from QNX UI library for PlayBook development, my fist question was: how can I customize both the look and feel, and the functionality of these components? In this post, I will show you how you can extend the TileList and AlternatingCellRenderer QNX components to change the UI and add additional functionality.

By default, a TileList looks like this:

You use the dataProvider property to set the data, and its default renderer (CellRenderer) expects the data to be an object that has a String property called label. And this property will be used to display the text for each tile. You control can control the number of tiles by using the columnCount property, and you can set the width and the height of the tiles by using columnWidth and rowHeight properties. You use the cellPadding property to control the space between the tiles.

This is pretty cool. But what if you want to display more complex data? Let’s say you want to have a picture, label, and some graphic? Obviously you’ll have to extend the default renderer to do this. Here is what I have in my mind:

 

Read more

March 7, 2011 | Filed Under AIR, PlayBook, Tutorials | 1 Comment 

Support for screen navigation and application session caching for QNX PlayBook apps

If you’ve ever worked with Flex “Hero” mobile components you probably love the way Flex “Hero” handles the screen metaphor. It provides a neat way to encapsulate the UI and business logic for each screen in a class.

On a mobile device, you need to keep in mind that an application can be closed anytime by the operating system. This could be because the OS is trying to free some resources or maybe the battery just died. In either case when the user reopens the app, he expects to see the last screen he was working on as well as any data that was entered. Again, with Flex “Hero” mobile applications all you have to do is to set the sessionCachingEnabled to true and assign the information you want to be persisted to the data property of your views.

This is great; however if you develop applications for PlayBook using the QNX libraries (the native Tablet OS SDK for Adobe AIR) you can’t use Flex “Hero” and, as a result, you don’t have support for the screen metaphor. I wanted this kind of support for an application I plan to build for PlayBook.

Lucky for me, I didn’t have to start from scratch because my fellow evangelist, Piotr Walczyszyn, has already created a small library that does nice tweening between two screens and implements the methods for adding a screen or popping one. So, I took his library and I modified it a little bit. Why did I modify the library? First, I wanted to have session caching capabilities and to be able to push data from one screen to another in the same manner as a Flex “Hero” mobile application. And second, I wanted to make it easier to work with QNX UI components (the original library supported generic ActionScript mobile projects).

Read more

February 22, 2011 | Filed Under AIR, PlayBook, Tutorials | 14 Comments 

← Previous Page — Next Page →

Switch to our mobile site