【原创】基于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
        有什么不明白的，或者有问题的地方，欢迎给我留言，我们一起探讨啦