• 【设为首页】
  • 【收藏闪客居】
当前位置：主页>Flex>文章内容
  • 自定义你的Apollo应用程序外观
  • 来源：neoy.cn 作者：Neo 2007-09-29 【大 中小】

下载并试用了基于Apollo开发的Finetune Desktop感觉非常cool，先不谈它的功能怎么实现仅优秀的UI就令人佩服不已。于是周末抽空研究了下如何自定义Apollo应用程序外观，写篇日志分享之。
开发Apollo应用有很多种选择如：Flexbuilder+AIR，FlashCS3 with AIR extension+AIR，Dreamwaver with AIR extension +AIR，方便起见这里我用的是Flexbuilder3+AIR。
首先在builder里新建一个AIR的工程 File>New>AIR Project
如下图：

creatProject

按照提示窗口给工程命名、选择存储路径到最后一步时会提示设置Apollo应用程序的相关信息，其实就是往下面要提到的工程名-app.xml文件写入信息，如下图：

pic03.gif

ID：应用程序的唯一标识这里推荐域名为前缀。
Name：应用程序名称将在窗口title和任务栏显示。
这里的AIR工程里其实跟Flex工程大同小异由.mxml文件组成，但是工程名-app.xml文件是AIR所特有的，通过编辑它可以达到自定义Apollo应用程序的目的。

下面是Test-app.xml的内容

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <application xmlns="http://ns.adobe.com/air/application/1.0.M4" appId="cn.neoy.Test" version="1.0 Beta">
  3.    
  4.     <name>Test</name>
  5.    
  6.      <title/>
  7.    
  8.        <description>Neo's test.</description>
  9.    
  10.        <copyright>http://www.neoy.cn</copyright>
  11.    
  12.   
  13.     <rootContent systemChrome="standard" transparent="false" visible="true">[SWF reference is generated]</rootContent>
  14.        
  15.     <!--
  16.         <icon>
  17.             <image16x16>icons/AIRApp_16.png</image16x16>    
  18.             <image32x32>icons/AIRApp_32.png</image32x32>  
  19.             <image48x48>icons/AIRApp_48.png</image48x48>   
  20.             <image128x128>icons/AIRApp_128.png</image128x128>
  21.         </icon>
  22.     -->
  23.    
  24.     <!-- <handleUpdates/> -->
  25.        
  26.     <!-- 
  27.         <fileTypes>
  28.             <fileType>
  29.                 <name>com.example</name>
  30.                 <extension>xmpl</extension>
  31.                 <description>Example file</description>
  32.                 <contentType>example/x-data-type</contentType>
  33.             </fileType>
  34.         </fileTypes>
  35.     -->   
  36. </application>

控制应用程序外观的属性主要在rootContent标签里面：
systemChrome -”standard” 或 “none”。如果设置为”standard”，应用程序打开时是带有像标题栏，最小化和关闭按钮的系统窗口。如果设置为”none”，应用程序必须自己提供窗口控制(Flex的WindowedApplication类提供一套只会在systemChrome=”none”时显示的窗口控制)
transparent - “true” 或 “false”。如果设置为”true”，应用程序支持完全透明。
visible - “true” 或 “false”。如果设置为”false”，主窗口在应用程序将window visible属性设置为”true”前不会显示。
width - 窗口的初始宽度 (包括窗口外框).
height - 窗口的初始高度 (包括窗口外框).
PS:( width - the initial window height (including chrome).
height - the initial window width (including chrome).高宽属性Adobe给写反了，低级错误？)

通过编辑以上节点的属性可以改变应用程序运行时的外观
[SWF reference is generated] 如果是Flex Builder运行时会自动填上

修改rootContent标签为

  1. <rootcontent systemchrome="standard" transparent="false" visible="true">[SWF reference is generated]</rootcontent>

运行时是这样:

pic05.gif

修改rootContent标签为

  1. <rootcontent systemchrome="none" transparent="true" visible="true">[SWF reference is generated]</rootcontent>

运行时是这样，其窗口外框是Flex WindowedApplication类提供的。

pic06.gif

进一步修改将Test.mxml文件中mx: WindowedApplication 修改为mx:Application应用程序运行时显示是这样。

pic07.gif

如果还需要进一步将系统提供的外观去除掉再编辑Test.mxml文件加入属性backgroundAlpha=”0.0″
应用程序运行时显示为这样，注意其中的“Hello World!”，窗口的其它元素均被完全透明掉，cool～

pic08.gif

关于定制自己的标题栏，最小化，关闭按钮将在最后的代码部分给出，下面先说自定义Apollo应用程序的图标，Apollo支持的图标为.png文件现在准备好四个文件，尺寸分别为16×16，32×32，48×48，128×128然后拷贝至工程文件夹下这里是/assets内如图

pic04.gif

在Test-app.xml中把<icon></icon>的注释去掉修改为一下内容

  1. <icon> 
  2.             <image16x16>assets/testIcon_16.png</image16x16>     
  3.             <image32x32>assets/testIcon_32.png</image32x32>   
  4.             <image48x48>assets/testIcon_48.png</image48x48>    
  5.             <image128x128>assets/testIcon_128.png</image128x128> 
  6.         </icon>

预览效果的话需要输出AIR包并安装运行，首先输出：

pic09.gif

输出时必须把应用程序需要的资源文件勾选比如这里的图标文件夹assets

pic10.gif

安装完毕后在任务栏和桌面显示的图标如下，目的达到。

pic12.gif pic13.gif

自定义标题栏，最小化和关闭按钮就需要代码实现，下面是Flex builder中具体实现代码

自定义窗口元素外观：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.     creationComplete="initApp( )"
  4.     layout="vertical" verticalGap="0">
  5.  
  6.     <mx:Style>
  7.         Application {
  8.             backgroundColor:#669977;
  9.             paddingLeft: 2;
  10.             paddingRight: 2;
  11.             paddingTop: 3;
  12.             paddingBottom: 2;
  13.             borderStyle: outset;
  14.         }
  15.         .windowTitleBar {
  16.             backgroundColor: #006633;
  17.             fontFamily: Georgia,"Times New Roman",Times,serif;
  18.             fontSize: 12;
  19.             fontWeight: bold;
  20.             color: #FFFFFF;
  21.             paddingLeft: 3;
  22.             paddingRight: 3;
  23.             paddingTop: 3;
  24.         }
  25.         .chromeBtn {
  26.             fontFamily: Verdana,Arial,Helvetica,sans;
  27.             fontSize: 10;
  28.         }
  29.         .contentBox {
  30.             backgroundColor: #FFFFFF;
  31.             backgroundAlpha:0.7;
  32.         }
  33.     </mx:Style>
  34.  
  35.     <mx:Script>
  36.     <![CDATA[
  37.         public var isMaximized:Boolean = false;
  38.  
  39.         private function onMinimizeBtn(evt:MouseEvent):void
  40.         {
  41.             stage.window.minimize( );
  42.         }
  43.  
  44.         private function onMaximizeBtn(evt:MouseEvent):void
  45.         {
  46.             if (this.isMaximized)
  47.             {
  48.                 stage.window.restore( );
  49.                 this.isMaximized = false;
  50.             }
  51.             else
  52.             {
  53.                 stage.window.maximize( );
  54.                 this.isMaximized = true;
  55.             }
  56.         }
  57.  
  58.         private function onCloseBtn(evt:MouseEvent):void
  59.         {
  60.             stage.window.close( );
  61.         }
  62.  
  63.     ]]>
  64.     </mx:Script>
  65.  
  66.     <mx:HBox id="windowTitleBar" width="100%"
  67.         horizontalGap="1" styleName="windowTitleBar">
  68.  
  69.         <mx:Label id="windowTitleTxt" width="100%"
  70.             text="Custom Window Chrome Example" />
  71.  
  72.         <mx:Button id="minimizeBtn" label="_"
  73.             width="20" height="16"
  74.             styleName="chromeBtn"
  75.             click="onMinimizeBtn(event)" />
  76.  
  77.             <mx:Button id="maximizeBtn" label='{"\u25A2"}'
  78.                 width="20" height="16"
  79.                 styleName="chromeBtn"
  80.                 click="onMaximizeBtn(event)" />
  81.  
  82.             <mx:Button id="closeBtn" label="X"
  83.                 width="20" height="16"
  84.                 styleName="chromeBtn"
  85.                 click="onCloseBtn(event)" />
  86.         </mx:HBox>
  87.  
  88.         <mx:VBox id="contentBox" styleName="contentBox"
  89.             width="100%" height="100%" />
  90.  
  91. </mx:Application>

用自定义元素移动最小化窗口：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.   creationComplete="initApp( )"
  4.   layout="vertical"
  5.   verticalGap="0">
  6.  
  7.   <mx:Style>
  8.     Application {
  9.       backgroundColor:#669977;
  10.       paddingLeft: 2;
  11.       paddingRight: 2;
  12.       paddingTop: 3;
  13.       paddingBottom: 2;
  14.       borderStyle: outset;
  15.     }
  16.     .windowTitleBar {
  17.       backgroundColor: #006633;
  18.       fontFamily: Georgia, "Times New Roman", Times, serif;
  19.       fontSize: 12;
  20.       fontWeight: bold;
  21.       color: #FFFFFF;
  22.       paddingLeft: 3;
  23.       paddingRight: 3;
  24.       paddingTop: 3;
  25.     }
  26.     .chromeBtn {
  27.       fontFamily: Verdana, Arial, Helvetica, sans;
  28.       fontSize: 10;
  29.     }
  30.     .contentBox {
  31.       backgroundColor: #FFFFFF;
  32.       backgroundAlpha:0.7;
  33.     }
  34.   </mx:Style>
  35.  
  36.   <mx:Script>
  37.   <![CDATA[
  38.     import mx.events.ResizeEvent;
  39.  
  40.     public var isMaximized:Boolean = false;
  41.     public static var RESIZE_HANDLE_WIDTH:int = 20;
  42.  
  43.     private function initApp( ):void {
  44.       this.windowTitleBar.addEventListener(MouseEvent.MOUSE_DOWN,
  45.                                            onMouseDownInTitleBar);
  46.  
  47.            this.addEventListener(MouseEvent.MOUSE_DOWN,
  48.                             onMouseDownInWindow);
  49.     }
  50.  
  51.     private function
  52.       onMouseDownInTitleBar(evt:MouseEvent):void {
  53.       stage.window.startMove( );
  54.     }
  55.  
  56.     private function onMouseDownInWindow(evt:MouseEvent):void {
  57.       var xPos:Number = evt.stageX;
  58.       var yPos:Number = evt.stageY;
  59.       var resizeDirection:String = NativeWindowResize.NONE;
  60.  
  61.       if (!this.isMaximized && yPos > this.windowTitleBar.height) {
  62.          if (yPos > this.height - RESIZE_HANDLE_WIDTH) {
  63.                  if (xPos > this.width - RESIZE_HANDLE_WIDTH) {
  64.                      resizeDirection =
  65.               NativeWindowResize.BOTTOM_RIGHT;
  66.           }
  67.           else if (xPos < RESIZE_HANDLE_WIDTH) {
  68.                       resizeDirection = NativeWindowResize.BOTTOM_LEFT;
  69.           }
  70.           else {
  71.             resizeDirection = WindowResize.BOTTOM;
  72.           }
  73.         }
  74.         else {
  75.           if (xPos > this.width - RESIZE_HANDLE_WIDTH) {
  76.             resizeDirection = NativeWindowResize.RIGHT;
  77.           }
  78.           else if (xPos < RESIZE_HANDLE_WIDTH) {
  79.             resizeDirection = NativeWindowResize.LEFT;
  80.           }
  81.         }
  82.  
  83.         if (resizeDirection != NativeWindowResize.NONE) {
  84.           stage.window.startResize(resizeDirection);
  85.         }
  86.       }
  87.     }
  88.  
  89.     private function onCloseBtn(evt:MouseEvent):void {
  90.       stage.window.close( );
  91.     }
  92.   ]]>
  93.   </mx:Script>
  94.  
  95.   <mx:HBox id="windowTitleBar" width="100%"
  96.     horizontalGap="1" styleName="windowTitleBar">
  97.  
  98.     <mx:Label id="windowTitleTxt" width="100%"
  99.       text="Moving and Resizing Example" />
  100.  
  101.     <mx:Button id="closeBtn" label="X"
  102.       width="20" height="16"
  103.       styleName="chromeBtn"
  104.       click="onCloseBtn(event)" />
  105.   </mx:HBox>
  106.  
  107.   <mx:VBox id="contentBox" styleName="contentBox"
  108.     width="100%" height="100%" />
  109.  
  110. </mx:Application>

Ok，至此Apollo应用程序自定义外观的方法就介绍的差不多了。Enjoy your creativity! :)




上一篇：设置flex Air应用程序属性   下一篇：Flex制作透明application
最新评论
  • 用户名：（新注册） 密码： 匿名评论
  • 评论内容：(不能超过250字，需审核后才会公布，请自觉遵守互联网相关政策法规)
·AdvancedDataGrid应用-动态生成 ·一套优雅天蓝风格的Flex皮肤
·Flex:3D-Album Component ·Flex Builder3 Help(CHM/PDF)下载
·PureMVC中文帮助及Tweener帮助 ·一本面向Flex编程人员的书籍？
·让你的Flex MXML和AS3代码更规范 ·Adobe Flex3 的中文语言参考
·利用 BlazeDS的 AMF3数据封装 ·Flex3中文语言参考手册chm版
推荐内容
·Flex 4 SDK Downloads(下载)
·Adobe Photoshop Express 上线
·Flex 3 和AIR 1.0 发布
·Flex 3 b1 相关资源
辅助软件
·Sothink FLV Converter 1.0 - FLV 视频转换
·Flash实时调试器分享下载 — AGE Live Debu
·支持Actionscript 3.0 的UML工具
·正则表达测试工具(RegexTestTool)
·AS3.0(ActionScript3.0)的开发工具
·ThunderBoltAS3-Flex/Flash调试器
·分享两个as3代码混淆器
·AIR开发的as3 swf加密工具(测试还不错)
·SWF Encrypt 5.0 Beta下载试用
·生成flash的set get代码的小工具
·实用的flex 矢量转换程序
·实用的flex 矢量转换程序

Copyright © 2006-2008 flashas.net All Rights Reserved.
网站内容咨询： admin#flashas.net （#为@） 联系QQ：：40777822 浙ICP备06033001号
（本网站最佳浏览解析度为1024*768, 建议使用IE 6.0或以上版本浏览器。）