Flex 4. Output my component repeatedly - flex4

Question

I create a Skin:
<s:Group id="brick">
<s:Rect width="40" height="20">
<s:fill>
<s:SolidColor color="{hostComponent.colorBrick}" />
</s:fill>
</s:Rect>
<s:Rect width="40" height="20">
<s:stroke>
<s:SolidColorStroke color="#000000" />
</s:stroke>
</s:Rect>
</s:Group>
How do I bring this component more than once?
It is a brick. I want create wall.

Answer 1

You can use a loop to create the same component more than once.
Here is your skin BrickSkin.mxml:
<?xml version="1.0"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
<![CDATA[
[HostComponent("Brick")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<s:Group id="brick">
<s:Rect width="40" height="20">
<s:fill>
<s:SolidColor id="solidColor" />
</s:fill>
</s:Rect>
<s:Rect width="40" height="20">
<s:stroke>
<s:SolidColorStroke color="#000000" />
</s:stroke>
</s:Rect>
</s:Group>
</s:Skin>
Here is your Brick component Brick.as:
package {
import flash.events.Event;
import mx.graphics.SolidColor;
import spark.components.SkinnableContainer;
public class Brick extends SkinnableContainer{
public function Brick() {
super();
}
[SkinPart(required="true")]
public var solidColor:SolidColor;
override protected function partAdded(partName:String, instance:Object):void {
super.partAdded(partName, instance);
if(instance == solidColor)
{
solidColor.color = colorBrick;
}
}
[Bindable]
private var _colorBrick:uint;
[Bindable(event="colorBrickChanged")]
public function get colorBrick():uint {
return _colorBrick;
}
public function set colorBrick(value:uint):void {
if (_colorBrick == value) return;
_colorBrick = value;
dispatchEvent(new Event("colorBrickChanged"));
invalidateProperties();
}
override protected function commitProperties():void {
super.commitProperties();
if(solidColor)
solidColor.color = colorBrick;
}
}
}
You can create BrickCSS.css as below:
#namespace local "*";
local|Brick {
skinClass: ClassReference("BrickSkin");
}
Here is your Main.mxml:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%"
height="100%"
creationComplete="{buildWall()}">
<fx:Style source="BrickCSS.css"/>
<fx:Script><![CDATA[
private function buildWall():void
{
for(var i = 0; i < 200; i++)
{
var brick:Brick = new Brick();
brick.colorBrick = 0xFF0000;
tileGroup.addElement(brick);
}
}
]]></fx:Script>
<s:TileGroup id="tileGroup" width="20%" height="90%" verticalCenter="0" horizontalCenter="0" horizontalGap="0" verticalGap="0" />
</s:Application>
Here is the output snap shot.