Executive Summary
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.
Summary
Adobe have recognised the challenge and opportunity that mobile devices represent and have devoted a considerable amount of marketing, development and promotional muscle to getting the release into the market. For experienced Flash Builder developers, creating a working version of an Mobile App is a very similar process to what they are used to in creating a web or desktop application since the development environment is very similar.
Styling the App for all devices however can take up a lot of time and development effort should be prioritized according to the devices expected for each project. However, the task that Adobe have set themselves in being able to build mobile Apps for a multitude of devices using Flash Builder is an ambitious one that they have largely achieved.
0 komentar:
Post a Comment