3 Replies Latest reply on Aug 6, 2010 8:39 AM by amandamartino

    Re-initialize a component

    amandamartino

      Hi all,

       

      I'm trying to go forward and backward through various view states in my application. I can change states easily enough, but my view states are populated by data returned from various Remote Object calls. If I'm on screen 2 of my application, go back to screen 1, change my selection, and then go forward again to screen 2, the information on screen 2 is not changing to reflect my new selection on screen 1. I'm guessing that's because the MXML component has already been created, so therefore the initialization and creationComplete methods are not being called a second time. Is there a way for me to force the component to re-initialize so I can be assured it's populating with the correct data?

       

      Thanks in advance!

       

      ~ Amanda

        • 1. Re: Re-initialize a component
          wise_qwerty

          I use a function for the initialization and call that in creationComplete. Also you can call it in the code of screen 1, when you changed your selection.

          • 2. Re: Re-initialize a component
            UbuntuPenguin Level 4

            You don't need to re-initialize the component.  You should look into MVP/MVC architectures and frameworks.  Is your data bindable in the second view ?  And what mechanism are you using to let the rest of the application know that the selection on view 1 has changed ?

            • 3. Re: Re-initialize a component
              amandamartino Level 1

              No, the data isn't bindable...I've passing the result of my RemoteObject call as the dataProvider attribute of my List component and calling my remote function via the creationComplete event of the List component. I am successfully storing the new selection from view 1 when I go back to it and change my initial selection, and I tried to dispatch an event after that and have View 2 listen for the event, but that doesn't seem to be working. Is that even the right approach?

               

              My code so far:

               

              In my main application mxml file:

               

              //this gets triggered when the selection on screen 1 changes

              private function onEventGridChange(e:Event):void
                          {
                              registration.setInitialEventCode(e.currentTarget.initialEventCode);

                             //this is the new event I was trying to dispatch to tell Screen 2 the selection had changed
                              this.dispatchEvent(new Event("initalEventSelectionChanged"));
                             //this changes state from Screen 1 to Screen 2    

                             toggleState('showEventList');
                          }

               

              //this gets triggered when the user hits "Back" on screen 2 to go back to screen 1       
                          private function onEventListBackStateChange(e:Event):void
                          {

                             //the next three lines clear out the user's previous selections on screen 1 and screen 2 (and they seem to be working which is how I've verified I'm actually getting into this method successfully
                              registration.clearInitialEventCode();
                              registration.clearPrimaryEventCode();
                              registration.clearUserSelectedEvents();

                             // this changes state from Screen 2 to Screen 1
                              toggleState('showEventGrid');
                          }

               

              The actual components (still in the main application mxml file)

              <components:EventGrid includeIn="showEventGrid" id="openEventsGrid" eventGridChange="onEventGridChange(event)"/>
              <components:EventList includeIn="showEventList" eventListStateChange="onEventListStateChange(event)" eventListBackStateChange="onEventListBackStateChange(event)" />

               

              *******************

              Code from EventGrid.mxml (Screen 1) to get the data to populate it and dispatch the event when the user clicks "Continue":

               

              //provides the dataProvider for the mx:Grid

              protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
              {
                    getOpenEventsForDisplayResult.token = registrationAPI.getOpenEventsForDisplay();
              }

              //stores the user's selection as he selects an event...dispatched back to the main application file when the user clicks "Continue"
              protected function openEventsGridHandler(event:Event):void
              {
                     initialEventCode = openEventsGrid.selectedItem.EventCode;
              }

               

              //dispatches the change state notification back to the main application file which then toggles from Screen 1 to Screen 2

              protected function eventGridStateChangeHandler(event:Event):void
              {
                    this.dispatchEvent(new Event("eventGridChange"));
              }

               

              <mx1:DataGrid x="10" y="42" width="865" height="308" id="openEventsGrid" creationComplete="dataGrid_creationCompleteHandler(event)" click="openEventsGridHandler(event)" dataProvider="{getOpenEventsForDisplayResult.lastResult}">
                      <mx1:columns>
                          <mx1:DataGridColumn headerText="Event Title" dataField="EventTitle" />
                          <mx1:DataGridColumn headerText="Last Preregistration Date" dataField="LastPreregistrationDate" />
                          <mx1:DataGridColumn headerText="Last Online Registration Date" dataField="LastOnlineRegistrationDate"/>
                          <mx1:DataGridColumn headerText="EventCode" dataField="EventCode" visible="false"/>
                      </mx1:columns>
                  </mx1:DataGrid>
                  <s:Button id="selectEvent" label="Continue" click="eventGridStateChangeHandler(event)" />

               

              *********************

              Code from EventList.mxml (Screen 2):

              //called from creationComplete in component

              public function init():void
              {

                   //adds the event listener to notify the component the selection in Screen 1 has changed...or at least, that was what I was going for. This is probably not right...I am fully prepared to admit that
                    this.addEventListener("initalEventSelectionChanged", getEventDetails);
              }

               

              //function called when the event I'm dispatching is caught by my MXML component to get my data for my custom List

              protected function getEventDetails(event:Event):void
              {
                    getPrimaryAndRelatedEventsResult.token = registrationAPI.getPrimaryAndRelatedEvents(FlexGlobals.topLevelApplication.registration.g etInitialEventCode());
              }

               

              //stores the user's selections

              protected function eventListChangeHandler(event:Event):void
              {
                     selectedEvents = checkList.selectedItems;
              }

               

              //dispatches the "go forward" event to tell the main application mxml to toggle from Screen 2 to Screen 3        
              protected function eventListStateChangeHandler(event:Event):void
              {
                     this.dispatchEvent(new Event("eventListStateChange"));
              }

               

              //dispatches the "go back" event to tell the main application mxml to toggle from Screen 2 to Screen 1 (clearing the user's previous selections along the way)
              protected function eventListBackStateChangeHandler(event:Event):void
              {
                      this.dispatchEvent(new Event("eventListBackStateChange"));
              }

               

              <components:CheckList itemRendererFunction="eventListRendererFunction" dataProvider="{getPrimaryAndRelatedEventsResult.lastResult}"
                                        width="802" height="300" id="checkList" borderVisible="false"
                                        valueCommit="eventListChangeHandler(event)" >
                      <components:layout>
                                  <s:VerticalLayout gap="1" horizontalAlign="contentJustify" />
                      </components:layout>
              </components:CheckList>
              <s:Button id="backButton" label="Back" click="eventListBackStateChangeHandler(event)" />
              <s:Button id="selectAllEvents" label="Continue" click="eventListStateChangeHandler(event)" />

               

              I hope I'm at least somewhat on the right track here...my best guess at the moment is that I haven't set up my event listeners correctly, but I'm not sure how to verify that (or how to set them up correctly, if they aren't already).

               

              Thanks for your help!

               

              ~ Amanda