FB3 Does Not Reset Warnings on Non-Bindable Properties

It seems that Flex Builder 3 has an issue when it comes to reseting warnings about non-bindable properties.

Consider the following example:

<?xml version=”1.0″ encoding=”utf-8″?> <mx:Application     xmlns:mx=”http://www.adobe.com/2006/mxml”>     <mx:Script>         <![CDATA[             [Bindable] public var model : Model;         ]]>     </mx:Script>     <mx:Canvas height=”{model.newHeight}” /> </mx:Application>

package {     public class Model     {         public var newHeight : Number;     } }

As you can see, the MXML file is data-binding the height property in the Canvas container to the newHeight property in the model.

If you compile this application, you should expect to receive the following warning:

Data binding will not be able to detect assignments to “newHeight”

To resolve this, you just need to make the newHeight property bindable. No big deal.

However if you make this change and recompile the application, the warning about the property will not disappear.

It seems that the compiler is not so smart when it comes to bindable property changes. If you go back and edit the MXML file, or clean the project and recompile, the warning will disappear.

While this is nothing more than an annoyance, it’s always good to know that’s it’s not a problem with your code.

Creating Smooth Transition Effects

Adding a transition effect to a component is a great way to provide a subtle yet distinctive feel in your application.

For example, adding a Fade as the rollOverEffect for a component so it gradually fades in when the user moves the mouse over the component.

However this method is not without its faults.

Say you want to add a Fade as the rollOutEffect for the same component so it gradually fades out when the user moves the mouse away from the component.

This will work fine, until the Fade effects come into contact with one another.

The problem is if the rollOutEffect fires before the rollOverEffect finishes (or vice-versa) Flex will end the unfinished effect and play the new one. The result is a jagged transition.

Luckily, this is something we can easily correct.

First step? Ignore rollOverEffect and rollOutEffect. They aren’t doing us any good. Define custom event handlers for rollOver and rollOut instead.

Next, configure your Fade effects to work together. Instead of adjusting the alpha from min to max (roll over) and max to min (roll out), adjust it from the current value to max and the current value to min.

While seemingly innocuous, this is the key to a smooth transition.

The last step is to check if the effects are already playing in your event handlers. In the roll out event handler, check if the fade in effect is playing and if so, stop it before playing the fade out effect. Implement the roll over event handler in a similar manner.

In the end you should end up with something like this:

<mx:Fade id=”fadeIn“     duration=”100” startDelay=”0“     alphaFrom=”{this.alpha}” alphaTo=”1.0“ /> <mx:Fade id=”fadeOut“     duration=”100” startDelay=”0“     alphaFrom=”{this.alpha}” alphaTo=”0.3“ /> <mx:Script>     <![CDATA[         private function onRollOver (event : MouseEvent) : void         {             if (fadeOut.isPlaying)             {                 fadeOut.stop ();             }             fadeIn.play ([this]);         }         private function onRollOut (event : MouseEvent) : void         {             if (fadeIn.isPlaying)             {                 fadeIn.stop ();             }             fadeOut.play ([this]);         }     ]]> </mx:Script>

Since these transitions take the current state into consideration, they will always smoothly animate from the current state to their target state.

And that, my friends, is how we do it in the NBA.

How to Improve The Quality of Scaled Images

Smoothing is not enabled by default on standard Flex Image controls.

While this doesn’t affect the quality of images displayed at their native resolution, it does reduce the quality of scaled images.

To resolve this, I created a custom control that enables smoothing by default:

package {     import flash.display.Bitmap;     import mx.controls.Image;     public class SmoothImage extends Image     {         override protected function updateDisplayList             (w : Number, h : Number) : void         {             super.updateDisplayList (w, h);             // checks if the image is a bitmap             if (content is Bitmap)             {                 var bitmap : Bitmap = content as Bitmap;                 if (bitmap != null &&                     bitmap.smoothing == false)                 {                     bitmap.smoothing = true;                 }             }         }     } }

You can download this control from the entry I posted to the Flex cookbook:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=9409&loc=en_US

Adding Sprites to Flex Components

You’d think adding a Sprite to a Flex component would be easy, right?

Sprites extend DisplayObject, and the addChild() and addChildAt() methods for every Flex component take in an object of type DisplayObject.

Not quite.

From the Adobe® Flex® 3 Language Reference (emphasis added):

Note: While the child argument to the method is specified as of type DisplayObject, the argument must implement the IUIComponent interface to be added as a child of a container. All Flex components implement this interface.

To add a Sprite to a Flex component, you’d have to extend Sprite and implement IUIComponent, which frankly is more effort than its worth.

A far easier solution is to create a custom class that extends UIComponent and acts as a wrapper for the Sprite.

The constructor for such a class would look something like this:

public function SpriteUIComponent (sprite : Sprite) {     super ();     explicitHeight = sprite.height;     explicitWidth = sprite.width;     addChild (sprite); }

Using this custom class, you would add a Sprite to a Flex component like so:

myContainer.addChild (new SpriteUIComponent (mySprite));

Easy.

Aligning Rich Text Across Multiple Components

When you display formatted text in a single control like TextArea or TextInput the control handles text alignment automatically.

However if you have formatted text split across several controls it may not align properly until you adjust the baseline position of the formatted text.

Take a look at the two screenshots below. The one on the left shows two UITextField controls with formatted text that have different font sizes. The one on the right shows the same two controls with their baseline positions adjusted.

It’s important to note that adjusting the height of each control is not the same as adjusting the baseline position.

To align the “subtitle” text with the “Title” text like in the screenshot above, you would do something like the following:

subtitle.y += Title.baselinePosition - subtitle.baselinePosition;

If you have more two components with formatted text, simply record the largest baseline position and add the difference to the vertical position of each component.