6 Replies Latest reply on Dec 18, 2009 1:39 AM by sudhi.vga

    handling events one mxml component to another

    sudhi.vga

      I m new in Flex Application. During a Flex Application Developement I am facing a problem.

      I have 3 mxml Componnet Files.

      a) Search.mxml,
      b) PrimaryDetails.mxml, c) AddressDetails.mxml


      These 3 component files arranged by Accordion in  main application main.mxml

      User will search and click an item in search.mxml, then display details in other 2 components.

       

      I m using dispatchevent method, but I could not solve the problem
      Can anyone tell me how can I handling events one mxml component to another component.

      but these components are arranged in Accordion or Tabnavigator.

        • 1. Re: handling events one mxml component to another
          Gregory Lafrance Level 6

          You might try listening for the events at the container (Accordion) level, that way you can respond when any of the child custom components fires an event.

           

          If this post answers your question or helps, please mark it as such.


          Greg Lafrance
          www.ChikaraDev.com

          Flex Development and Support Services

          • 2. Re: handling events one mxml component to another
            sudhi.vga Level 1

            I m sorry, I m new in flex

             

            Please give a example for  listening for events at the container (Accordion) level.

             

            How can I handle dispatch event one child component to other child component which contains other container.

             

            please,

            • 3. Re: handling events one mxml component to another
              Gregory Lafrance Level 6

              If this post answers your question or helps, please mark it as such.


              Greg Lafrance
              www.ChikaraDev.com

              Flex Development and Support Services

              ----- MainApp.mxml -----

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:comp="components.*" creationComplete="init();">
                <mx:Script>
                  <![CDATA[
                    private function init():void{
                      addEventListener(MouseEvent.CLICK, clickHandlerFunc);
                    }
                    
                    private function clickHandlerFunc(evt:MouseEvent):void{
                      txt.text = evt.target.label;
                    }
                  ]]>
                </mx:Script>
                <mx:HBox>
                  <mx:Label text="Event was dispatched by:"/>
                  <mx:Text id="txt"/>    
                </mx:HBox>
                <mx:Accordion>
                  <comp:Comp1 label="Foods"/>
                  <comp:Comp2 label="Drinks"/>
                </mx:Accordion>
              </mx:Application>
              


              ----- components/Comp1.mxml -----

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="dataSvc.send();">
                <mx:Script>
                  <![CDATA[
                    import mx.rpc.events.ResultEvent;
                    import mx.collections.XMLListCollection;
                    
                    [Bindable] private var dataXLC:XMLListCollection = new XMLListCollection();
                    
                    private function handleData(evt:ResultEvent):void{
                      dataXLC = new XMLListCollection(evt.result..item);
                    }
                  ]]>
                </mx:Script>
                <mx:HTTPService id="dataSvc" url="components/comp1.xml" useProxy="false" 
                  result="handleData(event);" resultFormat="e4x"/>
                <mx:Button label="Button One"/>    
                <mx:DataGrid dataProvider="{dataXLC}">
                  <mx:columns>
                    <mx:DataGridColumn dataField="id" width="50"/>
                    <mx:DataGridColumn dataField="food" width="100"/>
                  </mx:columns>
                </mx:DataGrid>  
              </mx:VBox>
              

              ----- components/Comp2.mxml -----

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="dataSvc.send();">
                <mx:Script>
                  <![CDATA[
                    import mx.rpc.events.ResultEvent;
                    import mx.collections.XMLListCollection;
                    
                    [Bindable] private var dataXLC:XMLListCollection;
                    
                    private function handleData(evt:ResultEvent):void{
                      dataXLC = new XMLListCollection(evt.result..item);
                    }
                  ]]>
                </mx:Script>
                <mx:HTTPService id="dataSvc" url="components/comp2.xml" useProxy="false" 
                  result="handleData(event);" resultFormat="e4x"/>
                <mx:Button label="Button Two"/>
                <mx:DataGrid dataProvider="{dataXLC}">
                  <mx:columns>
                    <mx:DataGridColumn dataField="id" width="50"/>
                    <mx:DataGridColumn dataField="drink" width="100"/>
                  </mx:columns>
                </mx:DataGrid>  
              </mx:VBox>
              

               

              ----- components/comp1.xml -----

               

              <?xml version="1.0" encoding="utf-8"?>
              <data>
                <foods>
                  <item>
                    <id>001</id>
                    <food>meat</food>
                  </item>
                  <item>
                    <id>002</id>
                    <food>fish</food>
                  </item>
                  <item>
                    <id>003</id>
                    <food>chicken</food>
                  </item>
                </foods>
              </data>
              

               

              ----- components/comp2.xml -----

               

              <?xml version="1.0" encoding="utf-8"?>
              <data>
                <drinks>
                  <item>
                    <id>001</id>
                    <drink>soda</drink>
                  </item>
                  <item>
                    <id>002</id>
                    <drink>juice</drink>
                  </item>
                  <item>
                    <id>003</id>
                    <drink>wine</drink>
                  </item>
                </drinks>
              </data>
              
              • 4. Re: handling events one mxml component to another
                sudhi.vga Level 1

                Thanks.

                 

                I have one problem that How can I call a function of Comp2.mxml from Comp1.mxml ?

                 

                I wrote as like this in Comp1.mxml

                 

                private function OnClick(event:MouseEvent):void{
                          var objComp2:Comp2=new Comp2;
                        objComp2.Onclick(event);
                    
                      }

                 

                and in Comp2.mxl

                 

                public function Onclick(event:MouseEvent):void
                      {
                              btnTwo.label="Disp";
                      }

                would you please give me a correct method.

                 

                and alos inform u. I have no expreince in Flex. Now I am working on .Net applications (C#, asp.net). My requirement that create a power ful user interface using webservices created by .net.  is it feasible ?.

                • 5. Re: handling events one mxml component to another
                  Gregory Lafrance Level 6

                  If you are creating an instance of Comp2 just to call the function, then just make it a static function:

                   

                  public static function comp2Func():void{
                      btnTwo.label="Disp";
                  }

                   

                  If you code is just simplified for this post, then perhaps this:

                   

                  private function OnClick(event:MouseEvent):void{
                      var objComp2:Comp2=new Comp2;
                      objComp2.comp2Func();    
                  }

                   

                  and in Comp2.mxl

                   

                  public function comp2Func():void{
                      btnTwo.label="Disp";
                  }

                   

                  You could do things as you had in your code, but if you don't mae use of the MouseEvent no need to pass it.

                   

                  If this post answers your question or helps, please mark it as such.


                  Greg Lafrance
                  www.ChikaraDev.com

                  Flex Development and Support Services