Split View in adobe flex mobile - apache-flex

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