Archive for the ‘Components’ Category

Adding CheckBox instances to a DataGrid column

Thursday, February 11th, 2010

Once in a while somebody wants to add an icon or more often a component in the DataGrid component. This seemed to be easier with AS2 components and there are some tutorials. However, this is different with AS3 components. Adobe has a nice article about manipulating the DataGrid. One of the tutorials on that site shows how to add images to the DataGrid using the UILoader component. In the following we want to add CheckBox instances to cells of one column.

Extending the CheckBox class – implementing the ICellRenderer interface

I will show two ways, but the aim is different. In the first part we add a CheckBox and clicking a DataGrid row will select the CheckBox as shown in this movie. We first create a Documnent class where we add the DataGrid. We associate a CellRenderer to the row, where we want to show CheckBox instances. Clicking another row will select the CheckBox in that row and unselect the previous CheckBox.

_check.cellRenderer = SpriteCellRenderer_1;

We then write the class SpriteCellRenderer_1. This class extends the CheckBox class and implements the ICellRenderer class. We need to add some functions to this class, which basically stay empty. This is because the ICellRenderer interface has certain properties and methods. Some of these overlap with the CheckBox class but some not and those are the ones we add. If you test movie at this stage you will see CheckBox instances added but without label. So in the constructor of this class just add this line

label = "Check it out";

and that is all.

Using the CheckBox in the DataGrid to select items for a shopping cart

That was quite simple, however, there is no real functionality of the CheckBox. In the next example we select CheckBox instances and the items associated with them will be added to a shopping cart list. The Document class is very similar as previously except for some important differences, which I will explain. We extend the Document class to a new Abstract class, which we have to write. This is because we need to communicate from outside the Document class. I have documented this in a separate blog article. Another change is of course that data which we receive from the CheckBox selection will be monitored and stored in an array, which is the listener function when a row is pressed.

So now let’s have a look at the SpriteCellRenderer class, which is equivalent to the SpriteCellRenderer_1 class from the previous movie. The SpriteCellRenderer class this time extends the Sprite class and also implements the ICellRenderer interface. Our strategy is to create a Sprite instance and then using addChild we add a CheckBox instance, which is independent from the DataGrid row MouseEvent. We need to add all the methods from the ICellRenderer interface, since the Sprite class does not share any of those. In order to add the CheckBox to the DataGrid we create a Sprite in the fla and name it “MyIcon”. This Sprite is associated with its own class. If you go back and look at the Document class of this movie you should look at the place where we add items to columns.

dp.addItem ({no:"1",item:"Apples",price:"$1,50",data:"MyIcon"});

The last part is the “_check” column with “data” as the variable. We place a Sprite instance in the DataGrid by adding this script to the function “set data” in the SpriteCellRenderer class.

public function set data (value:Object):void
{
	_data = value;
	if (!wasSelected)
	{
		var ClassReference:Class = getDefinitionByName(_data.data) as Class;
		var instance:Object = new ClassReference();
		addChild (DisplayObject(instance));
		wasSelected = true;
	}
}

The Boolean “wasSelected” is to prevent that every time a DataGrid row is selected more instances are added to the Displaylist. We have now achieved to add an instance of MyIcon to a row of the DataGrid.

Next we need to add the CheckBox. We do that using the MyIcon class. Go through the script and you see where. The last task is to communicate with the Document class to manipulate which items the user wants to select. If you look at the “MyIcon” class you see that it also extends the Abstract class and so shares properties and methods with the Document class. So we use the the set_Message method to send a message to the Document class. The nice thing here is that when we select the CheckBox we also trigger the DataGrid CLICK event and by using the get_message method know what is the selection status. Finally, we add our selection to an array or delete it again if we decide to unselect it. Check the scripts, which have a lot of additional comments. You can download all files here.

Changing AS3 Component Styles with As

Tuesday, December 15th, 2009

An often reoccurring question is how to change the appearance of Flash components. This appeared easy to do with AS2 components. But actually it is much easier with AS3 components, where you have access to all skins and not only by just clicking on the component but also by using Actionscript. As an example we look at the ComboBox and I will show two ways to change the look of individual instances.

The first way is to just use the colorTransform method as shown in this movie. You will see two ComboBoxes, cb1 and cb2. cb1 was changed using different parameters. First of all the color was changed using colorTransform. We also change the alpha value of the BaseButton, which is part of the ComboBox and which is the first child: cb1.getChildAt(0). The second child is the TextInput component, which we can get by using instance.textField. The script for the movie you just saw is here. We just put two components on the stage.

import fl.controls.ComboBox;
import flash.geom.ColorTransform;
//
var _color:ColorTransform = new ColorTransform();
_color.color = 0x3399CC;
cb1.transform.colorTransform = _color;
cb1.getChildAt(0).alpha = 0.5;
//
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.font = "Impact";
myTextFormat.color = 0x000000;
myTextFormat.size = 14;
cb1.textField.setStyle ("textFormat",myTextFormat);
//
cb1.addItem ({label:"Apples"});
cb1.addItem ({label:"Oranges"});
cb1.addItem ({label:"Banana"});
cb2.addItem ({label:"Spinach"});
cb2.addItem ({label:"Salad"});
cb2.addItem ({label:"Cucumber"});


We also change the TextFormat of the TextInput of cb1 as you can see.

While this is one simple way of individualizing a component instance there is a much more elegant way. If you open the library of a movie, which has a ComboBox you will see a folder with the Component assets. Open the folder and you will see several folders, one of them named ComboBoxSkins. For our next exercise copy the MovieClip for ComboBox_upSkin, ComboBox_overSkin and ComboBox_downSkin. Give them new names, UpSkinBlue, OverSkinBlue and DownSkinRed. Fill out the form as shown here.Then change the color of the MovieClip as you like. I already did it, if you look at this final movie. To change the style of a ComboBox instance we use the setStyle() method. But how do we know the parameters. It is very simple. Check the Language Reference for the ComboboBox and scroll down to Styles. If it is not open, open it and you see a large number of references. One of them is upSkin, which is the skin for the default ComboBox. Now let’s change the skins using Actionscript.

import fl.controls.ComboBox;
//
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.font = "Impact";
myTextFormat.color = 0x003399;
myTextFormat.size = 14;
//
cb1.setStyle("upSkin","UpSkinBlue");
cb1.setStyle("overSkin", "OverSkinBlue");
cb1.setStyle("downSkin", "DownSkinRed");
cb1.textField.setStyle ("textFormat",myTextFormat);
//
cb1.addItem({label:"Apples"});
cb1.addItem({label:"Oranges"});
cb1.addItem({label:"Banana"});
cb2.addItem({label:"Spinach"});
cb2.addItem({label:"Salad"});
cb2.addItem({label:"Cucumber"});


The script is very similar to the one of the former movie except that we are setting styles. The first parameter is the Style parameter, for instance upSkin. The second parameter is the style we want to apply, in our case the style of the MovieClip UpSkinBlue. Therefore, we add the class name of the MovieClip, which should be the same as the id. And that is all we need to do. If we want to change all instances of the ComboBox then we use the StyleManager class:

StyleManager.setComponentStyle(ComboBox, "upSkin","UpSkinBlue");


And that concludes this tutorial. Download the files here.