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

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

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

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

在标签中加入图标

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

 

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">

    <s:ViewNavigator id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView"/>
    <s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView"/>
    <s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView"/>
</s:TabbedViewNavigatorApplication>

 

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

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

 

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

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

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

 

通过上述简单的改变，你就使得你的标签更具个性了（如图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文件里的两个代码片段及其标题：

ActionBar
{
    chromeColor: #484848;
    defaultButtonAppearance: normal;
    skinClass: ClassReference("spark.skins.mobile.ActionBarSkin");
    textShadowAlpha: .65;
    textShadowColor: #000000;
    paddingBottom: 1;
    paddingLeft: 0;
    paddingRight: 0;
    paddingTop: 1;
}
...
ActionBar #titleDisplay
{
    color: #FFFFFF;
    fontSize: 28;
    fontWeight: bold;
}

 

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

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

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

s|ActionBar
{
    chromeColor: #229988;
        titleAlign: center;
}
 
s|ActionBar #titleDisplay
{
    color: #CCCCCC; /* default color is white */
    fontSize: 40;
    fontFamily: "Comic Sans MS";
}

 

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

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

标签风格化

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

TabbedViewNavigator #tabBar
{
    chromeColor: #484848;
    color: #FFFFFF;
    fontSize: 20;
    fontWeight: normal;
    iconPlacement: top;
    interactionMode: mouse;
    skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorTabBarSkin");
    textShadowAlpha: .65;
    textShadowColor: #000000;
}

 

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

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

TabbedViewNavigator #tabBar
{
    chromeColor: #229988;
    color: #CCCCCC;
    fontFamily: "Comic Sans MS";
    iconPlacement:left;
    textDecoration:underline;
}

 

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

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

 

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

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|ActionBar
        {
            chromeColor: #229988;
            titleAlign: center;
        }
 
        s|ActionBar #titleDisplay
        {
            color: #CCCCCC;
            fontSize: 40;
            fontFamily: "Comic Sans MS";
        }
 
        s|TabbedViewNavigator #tabBar
        {
            chromeColor: #229988;
            color: #CCCCCC;
            fontFamily: "Comic Sans MS";
            iconPlacement:left;
            textDecoration:underline;
        }
    </fx:Style>
 
<s:ViewNavigator id="trends" label="Trends" width="100%" height="100%" firstView="views.TrendsView" icon="@Embed('assets/column-chart-icon32.png')"/>
<s:ViewNavigator id="attach" label="Attach" width="100%" height="100%" firstView="views.AttachView" icon="@Embed('assets/paperclip-icon32.png')"/>
<s:ViewNavigator id="call" label="Call Center" width="100%" height="100%" firstView="views.CallView" icon="@Embed('assets/receptionist-icon32.png')"/>
</s:TabbedViewNavigatorApplication>

 

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