« July 2006 | Main | October 2006 »

September 12, 2006

Rich Text Editor with Disclosable Controls in Flex 2

I recently worked on a project that called for the use of the Rich Text Editor control. In our case it was determined that some users would never had the need to format their text. In fact, I'd venture to say in most cases were a Rich Text Editor is called for in an RIA, there are a subset of users or use-cases where those controls are not required.

For that reason, there's a property called "showControlBar" which allows you to show or hide the control. However, there's no out-of-the-box affordance for setting this property at runtime. What follows is a simple example that adds a child to the Rich Text Editor that shows and hides the control bar.

It should be said, as always, the following example was created by myself, and I am a User Experience Consultant, not a developer. So, this should be seen as an example of good User-Experience pattern, but should not be seen as a best-practive recommendation for development. For starters, it would have probably been good to componentize it. But, is a simple example with just a few lines of code anway.

To download the source, click here.

Posted by Peter Baird at 10:17 AM | Comments (6)

September 06, 2006

Enable Smoothing on Images for scaling in Flex 2

While I can't claim any credit for the solution - most of the credit goes to my colleague from Adobe Consulting Flex Architect Brian O'Conner, and the alternative approach comes from Roger Gonzalez from the Flex Team - I recently came across a small issue. By default, when you embed or load an image in Flex, "smoothing" is set to false. This makes sense since most of the images you'd probably want in their native size, and you'd want pixel perfect. But, when you want to scale the image, either up or down, or rotate the image, the image is rendered with the "nearest neighbor" scaling method. You can read more about the issue in the flash player at Tinic Uro's Blog. As you can see in the example that follows, the results of this are less than beautiful.

After a little trial and error on my own part, I got some help from the experts, and got a simple solution for enabling smoothing on an image in Flex.

The first approach uses the BitmapAsset class, where init() is called on creationComplete as follows:

import mx.core.BitmapAsset;

[Bindable]
public var mySmoothImage:BitmapAsset;

[Bindable]
[Embed(source="assets/myImage.png")]
public var myImage:Class;

public function init():void
{
mySmoothImage = BitmapAsset(new myImage());
mySmoothImage.smoothing = true;
}


The second approach is somewhat more compact, and uses a class level embed that extends Bitmap, as follows:


[Embed(source="myImage.png")]
public class mySmoothImage extends Bitmap
{
public function mySmoothImage()
{
smoothing = true;
}
}


Below is an example of the same image embedded twice in a flex app, the first with Smoothing enabled, and the second in the default manner. As you change the scale of the image via the slider control, you should be able to notice the difference. This would be valuable for any image that you intend to scale, or perhaps an image that you intend to apply a scale or zoom effect to.

Be warned though, enabling smoothing can affect performance, so you certainly wouldn't want to enable smoothing for UI elements or items that never intend to scale or rotate.

Click to download the below example

Posted by Peter Baird at 11:01 AM | Comments (13)