5 Replies Latest reply on Apr 8, 2009 1:31 PM by Miggl

    How: Modules within View States?

    Miggl

      Hey fellow FLEXers:

       

      I have a main app configured with view states. Each view state should load a module. Only the first module loads, and when the second one tries to run it fails to run. Any ideas what may be causing this?

       

      Here is the main app code:

       

      And here the SignIn module:

       

      And here the CompanySelection module:

       

      And the CompanyTileList component that the CompanySelection module requires:

       

      Any help is greatly appreciated.

      Also, if anyone can point me in the direction of some good tutorials for using modules and views (hopefully in combination), that would be great. I purchased the book FLEX 3 in Action, but unfortunately it doesn't go into too much detail on this topic.

       

      Thanks!

      Mike

        • 1. Re: How: Modules within View States?
          Miggl Level 1

          I'm not sure if I'm the only one: can others see the code displayed in the initial post?

          • 2. Re: How: Modules within View States?
            Michael Borbor Level 4

            Hi Mike, what error are you getting? Nop any code is being displayed. :-)

            • 3. Re: How: Modules within View States?
              Miggl Level 1

              The problem I am experiencing is that the TileList in the CompanySelection module is not being populated; it results in the module displaying without the tile list.

              Everytime I try to add ActionScript code in my post using the INSERT HTML functionality, it dissappears. Any ideas? I'll try adding XML.

               

              Main App:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application 
                   xmlns:mx="http://www.adobe.com/2006/mxml" 
                   creationComplete="app_init()"
              >
                   <mx:Script>
                        <![CDATA[
                             import mx.controls.Alert;
                             import mx.rpc.events.FaultEvent;
              
                             import com.brassworks.ValueObjects.UserVO;
              
                             [Bindable]
                             private var current_user:UserVO;
                             
                             private function app_init():void
                             {
                                  setState("SignIn");
                                  //if ((!current_user) || (current_user.id <= 0)) {setState("SignIn");}
                             }
                             
                             public function setState(state:String):void
                             {
                                  currentState = state;
                             }
              
                             public function handleFault(event:FaultEvent):void
                             {
                                  Alert.show(event.fault.faultDetail, event.fault.faultString);
                             }
              
                             public function show_error(error:Error, s_function:String):void
                             {
                                  Alert.show("Method:" + s_function + "\nName: " + error.name + "\nID: " + error.errorID + "\nMessage: " + error.message + "\nStack Trace: " + error.getStackTrace() + "\nError: " + error.toString());
                             }
                        ]]>
                   </mx:Script>
                   
                   <mx:Canvas
                        id="pnl_default"
                   >
                   </mx:Canvas>
                   
                   <mx:states>
                        <mx:State
                             name="SignIn"
                        >
                             <mx:RemoveChild
                                  target="{pnl_default}"
                             />
                             <mx:AddChild>
                                  <mx:ModuleLoader
                                       id="mdl_signin" 
                                       url="com/brassworks/modules/admin/SignIn.swf"
                                  />
                             </mx:AddChild>                    
                        </mx:State>
                        <mx:State
                             name="ChooseCompany"
                        >
                             <mx:RemoveChild
                                  target="{pnl_default}"
                             />
                             <mx:AddChild>
                                  <mx:ModuleLoader
                                       id="mdl_choose_company" 
                                       url="com/brassworks/modules/admin/CompanySelection.swf"
                                  />
                             </mx:AddChild>                    
                        </mx:State>
                   </mx:states>
              
                   <mx:transitions>
                        <mx:Transition
                             fromState="*"
                             toState="*"
                        >
                             <mx:Parallel
                                  id="trn_default"
                                  targets="{['SignIn', 'ChooseCompany']}"
                             >
                                  <mx:Fade
                                       alphaFrom="0.0"
                                       alphaTo="1.0"
                                  />
                             </mx:Parallel>
                        </mx:Transition>
                   </mx:transitions>
              </mx:Application>
              

               

              SignIn module:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Module 
                   xmlns:mx="http://www.adobe.com/2006/mxml" 
                   layout="absolute"
              >
                   <mx:RemoteObject
                        id="LoginRemote"
                        destination="login"
                        showBusyCursor="true"
                   >
                         <mx:method name="sign_in" result="signin_handle(event)" />
                         <mx:method name="sign_out" result="signout_handle(event)" />
                   </mx:RemoteObject>
                   <mx:Script>
                        <![CDATA[
                             import mx.rpc.events.FaultEvent;
                             import mx.utils.ArrayUtil;
                             import mx.rpc.events.ResultEvent;
                             import mx.controls.Alert;
                             import com.brassworks.ValueObjects.CurrentUserVO;
                             import mx.events.VideoEvent;
                             
                             [Bindable]
                             private var this_user:CurrentUserVO = new CurrentUserVO();
                             
                             private function init():void
                             {
                             }
                             
                             private function signin_handle(event:ResultEvent):void
                             {
                                  try
                                  {
                                       this_user = event.result as CurrentUserVO;
                                       if (this_user.token == null) {Alert.show("Supplied login credentials are not valid. Please try again.");}
                                       else
                                       {
                                            this.parentApplication.setState("ChooseCompany");
                                            //Alert.show("You are now logged in, " + this_user.first_name + " " + this_user.last_name + ".");
                                       }
                                  }
                                  catch (error:FaultEvent)
                                  {
                                       handleFault(error);
                                  }
                             }
              
                             private function signout_handle(event:ResultEvent):void
                             {
                                  
                             }
                             
                             private function sign_in(event:Event):void
                             {
                                  //Alert.show(txt_name.text + "|" + txt_password.text);
                                  LoginRemote.sign_in(txt_username.text, txt_password.text);
                             }
              
                             private function sign_out(event:Event):void
                             {
                                  
                             }
                             
                             private function show_error(error:Error, s_function:String):void
                             {
                                  Alert.show("Method:" + s_function + "\nName: " + error.name + "\nID: " + error.errorID + "\nMessage: " + error.message + "\nStack Trace: " + error.getStackTrace() + "\nError: " + error.toString());
                             }
                             
                             private function handleFault(event:FaultEvent):void
                             {
                                  Alert.show(event.fault.faultDetail, event.fault.faultString);
                             }
              
                        ]]>
                   </mx:Script>
                   <mx:Panel
                        id="pnl_signin"
                        title="Sign In"
                        horizontalAlign="center"
                        verticalAlign="middle"
                   >
                        <mx:Form
                             id="frm_signin"
                             cornerRadius="5"
                             defaultButton="{btn_signin}"
                        >
                             <mx:FormItem
                                  id="fi_username"
                                  label="Username:"
                             >
                                  <mx:TextInput
                                       id="txt_username"
                                  />
                             </mx:FormItem>
                             <mx:FormItem
                                  id="fi_password"
                                  label="Password:"
                             >
                                  <mx:TextInput
                                       id="txt_password"
                                       displayAsPassword="true"
                                  />
                             </mx:FormItem>
                        </mx:Form>
                        <mx:ControlBar>
                             <mx:LinkButton
                                  id="lnk_request_password"
                                  label="Forgot your password?"
                                  click="currentState='RequestPassword'"
                             />
                             <mx:Spacer
                                  id="spc_spacer" 
                                  width="100%"
                             />
                             <mx:Button
                                  id="btn_signin"
                                  label="Sign In"
                                  click="sign_in(event)"
                             />
                        </mx:ControlBar>
                   </mx:Panel>
              <!--     
                   <mx:states>
                        <mx:State
                             name="RequestPassword"
                        >
                             <mx:SetProperty
                                  target="{pnl_signin}"
                                  name="title"
                                  value="Request New Password"
                             />
                             <mx:SetProperty
                                  target="{btn_signin}"
                                  name="label"
                                  value="Submit Request"
                             />
                             <mx:RemoveChild
                                  target="{lnk_request_password}"
                             />
                             <mx:RemoveChild
                                  target="{fi_password}"
                             />
                             <mx:AddChild
                                  relativeTo="{spc_spacer}"
                                  position="before"
                             >
                                  <mx:target>
                                       <mx:LinkButton
                                            id="lnk_sign_in"
                                            label="Return to Sign In form."
                                            click="currentState=''"
                                       />
                                  </mx:target>
                             </mx:AddChild>
                        </mx:State>
                   </mx:states>
                   
                   <mx:transitions>
                        <mx:Transition
                             fromState="*"
                             toState="*"
                        >
                             <mx:Parallel
                                  id="trn_default"
                                  targets="{['RequestPassword']}"
                             >
                                  <mx:Fade
                                       alphaFrom="0.0"
                                       alphaTo="1.0"
                                  />
                             </mx:Parallel>
                        </mx:Transition>
                   </mx:transitions>
              -->
              </mx:Module>
              

               

              CompanySelection module:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Module 
                   xmlns:mx="http://www.adobe.com/2006/mxml" 
                   layout="absolute" 
                   xmlns:components="com.brassworks.components.*"
                   horizontalAlign="center"
              >
                   <mx:RemoteObject
                        id="CompanyRemote"
                        destination="company"
                        source="Company"
                        showBusyCursor="true"
                   >
                         <mx:method name="load_by_user" result="getCompanyHandler(event)"/>
                   </mx:RemoteObject>
                   
                   <mx:Script>
                        <![CDATA[
                             import mx.events.ListEvent;
                             import mx.controls.Alert;
                             import mx.core.ByteArrayAsset;
                             import mx.controls.Image;
                             import mx.rpc.events.FaultEvent;
                             import mx.rpc.soap.LoadEvent;
                             import mx.utils.ArrayUtil;
                             import com.brassworks.ValueObjects.CompanyVO;
                             import mx.collections.ArrayCollection;
                             import mx.rpc.events.ResultEvent;
                             
                             public function mod_init():void
                             {
                                  CompanyRemote.load_by_user("mike");
                             }
                             
                             private function getCompanyHandler(event:ResultEvent):void
                             {
                                  Alert.show('test3');
                                  //var results:ArrayCollection = event.result as ArrayCollection;
                                  //companies = event.result as ArrayCollection;
                                  tll_company_selection.dataProvider = event.result;
                             }
                             
                             private function toObject(element:String, index:int, array:Array):Object
                             {
                                  return {label:element};
                             }
                             
                             private function item_click(event:ListEvent):void
                             {
                                  Alert.show(TileList(event.currentTarget).selectedItem.id.toString());
                             }
                        ]]>
                   </mx:Script>
                   
                   <mx:Canvas
                        borderColor="#636363" 
                        backgroundColor="#FCF4DA"
                        width="900"
                        horizontalCenter="true"
                   >
                        <mx:TileList
                             id="tll_company_selection"
                             columnWidth="260"
                             maxColumns="2"
                             rowHeight="150"
                             itemRenderer="com.brassworks.components.CompanyTileList"
                             itemClick="item_click(event)"
                             width="520"
                             horizontalScrollPolicy="off"
                             horizontalCenter="0"
                             backgroundAlpha="0.0"
                             borderStyle="none"
                             creationComplete="mod_init()"
                        />
                   </mx:Canvas>
                   
              </mx:Module>
              

               

              CompanyTileList component:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox 
                   xmlns:mx="http://www.adobe.com/2006/mxml" 
                   verticalScrollPolicy="off"
                   horizontalScrollPolicy="off"
                   horizontalCenter="0"
                   width="260"
                   paddingLeft="5"
                   paddingRight="5"
                   paddingTop="0"
                   paddingBottom="0"
              >
                   <mx:Script>
                        <![CDATA[
                             import com.brassworks.ValueObjects.CompanyVO;
                             import mx.utils.Base64Decoder;
                             import flash.utils.ByteArray;
              
                             [Bindable]
                             private var _company_name:String;
                             [Bindable]
                             private var _company_logo:ByteArray; 
                             private var _decoder:Base64Decoder = new Base64Decoder();
                             public var _company:CompanyVO;
              
                             private function tile_list_init():void
                             {
                                  _company = data as CompanyVO;
                                  _company_name = _company.name;
                                  _decoder.decode(_company.logo);
                                  _company_logo = _decoder.toByteArray();
                             }
                         ]]>
                   </mx:Script>
                   <mx:Image 
                        source="{_company_logo}" 
                        width="250" 
                        height="100"
                   />
                   <mx:Label 
                        text="{_company_name}" 
                        creationComplete="tile_list_init()"
                        width="100%"
                        left="0"
                        right="0"
                        textAlign="center" 
                   />
              </mx:VBox>
              
              • 4. Re: How: Modules within View States?
                Miggl Level 1

                I also noticed that this is not a problem with my modules. To test this I loaded the CompanySelection module first, instead of the SignIn module. Now it loaded fine.

                 

                However, when I load the CompanySelection module after the SignIn module. it will not load. This indicates to me that there is something wrong with how I am loading the modules from within the different states.

                 

                Ideas?

                • 5. Re: How: Modules within View States?
                  Miggl Level 1

                  It appears that the first module to load was high-jacking the RemoteObject object, essentially taking ownership of it (not the instance) and keeping it within the module's namespace. When the second module tried to instanciate its own RemoteObject, it failed miserably, because the first module had already high-jecked the control itself.

                   

                  To get around this, I loaded a dummy RemoteObject in my main app, like so:

                  import mx.rpc.remoting.RemoteObject;
                  
                  private var remoteobjectObject:RemoteObject;
                  

                   

                  This means that I need to pre-load each and every control in the main app that my modules use, in order to avoid module greediness.