17 Replies Latest reply on Jul 7, 2011 8:42 AM by HTML5GUY

    modules in TabNavigator

    mmmnow

      Hello,

      I have TabNavicator container and a few modules inside:

       

                <mx:TabNavigator x="10" y="41" width="984" height="456">
      
                     <mx:Canvas label="A" width="100%" height="100%">
      
                          <mx:ModuleLoader width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" url="modules/module1.swf" />
      
                     </mx:Canvas>
      
                     <mx:Canvas label="B" width="100%" height="100%">
      
                         <mx:ModuleLoader width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" url="modules/module2.swf" />
      
                     </mx:Canvas>
      
                     <mx:Canvas label="C" width="100%" height="100%">
      
                          <mx:ModuleLoader width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" url="modules/module3.swf" />
      
                     </mx:Canvas>
                     </mx:TabNavigator>
      

       

      Each of these modules have same creationComplete event:

       

      creationComplete="init()"
      

       

      where they read database and update some views.

       

      All I want it to make this init() function to execute everytime I select proper tab inside which I have some module.

      For example when i click on "A" tab module1 will be displayed but it shuld also call init() then.

      Unfortunately creationComplete is fired only once - when module is loaded for the first time ( or maybe it loaded one and only one - i don't know).

      Do you know how to make it work?

        • 1. Re: modules in TabNavigator
          RK... Level 3

          You can try this,

           

          <mx:TabNavigator x="10" y="41" width="984" height="456" change="init()">
               ...
          </mx:TabNavigator>
          

           

          or

           

          private function changeHandler(event: Event): void {
               init();
               //your implementation
          }
          
          
          <mx:TabNavigator x="10" y="41" width="984" height="456" change="changeHandler(event)">
               ...
          </mx:TabNavigator>
          

          • 2. Re: modules in TabNavigator
            ghalex

            Or move your code in show() event not in creationComplete

            • 3. Re: modules in TabNavigator
              Gregory Lafrance Level 6

              That's right. creationComplete is dispatched only when the module is first created. show event is dispatched each time the module is displayed by clicking on a tab.

               

              If this post helps, please mark it as such.


              Greg Lafrance - Flex 2 and 3 ACE certified
              www.ChikaraDev.com
              Flex / AIR Development, Training, and Support Services

              • 4. Re: modules in TabNavigator
                mmmnow Level 1

                Ok,

                I first tried to change creationComplete to show event and then execute my init() function.

                 

                Was:

                <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" >
                

                 

                Is:

                <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" show="init()" >
                

                 

                 

                But now init() function is NEVER executed....

                 

                 

                Ok, so I tried first answer - onChange():

                <mx:TabNavigator x="10" y="41" width="984" height="456" change="onChangeTab()" id="tab">
                ...
                            private function onChangeTab() : void
                            {
                                var idx : int = tab.selectedIndex;
                                mx.controls.Alert.show('idex = ' + idx);
                                
                                var module : ModuleLoader = tab.selectedChild.getChildByName("loader") as ModuleLoader;
                                
                                mx.controls.Alert.show('ModuleLoader Id = ' + module.id);
                                
                                if(idx == 0)
                                {
                                    mx.controls.Alert.show('module1');
                                    (module.child as module1).hello();
                                }
                                else if(idx == 1)
                                {
                                    mx.controls.Alert.show('module2');
                                    (module.child as module2).hello();
                                }
                                else if(idx == 2)
                                {
                                    mx.controls.Alert.show('module3');
                                    (module.child as module3).hello();
                                }
                            }
                

                 

                and hello() is just:

                            public function hello() : void
                            {
                                mx.controls.Alert.show('Hello!');
                            }
                

                 

                Now I can see every alerts besides these whith 'Hello!' string. I suppose hallo is called to early  - when  module is't displayed yet.

                So i still don't have any idea how to solve it and none of proposed solutions helped me....

                • 5. Re: modules in TabNavigator
                  ghalex Level 1

                  Show event on canvas not on ModuleLoader.

                  • 6. Re: modules in TabNavigator
                    mmmnow Level 1

                    Ok,

                    show() event in canvas is fired BUT (perhaps I'm doing something wrong)

                    as I said I want now to call same function in my module so I have this piece of code:

                     

                              <mx:TabNavigator x="10" y="41" width="984" height="456"  id="tab">
                    
                                   <mx:Canvas id="canvas1" label="Tasks" width="100%" height="100%" show="((canvas1.getChildByName('loader') as ModuleLoader).child as module1).hello()">
                    
                                        <mx:ModuleLoader id="A" name="loader" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" url="modules/module1.swf" />
                    
                                   </mx:Canvas>
                                     ...
                    

                     

                    and in module1.mxml:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    
                    <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
                     ...
                         <mx:Script>
                    
                              <![CDATA[
                                           ...
                                public function hello() : void
                                {
                                    mx.controls.Alert.show('Hello!');
                                }
                    
                              ]]>
                    
                         </mx:Script>
                    
                    </mx:Module>
                    

                     

                    and, unfortunately, hello function is not executed...

                    I think this is my lack of knowledge of actionscript but I would be grateful if someone pointed where I get wrong.

                    • 7. Re: modules in TabNavigator
                      aktell2007 Level 1

                      Hi there,

                       

                      Try this ADOBE Pdf for starters!

                       

                      regards aktell2007

                      • 8. Re: modules in TabNavigator
                        mmmnow Level 1

                        I've already read this document before I stared work with my app. But I can't find the answet to my question there. As you can see I use one way of module communication described there (module.clild property).

                        • 9. Re: modules in TabNavigator
                          Flex harUI Adobe Employee

                          Couple of things to note:

                           

                          1) modules are loaded asynchronously so there not there when the parent is ready

                          2) by using "as module1", you've linked the module into the app and defeated the advantages of modules.  Use a shared interface instead.

                           

                          Alex Harui

                          Flex SDK Developer

                          Adobe Systems Inc.

                          Blog: http://blogs.adobe.com/aharui

                          • 10. Re: modules in TabNavigator
                            mmmnow Level 1

                            ok,

                             

                            1) So do you have any suggestions how it can be done? Is there any event that guarantee that tab is changed and all stuff inside is loaded so i can execute my function then?

                             

                            2) Not all advantages of modules are defeated. But I know it is not the most elegant way. That is why I'm asking for help here.

                            • 12. Re: modules in TabNavigator
                              mmmnow Level 1

                              I beg beseech and implore you - plese note that my problem have nothing to do with module communication.

                              No matter how elegant my module communication will be I'll always need some kind of event thats is fired only when the module is visible on TabNavigator canvas. Or maybe not special event but some way to determine it.

                              If you know how to do this - please let me know.

                              Trust me - I have read this document you mentioned and if I found the answer there i would't bother you.

                              • 13. Re: modules in TabNavigator
                                Flex harUI Adobe Employee

                                2) I can't think of anything that isn't defeated.  The module will load and do nothing as the class it tries to load is already in the main application.  You have not effectively modularized anything.  You can take out the moduleloader and simply replace that tag with a tag for your module's main class.

                                 

                                1) A moduleloader dispatches a READY event, then the module should get instantiated and eventually dispatch an UPDATE_COMPLETE.

                                 

                                Alex Harui

                                Flex SDK Developer

                                Adobe Systems Inc.

                                Blog: http://blogs.adobe.com/aharui

                                • 14. Re: modules in TabNavigator
                                  mmmnow Level 1

                                  Ok, so what do I have now:

                                   

                                  1) an interface:

                                   

                                  package modules
                                  {
                                      import flash.events.IEventDispatcher;
                                      public interface IModuleInterface extends IEventDispatcher {
                                          function refresh():void;
                                      }
                                  }
                                  

                                   

                                   

                                  2) main module that loads other modules in TabNavigator:

                                   

                                  ...
                                  <mx:TabNavigator x="10" y="41" width="961" height="458"  id="tab">
                                  
                                       <mx:Canvas label="A" width="100%" height="100%">
                                  
                                       <custom:CustomModuleLoader  width="100%" height="100%" verticalAlign="top" horizontalAlign="left" url="modules/module1.swf" />
                                       </mx:Canvas>
                                  
                                       <mx:Canvas label="B" width="100%" height="100%">
                                  
                                            <custom:CustomModuleLoader width="100%" height="100%" verticalAlign="top" horizontalAlign="left" url="modules/module2.swf" />
                                  
                                       </mx:Canvas>
                                  
                                       <mx:Canvas label="C" width="100%" height="100%">
                                  
                                            <custom:CustomModuleLoader  width="100%" height="100%" verticalAlign="top" horizontalAlign="left" url="modules/module3.swf" />
                                       </mx:Canvas>
                                  </mx:TabNavigator>
                                  ...
                                  

                                   

                                  CustomModuleLoader:

                                   

                                  <mx:ModuleLoader xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="init()">
                                    <mx:Script>
                                      <![CDATA[
                                      public function init():void {
                                          ...
                                          addEventListener("ready", onReady);
                                          ...
                                      }
                                  
                                      public function onReady(event:Event):void {
                                          var ichild:* = this.child as IModuleInterface;
                                          ichild.refresh();
                                      }

                                   

                                  and modules that are loaded in main module:

                                   

                                  <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" implements="modules.IModuleInterface">
                                  ...
                                       <mx:Script>
                                  
                                            <![CDATA[
                                                           public function refresh() : void
                                                           {
                                                               mx.controls.Alert.show('tasks refresh');
                                                           }
                                            ]]>
                                  
                                       </mx:Script>
                                  
                                  </mx:Module>
                                  

                                   

                                   

                                  And I still cant execute refresh() functions defined in modules. And I don't have ANY idea why.  Maybe it's because main module (in whch other mudules are loaded) is a module itself - not the main application...

                                  Can you help me?

                                  • 15. Re: modules in TabNavigator
                                    mmmnow Level 1

                                    I think i found the problem:

                                     

                                    When application (mx:Ammplication) loads modules it can communicate with it with no problem.

                                     

                                    BUT when application loads module and that module loades some other modules then communication between parent module and child modules is broken.

                                     

                                    I atteched very simple test case that demostrate this. I expect when clicking on tab i will see an alert but this never occures.

                                     

                                    Hope you will check my test and suggest some solution. Is this a bug? Is any way to communicate with chlild modules from parent module?

                                    • 16. Re: modules in TabNavigator
                                      Flex harUI Adobe Employee

                                      This is the way applicationdomains work.  You can see my blog for more info.

                                      However, I think we added code in 3.5 to make this smarter.

                                      • 17. Re: modules in TabNavigator
                                        HTML5GUY

                                        To make some points clear and for users reading this thread, Here is the right solution for the problem

                                         

                                        TabNavigator fires the creationComplete only when the tab is first created

                                         

                                        so init() method will be called via creationComplete on the first time.

                                         

                                        so for the other times later, you can execute via show event handler the same init() method.

                                         

                                        Combination for this issue is triggering init() method on both show and creationcomplete