定义移动设备应用程序中的导航控件、标题控件和操作控件

• 导航区域

  包含可用于在该部分进行导航的组件。例如，可以在导航区域中定义主页按钮。

  可以使用 navigationContent 属性定义导航区域中所显示的组件。可以使用 navigationLayout 属性定义导航区域的布局。

• 标题区域

  包含字符串（标题文本）或组件。如果指定组件，则不能指定标题字符串。

  可以使用 title 属性指定在标题区域中所显示的字符串。可以使用 titleContent 属性定义在标题区域中所显示的组件。可以使用 titleLayout 属性定义标题区域的布局。如果为 titleContent 属性指定一个值，则 ActionBar 外观将忽略 title 属性。

• 操作区域

  包含多个组件，用于定义用户可在视图中执行的操作。例如，可以在操作区域中定义搜索或刷新按钮。

  可以使用 actionContent 属性定义在操作区域中所显示的组件。可以使用 actionLayout 属性定义操作区域的布局。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkActionBarSimple.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.MobileViewHome">
    
    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void {
                // Perform a refresh
            }
        ]]>
    </fx:Script>
    
    <s:navigationContent>
        <s:Button label="Home" click="navigator.popToFirstView();"/>
    </s:navigationContent>
        
    <s:actionContent>
        <s:Button label="Refresh" click="button1_clickHandler(event);"/>
    </s:actionContent>    
</s:ViewNavigatorApplication>

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\MobileViewHome.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    title="Home View">
    <s:layout>
        <s:VerticalLayout paddingTop="10"/>
    </s:layout>
    
    <s:Label text="Home View"/>
    <s:Button label="Submit"/>
</s:View>

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkActionBarOverride.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.MobileViewHomeOverride">
    
    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void {
                navigator.popToFirstView();
            }

            protected function button2_clickHandler(event:MouseEvent):void {
                // Handle search
            }

        ]]>
    </fx:Script>
        
    <s:navigationContent>
        <s:Button icon="@Embed(source=‘assets/Home.png‘)"
            click="button1_clickHandler(event);"/>
    </s:navigationContent>
        
    <s:actionContent>
        <s:Button icon="@Embed(source=‘assets/Search.png‘)"
            click="button2_clickHandler(event);"/>
    </s:actionContent>    
</s:ViewNavigatorApplication>

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\MobileViewHomeOverride.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    title="Home View">
    <s:layout>
        <s:VerticalLayout paddingTop="10"/>
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            
            // Navigate to the Search view. 
            protected function button1_clickHandler(event:MouseEvent):void {
                navigator.pushView(SearchViewOverride);
            }
        ]]>
    </fx:Script>
 
    <s:Label text="Home View"/>
    <s:Button label="Search" click="button1_clickHandler(event)"/>
</s:View>

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\SearchViewOverride.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout paddingTop="10"
            paddingLeft="10" paddingRight="10"/>
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void {
                // Perform a search.
            }
        ]]>
    </fx:Script>
 
    <!-- Override the title to insert a TextInput control. -->
    <s:titleContent>
        <s:TextInput text="Enter search text ..." textAlpha="0.5"
            width="250"/>
    </s:titleContent>
    
    <!-- Override the action area to insert a Search button. -->
    <s:actionContent>
        <s:Button label="Search" click="button1_clickHandler(event);"/>
    </s:actionContent>        
    
    <s:Label text="Search View"/>
    <s:TextArea text="Search results appear here ..."
        height="75%"/>
</s:View>

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkSingleSectionNoAB.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.HomeView"
    creationComplete="creationCompleteHandler(event);">
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void {
                // Access the ViewNavigator using the ViewNavigatorApplication.navigator property.
                navigator.hideActionBar(); 
            }
        ]]>
    </fx:Script>
    
</s:ViewNavigatorApplication>