主页 » RIA文档中心 » Flex

ADC推荐:试用Flex开发移动应用之 -- 风格化应用程序

Posted 六月 24th, 2011 by editor_xk

本文由ADC中文站推荐

新增FXG图形

下载示例代码(ZIP, 14.8 MB)

代码

AddEditView.mxml

  1. <?xml  version="1.0" encoding="utf-8"?>
  2.   <s:View  xmlns:fx=http://ns.adobe.com/mxml/2009 
  3.   xmlns:s="library://ns.adobe.com/flex/spark" 
  4.   xmlns:valueObjects="valueObjects.*"
  5.   xmlns:employeeservice="services.employeeservice.*"  title="Add Employee"
  6.   add="view1_addHandler(event)"  xmlns:assets="assets.*">
  7.   <!-- more code --> 
  8.   <s:Scroller>
  9.   <!-- more code -->
  10.   </s:Scroller>
  11.   <assets:ToolAreaBackground  left="0" right="0" bottom="0"  height="100"/>
  12.   <s:Button id="saveBtn" .../>
  13.   <s:Button id="cancelBtn"  .../>
  14.   </s:View>

ToolAreaBackground.mxml

  1. <?xml  version="1.0" encoding="UTF-8"?>
  2.   <Graphic  version="2.0" xmlns=http://ns.adobe.com/fxg/2008  viewWidth="80" 
  3.   viewHeight="26"  scaleGridLeft="2" scaleGridTop="2"  scaleGridRight="78" 
  4.   scaleGridBottom="24">
  5.   <Rect x="0" y="0"  width="80" height="26">
  6.   <fill>
  7.   <SolidColor  color="#618C56"/>
  8.   </fill>
  9.   </Rect>
  10.   <Rect x="0" y="0"  width="80" height="26" >
  11.   <fill>
  12.   <LinearGradient  scaleX="26" rotation="90">
  13.   <GradientEntry  color="#ffffff" ratio="0" alpha="0.25"/>
  14.   <GradientEntry  color="#fafafa" ratio="0.22" alpha="0.25"/>
  15.   <GradientEntry  color="#e8e8e8" ratio="1" alpha="0.05"/>
  16.   </LinearGradient>
  17.   </fill>
  18.   <stroke>
  19.   <LinearGradientStroke  scaleX="26" rotation="90" weight="1">
  20.   <GradientEntry  color="#ffffff" ratio="0" alpha="0.25"/>
  21.   <GradientEntry  color="#ffffff" ratio="1" alpha="0.15"/>
  22.   </LinearGradientStroke>
  23.   </stroke>
  24.   </Rect>
  25.   </Graphic>

教程

在本教程中，您将学习如何通过加入FXG图形来改变你的应用程序的外观。

FXG是一种用来定义静态图形的声明语法(declarative syntax). 它定义了一种图形(graphics)交换格式, 使得的各种产品可以共享一个文件格式, 它使你可以创建可扩展的矢量图并将它作为组件应用到你的Flex应用程序中. 一个典型的工作流程是:通过图形工具(如: Adobe Illustrator, Adobe Photoshop, 或 Adobe Fireworks)生成一个图形,然后将它保存或导出成FXG格式. 这个FXG文件就会作为一个组件用在你的应用程序中. FXG文件是被Flex编译器编译成优化的, 低层次的Flash Player码, 这样在运行时会很快显示.

步骤1: 检查FXG文件
打开在assets文件夹中的ToolAreaBackground.fxg
它包含了一套标签来代表矢量图形的设置. 它定义了一个灰色的不透明矩形和一个主要是透明的矩形,它有一个从上到下的渐变添充(a gradient fill overlaid on top of the first to provide some depth).

图1. 载入FXG文件

步骤2: 添加FXG图形,这样矩形就可以在按钮下方出现

在AddEditView.mxml 中返回源码方式, 创建ToolAreaBackground的实例, 它将显示在按钮的下方.

为了将矩形显示在按钮的下方, 你需要将ToolAreaBackground tag放在Button tags的前面. 在默认情况下, 对象(object)会按照它们在MXML列表中的顺序依次显示.
一定要从Content Assist中选者ToolAreaBackground class, 这样命名空间(name space)就为你而写（见图2）.

图2. 用Content Assis添加ToolAreaBackground
你的代码将是这样的:

  1. </s:Scroller>
  2.   <assets:ToolAreaBackground/>
  3.   <s:Button  .../>

新的命名空间(namespace)的声明将如下显示:

  1. <s:View  xmlns:fx="http://ns.adobe.com/mxml/2009"
  2.   xmlns:s="library://ns.adobe.com/flex/spark"
  3.   xmlns:valueObjects="valueObjects.*"
  4.   xmlns:employeeservice="services.employeeservice.*"
  5.   title="Add  Employee"add="view1_addHandler(event)"  xmlns:assets="assets.*">

步骤3: 调整矩形大小

调整ToolAreaBackground的大小, 以便它可以填充滚轮(Scroller)下方的空间。

为了填补在屏幕底部的空间，设置ToolAreaBackground左，右和底部属性值为0, 高度为100.

 <assets:ToolAreaBackground  left="0" right="0" bottom="0"  height="100"/>>

图3 . 在按钮下看见一个新的矩形

步骤4：更改矩形的颜色

返回ToolAreaBackground.fxg，改变矩形的颜色为 与应用程序的相配的铬的颜色: ＃618C56

您的代码应如下所示： 

  1. <?xml  version="1.0" encoding="UTF-8"?>
  2.   <Graphic  version="2.0" xmlns="http://ns.adobe.com/fxg/2008"  viewWidth="80" 
  3.   viewHeight="26"  scaleGridLeft="2" scaleGridTop="2"  scaleGridRight="78"   
  4.   scaleGridBottom="24">
  5.   <Rect x="0" y="0"  width="80" height="26">
  6.   <fill>
  7.   <SolidColor  color="#618C56"/>
  8.   </fill>
  9.   </Rect>

确认保存了FXG文件, 然后返回到AddEditView.mxml设计模式下 或者 运行应用程序. 你现在应该可以看到在按钮下方有一个绿色的矩形(见图4).

图4. 看到新矩形的颜色

这样就结束了你的Flash Builder Burrito的试用。你已经学习了建立一个移动Flex应用程序检索，显示，更新，添加和删除数据库中的数据，你还学习了调试，打包和定制应用程序。

关于作者

此内容由 Adobe Systems, Inc. 编写。

ADC中文站原文地址： http://www.adobe.com/cn/devnet/flex/testdrivemobile/articles/mtd_5_2.html

riadevID: 
瑞研社区最新地址：http://www.riadev.com/flex-thread-465-1-1.html
您给予的分值: None 平均分: 5.2 ( 191 票)

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证：请回答下面的问题