11 Replies Latest reply on Mar 23, 2010 11:57 AM by adamgeework

    Using states and a custom component

    adamgeework

      so i have my main state which is a search bar. The person searches and clicks a button to change state to get a contact form.

       

      This contact form is a custom component built on a panel.

       

      How do i have a button in the contact form(the component) to change back to the main state in the main application?

        • 1. Re: Using states and a custom component
          AdrianWiecek

          Hi,

           

          I see two options:

           

          #1 Quick but not so elegant:

          Place this in your component's button click handler:

           

          Application.application.setCurrentState("StateName");

           

          #2 More elegant solution

           

          Make your component dispatch an event after a button click, add event listener in your application and in this handler place this code:

           

          setCurrentState("StateName");

           

           

          Hope that helps

           

          Regards,

          Adrian

          • 2. Re: Using states and a custom component
            adamgeework Level 1

            what does Application.application refer to?

             

            my main app is called helpdeskApp.mxml

             

            I tried different combos and it doesnt work.

            • 3. Re: Using states and a custom component
              saisri2k2 Level 4

              create a method in the main application whch actually changes the state of the application

              pass the reference of this method to the panel component... on click of a button in the panel component call this function.

              • 4. Re: Using states and a custom component
                adamgeework Level 1

                sorry forgot to add mx.core.application

                • 5. Re: Using states and a custom component
                  adamgeework Level 1

                  I guess my issue now is main has a bunch of functions, so going back to that state from my component i get

                   

                  ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.

                   

                  I'm assuming the Children of main stays even though the state changed?

                  • 6. Re: Using states and a custom component
                    AdrianWiecek Level 3

                    Hi,

                     

                    Application.application refers to your main applicaton class. So you should be able to refer to it from any place in your application.

                    Can you post the code how you've declared your states?

                     

                    Regards,

                    Adrian

                    • 7. Re: Using states and a custom component
                      adamgeework Level 1

                      <mx:states>

                       

                              <mx:State name="contactform">

                       

                       

                       

                                  <mx:AddChild  position="lastChild">

                       

                                      <custom:email_cmp x="150" y="140"/>   //contact form component

                                  </mx:AddChild>

                       

                       

                       

                              </mx:State>

                       

                              <mx:State name="main">

                       

                       

                       

                                  <mx:AddChild position="lastChild">

                       

                                      <mx:Canvas id="myCanvas" backgroundColor="0xEEEEEE" height="300" y="200"  width="600" fontWeight="normal" fontSize="12" backgroundAlpha="0.02" x="0">

                       

                       

                                      </mx:Canvas>

                       

                                  </mx:AddChild>

                       

                             

                       

                              </mx:State>

                       

                          </mx:states>

                       

                         

                       

                                      <mx:TextInput y="50" id="search_text" width="699" horizontalCenter="-41" fontSize="20" color="#4C4C4C" fontWeight="normal" height="36"/>

                       

                                 

                       

                             

                       

                                      <mx:Button x="723" y="50" label="Search" id="search_btn" click="search(search_text.text)" height="36" width="67" borderColor="#3A5262"/>

                       

                                

                       

                       

                       

                       

                      so main is the start state. Going back to main from contactform gives me that error. I can post my whole application if need be.

                      • 8. Re: Using states and a custom component
                        AdrianWiecek Level 3

                        Hi,

                         

                        I think your code is correct. I've created very simple test:

                         

                        //Main.mxml

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application
                            xmlns:mx="http://www.adobe.com/2006/mxml"
                            layout="vertical"
                            xmlns:local="*"
                            currentState="main">
                           
                            <mx:Script>
                                <![CDATA[
                                   
                                    private function changeState():void
                                    {
                                        if(currentState == "main")
                                        {
                                            setCurrentState("contactform");
                                        }
                                    }

                         

                                ]]>
                            </mx:Script>

                         

                            <mx:states>
                                <mx:State name="contactform">
                                    <mx:AddChild position="lastChild">
                                        <local:TestComp/>
                                    </mx:AddChild>
                                </mx:State>
                                <mx:State name="main">
                                    <mx:AddChild position="lastChild">
                                        <mx:Canvas id="myCanvas" backgroundColor="0xEEEEEE" height="300" y="200" 
                                            width="600" fontWeight="normal" fontSize="12" backgroundAlpha="0.02" x="0">
                                        </mx:Canvas>
                                    </mx:AddChild>
                                </mx:State>
                            </mx:states>
                           
                            <mx:TextInput y="50" id="search_text" width="699" horizontalCenter="-41" fontSize="20"
                                color="#4C4C4C" fontWeight="normal" height="36"/>
                            <mx:Button x="723" y="50" label="Search" id="search_btn" click="changeState()"
                                height="36" width="67" borderColor="#3A5262"/>
                           
                        </mx:Application>

                         

                        //TestComp.mxml

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
                            <mx:Script>
                                <![CDATA[
                                    import mx.core.Application;
                                ]]>
                            </mx:Script>
                            <mx:Button label="return" click="Application.application.setCurrentState('main')"/>
                        </mx:Canvas>

                         

                        If you still have problems, please paste more of your code.

                         

                        Regards,

                        Adrian

                        1 person found this helpful
                        • 9. Re: Using states and a custom component
                          adamgeework Level 1

                          <mx:Script>
                                  <![CDATA[
                                      import mx.controls.LinkBar;
                                      import mx.controls.LinkButton;
                                      import mx.core.UIComponent;
                                      import mx.controls.Text;
                                      import flash.text.TextFieldAutoSize;
                                      import flash.text.TextField;
                                      import flash.text.TextFormat;
                                      import flash.net.Responder;
                                      import mx.controls.Alert;
                                      import mx.collections.ArrayCollection;
                                      import flash.display.Sprite;
                                      import flash.display.MovieClip;
                                     
                                      import caurina.transitions.Tweener;
                                     
                                      public var gateway:RemotingConnection;
                                      public var res:Responder = new Responder(onResult,onFault);
                                      public var amt_cnt:Dictionary = new Dictionary(); // keeps track of how many questions there are and how many to show on a single page.
                                      public var mainDict:Dictionary = new Dictionary();
                                      public var full_array:Array = new Array();
                                     
                                      public var mainQsprite:Sprite = new Sprite();
                                     
                                     
                                 
                                     
                             
                                      private function init():void{
                                          gateway = new RemotingConnection("");
                                          this.rawChildren.addChild(mainQsprite);
                                          mainQsprite.y = 100;
                                          mainQsprite.x = 50;
                                      }
                                     
                                 
                                      private function search(s:String):void{
                                         
                                          gateway.call("SearchIt.search", res, s);
                                         
                                         
                                      }
                                     
                                      public function moreHelp(e:MouseEvent):void{
                                         
                                          currentState = "contactform";
                                      }
                                     
                                      public function moreQuestions(e:MouseEvent):void{
                                          amt_cnt.startCache = amt_cnt.endCache;
                                         
                                     
                                         
                                          amt_cnt.count = amt_cnt.count - 1;
                                         
                                          if(amt_cnt.count == 1){
                                              amt_cnt.endCache = amt_cnt.total;
                                          }else{
                                              amt_cnt.endCache = amt_cnt.startCache + 5;
                                          }
                                          mainFunction();
                                      }
                                     
                                      public function clicked(e:MouseEvent):void{
                                          while(mainQsprite.numChildren>0){
                                              mainQsprite.removeChildAt(0);
                                          }
                                          var mainFontSize:int = 20;
                                          var theArray:Object = mainDict[e.currentTarget];
                                         
                                         
                                          var mainFormat:TextFormat = new TextFormat();
                                              mainFormat.font = "Verdana";
                                                 mainFormat.color = 0x000000;
                                              mainFormat.size = mainFontSize;
                                             
                                             
                                         
                                          var mainQ:TextField = new TextField();
                                         
                                          mainQ.defaultTextFormat = mainFormat;
                                          mainQ.text = theArray.question;
                                         
                                          mainQ.width = 700;
                                         
                                          mainQ.border = true;
                                          mainQ.selectable = false;
                                         
                                          var mainnum_Lines:Number = Math.floor(mainQ.textWidth/mainQ.width)+1;
                                         
                                          mainQ.height = ((mainFontSize+8)*mainnum_Lines);
                                          mainQ.wordWrap = true;
                                         
                                         
                                          mainQsprite.addChild(mainQ);
                                     
                                         
                                         
                                      }
                                     
                                      public function over(e:MouseEvent):void{
                                         
                                          //Tweener.addTween(e.currentTarget, {scaleX:1.5, scaleY:1.5, time:0.8, transition:"easeoutelastic"});
                                         
                                      }
                                     
                                      public function out(e:MouseEvent):void{
                                         
                                          //Tweener.addTween(e.currentTarget, {scaleX:1, scaleY:1, time:1, transition:"easeoutexpo"});
                                         
                                      }
                                      public function onResult(responds:Object):void{    //after search complete build an array with all questions
                                          full_array = [];
                                          var top:Boolean;
                                         
                                          for(var s:uint = 0; s<responds.length; s++){
                                             
                                              if(s == 0){   // gives the highest count question the "top" attribute.
                                                 
                                                  top = true;
                                                 
                                              }else{
                                                  top = false;
                                              }
                                              full_array[s] = new Array(responds[s].question, responds[s].answer, responds[s].count, top);
                                             
                                             
                                          }
                                         
                                          var total_amt:Number = full_array.length;
                                          var num_Times:Number = Math.floor(total_amt/5)+1;
                                         
                                          amt_cnt.num_Times = num_Times;
                                          amt_cnt.total = total_amt;
                                         
                                     
                                          amt_cnt.count = amt_cnt.num_Times;
                                          if(amt_cnt.count == 1){
                                              amt_cnt.startCache = 0;
                                              amt_cnt.endCache = amt_cnt.total;
                                          }else{
                                              amt_cnt.startCache = 0;
                                              amt_cnt.endCache = 5;
                                          }
                                         
                                          mainFunction();
                                         
                                      }
                                     
                                     
                                      public function onFault(responds:Object):void{
                                     
                                      }
                                     
                                      public function mainFunction():void{
                                         
                                          var cache:int = 0;
                                         
                                      while(myCanvas.numChildren > 0){
                                         
                                          myCanvas.removeChildAt(0);
                                     
                                      }
                                      while(myCanvas.rawChildren.numChildren > 0){
                                         
                                          myCanvas.rawChildren.removeChildAt(0);
                                      }
                                     
                                     
                                          //text format for links
                                          var hFormat:TextFormat = new TextFormat();
                                               hFormat.font = "Verdana";
                                                 hFormat.color = 0x000000;
                                              hFormat.size = 15;
                                     
                                              //text format end
                                          var sprite1:Sprite = new Sprite();
                                          var textQ:TextField = new TextField();
                                          textQ.mouseEnabled = false;
                                         
                                          if(amt_cnt.count == 1){
                                              amt_cnt.end = amt_cnt.endCache;
                                              amt_cnt.start = amt_cnt.startCache;
                                             
                                     
                                             
                                              //set the text
                                             
                                              textQ.defaultTextFormat = hFormat;
                                              textQ.text = "Can't find your answer? Need more help?";
                                              textQ.x = 275;
                                              textQ.y = 200;
                                              textQ.width = textQ.textWidth +20;
                                              textQ.selectable = false;
                                             
                                             
                                             
                                              sprite1.addChild(textQ);
                                              sprite1.buttonMode = true;
                                              myCanvas.rawChildren.addChild(sprite1);                
                                             
                                              sprite1.addEventListener(MouseEvent.CLICK, moreHelp);
                                             
                                          }else{
                                             
                                              amt_cnt.end = amt_cnt.endCache;
                                              amt_cnt.start = amt_cnt.startCache;
                                             
                                         
                                              textQ.defaultTextFormat = hFormat;
                                              textQ.text = "More Questions...";
                                              textQ.x = 275;
                                              textQ.y = 200;
                                              textQ.width = textQ.textWidth +20;
                                              textQ.selectable = false;
                                             
                                             
                                             
                                              sprite1.addChild(textQ);
                                              sprite1.buttonMode = true;
                                              myCanvas.rawChildren.addChild(sprite1);   
                                             
                                              sprite1.addEventListener(MouseEvent.CLICK, moreQuestions);
                                             
                                         
                                          }
                                         
                                          var fontSize:int = 12;
                                          //text formatting for the displayed question list Begin
                                          var qFormat:TextFormat = new TextFormat();
                                               qFormat.font = "Verdana";
                                                 qFormat.color = 0x000000;
                                              qFormat.size = fontSize;

                           

                                         
                                          //ending text format
                                     
                                          for(var t:uint = amt_cnt.start; t<amt_cnt.end; t++){
                                             
                                              /*if(t == 0){
                                                  var topQ:TextField = new TextField();
                                                 
                                                  topQ.text = full_array[t][1];
                                                 
                                                  mainQsprite.addChild(topQ);
                                              }*/
                                         
                                             
                                              var qSprite:Sprite = new Sprite();
                                              var txt:TextField = new TextField();
                                              txt.defaultTextFormat = qFormat;
                                          
                                              txt.text = full_array[t][0];
                                              txt.selectable = false;
                                              txt.mouseEnabled = false;
                                              txt.border = false;
                                              txt.width = 500; // how wide you want the text to go.
                                             
                                              var numLines:Number = Math.floor(txt.textWidth/txt.width)+1;  //calculates number of lines of the textfield.
                                             
                                             
                                              txt.height = ((fontSize+8)*numLines);
                                         
                                              txt.wordWrap = true;
                                              qSprite.x = 30;
                                              qSprite.y = 500;
                                              var temp_a:Number = cache+10;  //20 is the padding between questions displayed
                                              Tweener.addTween(qSprite, {y:temp_a, time:3, delay:t*0.7, transition:"easeoutexpo"}); //tweener INNNNN!
                                             
                                              cache = txt.height + temp_a;
                                             
                                              qSprite.buttonMode = true;
                                             
                                             
                                             
                                             
                                              mainDict[qSprite] = new Object();
                                              mainDict[qSprite].question = full_array[t][0];
                                              mainDict[qSprite].answer = full_array[t][1];
                                              mainDict[qSprite].count = full_array[t][2];
                                             
                                              qSprite.addChild(txt);
                                             
                                              qSprite.addEventListener(MouseEvent.CLICK, clicked);
                                              qSprite.addEventListener(MouseEvent.MOUSE_OVER, over);
                                              qSprite.addEventListener(MouseEvent.MOUSE_OUT, out);
                                             
                                              myCanvas.rawChildren.addChild(qSprite);
                                             
                                          }  
                                      }
                                     
                                  ]]>
                              </mx:Script>

                           

                          i've added a pastebin link.

                          http://pastebin.com/yeKFd5j8

                           

                          yes the code you gave me is very similar to what i had. I think my problem is my script.

                          • 10. Re: Using states and a custom component
                            adamgeework Level 1

                            do you think it would help if I deleted all Children befor changing to my component state?

                            • 11. Re: Using states and a custom component
                              adamgeework Level 1

                              OK it is MOST DEFINITELY this piece of code that is causing the error:

                               

                              while(myCanvas.rawChildren.numChildren > 0){
                                             
                                              myCanvas.rawChildren.removeChildAt(0);
                                  }

                               

                              >this is executed in the main function.

                               

                               

                              >then change to contactform state.

                               

                              >back to main state I get the error.

                               

                               

                              So this while loop seems to be executing when going back to the main state even though the main Function is not being called.


                              Why is this? To me the while loop just stays there executing when changing between states...

                               

                              What's the solution?