Flash Builder 4.5 开发 OA - 2

 - tree添加数据，动态添加tab面板

1.     绑定Tree的测试数据

tree已经添加到面板中，但没有数据，在后台写个类，模拟的生成一些tree的节点信息，显示一下，看看tree的效果，代码如下：

package com.gwtjs.flash.test;

 

import java.util.ArrayList;

import java.util.List;

import java.util.Random;

 

import com.gwtjs.model.Module;

 

public class TreeData {

 

         /**

          * 如果节点ID能被2或3取模，则返回子节点,其它不返回

          * <p>

          * 构建节点，生成节点数随机抽6以内，ID以parentId起,1.起点为11,2起点为12

          * </p>

          *

          * @return

          */

         public List<Module> getModules(Integer parentId) {

                   System.out.println("parent id: " + parentId);

                   List<Module> list = new ArrayList<Module>();

 

                   Random random = new Random();

                   int max = random.nextInt(10);

                   if(max<1)

                            max=1;

                  

                   int i = 1;

                   if (parentId != null && 0 != parentId) {

                            i = parentId * 10;

                   }

 

                   for (; i <= max; i++) {

                            Module m = new Module();

                            m.setId(i);

                            m.setText("模块" + i);

                            m.setLinkUrl("#" + i);

 

                            list.add(m);

                   }

 

                   return list;

         }

 

}

 

添加数据调用配置

remoting-config.xml文件添加如下配置：

    <!-- Layout Tree Data -->

    <destination id="TestTreeSimple">

        <properties>

            <source>com.gwtjs.flash.test.TreeData</source>

        </properties>

    </destination>

    Declarations标签添加了如下：

<s:RemoteObject id="moduleTreeService" destination="TestTreeSimple" fault="moduleTreeServiceFault(event)" result="moduleTreeServiceResult(event)"/>

 

 

tree组件：

<mx:Tree x="0" y="0" width="100%" height="100%" labelField="text"borderVisible="false" id="moduleTreePanel"change="moduleTreeChange(event)" />

添加了一个id，方便调用;

树显示的文字绑定为数据返回对象的text属性;

生成了一个moduleTreeChange函数，点击树的时候，需要在右部面板创建一个tab，并加载Grid组件;

 

moduleTreeChange函数：

/**

 * tree changeevent

 * 树的change事件，判断主面板是否已经存在此面板，如果存在，直接激活选中即可，如果没有，则要创建一个面板，并添加到内容区域，并激活

 */

protected functionmoduleTreeChange(event:ListEvent):void{

    //树的节点

    var item:Object =moduleTreePanel.selectedItem

    var tabName:String = "tab_"+item.id;

    //首先查询这个tab,如果没有就创建 ,注意mainTabs在容器中的位置，mainTabs为事先已经定义的id,在容器中可以看到

    var p:NavigatorContent =NavigatorContent(mainTabs.getChildByName(tabName));

    if(p==null){

        //创建一个节点，并添加到mainTabs中去.这里还有一个ModuleLoader动作，稍后Grid完成就补上

        p =new NavigatorContent();

        p.id =item.id;

        p.name =tabName;

        p.label =item.text;

        mainTabs.addItem(p);

    }

   

    //选择状态

    mainTabs.selectedChild =p;

   

}

 

页面载入时的函数添加了tree数据服务的提交

//请求树的数据

    moduleTreeService.getModules(0);

 

提交请求成功同样也是将值赋给定义好并绑定的参数,类同HelloWorld程序，只是数据类型的区别：

[Bindable]

private var treeData:ArrayCollection= new ArrayCollection();

 

protected function moduleTreeServiceResult(event:ResultEvent):void{

    treeData =ArrayCollection(event.result);

    moduleTreePanel.dataProvider= treeData;

   

}

 

CSS和Script已经移出文件单独存放，改为了外部引用

    <fx:Style source="css/icon.css"/>  

    <fx:Script source="scripts/index.as" />

效果：

随便聊几句：

 

先前和一个同行切磋时谈到Flex,当时称Flex,他很兴致的想考我，问我，现在版本到几了，我说4.0快出来了，他说是as3吧，我说最好是不要用as3，2来恒量flex;当时他用很鄙视的眼光看我，我知道我们谈不来。

         个人认为，Flash的优势并不只是as3,或者说，主要的优势不在这，什么脚本都是脚本，as3和extjs或其它的ajax框架有什么区别？谁有优势？

 

         flash最大的优势就是设计快，设计器，透视图，组件这些才是真的优势，如果只让我用脚本去写应用，我宁愿用ExtJS,语言虽没as3强，有些方面，比flash强很多，例如extjs分页这类的组件，根本就不用自己去，直接配置上就可以了。别说我懒，咱是商业应用的一个小程序员而已，老板都在要求快、准、狠。而js还有就是应用比flash早，资料也比较早，一般的程序员，都是先写过js再flash的，只用个actionscript,只是多余的给自己找了个学习的机会，蛋疼。