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

xiaoer_1982

<!--[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控件做外观设置）
<?xmlversion="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 nameis: "+username.text);
}
]]>
</mx:Script>
<mx:Text styleName="MyTextStyle" text="Pleaseinput 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）

<?xmlversion="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:Statename="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="评估计划">
<nodeid="10100" label="计划生成器">
<node id="10101" label="新建计划"canvas="javaest.FirstCanvas"/>
<node id="10102" label="复制计划"canvas="javaest.SecondCanvas"/>
</node>
<nodeid="10200" label="计划管理">
<node id="10201" label="将计划转为准备运行" canvas="javaest.GetProductList"/>
<node id="10202" label="将计划转为正在配置" canvas="javaest.SecondCanvas"/>
<node id="10203" label="查询计划状态"canvas="javaest.FirstCanvas"/>
</node>
<nodeid="10300" label="我的博客">
<node id="10301" label="北边村人"canvas="javaest.iteye.com"/>

</node>
</node>
</mx:XMLList>
<mx:Script>
<![CDATA[
import mx.controls.Image;
importmx.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:Treeid="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的内容