13 Replies Latest reply on Aug 23, 2012 9:40 AM by Flex harUI

    Custom component doesn't appear - erratic behavior

    JoseAjáAjá Level 1

      Hi guys.

       

      I have a very complex application written in Flex 4.6, using mx, not spark.

       

      There's this custom component used within a state of another component, that should appear after some button is pressed by the user.

       

      The custom component appears only sometimes. This seems to be a problem related to Flash Player's screen updating.

       

      The component appears and function perfectly if I call an "Alert.show()" method when the component dispatches the removedFromStage event. But, of course, I don't want that that Alert popping up during regular use.

       

      If I comment that line out on the component (the one that calls the Alert popup), then the custom component again doesn't appear.

       

      I guess I could fix this somehow with using calllater() or validateNow() or invalidateProperties(), but I've been trying to use those methods to no avail.

       

      There must be either something I don't understand about updating the display, or this is a bug in Flex.

       

      I would be greatly graterful if someone could put me in the right direction. I've been struggling with this for a week now.

       

      ___

       

      The following is the code with which it does appear:

       

      <mx:State name="nameOfTheState">
      <mx:RemoveChild target="{outerContentCanvas}"/>
      <mx:AddChild relativeTo="{canvas0}" position="before">
      <!--_________________ CUSTOM COMPONENT _________________-->
      <components:cpCustomComponent id="myCustomComponent"
      creationComplete="{myCustomComponent_added_hdl()}"
      removedFromStage="{Alert.show('myCustomComponent was Removed!!')}"
      />
      ...
      

       

      The following is the code with which it does NOT appear:

       

      <mx:State name="nameOfTheState">
      <mx:RemoveChild target="{outerContentCanvas}"/>
      <mx:AddChild relativeTo="{canvas0}" position="before">
      <!--_________________ CUSTOM COMPONENT _________________-->
      <components:cpCustomComponent id="myCustomComponent"
      creationComplete="{myCustomComponent_added_hdl()}"
      />
      ...
      

       

       

      Thank you!!!

        • 1. Re: Custom component doesn't appear - erratic behavior
          Flex harUI Adobe Employee

          If  a component doesn’t appear, add some code to introspect the display list to see if the component exists, its size and position, the visible and alpha properties and the initialized property.

           

          -Alex

          1 person found this helpful
          • 2. Re: Custom component doesn't appear - erratic behavior
            JoseAjáAjá Level 1

            Thank you 'Flex harUI'

             

            I followed your advice.

             

            As soon as the state changes to "nameOfTheState", the "myCustomComponent" component is NOT initialized and its width and height equal zero. The component exists, though.

             

            I'm trying to force a call to the "myCustomComponent.initialize()" method, but still the component doesn't appear. Is there a method to 'reset' the initialization process than can be called before .initialize()?

             

            It seems that specific component halts its adding to the display list, but it plays sounds and they play, even if the component doesn't show up.

             

            Thanks!

            • 3. Re: Custom component doesn't appear - erratic behavior
              JoseAjáAjá Level 1

              Alex,

               

              Recapping, that component is added/defined by a state (I'm speaking of old, Flex 3 style states).

               

              I set up an EventListener that prints some text when that custom component dispatches the "creationComplete" event.

               

              When I swtich the application to that state, sometimes I can see the component and the application properly traces the text that notifies me that the creationComplete event was dispatched.

               

              Sometimes, though, I can't see the component on the screen, and the text is not traced, meaning that the creationComplete event was not dispatched.

               

              Could it be that the component's lifecycle is structurally flawed?

               

              Are there common mistakes in managing a component's lifecycle that usually cause this erratic behavior?

               

              Any input would be helpful. Thanks!

              • 4. Re: Custom component doesn't appear - erratic behavior
                Flex harUI Adobe Employee

                If a component is created and added to a parent but creationComplete is not called, the most common reason is that the component and its children or parents are now in a situation where the final size and position keeps changing based on the layout rules.

                 

                For example, there are components that have flexible layouts whose width depends on its height and/or vice versa.  You can run into situations where the component says its height is 100 and width is 100 but that causes a scrollbar to appear which changes the width and height in a way the scrollbar is no longer needed so the scrollbar goes a way and you keep flipping back and forth.

                 

                If you set breakpoints on measure() and updateDisplayList() they should only get called once or twice.  Otherwise you need to figure out why they keep getting called.

                • 5. Re: Custom component doesn't appear - erratic behavior
                  JoseAjáAjá Level 1

                  Thanks Alex.

                   

                  Back to working on this today again...

                   

                  I used your suggestion:

                   

                  My component has an animation, so it calls both the measure() and updateDisplayList() methods several times before stopping (but no more than 30 times each of them in a row). This, as I said earlier, is due to a Tween inside the component that updates the position of some children.

                   

                  Now, I'm tracing the preinitialize, initialize, add, added, addedToStage and creationComplete events like this:

                   

                  <mx:State name="nameOfTheState">
                  <mx:RemoveChild target="{outerContentCanvas}"/>
                  <mx:AddChild relativeTo="{canvas0}" position="before">
                  <!--_________________ CUSTOM COMPONENT _________________-->
                  <components:cpCustomComponent id="myCustomComponent"
                  
                  
                  preinitialize="trace('PREINITIALIZE - myCustomComponent')"
                  initialize="trace('INITIALIZE - myCustomComponent')"
                  
                  
                  add="trace('myCustomComponent -> add')"
                  
                  added="trace('myCustomComponent -> added')"
                  
                  addedToStage="trace('myCustomComponent -> addedToStage')"
                  
                  creationComplete="trace('myCustomComponent -> creationComplete')"
                  />
                  ...
                  

                   

                   

                  But I get these traces:

                   

                  PREINITIALIZE - myCustomComponent

                  INITIALIZE - myCustomComponent

                  myCustomComponent -> add

                  myCustomComponent -> added

                  myCustomComponent -> added

                  myCustomComponent -> added

                  myCustomComponent -> added

                  myCustomComponent -> added

                  myCustomComponent -> added

                  myCustomComponent -> added

                  myCustomComponent -> added

                  myCustomComponent -> added


                  That is:

                  • Only four events get called :
                    • preinitialize
                    • initialize
                    • add
                    • added
                  • The two last events are not called:
                    • addedToStage
                    • creationComplete
                  • added event gets called 8 times
                  • the measure() and updateDisplayList() get called around 30 times due to the animation of the children (and those traces appear in the console, meaning the component is created and animated)

                   

                  I've tried everything. I even refined all the classes involved, making sure all of them set properties trying to leverage AS3's component lifecycle as per http://www.dlgsoftware.com/primers/Primer_on_Flex3_Component_Lifecycle.htm (i.e. using invalidateProperties(), commitProperties(), createChildren() etc...)

                   

                  I must repeat, that this is erratic behavior, meaning that it happens around only 50% of the times.

                   

                  I'm kind of getting mad about this :S

                   

                   

                  Thank you!

                  • 6. Re: Custom component doesn't appear - erratic behavior
                    Flex harUI Adobe Employee

                    Maybe it is being removed?

                    • 7. Re: Custom component doesn't appear - erratic behavior
                      JoseAjáAjá Level 1

                      No. I'm checking that too.

                       

                      But I reviewed and I made a little mistake in the previous report:

                       

                      The custom component calls the measure() and updateDisplayList() methods ONLY when it appears.

                       

                      When it doesn't appear, however, it doesn't call the measure() or updateDisplayList() methods and it doesn't dispatch the addedToStage or creationComplete events either.

                       

                      _____

                       

                      During these days I thought the problem could be a performance issue, but now I think differently:

                       

                      When, on the parent component, I change to the state where the custom component should appear, I now added a long timer (2 seconds) after which the state is enabled. That is, instead of setting "currentState=THE_STATE_WITH_PROBLEMS" I now setup a timer, that sets that state after 2 seconds.

                       

                      But the same thing happens, I'm still having that intermittent error. So I guess it's not a performance issue...

                       

                       

                      I'm running out of ideas, here

                      • 8. Re: Custom component doesn't appear - erratic behavior
                        Flex harUI Adobe Employee

                        Try this: add some sort of button that will dump out  all of the components properties.  When you find it didn’t appear, hit the button and post all of the properties.

                        • 9. Re: Custom component doesn't appear - erratic behavior
                          JoseAjáAjá Level 1

                          Alex,

                           

                          I've done all sorts of things. I came down to dumping some properties that I consider relevant. I copied the dumped text of both the times when myCustomComponent DOES appear on the screen and when it DOESN'T show up, and then I compared them in a text editor.

                           

                          This is what I found:

                           

                          debug_customComponent.png

                           

                          As you can see in the previous image, when it doesn't appear, it seems that an effect called "AddChildActionInstance" is listed in "activeEffects", singaling to me that it is pending and hasn't executed.

                           

                          Also, the "updateCompleteFlag" is true, meaning that it's waiting for something to occur before updating (? I guess...)

                           

                          And, of course, the "initialized" value is false, as the width, height are 0.

                           

                           

                          Any ideas on this? Can I force the AddChildActionInstace effect to execute or something similar?

                           

                          If you have any ideas on this, I'd be greatly thankful.

                           

                          Thanks!

                          • 10. Re: Custom component doesn't appear - erratic behavior
                            JoseAjáAjá Level 1

                            More information:

                             

                            I found out that the container that should be removed from the parent container, also has pending effects, in the "activeEffects" property. The pending effect is "RemoveChildActionInstance".

                             

                            In the following picture, I show a similar comparison to the one above, but this time not comparing the properties of myCustomComponent (which I want to add), but those of the canvas that should be removed. (on the left there are the properties of the canvas when it is removed and myCustomComponent is properly added to the stage, and on the right I show the properties of that same canvas when it's not properly removed and, hence myCustomComponent is also not added to the stage):

                             

                            debug_customComponent_outerContentCanvas.png

                             

                            So, my guess was that the transition between those two states (the base state where the "outerContentCanvas" exists and the state where "myCustomComponent" is added) is somehow being halted.

                             

                            So, I set up a 500ms timer, that, after checking that there are "activeEffects" in those instances, tries to force the transition's only sequence to play, like this:

                             

                            var theTimer:Timer = new Timer(500,1);
                            theTimer.addEventListener(TimerEvent.TIMER_COMPLETE,theTimer_Hdl,false,0,true);
                            theTimer.start();
                            

                             

                            With an eveentListener:

                             

                            private function theTimer_Hdl(event:TimerEvent):void
                            {
                            
                            
                               if (outerContentCanvas.activeEffects)
                               {
                                  transition_sequence_1.end();
                                  transition_sequence_1.stop();
                                  transition_sequence_1.play();
                                        ...
                            

                             

                            ...where transition_sequence_1 is the only sequence defined within the transition between states.

                             

                            But, even so, it doesn't start. It doesn't fire.

                             

                            ...

                             

                            Any ideas?

                            • 11. Re: Custom component doesn't appear - erratic behavior
                              Flex harUI Adobe Employee

                              Not sure, but I would next try to track state changes.  Maybe the states are being changed in the middle of a transition and something gets stuck?

                              • 12. Re: Custom component doesn't appear - erratic behavior
                                JoseAjáAjá Level 1

                                Thanks Alex.

                                 

                                I'm 70% sure that this is due to some animation running while I change states.

                                 

                                Do you know of a global class which I can use to monitor all the transitions or effects being currently played?

                                 

                                I'm trying to introspect the component instances, but my guess is that probably I'm spotting the wrong classes.

                                 

                                It'd be cool if I could monitor at any time all the transitions or effects that are being run.

                                 

                                 

                                Thanks!

                                • 13. Re: Custom component doesn't appear - erratic behavior
                                  Flex harUI Adobe Employee

                                  Try using capturePhase event listeners on the application for effect events and state changing events.