现在位置: 首页 > 博客文章 > 电脑相关 > IT开发 > 开发语言 > Flex > 正文
小 中 大
Flex项目中实现按钮的自动排列
2014年11月13日 15:44:58 ⁄ Flex ⁄ 共 8065字 ⁄ 暂无评论 ⁄ 被围观 1,821次

在开发 Flex 项目时，有些画面上按钮比较多，需要根据不同的状态来显示不同的按钮，按钮的顺序也必须按规定设置，比如新建，编辑，删除，审核，打印这几个按钮，必须是先“新建”才能“编辑”，然后才能“审核”，所以说按钮的顺序代表着一定的业务流程。如果有两个不同权限的人进入画面，一个级别低，除了审核，其它操作都可做，而另外的一个人级别高，除了删除外，其它都能做。

要实现上面的功能，有两种方法：

方法一：根据不同的人设置一个状态，根据状态来判断该显示哪些按钮，不该显示哪些按钮。这种方法比较繁琐，需要自己设置按钮的坐标，如果设置不当，会出现按钮重叠或者按钮顺序不对等情况，代码如下：

Code   ViewPrint
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.                xmlns:s="library://ns.adobe.com/flex/spark"   
  4.                xmlns:mx="library://ns.adobe.com/flex/mx"   
  5.                creationComplete="application1_creationCompleteHandler(event)"  
  6.                >  
  7.     <fx:Script>  
  8.         <![CDATA[  
  9.             import mx.events.FlexEvent;  
  10.               
  11.             private var flag:int;  
  12.               
  13.             protected function application1_creationCompleteHandler(event:FlexEvent):void  
  14.             {  
  15.                 flag = 0;  
  16.                 resetBtn();  
  17.             }  
  18.               
  19.   
  20.             protected function btn_1_clickHandler(event:MouseEvent):void  
  21.             {  
  22.                 flag = 1;  
  23.                 resetBtn();  
  24.             }  
  25.   
  26.   
  27.             protected function btn_2_clickHandler(event:MouseEvent):void  
  28.             {  
  29.                 flag = 2;  
  30.                 resetBtn();  
  31.             }  
  32.   
  33.   
  34.             protected function btn_3_clickHandler(event:MouseEvent):void  
  35.             {  
  36.                 flag = 0;  
  37.                 resetBtn();  
  38.             }  
  39.   
  40.             private function resetBtn():void {  
  41.                 if (0 == flag) {//默认权限  
  42.                     addBtn.visible = true;  
  43.                     editBtn.visible = true;  
  44.                     delBtn.visible = true;  
  45.                     checkBtn.visible = true;  
  46.                     printBtn.visible = true;  
  47.                       
  48.                     addBtn.right = 325;  
  49.                     editBtn.right = 245;  
  50.                     delBtn.right = 165;  
  51.                     checkBtn.right = 85;  
  52.                 }  
  53.                 if (1 == flag) {//权限一  
  54.                     addBtn.visible = true;  
  55.                     editBtn.visible = true;  
  56.                     delBtn.visible = true;  
  57.                     checkBtn.visible = false;  
  58.                     printBtn.visible = true;  
  59.                       
  60.                     addBtn.right = 245;  
  61.                     editBtn.right = 165;  
  62.                     delBtn.right = 85;  
  63.                 }  
  64.                 if (2 == flag) {//权限二  
  65.                     addBtn.visible = true;  
  66.                     editBtn.visible = true;  
  67.                     delBtn.visible = false;  
  68.                     checkBtn.visible = true;  
  69.                     printBtn.visible = true;  
  70.                       
  71.                     addBtn.right = 245;  
  72.                     editBtn.right = 165;  
  73.                 }  
  74.             }  
  75.         ]]>  
  76.     </fx:Script>  
  77.     <fx:Declarations>  
  78.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
  79.     </fx:Declarations>  
  80.     <s:Panel title="按钮的自动排列演示" top="100" left="300" width="500" height="200">  
  81.         <s:Button id="addBtn" top="5" right="325" label="添加" visible="false"/>  
  82.         <s:Button id="editBtn" top="5" right="245" label="编辑" visible="false"/>  
  83.         <s:Button id="delBtn" top="5" right="165" label="删除" visible="false"/>  
  84.         <s:Button id="checkBtn" top="5" right="85" label="审核" visible="false"/>  
  85.         <s:Button id="printBtn" top="5" right="5" label="打印" visible="false"/>  
  86.         <s:BorderContainer top="30" left="10" right="10" bottom="10">  
  87.             <s:Button id="btn_1" top="50" left="100" label="除了审核外" click="btn_1_clickHandler(event)"/>  
  88.             <s:Button id="btn_2" top="50" left="250" label="除了删除外" click="btn_2_clickHandler(event)"/>  
  89.             <s:Button id="btn_3" top="80" left="180" label="恢复默认" click="btn_3_clickHandler(event)"/>  
  90.         </s:BorderContainer>  
  91.     </s:Panel>  
  92. </s:Application>  

 

方法二：该种方法只需要设置按钮显示不显示就可以了，不用再设置按钮的坐标了。代码如下：

Code   ViewPrint
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.                xmlns:s="library://ns.adobe.com/flex/spark"   
  4.                xmlns:mx="library://ns.adobe.com/flex/mx"   
  5.                creationComplete="application1_creationCompleteHandler(event)"  
  6.                >  
  7.     <fx:Script>  
  8.         <![CDATA[  
  9.             import mx.events.FlexEvent;  
  10.               
  11.             private var flag:int;  
  12.               
  13.             protected function application1_creationCompleteHandler(event:FlexEvent):void  
  14.             {  
  15.                 flag = 0;  
  16.                 resetBtn();  
  17.             }  
  18.               
  19.   
  20.             protected function btn_1_clickHandler(event:MouseEvent):void  
  21.             {  
  22.                 flag = 1;  
  23.                 resetBtn();  
  24.             }  
  25.   
  26.   
  27.             protected function btn_2_clickHandler(event:MouseEvent):void  
  28.             {  
  29.                 flag = 2;  
  30.                 resetBtn();  
  31.             }  
  32.   
  33.   
  34.             protected function btn_3_clickHandler(event:MouseEvent):void  
  35.             {  
  36.                 flag = 0;  
  37.                 resetBtn();  
  38.             }  
  39.   
  40.             private function resetBtn():void {  
  41.                 if (0 == flag) {//默认权限  
  42.                     addBtn.visible = true;  
  43.                     editBtn.visible = true;  
  44.                     delBtn.visible = true;  
  45.                     checkBtn.visible = true;  
  46.                     printBtn.visible = true;  
  47.                       
  48.                     addBtn.includeInLayout = true;  
  49.                     editBtn.includeInLayout = true;  
  50.                     delBtn.includeInLayout = true;  
  51.                     checkBtn.includeInLayout = true;  
  52.                     printBtn.includeInLayout = true;  
  53.                 }  
  54.                 if (1 == flag) {//权限一  
  55.                     addBtn.visible = true;  
  56.                     editBtn.visible = true;  
  57.                     delBtn.visible = true;  
  58.                     checkBtn.visible = false;  
  59.                     printBtn.visible = true;  
  60.                       
  61.                     addBtn.includeInLayout = true;  
  62.                     editBtn.includeInLayout = true;  
  63.                     delBtn.includeInLayout = true;  
  64.                     checkBtn.includeInLayout = false;  
  65.                     printBtn.includeInLayout = true;  
  66.                 }  
  67.                 if (2 == flag) {//权限二  
  68.                     addBtn.visible = true;  
  69.                     editBtn.visible = true;  
  70.                     delBtn.visible = false;  
  71.                     checkBtn.visible = true;  
  72.                     printBtn.visible = true;  
  73.                       
  74.                     addBtn.includeInLayout = true;  
  75.                     editBtn.includeInLayout = true;  
  76.                     delBtn.includeInLayout = false;  
  77.                     checkBtn.includeInLayout = true;  
  78.                     printBtn.includeInLayout = true;  
  79.                 }  
  80.             }  
  81.         ]]>  
  82.     </fx:Script>  
  83.     <fx:Declarations>  
  84.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
  85.     </fx:Declarations>  
  86.     <s:Panel title="按钮的自动排列演示" top="100" left="300" width="500" height="200">  
  87.         <s:HGroup top="5" right="5" gap="2">  
  88.             <s:Button id="addBtn" label="添加" visible="false"/>  
  89.             <s:Button id="editBtn" label="编辑" visible="false"/>  
  90.             <s:Button id="delBtn" label="删除" visible="false"/>  
  91.             <s:Button id="checkBtn" label="审核" visible="false"/>  
  92.             <s:Button id="printBtn" label="打印" visible="false"/>  
  93.         </s:HGroup>  
  94.           
  95.         <s:BorderContainer top="30" left="10" right="10" bottom="10">  
  96.             <s:Button id="btn_1" top="50" left="100" label="除了审核外" click="btn_1_clickHandler(event)"/>  
  97.             <s:Button id="btn_2" top="50" left="250" label="除了删除外" click="btn_2_clickHandler(event)"/>  
  98.             <s:Button id="btn_3" top="80" left="180" label="恢复默认" click="btn_3_clickHandler(event)"/>  
  99.         </s:BorderContainer>  
  100.     </s:Panel>  
  101. </s:Application>  

 

以上这两种方法都能实现所要求的功能，但功能二比功能一好，原因是，只需要设置按钮的 visible 和 includeInLayout 属性就可以了，而不需要去算按钮的坐标。因为当把按钮的坐标改变后，它的位置就固定了，如果不改回原值的话，按钮就会一直停留在那里。而用 HGroup 标签的好处是，它自动会把按钮移动，使得前面的按钮自动放置到不显示按钮的地方，当不显示的按钮再次显示时，又会显示在自己的默认位置上，而把其它按钮前移。

分享到0
返回
Avatar photo

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. html中可以自定义输入的select下拉列表
  2. Jframe开发的一些基本问题
  3. Flex桌面应用程序air打包
  4. Flex中Label自动截取或换行
  5. Linux系统搭建Web服务器
  6. 船舶报文系统项目之发布篇
  7. WordPress中添加置顶功能
  8. 船舶报文系统项目之开发篇
Linux中与内核通信的Netlink机制
Zookeeper 启动后的日志文件 zookeeper.out 路径修改
一个国外的牛人讲述如何成为一个牛B的软件开发者
监狱中的中国十大富豪
网页下方的版权信息样式
一个与爱有关的谎言
Setup Factory使用方法
大数据学习初级入门教程（二） —— Redis 3.x 单节点的安装、启动和测试

给我留言

留言无头像?


插入图片

Copyright © 2010-2024 孟郎郎 辽ICP备19011093号