How to Apply Tweening Effects to Device Fonts

One of my biggest pet-peeves in Flex is the apparent lack of tweening support for device fonts.

Let’s say you have a container with a couple of text components, and the text components are all using device fonts. If you try to apply a Fade effect, for example, to animate the alpha property of the container from opaque to transparent, the text will not animate.

This leaves you with a couple of text components that appear to have broken free from the confines of their container. This is anarchy.

So how do we apply tweening effects to text components using device fonts? Apply filters to them.

Let’s return to the example above. If you apply a filter to each of the text components (such as a BlurFilter) before you apply the Fade effect, the device fonts will animate beautifully with the rest of the container.

myLabel.filters = [new BlurFilter ()];

Once your effect is complete, you can remove the filter (if necessary).

myLabel.filters = [];

It’s that easy.

Using Regular Expressions to Create Dynamic Locale Data

Let’s be honest: localizing the UI text in an application is pretty easy.

Add all the strings you plan to display to a properties file or a value object and simply reference them in your UI components.

But what about the components that have information known only at runtime, such as a username or the current date? How should they be handled?

There are two ways. The first way is stupid and complicated. The second is completely awesome. Let’s start with the stupid way:

1) Create strings for each static segment of a dynamic piece of text

For example, if you wanted to display a simple greeting in your application, such as “Hi [some user] ! Welcome to [some application] !” it would look like this:

public var greeting1 : String = "Hi ";
public var greeting2 : String = "! Welcome to ";
public var greeting3 : String = "!";
<mx:Label text="{greeting1 + username + greeting2 + appName + greeting3}" />

Gross, isn’t it?

This brings us to the better (and totally awesome) way:

2) Use regular expressions to replace dynamic information at runtime

Let’s look at the same example using regular expressions:

public static const USERNAME_PATTERN : RegExp = /USERNAME/;
public static const APP_NAME_PATTERN : RegExp = /APP_NAME/;
public var greeting : String = "Hi USERNAME! Welcome to APP_NAME!";
<mx:Label text="{greeting.replace (APP_NAME_PATTERN, appName).replace (USERNAME_PATTERN, username)}" />

Isn’t that beautiful?

Although using regular expressions involves creating a RegExp pattern for each piece of dynamic information, the benefit is that the locale data can be changed without having to recompile the application.

For example, say you wanted to change the simple greeting to something like: “Welcome to [some application], [some user] !”.

Using text segments, you would not only have to change the locale data, you would have to reorder the variables in the Label component and recompile the application.

Using regular expressions, you would simply need to change the locale data. Depending on your setup, you might not even need to reload your application!

Regular Expressions + Locale Data = Happy Applications

Creating Bindable Getters and Setters in Flex

Data binding in Flex is a great tool for automatically linking the data in your model to your view.

However when you want to define your own bindable data sources through the use of getters and setters, the bindings don’t seem to work.

So what’s the solution?

The trick is to first define a bindable event for your getter:

[Bindable(event="propertyChange")]

You then need to dispatch this event whenever the property changes within your setter:

dispatchEvent (new Event ("propertyChange"));

That’s all there is to it!

Whenever your property changes (via the setter method), an event is dispatched that notifies any components linking to the property (via the getter method) that the property has been updated.

Here’s some example code you can enjoy with a glass of awesome:
http://userflex.wordpress.privatepaste.com/5eyyVQcWwq

Update: Code snippets I’ve posted using Private Paste are randomly disappearing, so if the above link no longer exists, here’s a backup.

Accessing XML with Namespace Declarations Using E4X

The Adobe® Flex® 3 Language Reference provides some great examples when it comes to accessing XML elements and attributes using e4x.

However what it doesn’t show you is how to access those same elements and attributes when the XML object contains one or more namespace declarations.

Consider the following XML sample:

var response : XML =
<response xmlns:sample=”http://userflex.wordpress.com/”>
<statusCode>200</statusCode>
</response>;


Because of the namespace declaration, you can’t simply access the statusCode element with response.statusCode, despite the fact that the statusCode element resides in the default namespace.

What you need to do is iterate over the set of XML namespaces until you locate the default namespace. Then you can access any of the XML elements or attributes in the default namespace in nearly the same manner as before.

without namespaces:
response.statusCode

with namespaces:
response..xmlns::statusCode

In the above example, xmlns would be a Namespace object that references the default XML namespace.

Check out the tasty sample code here:
http://userflex.wordpress.privatepaste.com/cduVt2tL2i

Update: Code snippets I’ve posted using Private Paste are randomly disappearing, so if the above link no longer exists, here’s a backup.