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

浏览数：24 / 时间：2015年06月11日

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>