Flex 移动设备应用程序的布局

2021-08-25 04:55:57

1.移动设备的单个部分程序结构

　　动设备应用程序包含一个主应用程序文件和对应于各视图的文件（每个视图一个文件）.

2.多个部分程序结构

3.移动设备单个部分应用程序使用的类

4.使用 ViewNavigatorApplication 容器可以定义主应用程序文件，如下例所示：

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkSingleSectionSimple.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.HomeView">

</s:ViewNavigatorApplication>

View Code

5.移动设备应用程序中添加 View 容器(与android 中的Activity类似，每个View也是提供界面显示的组件)

　　　　应用程序中的每个视图对应于 ActionScript 或 MXML 文件中定义的一个 View 容器。每个 View 中包含一个 data 属性，用于指定与视图相关联的数据。用户导航应用程序时，View 可以使用 data 属性来彼此传递信息。

　　　　ViewNavigatorApplication.firstView 属性可以指定用于定义应用程序第一个视图的文件。

6.定义视图（View)　　　

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

    <s:Label text="The home screen"/>
</s:View>

View Code

7.移动设备多个部分应用程序使用的类

8.使用 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" applicationDPI="160">
    <fx:Script>
        <![CDATA[
            import views.contactsList;
            import views.deleteContacts;
            
            protected function button1_clickHandler(event:MouseEvent):void
            {
                tabbedNavigator.selectedIndex = 0;
                ViewNavigator(tabbedNavigator.selectedNavigator).popToFirstView();
                
            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>

    <s:navigators>
        <s:ViewNavigator left="0" right="0" label="所有联系人" firstView="views.contactsList">
            <s:navigationContent>
                <s:Button width="47" height="37" icon="assert/home.png" click="button1_clickHandler(event)"/>
            </s:navigationContent>
        </s:ViewNavigator>
        <s:ViewNavigator left="0" right="0" label="添加联系人" firstView="views.addContacts">
            <s:navigationContent>
                <s:Button width="47" height="37" click="button1_clickHandler(event)"
                          icon="assert/home.png"/>
            </s:navigationContent>
        </s:ViewNavigator>
        <s:ViewNavigator left="0" right="0" label="删除联系人" firstView="views.deleteContacts">    
            <s:navigationContent>
                <s:Button width="47" height="37" icon="assert/home.png" click="button1_clickHandler(event)"/>
            </s:navigationContent>
        </s:ViewNavigator>
    </s:navigators>
    
</s:TabbedViewNavigatorApplication>

View Code

9. 视图(View)之间的导航

　　　　ViewNavigator 容器负责维护该堆栈。要切换视图，请将新的 View 对象推送到堆栈中，或将当前 View 对象从堆栈中弹出。从堆栈中弹出当前可见的 View 对象时，会破坏该 View 对象，并使用户返回到堆栈中的上一个视图。

　　　　pushView() 将 View 对象推送到堆栈中。作为参数传递给 pushView() 的 View 将成为当前视图。

　　　　popView() 从导航堆栈中弹出当前 View 对象，并破坏该 View 对象。堆栈中的上一个 View 对象将成为当前视图。

　　　　popToFirstView() 从堆栈中弹出所有 View 对象并将这些对象破坏，但堆栈中的第一个 View 对象除外。堆栈中的第一个 View 对象将成为当前视图。

　　　　popAll() 清空 ViewNavigator 的堆栈，并破坏所有 View 对象。应用程序将显示空白视图。

　　　　下图中显示了两个视图。要切换当前视图，请使用 ViewNavigator.pushView() 方法将代表新视图的 View 对象推送到堆栈中。pushView() 方法将使 ViewNavigator 将显示画面切换为新的 View 对象。

10.视图(View)多个部分应用程序创建导航

Flex 移动设备应用程序的布局

　　　　可以使用 ViewNavigator.popView() 方法从堆栈中删除当前 View 对象。ViewNavigator 将显示画面恢复为堆栈中的上一个 View 对象。

为具有多个部分的应用程序创建导航

在下图中，各个视图安排在多个部分中。每个部分由不同的 ViewNavigator 容器定义。每个部分包含一个或多个视图：

A. ActionBar B. 内容区域 C. 选项卡栏

要切换当前部分中的视图（对应于当前的 ViewNavigator），请使用 pushView() 和 popView() 方法。

要切换当前部分，请使用选项卡栏。切换部分时，将切换到新部分的 ViewNavigator 容器。显示画面将改为显示当前位于新 ViewNavigator 堆栈最上方的 View 对象。

也还可以使用 TabbedViewNavigator.selectedIndex 属性以程序方式切换部分。此属性包含选定视图导航器的从 0 开始的索引。

码农公寓

相关文章