2 Replies Latest reply on May 7, 2010 5:46 AM by em_volant

    viewstack reload children on tab change

    em_volant

      So I have a viewstack full of different forms and such. I would like some of the forms to be destroyed and recreated when I tab away and back to them. These forms need to be used more than once and it would take a lot of work to write something that manually cleans it. Part of the forms are generated dynamicaly which keeps me from strapping a model directly to it and just cleaning that out. This is a common need I have in my application and I would like a cleaner/easier way to do it. Idealy I want to be able to reload a child in the view stack whenever the tab is changed. For some tabs I dont want to, but I could live with it if they were reloaded.

       

      Now my solution in Flex 3 was to use a module loader or a viewstack with module loaders as views. With the viewstack I would just reload the module loader for the selected tab if I desired it to be reloaded. Unforuntely, this is no longer convenient due to some additions in Flex 4. It was apparently an abuse of modules since I was referencing the modules outside of them without an interface (which I will not write). I referenced them in their mediators, which, since they aren't referenced in the view component, don't get compiled with them.

       

      So, how do I do this without using modules?

        • 1. Re: viewstack reload children on tab change
          David_F57 Level 5

          hi,

           

          You can use mxml for each of your views so that on tab you load the 'component/mxml view' you could have conditions set for which gets replaced and which doesn't- the following is a simple example

           

          David.

           

          the App

          ======

          <?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"

             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">

           

          <fx:Script>

          <![CDATA[

          import mx.events.FlexEvent;

          import mx.events.IndexChangedEvent;

           

          protected function tn_changeHandler(event:IndexChangedEvent):void

          {

          var myObject:Object=tn.getChildAt(event.newIndex);

          switch(event.newIndex)

          {

          case 0:(myObject as NavigatorContent).addElement(new comp1());

          case 1:(myObject as NavigatorContent).addElement(new comp2());

          }

          }

          ]]>

          </fx:Script>

          <mx:TabNavigator id="tn" x="381" y="161" width="432" height="346" change="tn_changeHandler(event)">

          <s:NavigatorContent label="Tab 1" width="100%" height="100%" >

          <local:comp1/>

          </s:NavigatorContent>

          <s:NavigatorContent label="Tab 1" width="100%" height="100%">

          <local:comp2/>

          </s:NavigatorContent>

          </mx:TabNavigator>

           

          </s:Application>

           

          page 1 (comp1.mxml)

          ================

          <?xml version="1.0" encoding="utf-8"?>
          <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
          <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <s:TextInput x="136" y="207"/>
          <mx:DataGrid x="49" y="27">
          <mx:columns>
          <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
          <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
          <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
          </mx:columns>
          </mx:DataGrid>
          </s:Group>
          page 2 (comp2.mxml)
          ================
          <?xml version="1.0" encoding="utf-8"?>
          <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
          <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <s:TextInput x="136" y="207"/>
          </s:Group>

          • 2. Re: viewstack reload children on tab change
            em_volant Level 1

            Thanks! That works like a charm!