Build mobile apps
Build
mobile apps - Adobe have recently released Flash Builder 4.5. This
release enables developers to build "Mobile Apps" for a number of mobile
device platforms, in addition to developing web applications and
desktop applications using MXML and Actionscript 3.
This release
seems squarely targeted at dealing with the recent comments from Steve
Jobs and others, and the ensuing debate over whether Flash is dead,
given the capabilities of HTML 5 and other technological developments.
Since
this is quite a major release for Adobe and an important new capability
for us Flex developers we thought we would go through the process of
developing a smallish App and implementing it on a number of devices.
The concept of being able to develop Mobile Apps for a wide range of
mobile devices using a single code base is definitely an appealing one.
Overall,
the developer experience that Adobe have delivered with Flash Builder
4.5 is pretty impressive, although there are one or two quite
fundamental omissions. Given the differences in Operating System, screen
size, screen resolution and handset functionality, deploying a Mobile
App for a range of devices is a daunting task. Whilst it doesn't solve
all problems, Flash Builder 4.5 is definitely an excellent start.
Target Market
Flash
Builder 4.5 doesn't target every mobile device on the market. It
targets mobile devices running Android 2.2 and upwards, iOS (iPhone 3G,
iPhone 4 and iPad) and QNX (Blackberry Playbook Tablet). These are
basically the high functionality modern Operating Systems for
Smartphones and Tablet PCs. That covers around 50% of the existing
mobile device installed base and quite possibly a much higher percentage
of recent mobile device sales. The important omissions to the target
platforms available are Symbian, Blackberry Smartphones and Windows
Mobile 7.
Development Environment and Experience
Overall,
using Flash Builder 4.5 to develop Mobile Apps is broadly similar to
using it to develop desktop applications for Adobe Air or web
applications running in the Flash Player. The Flash Builder development
environment is nicely integrated with the rest of Adobe's offerings such
as Creative Suite 5.5 and Flash Catalyst so you can develop assets in
those programs and import them into Flash Builder easily. Developers use
MXML and Actionscript to develop the App, however there is a more
restricted range of user controls. Importantly there is the same
connectivity to data services using Web Services, AMF, http and similar.
Differences to Developing an Air or Web Application
The ViewNavigatorApplication Tag
The
first difference you notice with developing Mobile Apps is that instead
of an Application tag which is used for developing Air and web
applications, you have a ViewNavigatorApplication tag. With the
Application tag you usually place a navigation control and then place
child components (effectively the different views) within the navigator
control. This gives developers the ability to know what components are
being used no matter how deep they are buried within the document
hierarchy. With ViewNavigator however when you navigate to a different
View you "pop" a different View onto the screen by name. You can then
pop other views later in response to events and user actions. You must
go back to the home screen via the same view order, but in reverse.
With
the Application tag since you are aware of what components constitute
your child screens you can configure the application to pass any
required data from the main application to the child components. Since
properties are usually strongly typed, Flash Builder will give build
time errors if you are trying to access or pass a property that doesn't
exist. With Mobile Apps and the ViewNavigator tag, the compiler doesn't
actually see the other Views that are part of the application until
runtime thus the developer loses an important level of error checking
before runtime. In addition, Views only have a single "Data" property.
The Data property can be any object, so you can pass a collection of all
the data you require but build time error checking is lost on whether
properties within the data being passed actually exist.
No Drop Down List
There
isn't a drop down list in Flash Builder Mobile. No, there really isn't.
To me this seems the biggest oversight and I expect in Flash Builder 5,
or hopefully before that, they will fix it. However, for now the
workaround is to have a button that looks like a drop down list (has a
skin with a drop down list icon) and then when the user clicks the
button, to pop up a component based around the "SkinnablePopUpContainer"
with a list of your items inside it. So you can end up with something
that looks to the user like a drop down list but is actually a button
that calls a pop up with a list of items.
No MX Components Except Charts
No
MX components will work except charts. The MX namespace is not
available in Mobile Apps so most of the MX components are not available
in the drop down menu in the intellisense editor. In addition, some of
the Spark components (eg dropdownlist) are "Not Mobile Optimized" which
is Adobe's way of saying they probably won't work. In general however,
there are enough controls to create the screen you need.
Styling and Sizing for Different Devices
When
developing a Mobile App there are several issues that make styling for a
range of devices difficult. In no particular order they are:
Different screen sizes;
Different screen density. This is measured in dpi. Since an iPhone 4
has double the dpi of the iPad, any button of the same pixel
measurements will be half the size in the iPhone 4;
Different
device specific gestures and built-in features For instance in the
iPhone email client a swipe gesture results in a delete button popping
up, and some devices have a back button always available as part of the
machine.
From the look of it then, being able to come up with
something that will look good on each screen seems like mission
impossible. However, Flash Builder comes with built-in features that
help considerably. Firstly, you can say what screen density you are
targeting and then when the App loads if the device being used has a
different screen density, the App will shrink and expand buttons and
other components as required. Flash Builder categorises each device as
having one of three screen densities, either 160, 240 or 320 dpi.
Bitmap
images however shrink and grow very poorly so the above method is not
suitable. To handle this, Adobe have provided the
"MultiDpiBitmapSource". This is where if you are using a bitmap as the
icon for a button, you can provide 3 different versions of the same
bitmap to the button, each sized to target screen density 160, 240 or
320. Flash Builder will then detect what the device is and use the
appropriate bitmap as the icon.
Finally you can also provide
different settings in your css file that enable you to change settings
for different screen densities, and also different Operating System.
The
result is that you can code once and then and then after spending some
effort making sure it looks as good as possible in various situations,
it will look pretty good in most devices. If you are targeting the full
spectrum of devices you will have to have some sort of trade-off of time
spent on styling v the payback for each device. Some research into the
audience size for each device and then prioritization will enable you to
make appropriate decisions on what the main device should be and then
how much time should be spent styling for the other devices.
Testing the App in Flash Builder
Flash
Builder comes with a good method of being able to see what your screen
will look like on different devices. Firstly at design time you can
choose from a drop down list of devices and see the results. Then by
choosing different run configurations by Operating System and device,
you can run the application and see the results on each device.
Other
than styling issues there didn't seem to be any differences in how the
App behaved on each device in terms of runtime errors.
Testing Your App on A Device
Once
you have developed and styled your App using Flash Builder you will
probably want to test it on the actual machines themselves prior to
deploying it to the market place. The simulator within Flash Builder
gives a reasonable approximation of how the App will look on each device
but it's not the same as using it on the actual device.
There
are a large number of smart phones available so rather than buying each
individual device and testing it on each, you will probably prefer to
test on one of each of the three operating systems which are Android,
iOS (iPhone and iPad) and QNX (Blackberry Tablet). With Android devices
the process is quite simple. Essentially you create a dummy certificate
using Flash Builder and then you can connect and download your App to
your device.
Apple devices are considerably more difficult to
test on. You have to apply to Apple to get a developer licence which
provides you with a developer key, then get a key for your device and
use the two keys to deploy it to iTunes and then use iTunes to install
it on your device.
The Blackberry Playbook is still quite new and
has not had demonstrably rave reviews so the number of your users that
will actually install your App on a Blackberry Playbook is probably at
this point quite small. A practical alternative to buying the actual
machine is to test it on the Blackberry Playbook Simulator which runs
through VMWare. This gives a more advanced representation of what the
App will look and feel like compared to the simulator in Flash Builder.
Deploying the App
Once
your App is ready for deployment you must go to the various App stores
and go through their individual processes of deployment.
