【原创】基于flex的三层架构特效之框架结构说明

        在上一篇中，写了关于该三层导航的特效介绍，这篇中，介绍一下框架结构。

        框架的结构图如下：
   
        在该结构中，主要分成三个部分，入口界面，ui，和asfile
        demo的代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>  
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
 3     xmlns:eff="com.adobe.ac.mxeffects.*" 
 4     paddingBottom="0" paddingLeft="0" paddingTop="0" paddingRight="0"  
 5     horizontalAlign="center" verticalAlign="middle" backgroundColor="#260123" 
 6     backgroundImage="image/bj.gif" 
 7     xmlns:logins="com.demo.ui.*">
 8     <mx:VBox>  
 9     <mx:ViewStack id="loginStack" width="402" height="278" creationPolicy="all">  
10       <mx:VBox id="login" horizontalAlign="center" width="100%" height="100%"
11         verticalAlign="middle" >  
12         <logins:OpenDoor/>
13       </mx:VBox>  
14       <mx:Canvas id="chatRoom" width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">             
15         <logins:CloseDoor id="closeDoorUI"/>
16       </mx:Canvas>  
17     </mx:ViewStack>  
18     </mx:VBox>  
19 </mx:Application>  
20 

        其中<logins:OpenDoor/>为登录的UI界面，<logins:CloseDoor id="closeDoorUI"/>为登录后的主界面。
        
        OpenDoor.mxml的代码如下，主要就是一个登录的界面。

1 <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" title="登录" fontSize="13">
2     <mx:Script source="../AsFile/AsFile.as"/>  
3     <mx:Label x="82" y="56" text="用户名：" fontSize="13"/>
4     <mx:TextInput x="138" y="54"/>
5     <mx:Label x="82" y="112" text="密码：" fontSize="13"/>
6     <mx:TextInput x="138" y="110"/>
7     <mx:Button x="111" y="186" label="登录" click="logings(this)"/>
8     <mx:Button x="215" y="186" label="重置"/>
9 </mx:Panel>

        CloseDoor.mxml的代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" 
 3     xmlns:navigation="com.demo.ui.*" verticalScrollPolicy="off" horizontalScrollPolicy="off">
 4     <mx:Script source="../AsFile/AsFile.as"/>  
 5     <!--控制抖动的变化-->
 6     <mx:Move id="effSlide" effectEnd="doEndMove( event )" />
 7     <mx:Canvas id="myCanvas" width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">
 8           <mx:TextArea id="log" fontSize="12" width="100%" height="100%"    
 9             editable="false"/>  
10           <mx:HRule width="100%" height="15" y="54"/>
11           <mx:HDividedBox x="0" y="65" width="100%" height="494" liveDragging="true">
12               <mx:Canvas width="175" height="100%" backgroundColor="#874623" verticalScrollPolicy="off" horizontalScrollPolicy="off">
13                 <mx:HBox id="rightUIHbox" moveEffect="{effSlide}" autoLayout="true" verticalScrollPolicy="off" horizontalScrollPolicy="off">
14                     <navigation:Navigation1 id="Navigation1" width="{myCanvas.width}" height="{myCanvas.height}"/>
15                     <navigation:Navigation2 id="Navigation2" width="{myCanvas.width}" height="{myCanvas.height}"/>
16                 </mx:HBox>
17               </mx:Canvas>
18               <mx:Canvas width="200" height="100%" backgroundColor="#4F87D2">
19                   <mx:ViewStack x="0" y="0" id="myViewStatck" width="100%" height="100%" creationPolicy="all">
20                       <mx:Canvas id="kccx" width="100%" height="100%">
21                           <navigation:Item1/>
22                       </mx:Canvas>
23                       <mx:Canvas id="kcbm" width="100%" height="100%">
24                           <navigation:Item2/>
25                       </mx:Canvas>
26                   </mx:ViewStack>
27               </mx:Canvas>
28           </mx:HDividedBox>
29           <mx:Canvas x="0" y="0" width="100%" height="57" backgroundColor="#273645" 
30               verticalScrollPolicy="off" horizontalScrollPolicy="off">
31               <mx:LinkButton x="807" y="23" label="登出系统" color="#D48374" click="logouts(this)" fontSize="12"/>
32               <mx:LinkButton x="717" y="23" label="一级导航2" color="#D48374" fontSize="12" click="tableQuery(1)"/>
33               <mx:LinkButton x="627" y="23" label="一级导航1" color="#D48374" fontSize="12" click="tableQuery(0)"/>
34           </mx:Canvas>
35         </mx:Canvas>  
36 </mx:Canvas>
37 

        这个就是我们进行业务处理的主要页面了，介绍一下这个页面的结构
        <mx:HDividedBox>这个是用来分割两个容器的控件,主要可以实现对两个容器大小的手动拖拽。
        <navigation:Navigation1>这个是导航页面一，就是二级导航控制，代码如下：

1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="this.queryxs.enabled = false">
3     <mx:Script source="../AsFile/AsFile.as"/>  
4     <mx:Canvas height="100%" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">
5         <mx:HRule x="0" y="34" width="100%" height="12"/>
6         <mx:Button id="creatxs" label="二级导航2" y="108" x="36" fontSize="12" width="97" click="queryXS()"/>
7         <mx:Button id="queryxs" label="二级导航1" y="54" x="36" fontSize="12" width="97" click="creatXS()"/>
8     </mx:Canvas>
9 </mx:Canvas>

        <navigation:Navigation2>是同样的考量。
        <mx:ViewStack>是一个容器集合的控件,里面是我们自己的业务处理页面

1 <mx:ViewStack x="0" y="0" id="myViewStatck" width="100%" height="100%" creationPolicy="all">
2                       <mx:Canvas id="kccx" width="100%" height="100%">
3                           <navigation:Item1/>
4                       </mx:Canvas>
5                       <mx:Canvas id="kcbm" width="100%" height="100%">
6                           <navigation:Item2/>
7                       </mx:Canvas>
8                   </mx:ViewStack>

        <navigation:Item1/>中，是我们自己的业务处理页面，代码如下

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
 3     <mx:DataGrid id="jobschedule_log_datagrid_log" x="10" y="124" width="100%"  visible="true">
 4         <mx:columns>
 5             <mx:DataGridColumn headerText="项目1" dataField="classid" width="70" fontSize="12"/>
 6             <mx:DataGridColumn headerText="项目2" dataField="classname" width="150" fontSize="12"/>
 7             <mx:DataGridColumn headerText="项目3" dataField="classnumber" width="150" fontSize="12"/>
 8         </mx:columns>
 9     </mx:DataGrid>
10       <mx:Label x="85.5" y="39" text="输入项目1：" fontSize="12"/>
11       <mx:Label x="337.5" y="41" text="输入项目2：" fontSize="12"/>
12       <mx:Button x="627.5" y="35" label="查询" fontSize="12"/>
13       <mx:HRule x="0" y="71" height="13" width="100%"/>
14       <mx:TextInput x="166.5" y="37"/>
15       <mx:TextInput x="415" y="37"/>
16 </mx:Canvas>
17 

        eclipse的工程下载地址：http://www.blogjava.net/Files/rainwindboys/demo.rar
        有什么不明白的，或者有问题的地方，欢迎给我留言，我们一起探讨啦