试用Flex开发移动应用之 -- 风格化应用程序
要求
用户级别
全部
下载示例代码 (ZIP, 14.8 MB)
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx=http://ns.adobe.com/mxml/2009
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:valueObjects="valueObjects.*"
xmlns:employeeservice="services.employeeservice.*" title="Add Employee"
add="view1_addHandler(event)" xmlns:assets="assets.*">
<!-- more code -->
<s:Scroller>
<!-- more code -->
</s:Scroller>
<assets:ToolAreaBackground left="0" right="0" bottom="0" height="100"/>
<s:Button id="saveBtn" .../>
<s:Button id="cancelBtn" .../>
</s:View>
ToolAreaBackground.mxml
<?xml version="1.0" encoding="UTF-8"?>
<Graphic version="2.0" xmlns=http://ns.adobe.com/fxg/2008 viewWidth="80"
viewHeight="26" scaleGridLeft="2" scaleGridTop="2" scaleGridRight="78"
scaleGridBottom="24">
<Rect x="0" y="0" width="80" height="26">
<fill>
<SolidColor color="#618C56"/>
</fill>
</Rect>
<Rect x="0" y="0" width="80" height="26" >
<fill>
<LinearGradient scaleX="26" rotation="90">
<GradientEntry color="#ffffff" ratio="0" alpha="0.25"/>
<GradientEntry color="#fafafa" ratio="0.22" alpha="0.25"/>
<GradientEntry color="#e8e8e8" ratio="1" alpha="0.05"/>
</LinearGradient>
</fill>
<stroke>
<LinearGradientStroke scaleX="26" rotation="90" weight="1">
<GradientEntry color="#ffffff" ratio="0" alpha="0.25"/>
<GradientEntry color="#ffffff" ratio="1" alpha="0.15"/>
</LinearGradientStroke>
</stroke>
</Rect>
</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).
步骤2: 添加FXG图形,这样矩形就可以在按钮下方出现
在AddEditView.mxml 中返回源码方式, 创建ToolAreaBackground的实例, 它将显示在按钮的下方.
为了将矩形显示在按钮的下方, 你需要将ToolAreaBackground tag放在Button tags的前面. 在默认情况下, 对象(object)会按照它们在MXML列表中的顺序依次显示.
一定要从Content Assist中选者ToolAreaBackground class, 这样命名空间(name space)就为你而写（见图2）.
你的代码将是这样的:
</s:Scroller>
<assets:ToolAreaBackground/>
<s:Button .../>
新的命名空间(namespace)的声明将如下显示:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:valueObjects="valueObjects.*"
xmlns:employeeservice="services.employeeservice.*"
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"/>>
返回设计模式,运行应用程序,并翻到添加和修改(add and edit)这一屏幕,你应该能看见按钮下方有个灰色矩形(见图3).
步骤4：更改矩形的颜色
返回ToolAreaBackground.fxg，改变矩形的颜色为 与应用程序的相配的铬的颜色: ＃618C56
您的代码应如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" viewWidth="80"
viewHeight="26" scaleGridLeft="2" scaleGridTop="2" scaleGridRight="78"
scaleGridBottom="24">
<Rect x="0" y="0" width="80" height="26">
<fill>
<SolidColor color="#618C56"/>
</fill>
</Rect>
确认保存了FXG文件, 然后返回到AddEditView.mxml设计模式下 或者 运行应用程序. 你现在应该可以看到在按钮下方有一个绿色的矩形(见图4).
这样就结束了你的Flash Builder Burrito的试用。你已经学习了建立一个移动Flex应用程序检索，显示，更新，添加和删除数据库中的数据，你还学习了调试，打包和定制应用程序。
+
本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可。Adobe 提供超出该许可范围、与本产品包含的代码示例相关的权限。
More Like This
- 手机 Flex Test Drive：在一小时内构建一个手机应用程序
- 手机 Flex Test Drive：在一小时内构建一个手机应用程序
- Test Drive：添加应用程序功能
- 移动 Flex Test Drive：测试和调试代码
- Test Drive：将您的应用程序部署到网络服务器
- Test Drive：将您的应用程序部署到网络服务器
- Flex Test Drive for Mobile: Modify the application appearance
- 手机 Flex Test Drive：在一小时内构建一个手机应用程序
- Test Drive：添加应用程序功能
- Test Drive：添加应用程序功能