Adobe Flex Mobile: Detecting View and Orientation Change with Event Listeners

There will be a time when you want to have more control over the transitions between Adobe Flex Views, or detecting when the device orientation changes. For example, I recently built an app that had some event listeners that stayed persistent even when the user changed views. So, I needed to listen for the change event when using tabbed view navigator <s:TabbedViewNavigatorApplication/> so I could remove those event listeners and I did it like this:

this.addEventListener(Event.REMOVED_FROM_STAGE,tabChangeHandler);

I also had a need to detect when the phone was tilted. Yeh, in a perfect world everything in the app’s user interface would automatically adjust to the new state, but that isn’t always the case especially when building more complex apps. What I did was listen for orientation changes like this:

stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE,stageOrientationChangeHandler);

Even if you are using some other Flex methodology for your mobile app, hopefully these examples will give you some ideas!

Adobe Flex Mobile Styles – Easily change the color of a Button

Have a mobile app using a default spark Button <s:Button /> and you simply want to change the background color? Wait just a second before you start creating a full-blown skin! It’s actually very simple – change the chromeColor. This info is buried way down near the bottom of the online reference doc. This also applies to ActionBar, ButtonBar, CheckBox, HSlider, and RadioButton.

Here’s one way to do it using CSS:

<fx:Style>
   @namespace s "library://ns.adobe.com/flex/spark";
   #shutdownButton
   {
      chromeColor: #FF0000;
   }
</fx:Style>

<s:Button id="shutdownButton" label="Shutdown?" click="shutdownButton_clickHandler(event)"/>	 

 Reference:

Basics of Mobile Skinning

Mobile Internet Bandwidth Usage

As U.S. broadband providers move towards metering everyone’s internet usage it pays to have a basic understanding of how your surfing habits add up. Using a borrowed Verizon VZAccess card for my laptop last week, I noticed every time I logged onto the service it gave an update on how much data I had consumed in the previous session.  I was quite surprised at the amount I used per session. And going over your plan can be painful. Verizon, for example, has one plan that charges $20 for each additional Gigabyte (GB) once you go over your 1st GB.

So, I decided to put firebug to work and take a few measurements of my own.  Full, non-mobile, web pages can add up in size really quick. Check out the sizes of these pages:

  1. Computerworld – 541K
  2. MSNBC – 1MB
  3. MSDN Home page – 423K
  4. Youtube video – 20.9 MBs (~6 mins)

So how about some tools to help out? Verizon provides a nice online planning tool to help you gauge how much data you might use: https://www.verizonwireless.com/splash_includes/datacalculator.html . Give it a shot, I think you’ll be surprised at just how fast the data (and charges) could add up.

As far as running a usage monitor on your droid (or iPhone), I don’t really have any recommendations yet, since I just started digging into this. I’ve tried Network Monitor, but it didn’t work on my Motorola Atria. I’m currently trying the free version of PhoneUsage. So, if you have some suggestions post a comment. If I can compile enough useful and interesting information I’ll write an updated blog post.