FLEX实践：TREE与SWFLOADER的简单应用

前言：在开始之前，先描述一下这例子的内容

1）实现TREE控件的简单应用（加载内容为XML格式）

2）外部CSS应用

3）不同FLEX应用程序之间通过SWFLOADER调用



下面开始本次实践吧！

1）创建CSS文件
CssTest.css

/*
CSS file */



.MyTextStyle1

{

font-family:
Copacetix;

font-size:
15pt;


fontWeight:bold;


color:#B62F19;


cornerRadius:13;

width:104;

height:32;

alpha:0.49;

}



2）创建CssTest.mxml（调用CSS文件为其中的button控件做外观设置）

<?xml
version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:Style source="CssTest.css" />

<mx:Script>

<![CDATA[

import mx.controls.Alert;

private function showName():void{

Alert.show("Your name
is: "+username.text);

}

]]>

</mx:Script>

<mx:Text styleName="MyTextStyle" text="Please
input your name:" width="305" x="63"
y="37"/>

<mx:Button x="120" y="165"
label="Show Name" styleName="MyTextStyle1"
click="showName()"/>

<mx:TextInput x="63" y="92"
width="228" height="32" fontSize="15"
color="#100B3C" id="username" />



</mx:Application>



3）创建TreeTest2.mxml（引用TREE控件并调用CssTest.mxml）



<?xml
version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:Style source="CssTest.css" />

<mx:states>

<mx:State
name="show1">


<mx:SetStyle target="{panel1}" name="fontSize"
value="26"/>


<mx:SetStyle target="{panel1}" name="verticalAlign"
value="top"/>


<mx:SetProperty target="{panel1}" name="layout"
value="vertical"/>


<mx:AddChild position="lastChild">


<mx:SWFLoader x="409" y="76"
source="CssTest.swf"/>


</mx:AddChild>

</mx:State>

</mx:states>

<mx:XMLList id="treeData">

<node id="10000" label="评估计划">

<node
id="10100" label="计划生成器">


<node id="10101" label="新建计划"
canvas="javaest.FirstCanvas"/>


<node id="10102" label="复制计划"
canvas="javaest.SecondCanvas"/>


</node>

<node
id="10200" label="计划管理">


<node id="10201" label="将计划转为准备运行" canvas="javaest.GetProductList"/>


<node id="10202" label="将计划转为正在配置" canvas="javaest.SecondCanvas"/>


<node id="10203" label="查询计划状态"
canvas="javaest.FirstCanvas"/>


</node>

<node
id="10300" label="我的博客">


<node id="10301" label="北边村人"
canvas="javaest.javaeye.com"/>




</node>

</node>

</mx:XMLList>

<mx:Script>

<![CDATA[


import mx.controls.Image;

import
mx.controls.Button;


import mx.containers.Canvas;


import mx.controls.Alert;


private function addNewTabPage(event:Event):void {


var selectedNode:XML=Tree(event.target).selectedItem as XML;


var id:String=selectedNode.@id;


var label:String=selectedNode.@label;


var canvasClassName:String=selectedNode.@canvas;




if (functionTree.dataDescriptor.isBranch(selectedNode)) {


functionTree.expandItem(selectedNode,
!functionTree.isItemOpen(selectedNode));


} else{


//如果节点项为“新建计划”,则将页面切换到SHOW1状态下


if(label=="新建计划"){


currentState="show1" ;


}





}


Tree(event.target).selectedItem=null;


}



]]>

</mx:Script>

<mx:Panel width="197"
height="548" dropShadowEnabled="false" title="新闻管理" id="panel1" fontSize="26">

<mx:Tree
id="functionTree" change="addNewTabPage(event)"
width="171" height="100%" enabled="true"
showRoot="true" dataProvider="{treeData}"
labelField="@label" borderStyle="none"
fontSize="13">

</mx:Tree>

</mx:Panel>

</mx:Application>



运行结果：

当节点不为“新建计划”时，不显示SHOW1的内容





当点击“新建计划”时，显示SHOW1状态的内容





运行CssTest.mxml的内容