在Adobe Flex Mobile中拆分视图

Question

I have four views: 1.SplitView (main view) 2.SplitViewHomeView(root Panel) 3.SimpleView(Right panel) 4.Details(child of Right Panel View). I am trying to accomplish the split view as in Ipad in adobe flex mobile.But unable to connect the root panel to right panel...Can any one suggest the path to me.My Code is below

Split View **

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
    <s:ViewNavigator id="MainView" left="0" width="300" height="748" firstView="views.SplitViewHomeView"/>
    <s:ViewNavigator id="MainView1" left="301" width="732" height="748" firstView="views.SimpleView"/>

</s:Application>

** SplitViewHomeView **

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Root View"
        creationComplete="srv.send()">
    <fx:Declarations>
        <s:HTTPService id="srv" url="assets/employees.xml"/>
    </fx:Declarations>
    <s:List id="list" top="0" bottom="0" left="0" right="0"
            dataProvider="{srv.lastResult.list.employee}">

        <s:itemRenderer>
            <fx:Component>
                <s:IconItemRenderer
                    label="{data.Name} {data.Founder}"
                    messageField="title"/>
            </fx:Component>

        </s:itemRenderer>
    </s:List>

</s:View>

** Simple View **

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Home View"
        creationComplete="srv.send()">
    <fx:Declarations>
        <s:HTTPService id="srv" url="assets/employees.xml"/>
    </fx:Declarations>
    <s:List id="list" top="0" bottom="0" left="0" right="0"
            dataProvider="{srv.lastResult.list.employee}"
            change="navigator.pushView(Details, list.selectedItem)">
        <s:itemRenderer>
            <fx:Component>
                <s:IconItemRenderer
                    label="{data.Name} {data.Founder}"
                    messageField="title"/>
            </fx:Component>
        </s:itemRenderer>
    </s:List>

** DetailsView **

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

    <s:HGroup verticalAlign="middle" gap="12">
        <s:Image source="assets/pics/{data.picture}"/>
        <s:VGroup>

        </s:VGroup>
    </s:HGroup>
    <s:navigationContent>
        <s:Button label="Back" click="navigator.popToFirstView()"/>
    </s:navigationContent>


</s:View>

**

Answer 1

Check out the open source eskimo library

Download the zip and look for the SplitViewApplication.as or SplitView.as These components will do exactly what you are looking for.

Cheers