5 Replies Latest reply on Jul 26, 2010 7:50 AM by ArjanDs

    Reinitialization of viewstack child when tab is changed

    zathril

      Hi,

       

      I have tab navigator with 2 tabs (products, orders) and each of them has viewstack with grid list and some form to add new entries. Now I would like to refresh grid list (dispatch event that will fetch remote data) whenever its is visible - this mean when tab is being clicked or when new component is visible in viewstack. I got through with the latter situation using "show" event. Then I tried similar move with tabs without success:

       

       

      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:view="view.bundleOrder.*"
          show="refresh()">

      <mx:Script>
              <![CDATA[

       

                  private function refresh():void
                  {
                      vs.selectedChild.visible = true
                  }

                  ]]>
          </mx:Script>

       

      <mx:ViewStack id="vs" width="100%" height="100%">
             
              <view:OrderListView width="100%" height="100%"  name="orderList" />

       

              <view:OrderEditView  height="100%" width="100%" name="orderEdit" />

       

      </mx:ViewStack>

       

        
      </mx:VBox>

       

      The "refresh" method is exececuted by it's body doesn't trigger "show" event on "OrderListView". Is there any why to explicitly trigger "show" event? Otherwise is there any easy workaround for achieving behaviour I've mentioned?

        • 1. Re: Reinitialization of viewstack child when tab is changed
          David_F57 Level 5

          hi,

           

          Can't you just set the show event on each view and run your update that way, so when you change tabs the new view will trigger its own show event.

           

          David.

          • 2. Re: Reinitialization of viewstack child when tab is changed
            zathril Level 1

            Hi David, thank you for posting

             

            This is something that I guess I have already done. Each tab has a "refresh" method that is triggered on "show" event and it works but I want to refresh component that is inside StackView (OrderListView for instance in my case) not the TabView itself - that's why I somehow tried to propagate event with this line:

            orderList.visible = true

             

            Components inside StackView (OrderListView again) have refresh method set as "show" event handler as well but this event is only triggered when the selectedComponent of StackView is changed - it's not dispatched when I change tab. Is there any why to manually dispatch show event on some container? I'm new to flex so I'm not that familiar with the whole event API.

            • 3. Re: Reinitialization of viewstack child when tab is changed
              David_F57 Level 5

              hi,

               

                     <view:OrderListView width="100%" height="100%"  name="orderList"  show="orderList_showHandler(event)/>

               

                      <view:OrderEditView  height="100%" width="100%" name="orderEdit" show="orderEdit_showHandler(event)/>

               

              Every time you tab to either of these views its showhandler will be triggered, within that handler you can perform any operations you need to even on its children. If this isn't what you want to do I may be misunderstanding you, if you place a show handler on the actual tab navigator it will only trigger once so changing tabs will have no effect.

               

              David.

              • 4. Re: Reinitialization of viewstack child when tab is changed
                zathril Level 1

                Hi David,

                 

                This is exactly what I want but the event is still not triggered when I change tab. I will provide more code. Below is simplified definition of OrderListView ( I've removed redundant fields that are not relevant to this discusion):

                 

                (OrderListView.mxml)

                 

                <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
                    xmlns:cubikalabs="http://cubikalabs.cub2k.com/2009/commons"
                    show="doInit()"
                    clipContent="false"
                    >
                    <mx:Script>
                        <![CDATA[

                         private function doInit():void
                            {
                                new OrderListEvent(_model.page).dispatch();
                               
                                addEventListener(KeyboardEvent.KEY_UP,keyboardHandler,false,0,true);
                            }

                        ]]>
                    </mx:Script>
                   
                    <mx:VBox
                        styleName="listContainer"
                        width="100%"
                        height="100%"
                        >
                       
                        <mx:DataGrid dataProvider="{_model.page.list}"
                            width="100%" height="100%"
                            id="dg"
                                     
                            <mx:columns>
                                 <mx:DataGridColumn dataField="name" headerText="{MultipleRM.getString(MultipleRM.localePrefix,'bundle.name')}" />
                                 <mx:DataGridColumn dataField="status" headerText="{MultipleRM.getString(MultipleRM.localePrefix,'bundleOrder.status')}" />
                            </mx:columns>
                           
                        </mx:DataGrid>
                    </mx:VBox>

                 

                 

                </mx:Canvas>

                 

                 

                "doInit" is the method that is responsible to update data. This is how I did it in the first place and it works only as long as the selected component in ViewStack is changed - but not when tab navigator is changed. The "refresh" handled in tab navigator mentioned earlier was meant to be only a workaround for this problem.

                 

                I followed your example and moved declaration of "show" handler (doInit()) from OrderListView to OrderTabView but without success.

                 

                Just to clarify I have two tabs and each one has two views inside ViewStack. So the component structures is something like:

                 

                (id="orderTabView, Tab)

                       (id="orderViewStack", ViewStack)

                            (id="orderListView", VBox)

                            (id="orderEditView", VBox)

                id="productTabView, Tab)

                      (...)

                 

                 

                 

                When I change selectedComponent property of orderViewStack (e.g. when I want to move from orderEditView to orderListView) "doInit" is executed but when I move from productTabView to orderTabView it is not

                • 5. Re: Reinitialization of viewstack child when tab is changed
                  ArjanDs

                  Did you ever solve this?

                  I am looking for a similar solution, that is triggering (refreshing) a method in a custom component.

                  After the custom component is loaded, i change some variables and when i set it back on visible then the panel should be refreshed with new data from my callresponder using the new variables.