Tag: flex

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

Regular Expressions with Flex and ActionScript

Adobe has some great regex-based methods that can help you easily parse strings. If you aren’t familiar with regular expressions, they are basically very powerful, short-hand algorithms that are specifically designed to find patterns in strings. There are many people that hate regex’s but don’t let that deter you. They are very powerful and can save you a ton of time. And, even better is ActionScript lets you use either strings or regexes.

They are most commonly used to check form inputs for illegal characters, verifying correct formatting or for parsing complex strings. Here is an example usage pattern that looks for the end of a line:

var content:String = “Read this sentence.\r\n This is the second sentence.”;
var pattern:RegExp = /\r\n/;
trace(content.match(pattern));
var index:int = content.search(pattern);
trace(content.substr(index));

Here are some of the string methods you should become familiar with:

  • match() – uses either a regex or a string for the search pattern and returns an array of matching substrings.
  • replace() – does exactly what is says. It’s great for cleaning up inputs. Use cases include things such as removing inappropriate language.
  • search() – uses either a regex or a string for the search pattern and returns the first index of the substring that is located, or returns a -1. This is a great method to use for parsing strings.

Once you’ve found a match, so to speak, then you can use other string methods to parse the string:

  • slice() –  which slices out a section of the string for you given a start and ending index.
  • substr() – cuts out a substring based on a start index and length.
  • substring() – similar to substr() but the second parameter is the position of the character at the end of the substring.

A few helpful references: