在上一篇中,写了关于该三层导航的特效介绍,这篇中,介绍一下框架结构。
框架的结构图如下:
在该结构中,主要分成三个部分,入口界面,ui,和asfile
demo的代码如下:
OpenDoor.mxml的代码如下,主要就是一个登录的界面。
这个就是我们进行业务处理的主要页面了,介绍一下这个页面的结构
<mx:HDividedBox>这个是用来分割两个容器的控件,主要可以实现对两个容器大小的手动拖拽。
<navigation:Navigation1>这个是导航页面一,就是二级导航控制,代码如下:
<mx:ViewStack>是一个容器集合的控件,里面是我们自己的业务处理页面
eclipse的工程下载地址: http://www.blogjava.net/Files/rainwindboys/demo.rar
有什么不明白的,或者有问题的地方,欢迎给我留言,我们一起探讨啦
框架的结构图如下:
![](/images/blogjava_net/rainwindboys/kj1.gif)
在该结构中,主要分成三个部分,入口界面,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"/>为登录后的主界面。
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
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的代码如下:
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 >
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
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>是同样的考量。
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 >
<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/>中,是我们自己的业务处理页面,代码如下
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 >
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
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
有什么不明白的,或者有问题的地方,欢迎给我留言,我们一起探讨啦