Simple DataGrid with ArrayCollection Update Example
I was helping out on the Flex community forum and one of the posts needed a little more of example than I could give using the forum post tools. So, I decided to create a quick example of a DataGrid using an ArrayCollection for the dataprovider. The ArrayCollection is created dynamically using a randomization selection from two static arrays. Then there is an option for updating the list showing which of the items have “Red” as the color value. I also put a couple of other items in the example, including an ItemRenderer for the DataGrid and a button holder for the Panel.
The first part of this example is to show an Object being used in an ArrayCollection. The idea behind using an Object is so that when the data is inserted, it is done as a specific type, which eliminates the need for casting String values into other types for manipulation. In this example, the myObjectItem has 2 String, 1 Number and 1 Boolean objects. The class defines these objects and also has a function for creating the object from passed in values.
package controls
{
public class myObjectItem
{
public static function create(itemValue1:Number, itemValue2:String = '', itemValue3:String = '', itemValue4:Boolean = false):myObjectItem {
var tmpMyObject:myObjectItem = new myObjectItem();
tmpMyObject.myItemValue1 = itemValue1;
tmpMyObject.myItemValue2 = itemValue2;
tmpMyObject.myItemValue3 = itemValue3;
tmpMyObject.myItemValue4 = itemValue4;
return tmpMyObject;
}
public function myObjectItem()
{
}
[Bindable]
public var myItemValue1:Number;
[Bindable]
public var myItemValue2:String;
[Bindable]
public var myItemValue3:String;
[Bindable]
public var myItemValue4:Boolean;
}
}
Creating the object is straight forward. Call the create function and add each value, in this case, by setting the Number to the loop value, the Strings to random vales from two arrays and the Boolean to false. The object is created and then added to the ArrayCollection. There are other ways of creating the ArrayCollection with data passed in from XML or data connections, but for this example, I am creating the data randomly.
// populate Arrary Collection with random values
var lengthOfMyArray:int = 26;
for(var i:int = 0; i < lengthOfMyArray; i++) {
myArrayCollection.addItem(myObjectItem.create(i, randomStringItem(colors), randomStringItem(fruits)));
}
The second part of the example is to update a value in the ArrayCollection. The post on the Flex forum was doing a calculation and then setting a value to “true”. In my example, I check the String value for “Red”. If it is found, then I set the Boolean value to true as parts of a new object with old data from the original object and then using setItemAt to place the new object back in the ArrayCollection at the position of the old object.
protected function findRed_clickHandler(event:MouseEvent):void {
// looks for the "red" in ItemValue2 and changes ItemValue4
for(var t:int = 0; t < myArrayCollection.length; t++) {
var tmpObject:Object = new Object();
tmpObject = myArrayCollection.getItemAt(t);
if(tmpObject["myItemValue2"] == "Red") {
tmpObject.myItemValue4 = true;
} else {
tmpObject.myItemValue4 = false;
}
myArrayCollection.setItemAt(tmpObject, t);
}
// Refresh Data
myArrayCollection.refresh();
}
This is a very straight forward example and I might add more items to it later.
Spark LineGrid Component
Since I had a day off, I decided to work on converting my old Flex Examples to the new Flex 4. As stated in a previous post, the new Flex 4 breaks Degrafa and Degrafa seems to be defunct now. Most of the drawing functions are handled with spark and sprite functions, but little things like arcs and line repeaters are not. So where before it was easy enough to create a repeating line in Degrafa, now I have to do a loop to create the lines needed. Well, in this case, instead of drawing lines, I’m drawing rectangles. While it might seem simple at first just to draw a bunch of rectangles together to create a grid, there is a little trickiness to it. You can have to account for the size of the total grid, based on the number of columns, rows and the grid box size. And you also have to use both the column and row count value to draw the correct number of rows and columns and at the right size. It is all just a matter of thinking about it for a few moments and then having an “ah ha!” moment. Another little quirk with the components is that when you add a visual element, it puts it in the center of the group component. On the Egg Timer, I just left it there for now because it worked for what I needed. I might change it later. But for the LineGrid, it made for it not to line up correctly. So, before I start drawing the rectangles, I had to determine the actual 0,0 location first. It also took a couple tries to make sure I was using the right zero.
// Find the actual 0,0 start var actualZeroX:int = -1 * ((columnCount * boxSize) * .5); var actualZeroY:int = -1 * ((rowCount * boxSize) * .5);
One good thing about the new components, is that when you use the declarations, it is the same as creating a set function, which means less code. I simply added declarations for the column and row counts, then put those values where I need them. When I use the LineGrid component I add the values I need just like any other attribute.
<components:LineGrid id="lineGrid1" rowCount="5" columnCount="5" boxSize="50" lineThickness="4" lineColor="0x009900" />
Here is the example showing a grid with equal columns and rows and then two other grids with column or rows determined by the size of the application.
[kml_flashembed publishmethod="dynamic" fversion="10.0.0" movie="http://demo.deanlogic.com/Flex/GridLineRepeater/SparkGridLines.swf" width="800" height="300" targetclass="flashmovie"]
