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控件做外观设置）

<?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="评估计划"> 
          <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>      
           <nodeid="10300" label="我的博客"> 
              <node id="10301" label="北边村人"canvas="javaest.javaeye.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: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的内容