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