1 Reply Latest reply on May 17, 2011 4:31 PM by Jason Szeto

    Split View in Flex

    ShahRonak

      Hey I am trying to display two views in a single view in a flex mobile project.

       

      Hence I want the navigation effect only for the second half of the screen.

       

      I tried using navigator.pushView,but it pushes the entire screen.

       

      Does anybody knows how to achieve this???

       

       

      Thanks in advance.

      Ronak Shah

        • 1. Re: Split View in Flex
          Jason Szeto Level 3

          Are you using a ViewNavigatorApplication as your root application class? ViewNavigatorApplication contains a property called navigator of type ViewNavigator. The navigator is set to the same size as the ViewNavigatorApplication.

           

          If you want a split view, you have a couple of choices. It will depend on what you need for your application. You could use Application as your root application class and have a ViewNavigator child.

           

          <?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">
              <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
              </fx:Declarations>
             
              <s:ViewNavigator top="0" left="0" right="0" height="50%" id="topNav" firstView="views.SimpleView"/>
              <s:Group left="0" right="0" height="50%" bottom="0">
                  <s:Label horizontalCenter="0" verticalCenter="0" text="Bottom Content"/>
              </s:Group>
          </s:Application>

           

          SimpleView.mxml:

           

          <?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="SimpleView">
              <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
              </fx:Declarations>
              <s:Label horizontalCenter="0" verticalCenter="0" text="Top Content"/>
          </s:View>

           

          The other option is to use ViewNavigatorApplication and create a custom ViewNavigatorApplicationSkin

           

          Jason Szeto

          Flex SDK Engineer

          1 person found this helpful