Flex往TileGroup中动态添加组件

   需求： 在监控中心页面点击“添加监控项”弹出一个相应的添加页面， 在添加页面添加好监控项之后点击确定返回监控中心页面，并且在此页面上动态呈现出所选择监控指标对应的监控图。

   1、 参考相关版

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.containers.VBox;

private function addAccordionChild():void {
var vbox:VBox = new VBox();
vbox.label = "child " + accordion.numChildren;
vbox.percentWidth = 100;
vbox.percentHeight = 100;
var randColor:uint = Math.random() * 0xFFFFFF;
vbox.setStyle("backgroundColor", randColor);
accordion.addChild(vbox);

}

private function removeAccordionChild():void {
if (accordion.selectedChild) {
accordion.removeChild(accordion.selectedChild as DisplayObject);

}
}

]]>
</fx:Script>

<mx:ApplicationControlBar dock="true">
<s:Button label="Add child"
  click="addAccordionChild();"/>
<s:Button label="Remove Child"
  click="removeAccordionChild();"/>
</mx:ApplicationControlBar>

<mx:Accordion id="accordion" width="250" height="100%"/>

</s:Application>

   2、 改进版

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.containers.VBox;

import spark.core.SpriteVisualElement;

private var sprve:SpriteVisualElement;
private function addAccordionChild2():void{
sprve = new SpriteVisualElement;

​

sprve.graphics.beginFill(0xFFFFFF);

sprve.graphics.drawCircle(100, 100, 100);

sprve.graphics.endFill();


accordion.addElement(sprve);

}

private function addAccordionChild():void {
// var vbox:VBox = new VBox();
// vbox.label = "child " + accordion.numChildren;
// vbox.percentWidth = 100;
// vbox.percentHeight = 100;
// var randColor:uint = Math.random() * 0xFFFFFF;
// vbox.setStyle("backgroundColor", randColor);
// accordion.addChild(vbox);
var circle:SpriteVisualElement=new SpriteVisualElement();

circle.graphics.beginFill(0x0000ff);

circle.graphics.drawEllipse(100,100,50,50);

circle.graphics.endFill();

accordion.addElement(circle);

}

private function removeAccordionChild():void {
//if (accordion.selectedChild) {
//accordion.removeChild(accordion.selectedChild as DisplayObject);

//}
}

]]>
</fx:Script>

<mx:ApplicationControlBar dock="true">
<s:Button label="Add child"
  click="addAccordionChild();"/>
<s:Button label="Remove Child"
  click="removeAccordionChild();"/>
</mx:ApplicationControlBar>

<!--<mx:Accordion id="accordion" width="250" height="100%"/>-->
<s:Scroller width="100%" height="100%">
    <s:Group width="100%" height="100%" id="accordion2">

<s:TileGroup id="accordion" rowHeight="200" columnWidth="100" horizontalAlign="center"
verticalAlign="middle" horizontalGap="30" >

</s:TileGroup>
</s:Group>
</s:Scroller>
</s:Application>
addElement接受的参数，必须是实现了IVisualElement接口的4个类及其子类