zoukankan      html  css  js  c++  java
  • 定义移动设备应用程序中的导航控件、标题控件和操作控件

    配置 ActionBar 控件

    ViewNavigator 容器可以定义 ActionBar 控件。ActionBar 控件为标题控件、导航控件和操作控件提供了标准的区域。通过该控件,可以定义可在应用程序任何位置或特定视图中访问的全局控件。例如,可以使用 ActionBar 控件添加主页按钮、搜索按钮或其他选项。

    对于仅有一个部分(即只有一个 ViewNavigator 容器)的移动设备应用程序而言,所有视图共享同一个操作栏。对于带有多个部分(即带有多个 ViewNavigator 容器)的移动设备应用程序而言,每个部分都会定义各自的操作栏。

    使用 ActionBar 控件定义操作栏区域。ActionBar 控件可以定义三种不同的区域,如下图所示:

    A. 导航区域 B. 标题区域 C. 操作区域
    ActionBar 区域
    • 导航区域

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

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

    • 标题区域

      包含字符串(标题文本)或组件。如果指定组件,则不能指定标题字符串。

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

    • 操作区域

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

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

    尽管 Adobe 建议您按上文所述方法使用导航、标题和操作区域,但对于放置在这些区域中的组件并没有任何限制。

    在 ViewNavigatorApplication、ViewNavigator 或 View 容器中设置 ActionBar 属性

    可以在 ViewNavigatorApplication 容器、ViewNavigator 容器或各 View 容器中设置用于定义 ActionBar 控件内容的属性。View 容器的优先级最高,其次是 ViewNavigator,再其次是 ViewNavigatorApplication 容器。因此,在 ViewNavigatorApplication 容器中设置的属性将应用于整个应用程序,但您可以在 ViewNavigator 或 View 容器中重写这些属性。
    注: ActionBar 控件与 ViewNavigator 相关联,因此专用于移动设备应用程序的单个部分。因此,无法从 TabbedViewNavigatorApplication 和 TabbedViewNavigator 容器定义 ActionBar。

    示例:在应用程序级别自定义 Spark ActionBar 控件

    下面的示例展示了一个移动设备应用程序的主应用程序文件:
    <?xml version="1.0" encoding="utf-8"?>
    <!-- containersmobileSparkActionBarSimple.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>

    此示例在 ActionBar 控件的导航内容区域中定义“主页”按钮,在操作内容区域定义“刷新”按钮。

    下面的示例定义了 MobileViewHome View 容器,该容器定义应用程序的第一个视图。View 容器定义了标题字符串“Home View”,但不重写 ActionBar 控件的导航内容或操作内容区域。

    <?xml version="1.0" encoding="utf-8"?>
    <!-- containersmobileviewsMobileViewHome.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>

    示例:在 View 容器中自定义 ActionBar 控件

    本示例使用带有一个部分的主应用程序文件,用以在 ViewNavigatorApplication 容器的导航区域中定义“主页”按钮,并在操作区域中定义“搜索”按钮:
    <?xml version="1.0" encoding="utf-8"?>
    <!-- containersmobileSparkActionBarOverride.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>

    此应用程序的第一个视图是 MobileViewHomeOverride 视图。MobileViewHomeOverride 视图定义 Button 控件,用以导航到定义“Search”页面的另一个 View 容器:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- containersmobileviewsMobileViewHomeOverride.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>

    定义“Search”页面的 View 容器将重写 ActionBar 控件的标题区域和操作区域,如下所示:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- containersmobileviewsSearchViewOverride.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>

    下图显示了此视图的 ActionBar 控件:

    由于“Search”视图不重写 ActionBar 控件的导航区域,因此导航区域仍显示“Home”按钮。

    隐藏 ActionBar 控件

    可以通过将 View.actionBarVisible 属性设置为 false,来隐藏任何视图中的 ActionBar 控件。默认情况下,actionBarVisible 属性的值为 true,表示显示 ActionBar 控件。

    使用 ViewNavigator.hideActionbar() 方法可以对 ViewNavigator 所控制的所有视图隐藏 ActionBar 控件,如下例所示:
    <?xml version="1.0" encoding="utf-8"?>
    <!-- containersmobileSparkSingleSectionNoAB.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>

    您可以定义隐藏 ActionBar 或使 ActionBar 可见时 ActionBar 的自定义效果。默认情况下,ActionBar 在显示或隐藏时使用 Animate 效果。可以通过重写 ViewNavigator.createActionBarHideEffect() 和 ViewNavigator.createActionBarShowEffect() 方法来更改默认效果。在应用 ActionBar 隐藏效果后,将其visible 和 includeInLayout 属性设置为 false,使视图布局中不再包括该控件。

  • 相关阅读:
    CF932E Team Work
    BZOJ 4480 [JSOI2013] 快乐的jyy
    CF285E Positions in Permutations
    P4312 [COCI 2009] OTOCI / 极地旅行社
    P3327 [SDOI2015]约数个数和
    P3649 [APIO2014]回文串
    P3181 [HAOI2016]找相同字符
    P3346 [ZJOI2015]诸神眷顾的幻想乡
    P4248 [AHOI2013]差异
    P4512 【模板】多项式除法
  • 原文地址:https://www.cnblogs.com/fuland/p/3629352.html
Copyright © 2011-2022 走看看