Flex Builder Burrito built on Flex Hero SDK and AIR 2.5 makes mobile application development easier. Those who have been doing Android development for sometime will realize that one of the most difficult tasks is writing apps for different screen sizes and maximizing the screen usage without limiting yourself to the lowest common denominator of screen density and size. The Burrito preview version of Flash Builder provides different devices simulators (not really actual android simulator, but more of an AIR simulator for the different screen sizes and densities) that makes the task of testing code for different screen sizes easier.
The second great thing about this release is performance optimization. You have to follow the strict guidelines and stay away from components that are not “mobile optimized” to reap the benefits. The code hint in eclipse lists the components that are not mobile optimized so good to check on it at the point you start using the component.
The third important area that this release addresses is the core or the essence of navigation or screen-flow of mobile applications. The Navigator is a singleton that manages navigation between different views and this makes writing mobile applications a lot more easier as you can focus on writing the views and leave the navigation to the SDK components.
Getting Started with Flash Builder Burrito
- At the time of writing this blog, the preview version of Flash Builder Burrito can be downloaded from the Adobe labs website at this link.
- If you have CS5 or any other previous version of CS installed, you might have to remove that before installing Flash Builder Burrito. We recommend trying out the install of Flash Builder first and removing CS versions only if you hit a problem.
- If you are ok with the 60 day trial license, great! if not, you can use your Flash Builder 4 license key. CS5 license key may not work.
- If you had uninstalled CS versions you can install them back now
- Start Flash Builder Burrito and use the default workspace. If you change the default workspace, you might hit issues (which disappear when you change back to the default workspace)
Samples and Tutorials
- Adobe has published some useful samples and tutorials which can be found at this link. The samples and tutorials are good to go-thru to learn about capabilities as well as limitations.
- An in-depth tutorial of the Employee Directory can be found here.
Understanding Mobile Applications with Flex Android SDK Burrito
The navigation pattern is at the heart of understanding mobile applications built with Android. The navigation is visually controlled by a navigation bar at the top (that you can choose to make invisible in certain views). The navigation contains place holders for actionContent and navigationContent. Loosely speaking, you can put your own graphics and buttons in these areas (any component) and define what happens when you click these. You can place more than one…but run the risk of making it look a bit ugly if you put too much. You can even customize what happens when users click these buttons depending on what screens or views they are in. The way it works is it calls a method or a function on the view and you can make this function do different things in different views. You can even change what buttons appear in different views for a completely customized navigation and action bar. In essence there is enough capability to customize the navigation but there are certain limitations as well primarily
- Limited skinning capability of the Navigation bar
- Limited documentation on capabilities and usage around navigation. You pretty much have to dig into the Hero SDK code to understand how the navigation content and action content works if you want to customize. The samples and tutorials help a bit
The way navigation works is pushing a view into the navigator or popping a view from the navigator (back button). The navigator takes care of preserving the state of the view that is pushed into the background when a new view is pushed into the navigation stack. When you push a view into the navigator, you pass it a data object that seeds it with initial data or some config that can be used to populate the initial data. Views support a viewActivate function that is invoked when a view is created (when pushed in for the first time) or activated (as a result of some view being popped out of the stack). An apt one line description of the navigator management would be “A Last In First Out (LIFO) stack of views”.
Writing those Mobile Optimized Views controlled by the Navigator
The starting page of each mobile application is defined by the home page designated in the application startup mxml. You can choose not to have a home view and choose a more dynamic startup experience by choosing your view in the applicationComplete method. This is very useful if your users want to customize there startup page. At the heart of the mobile optimized views is the MobileIconItemRenderer list structure. This list structure is optimized to display
- A title
- An icon/image
- A brief description
of each element in the collection. Want it to do more? Tough luck! Best would be to copy the code and change it to implement your customized structure. Some limitations around usage of this list structure are
- Inability to use embedded fonts in the title or description. The code in the Hero SDK might make you think that embedded fonts work but we just could not make it work so likely some bug here.
- Cannot use images/icons of different size. You have to copy the code and customize if you want to use images/icons of different size. Not a big task since the ley lies in making the IMAGE_WIDTH and IMAGE_HEIGHT properties instance variables (they are static).
- Skinning the renderer background took some time to figure out. This can be done by extending the MobileIconItemRenderer and implementing actionscript or mxml graphic fill utilities in a rect that is 100% width and 100% height…just like you would do in a Flex 4 component skin
Once you have perfected or adapted the MobileIconItemRender to your needs, you obviously need to take some action when a user clicks/touches an item in the renderer by taking him/her to a detailed view. You write a view for the details and push the view in the navigator using the click method handler. Back from the details view is implemented by popping the detail view. The neat thing here is that since the navigator back is integrated with android api you can jump from your app to a web browser abd be returned to you app when the use presses the back button.
One important thing we thought was missing was the popup menu capability when a user presses the menu button. Android users use this feature frequently and it would have been great to have a popup menu capability that can be customized for views, just like the navigator capability.
A small thing that is missing is integration with the Android notification API. A feature that informs your application of events that you subscribe to (sorry no “you got mail” type feature yet).
A small good feature is ability to use a splash screen instead of a preloader on startup.
Lessons Learnt
- There is a learning curve since you have to understand new architecture pattern and new objects, primarily the navigator and view
- Android app startup is slow. We suspect this is due to the time taken by AIR framework that runs it to warmup. Even the splash screen does not display for a few seconds when launched for the first time making first time users wonder “what on earth is going on?”
- Once warmed up, the apps are decently fast. Especially impressive is the MobileIconItemRenderer.
- There is still a lot of code to write in the views and passing data between the views. Setting up a singleton class that acts as the data mediator will be of great value in exchanging data was view get pushed and popped. I would stop shrt of calling it a view controller (since that is the navigator) and call it a data controller to augment the capabilities of the navigator.
- Skinning is a pain to start off with since for performance reasons it is best not to use Flex 4 skinning. The good news is that you can use the graphic primitives and fill, gradient fill commands and once you master that your apps will look and feel better than android apps written in Java.
- Test you app on different form factors. This is done in the Run>Run Configurations” menu option in Flash Builder
Where to go from here
Start off with a basic app and basic views. Iteratively refine the views to look better. I found some great 3D visualization components at FlexDownloads.com, the 3D Vertical Coverflow and 3D Horizontal Coverflow that made my apps look better by moving away from the typical 2D list layout. Once you get a hang of the navigator, view and passing data back and forth complicate!
Some of my Android Apps
You can download three of my Android apps from the Android marketplace. One of them is free and the two others cost $0.99. If you cannot find them then most likely you do not have Android OS version Froyo 2.2 or Touchscreen capability since the marketplace filters apps based on these capabilities. In the Android marketplace search for
- News Blend – A free app that provides news from 6 different news sources
- Entertainment Weekly – $0.99 with news from EW.com
- Bollywood mirchi – $0.99 with latest news from Bollywood using RSS feeds
You can also navigate to some of then from the AndroidZoom links below and download by scanning the bar-code with your camera (you need a free app to scan)
If you have some development experiences to share, drop me a comment and I will update the post.
