程序博客网 > 新新贷网络借贷

Flex移动应用程序开发的技巧和窍门——第二部分

来源：互联网 发布：新新贷网络借贷 编辑：程序博客网 时间：2024/05/21 14:44

这是关于Flex移动应用程序开发的技巧和窍门的一系列文章中的第二部分。第一部分 内容主要集中讨论了视图之间以及应用程序执行之间切换时的数据处理。而这一部分则主要包括了移动应用程序动作条（ActionBar）和各标签组件的样式设计。

当你在Flex 4.5中创建TabbedViewNavigatorApplication时，你可以通过几种不同的方法自定义标签或动作条（包含有标题文本和其他组件或导航内容的标题栏）。一种方法是，使用自己的自定义素材（例如使用FXG格式文件或者皮肤文件）设置标签皮肤。但是，如果你的应用程序不需要很多的自定义，你可以使用简单的CSS道具。CSS风格化设计使你可以快捷、简单地改变默认的无聊灰色标签外观。

我在这里通过新建一个标签处理的应用程序实例，举例说明这是怎么实现的。在下面的例子中你会看到通过简单添加一些CSS道具和少许线条是如何快速改变动作条和移动应用程序标签的。

在标签中加入图标

（假设）下面的Flex TabbedViewNavigatorApplication代码中含有了链接到各自主页的三个标签：

[java] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> 
[java] view plaincopyprint?
  1. <s:ViewNavigator id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView"/> 
  2. <s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView"/> 
  3. <s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView"/> 
  4. /s:TabbedViewNavigatorApplication> 

当你新建一个Flex移动项目时，系统会自动应用默认的Mobile主题（如图1所示）。

图1. 默认Mobile主题的应用程序样例
图1. 默认Mobile主题的应用程序样例

当然，这种外观并不是很醒目。但是，通过在标签中加入图标的方法可以使它变得更加的引人注目。

你可以通过为每一个 ViewNavigator 组件（设置）合适的图标属性，从而实现标签中图标的添加。我选择了项目源中的素材目录下的三个图标，加入到了下面的代码中。

[java] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"  xmlns:s="library://ns.adobe.com/flex/spark"> 
  3.     <s:ViewNavigator id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView" icon="@Embed('assets/column-chart-icon32.png')"/> 
  4.     <s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView" icon="@Embed('assets/paperclip-icon32.png')"/> 
  5.     <s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView" icon="@Embed('assets/receptionist-icon32.png')"/> 
  6. </s:TabbedViewNavigatorApplication> 


通过上述简单的改变，你就使得你的标签更具个性了（如图2所示）。

图2. 在标签中加入了图标的应用程序样例
图2. 在标签中加入了图标的应用程序样例

动作条风格化设计

在标签中加入图标是一个好的开始，但是如果你有和我一样的想法，你就会迫切希望改变动作条部分所使用的灰色背景，希望把标签变成自己想要的主题样式。使用CSS你就可以实现这些。

你可以通过简单地使用动作条组件中的Spark选择器和指定任意可支持的风格或可继承的风格来实现动作条的个性化。

注意：Flex 4.5 ActionScript API documentation 文件向我们提供了各组件所支持的以及可继承的特定的风格化道具的信息。它也有关于这种风格化道具是否具有CSS继承性方面的说明。如果你在API中核查动作条组件，你就可以知道什么可以被风格化。

在你对动作条风格作出改变之前，你可能会对其默认值比较感兴趣。例如，你可能想了解默认的字体大小和加权情况，这些情况可能不会像字体颜色那么明显。你可以通过查看Mobile主题默认的CSS属性，对你要风格化的动作条有更深入的了解。在Mac OS中，你可以在/Applications/Adobe Flash Builder 4.5/sdks/4.5/frameworks/projects/mobiletheme/defaults.css 找到defaults.css文件。在Windows系统中，你可以在C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\frameworks\projects\mobiletheme\defaults.css找到defaults.css文件。

下面就是动作条中defaults.css文件里的两个代码片段及其标题：

[css] view plaincopyprint?
  1. ActionBar 
  2. { 
  3.     chromeColor: #484848; 
  4.     defaultButtonAppearance: normal; 
  5.     skinClass: ClassReference("spark.skins.mobile.ActionBarSkin"); 
  6.     textShadowAlpha: .65; 
  7.     textShadowColor: #000000; 
  8.     paddingBottom: 1; 
  9.     paddingLeft: 0; 
  10.     paddingRight: 0; 
  11.     paddingTop: 1; 
  12. } 
  13. ... 
  14. ActionBar #titleDisplay 
  15. { 
  16.     color: #FFFFFF; 
  17.     fontSize: 28; 
  18.     fontWeight: bold; 
  19. } 


注意，字体颜色，字号及加权情况是使用titleDisplay ID选择器来设置的。

由于在我的样本应用程序的动作条中只有一个文字标题，我接下来就只对这个文字标题个性化。如果在你的动作条中含有一些按钮和其他组件，你也可以使用可支持风格对其个性化。

动作条的 titleDisplay （标题显示）皮肤部分可以很容易地被使用CSS风格化。我只是对我的样本应用程序的 <fx:style> 标签的CSS属性做了如下的设置：

[css] view plaincopyprint?
  1. s|ActionBar 
  2. { 
  3.     chromeColor: #229988; 
  4.         titleAlign: center; 
  5. } 
  6.   
  7. s|ActionBar #titleDisplay 
  8. { 
  9.     color: #CCCCCC;/* default color is white */ 
  10.     fontSize: 40; 
  11.     fontFamily: "Comic Sans MS"; 
  12. } 


现在，动作条的文字标题就以在浅绿色的背景下，居中的、白色Comic Sans字体的形式显示了（如图3所示）。

图3. 动作条风格化了的应用程序样例
图3. 动作条风格化了的应用程序样例

标签风格化

你也可以使用CSS对你的标签条风格化。这就需要你在CSS规则中指定TabbedViewNavigator组件的 tabBar （标签条）皮肤部分。再次查看Mobile主题中的defaults.css文件，了解这部分皮肤的默认设置：

[css] view plaincopyprint?
  1. TabbedViewNavigator #tabBar 
  2. { 
  3.     chromeColor: #484848; 
  4.     color: #FFFFFF; 
  5.     fontSize: 20; 
  6.     fontWeight: normal; 
  7.     iconPlacement: top; 
  8.     interactionMode: mouse; 
  9.     skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorTabBarSkin"); 
  10.     textShadowAlpha: .65; 
  11.     textShadowColor: #000000; 
  12. } 


注意： TabbedViewNavigator 组件中定义的 tabBar 其实是一个ButtonBar（按钮条）。Spark TabBar 在移动应用程序中并没有实现最优化。如果你追溯自定义皮肤的发展历史，你会发现 TabbedViewNavigatorTabBarSkin 其实是对 ButtonBarSkin 的继承和进一步发展。

我可以再次在我的应用程序的 <fx:style> 标签中加入一个CSS规则，通过加入自己想要的风格来自定义组件的外观：

[css] view plaincopyprint?
  1. TabbedViewNavigator #tabBar 
  2. { 
  3.     chromeColor: #229988; 
  4.     color: #CCCCCC; 
  5.     fontFamily: "Comic Sans MS"; 
  6.     iconPlacement:left; 
  7.     textDecoration:underline; 
  8. } 


现在，标签条的文字就被变成了和动作条一样的有淡绿色背景的Comic Sans字体（如图4所示）。记住，我并不是一个设计师，但显而易见，通过简单的添加CSS组块改变应用程序的外观是多么简单易行的一件事。

图4. 原始的应用程序样例（左）和标签风格化了的应用程序样例（右）
图4. 原始的应用程序样例（左）和标签风格化了的应用程序样例（右）

这是标签标记了的主应用程序文件的全部源代码。除了CSS，它还通过在视图中设置ViewNavigator（视图导航器）对象的firstView（第一视图）属性引用了视图文件夹中的基础视图。TrendsView（动态视图）和视图的结合。AttachView（绑定视图）和视图的结合。分别的调用视图（CallView）：

[java] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
  3.                                   xmlns:s="library://ns.adobe.com/flex/spark"> 
  4.     <fx:Style> 
  5.         @namespace s "library://ns.adobe.com/flex/spark"; 
  6.   
  7.         s|ActionBar 
  8.         { 
  9.             chromeColor: #229988; 
  10.             titleAlign: center; 
  11.         } 
  12.   
  13.         s|ActionBar #titleDisplay 
  14.         { 
  15.             color: #CCCCCC; 
  16.             fontSize: 40; 
  17.             fontFamily: "Comic Sans MS"; 
  18.         } 
  19.   
  20.         s|TabbedViewNavigator #tabBar 
  21.         { 
  22.             chromeColor: #229988; 
  23.             color: #CCCCCC; 
  24.             fontFamily: "Comic Sans MS"; 
  25.             iconPlacement:left; 
  26.             textDecoration:underline; 
  27.         } 
  28.     </fx:Style> 
  29.   
  30. <s:ViewNavigator id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView" icon="@Embed('assets/column-chart-icon32.png')"/> 
  31. <s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView" icon="@Embed('assets/paperclip-icon32.png')"/> 
  32. <s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView" icon="@Embed('assets/receptionist-icon32.png')"/> 
  33. </s:TabbedViewNavigatorApplication> 


注意： 为简单起见，上述实例包括了MXML应用程序的风格化。然而，它确实是创建一个单独的，包含了所有样式以及你的主应用程序文件的CSS文件的参考的CSS文件的一个很好的实践。

0 0
新新贷网络借贷 新新贷网络借贷
原创粉丝点击
热门IT博客
小程序如何连接数据库小程序如何连接数据库
淘宝做墙纸生意淘宝做墙纸生意
java工程配置log4j
房地产成本核算软件
sql where if条件
银川seo
阿里云tv遥控器
淘宝的win10激活码
opengl 平移矩阵
centos发音
java文件下载
dll编程
精密测量仪器软件
iphone47.12优化
网店数据化分析的内容
雷霆三巨头 知乎
linux内核启动流程
淘宝千幻魔镜
阿里妈妈淘宝客违规
python编写网页登录
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 拼盘刺身 凉菜的拼盘 美食拼盘 小吃拼盘 时蔬拼盘 简单拼盘 卤味拼盘 火锅拼盘 胡萝卜拼盘 桔子拼盘 豆腐拼盘 沙拉拼盘 菌菇拼盘 三色拼盘 怎样做拼盘 花色拼盘 杂粮拼盘 烤海鲜拼盘 面包拼盘 水果拼盘图片 椰树水果拼盘 儿童水果拼盘图片 水果拼盘图片简单好看 水果拼盘图片及做法 荷花水果拼盘 创意水果拼盘图片 幼儿园水果拼盘图片 永恒纪元拼盘 儿童水果拼盘获奖图片 简单水果拼盘图片 永恒纪元拼盘全图 创意拼盘图片 水果拼盘怎么做 水果拼盘美甲 拼盘花样图片 水果拼盘图片2018 缤纷水果拼盘 蔬菜拼盘图片 水果拼盘怎么做简单又漂亮 水果拼盘做法 国庆水果拼盘

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里