Adobe have recently released Flash Builder
Adobe have recently released Flash Builder
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.
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