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

<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning /> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas /> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL /> <w:BalanceSingleByteDoubleByteWidth /> <w:DoNotLeaveBackslashAlone /> <w:ULTrailSpace /> <w:DoNotExpandShiftReturn /> <w:AdjustLineHeightInTable /> <w:BreakWrappedTables /> <w:SnapToGridInCell /> <w:WrapTextWithPunct /> <w:UseAsianBreakRules /> <w:DontGrowAutofit /> <w:UseFELayout /> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--><!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"\@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} p {mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; font-size:12.0pt; font-family:宋体; mso-bidi-font-family:宋体;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} --><!--[if gte mso 10]> <mce:style><! /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} --> <!--[endif]-->

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

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.iteye.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的内容