Flex往TileGroup中动态添加组件

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

1、 参考相关版

[/code]<?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、 改进版

[code="java"]

<?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个类及其子类