Flex 4.5 Mobile Development Post Burrito
I am REALLY excited to be able to write about this.
Hero.. Slider… It is all Flex. And now a very optimized update to Flex that is specially created to work well on mobile devices. I’ve been rushing around the new framework additions to put together an app that shows off the new features and can be helpful. You can check out the app I made here: Queue Manager.
Let’s get started with the new mobile development options…
Everything I am writing about is available with the new “Burrito” Flash Builder releases given out at Adobe Max 2010.
Starting Up New Application
Once working with the new version of Flash Builder you will see some new options that weren’t available with earlier. The main difference from earlier Flash Builder releases is the addition of mobile projects, specifically: Flex Mobile Project and Actionscript Mobile Project.
I’m not going to go over the Actionscript Mobile Project as it is pretty easy to understand. You start right from scratch and can develop anything you want.
Flex Mobile Projects are different as there are many classes that Adobe has created to make your application development easier. We are going to start with the 3 different ways to start up your application: Mobile Application and TabbedMobileApplication.
MobileApplication
The first option you have is MobileApplication. This is the entrance point for your mobile application setting up your Actionbar and Navigator and firstView.
The Actionbar is more of convenience class than anything else. This is the bar on the top of your application with 3 distinct sections that you can use for navigation, action and title properties. Many mobile applications use this facility to help the user navigate the application and Adobe has set this up for you. You can also choose to hide the Actionbar or change how it overlays your application.
The Navigator is similar to a ViewStack. This is your main view manager that you can pop and push views onto in an array format. With each view pushed onto the stack or popped off you can have nearly limitless application navigation paths. This is your main way to handle different views.
The firstView is your application’s starting point – the initial view to push onto the stack. Later you can “reroot” your application by popping off all the views and set a new root view.
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.BlogTestHome">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:MobileApplication>
TabbedMobileApplication
The TabbedMobileApplication is similar to the MobileApplication except rather than having one navigator you have many. And each navigator has it’s own tab in the main TabBar connected to the application. With the TabbedMobileApplication you set up an array of ViewNavigators and determine each ViewNavigator‘s firstView.
Like normal Flex development with the TabBar the label field determines the label that will be shown on the TabBar.
By clicking on the Buttons created automatically with the TabbedMobileApplication, the user can switch between stacks. You will still want to store the visual data away from the view for safe keeping.
This sets up the basis for you application development.
<s:TabbedMobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:ViewNavigator firstView="views.BlogTestHome" width="100%" height="100%" label="Set 1"/>
<s:ViewNavigator firstView="views.TabBlogTestHome" width="100%" height="100%" label="Set 2"/>
</s:TabbedMobileApplication>
Pushing and Popping Views
Once you have your firstView set and running the rest of the application is going to fall right into place. When you want to move to the next view you just need to “push” on a new view. This is done with the following code.
The data is an untyped object and anything you want to be available in the data property in the new view. This is a very easy way to pass data back and forth between views and helps maintain state.
If the user hits the back button the navigator will automatically do a pop for you – unless you event.preventDefault();. You can also do this programmatically by just calling the pop function.
If at any time you want to “rehome” your application and reset it’s view stack just pop all the views off and set the new view. This is helpful if you want to forget the history when someone hits the home button or after some complicated steps that you may not want your user going back to mess up.
navigator.pushView(ViewClass, data);
Or you can go back to the original home and remove all the history by using another convenience function popToFirstView.
By default you get the slide to the left transition for all of these functions, but if you wanted to create your own transition or just have something different for your transition, each of these functions have a transition property that you can set for when the effect needs to play.
navigator.popAll(transition=null);
navigator.popToFirstView(transition=null);
navigator.popView(transition=null);
Performance Hints
Before you run off and start building all your amazing application there are a few things I’d like to pass on that I learned while creating Queue Manager.
Don’t do any work during transitions, you’ll slow down the transitions.
I seriously mean don’t do ANY work. I was sending off a call for data and that’s it and even that slowed down my application. No more hiding how long it takes to load data behind slick transitions.
Don’t forget the loading indicator.
Right now there is no way to show the user that your app is doing work. Make sure to program in a loading indicator to let them know something is going on.
I’ve been told in later releases Adobe will provide some helper for this.
Don’t set properties on the Actionbar till the transition is complete.
This is mainly an Max Preview Release bug. But if you do your Actionbar transition won’t finish and your view will look jacked.
Use your Splash Screen to hide the application loading
One way to make it seem that your app comes up quickly is to use the splashScreen property on the application. This just takes a normal image and stretches it over your screen. If you wanted to be really slick you could make it look like your home screen and hide how long it takes to come up.
Check your sessionCachingEnabled
Adobe has already programmed in a lot of session caching information into the Flex application. However their implementation may not work for you and your app. It didn’t work for my app. If this is the case and you want to ensure you aren’t caching data that shouldn’t be cached then make sure to turn your sessionCachingEnabled to false.
Roll your own session caching
The persistance manager by default uses shared object, however if you want to use local databases or some other persistance management technique then all you need to do is use the persistance manager interface and roll your own.
Cache Often
When working with mobile devices remember that at any moment your application can be interrupted. In the past you may have been lazy about storing user input as they are entering in the data but now that is more important than ever. Each keydown and text change needs to be stored so that if a call comes in and stops the process, you can still have the user’s info just in case the application was shut down.
Close your application
Users expect at certain times that when they back or home out of your application that the application should be completely closed and shouldn’t be taking any resources. Yet at other times they expect that they can skip away and check a text and then come back to the app the way they left it. This is up to you and your application, just be aware of when you should close your application and when you should leave it running.
Close your application with:
Watch your Activate and Deactivate Events
When you application’s view gets activated or deactivated from the OS due to user input you may want to set or cache some data. I would watch for these events from each of your views and respond appropriately.
Actionscript Skins
Unless you are dealing with the most simple skins, it’s best to keep them all Actionscript. No MXML yet.
Not all components are Mobile Optimized yet
Flash Builder will even give you ASDoc hints as to components that have been Mobile optimized or not. Watch for these hints as some components will not work well as they aren’t optimized – others just won’t work at all.
Text Fields
In your skins make sure to use the MobileTextField rather than RichTextField or others that don’t say “Mobile”. If you do use one of these non-mobile textfields you will not get any information from your textfield. Trust me on this, it’s annoying and not obvious!
[...] This post was mentioned on Twitter by Jonathan Campos, Jim Armstrong, vic c, Blogagic, killerspaz and others. killerspaz said: RT @jonbcampos: New blog post all about Flex 4.5 and Flash Builder Burrito! http://bit.ly/bXIgNG [...]
Great post Campos. We are back to push and pop methods again? Ugh..Hello AS2
I’m not crazy about mxml. Can these UI elements be used if you create an Actionscript Mobile Project?
If so, how? Is it even recommended to use these UI elements or are there other classes that should be used?
@jaxim you could definitely do this in AS but if you do an AS only project then you won’t get access to the flex components.
And yes, these are the classes to use.:)
Let me know if you need anything else
Thank you!
Would you know how I can place the ViewNavigators on the bottom of the screen just like iPhone’s tab bars?
@hyunil That is actually quite simple. Just change the skin of the View component. Then you can move the actionbar wherever you like. HTH
@Jonathan Thanks a lot – that was lightning quick! I am a little confused though. How do I change the skin of the View component? Sorry to bug ye
@hyunil no worries. If you checkout in your flex 4.5.0 folder you will find the skin to the ViewNavigator. It’s name is ViewNavigatorSkin.as. You can use this as a template for your own ViewNavigator skin and just move the ActionBar in the updateDisplayList function. Right now it is set at 0,0. Just switch that to wherever you want. HTH
@Jonathan Great. Thank you very much! Kamsa hapnida! (‘thank you!’ in Korean)
@Jonathan It’s rather interesting! It seems like the layout actually comes from the Mobile theme Burrito has, and since it is a compiled SWC, I do not have access to modify it. I tried moving things around in my custom skin, but it won’t do the job. Were you able to do this?
@Jonathan My apologies for spamming. I was able to move ‘actionBar’ as you have suggested, but I am not able to move the ‘tabBar’ from the TabbedMobileApplicationSkin.as. I tried using:
navigator.tabBar.setLayoutBoundsPosition(0, unscaledHeight – navigator.tabBar.height);
but this won’t do the trick.
@Jonathan I got it working. This is what you have to do:
inside updateDisplayList function in your ViewNavigatorSkin class, add following lines at the end.
(hostComponent.parentNavigator as TabbedViewNavigator).tabBar.setLayoutBoundsPosition(0, unscaledHeight);
(hostComponent.parentNavigator as TabbedViewNavigator).contentGroup.setLayoutBoundsPosition(0, 0);
You will have to set skinClass property for each ViewNavigator you have under your TabbedMobileApplication.
Cheers
@hyunil great to hear you figured it out all while I was driving home
@Jonathan Yeah it was fun
Taking me a little effort to get back to Flex after couple months of Flash only development. Thanks for the help.
[...] Looking at getting started with Flash Builder Burrito and the new Flex SDK? Check out this post on Flex Hero development. Looking at getting going with non-Hero development or don’t have the new Flash Builder [...]
@Jonathan, I’m playing around with Burrito….definitely liking it. But, how does one do a popup message (ie: error message, alert, etc)? When a try to use mx.controls.Alert, it says it is not found.
I guess more importantly, where does one go to get the SDK docs for Flex Hero, where we can find what is and what is not supports?
Also, what forum are most Hero developers chatting at? I checked out the Adobe Flex forums, but didn’t see much anything related to Hero development (or should I just look harder there)?
Thanks.
@darren for an alert right now there isn’t one created. You will need to popup your own alert.
Right now there isn’t a ton of information on Hero as it is still so very new. The normal forums are still good, the issue just is if people are using it enough to be helpful. All the information I am learning is through trial and error. Lots of trial and error.
@Jonathan Gotcha. Thx.
I tried the sample but I couldn’t get the tab to display at the top? any reason why? Is there a way to display an image as part of the top bar that is not clickable?
@BKoon what result did you get with the bar? Have you tried just putting an image into the action bar content?
The action bar behaviors correctly. I have 2 sample view and i put action content there before I try your sample. It shows up in the correct place.
…
image 1
image 2
but then i comment out the action content and put your sample into my main app and change my main app to become tabmobileapplication.
the set 1 and set 2 is diaplyed on the bottom like the tabbar on an iphone.
Run as config is set to full screen size is 600*986 (like a tablet size)
@Jonathan: for some reason I have to call a function after mobile applicaton creaetion complete event.
this.navigator.tabBar.setLayoutBoundsPosition(0,0);
Then the tabbar stays on top.
the funny thing is the susequence view’s action bar showed behind this tab bar. when i clicked on a tab, the tab bar moved back down.
from what i understand, the actionContent of the each view shoudl come below the tab bar?
@Jonathan I threw together a simple class for Alerts and Message Boxes that mirror the standard Android look. Posted it in the Adobe forums:
http://forums.adobe.com/message/3304274#3304274
Next thing I’m working on is the “busy” animation. What would you recommend for the best building blocks for displaying a simple animation?
hyunil and Jonathan,
I am trying to modify the ViewNavigator Skin but can’t understand where to copy the ViewNavigatorSkin.as and where to reference it in my mxml. Any suggestion on this obviously elementary task would be appreciated.
@Adam are you familiar with the skinning process?
You stated that transitions default to “slide to left”. How exactly can I make it “slide to right”? I’m sure it’s something like…
navigator.popView(transition=slideToRight);
Excuse the newbie question!!! This is just day 2 of my FB / FLEX / AIR dev experience!
@jabari You are correct that they have already created the transition class, you could just use the one they have created.
@Jonathan – What are the transition classes called?
A better question would be where can I find documentation on them??? I tried the help menus in burrito and on the Adobe Labs site. Nothing really goes into detail…
@Jabari sadly you are dealing with beta software. Which means the best documentation is the code itself. They are more focused on forward momentum in code than documentation right now. I’d look into the viewnavigator pushView method and see what the default transition class is.
How can I display icons an my Tabs? The ViewNavigator has a property called “icon” but that doesn’t seam to work. Any ideas?
@Silvia Right now there isn’t an easy way to do it, you’ll need to skin the component to do what you need
[...] Continue reading here: Flex 4.5 Mobile Development Post Burrito | UnitedMindset [...]
Great content!
I have a question. Is it possible to add icons into the tabs? Thanks!
@Bill you can definitely add icons, right now it is a bit labor-some and will require skinning, but it’s possible. I’m hoping in upcoming releases that the process is simplified.
Great post! thank you so much Jonathan.
Thx for your example, but I need something simple and I can’t find it. If a user clicks on a tab, I want a function to be executed. Tabindexchange,… don’t seem to work.
So basically, when a user clicks on a tab: print: “user clicked on tab: “. Do you hae any idea how to do that?
@Tom the tabs are not a normal tabnavigator like they are in the past. There is a tabbar in the tabbedviewnavigator that does have a click handler that it is listening to, but when clicked the new view will be popped on. Therefore the output space you are looking for will change. To get exactly what you want you’ll need to look into the component that you are wanting to hijack. I would think about putting the function you want to call on the creation complete or view activate of the view you are adding, or on the view deactivate or the view you are removing.
you can change the tabBar to the bottom without changing the flex sdk with a simple “hack”:
private function changeTabPosition() : void
{
tabnav.autoLayout = false;
tabnav.tabBar.y = stage.stageHeight – tabnav.tabBar.height – 80;
tabnav.contentGroup.y = 0;
}
I am building a simple app and when going back to the home screen my selections in that view are reset to the defaults. Is there a way to go back and see the last selections made on the home screen?
There isn’t a way to reset the defaults automatically, however you have multiple options for how you can store the information and reset the values to being the data that you persist across the views. What you need to do is create a system to set and store the data per view. It’s actually a very simple process, but you need to devise how you do it for your application. Let me know if you have any questions about this.
Can you provide a simple example?
@Gilbert That is much more difficult to make a simple example of. When pushing the view are you setting data for the view? Have you changed this data? If so you’ll need to persist the data as you move away from the view (such as the VIEW_DEACTIVATE event). Then when you start up the view (VIEW_ACTIVATE) you will need to pull the persisted data and set it to the view.
Does this make sense? If you want email me privately with what code you are working with or a simple structure and I can guide you more. jonbcampos [at] gmail
[...] Flex Mobile development post-Burrito by Jon Campos - http://www.unitedmindset.com/jonbcampos/2010/10/25/flex-4-5-mobile-development-post-burrito/ [...]
Jon, for now I solved the problem adding the attribute destructionPolicy=”none” to the view I want to go back and keep it state.
Certainly this is not the best approach, but it works for now.
Another question: My app works fine on the simulator, but when I try to run it form the phone, it seems it cannot exchange data with the server. I am using wdsl web service (SSL)> What could be the problem? I have no idea what to look for to solve it.
Thanks.
@Gilbert,
Ouch, definitely not the best approach. With some extra typing I’m sure you’ll get the state saved.
I’m guessing the issue is with your network. Without know more about your network I’m guessing that you haven’t authenticated your mobile device against the exchange server and therefore getting errors.
John, How I authenticate the mobile device against the server?
As you can see I am brand new to work with mobile devices….
At this point it’s a matter of you working with your network administrator to make sure that the protocols are correct and that the device’s is on the correct network to interact with your exchange server. It’s not really about the programming at this point as much as the network interface that is being communicated on.
John, how can i change the selectedtab text color
@Buddy right now that is a bit difficult and I would recommend as I have earlier to others to create custom skins. In the future I am sure that this simple feat will be much easier. Sadly beta software isn’t always easy to work with
Jon, another problem i have two view components when i try to call both the stored procedures on creation complete, only one works, another gives fault error
@Buddy being that I don’t know more about your application or stored procedures I can’t comment on what the issue may be. There could be a million possibilities.
[...] 4.5 Mobile Development Post Burrito – interesting performance comments at the end of this [...]
Hey buddy, do you know how to animate the actionBar? i mean some apps has hidden actionBar, you just tap from the upper edge to screen and then appears animated the actionBar, how do you create it??
good blog, regards!
@Carlos try toggling the actionBarVisible property. The slide in animation is already there.