As I have recently started working with Flex4, I have started to use some of the new components from the Flex 4 SDK. One of them is the DataGroup class. A brief explanation of the class is below (from the docs) :-

The DataGroup class is the base container class for data items. The DataGroup class converts data items to visual elements for display. While this container can hold visual elements, it is often used only to hold data items as children. The DataGroup class takes as children data items or visual elements that implement the IVisualElement interface and are DisplayObjects. Data items can be simple data items such String and Number objects, and more complicated data items such as Object and XMLNode objects. While these containers can hold visual elements, they are often used only to hold data items as children.

DataGroups allow you to do something called Virtualization. What that means is, if you have am ArrayCollection with lets say 50 items in it and your DataGroup is only showing 10 items at a time, then Flash Player will only render 10 visual elements on the screen and as you keep scrolling up or down, those renderers will be recycled within each other. In other words, there will only ever be a few visual renderers created based on the size of your visible component.

Lets take an example to get a better understanding of this concept :- Read the rest of this entry »

Tags: Flex

I was displaying some data in a DataGrid and a requirement came up to show tooltips on the columns which had more data than the column width. Since increasing the column width was not an option, the ideal solution was to show the the ellipses (“…”) at the end of the column and the rest of the text to be shown as tooltip on the DataGrid Column. The first thought that came to my mind was to quickly write up an ItemRenderer. But then as explained here, you can simply use mx.controls.Label as your ItemRenderer as the Label class already had a text Property and it has the truncateToFit set to true and it shows the tooltip by default. Read the rest of this entry »

Tags: Flex

If you are a Flex developer, you would have come across this issue several times. If you are using the <mx:Label> control and the size of your text is bigger than the size of the container, you will see a cut off version of the text because by default, the Label control does not allow multiline text.

So, here is what I wrote quickly to achieve this functionality.

package components
{
 import mx.core.UITextField;
 import flash.text.TextFieldAutoSize;
 import mx.controls.Label;
 import flash.display.DisplayObject;

 public class MultiLineLabel extends Label
 {

 override protected function createChildren() : void
 {
 // Create a UITextField to display the label.
 if (!textField)
 {
 textField = new UITextField();
 textField.styleName = this;
 addChild(DisplayObject(textField));
 }
 super.createChildren();
 textField.multiline = true;
 textField.wordWrap = true;
 textField.autoSize = TextFieldAutoSize.LEFT;
 }
 }
}

The code overrides the createChildren() method and creates a new instance of UITextField which has multiline and wordwrap turned on.

Tags: Flex

If you are using Flex and want to have a TabBar control that aligns vertically instead of the default “horizontal” behaviour , then you can simply use the “direction” property on the control and make it vertical. You can see an example of that below . Notice how the tabs are now vertically aligned but the borders are still on top, left and right. And see how the cornerradius is still on the top left and top right corners. Read the rest of this entry »

Tags: Flex