2 Replies Latest reply on Sep 3, 2009 11:44 AM by Powder77

    Component button Click Event

    Powder77 Level 1

      Hi

       

      I have a custom component that is a login form. This login form will have muilitple uses so I don't want to set the click event on the login button in the custom component but I want to set the click event of the button in the component from the parent eg from the <application> I want to do this in MXML as i want don't want any AS in the default <application> file

       

      Here is my code the custom component is <ns1:LoginPanel id="loginpanel1" /> right at the bottom of the code below

       

      Default Application file
      
      
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="*" borderStyle="inset" borderColor="#B7BABC" cornerRadius="15" horizontalAlign="center" verticalAlign="top" xmlns:grc="grc.*" xmlns:events="flash.events.*">
       <mx:states>
        <mx:State name="MainApp">
         <mx:RemoveChild target="{loginpanel1}"/>
         <mx:AddChild position="lastChild">
          <mx:Label text="User Has Now Logged Inn" fontSize="30"/>
         </mx:AddChild>
         <mx:AddChild position="lastChild">
          <mx:Label id="username"/>
         </mx:AddChild>
         <mx:AddChild position="lastChild">
          <mx:Button label="Button" />
         </mx:AddChild>
         <mx:RemoveChild target="{image1}"/>
        </mx:State>
       </mx:states>
       <mx:Style source="yflexskin.css" />
       <mx:Image source="@Embed('images/engage_logo.png')" id="image1"/>
       <grc:Initialize id="remoteService"/>
       <ns1:LoginPanel id="loginpanel1" />  <<-- Here is the Custom Component I have a button called "loginButton" in the component how do I set the click event for the button from here using MXML
      </mx:Application>
      

       

      Thanks in advance for any help it is driving me crazy as an new to Flex, but come from a PHP back gorund. Must say am very impressed with flex for RIA

       

      Regards

      Chris

        • 1. Re: Component button Click Event
          Andrew Rosewarn Level 3

          Hi there

           

          Handle your click event in the custom component but only to dispatch an event to show the button it clicked.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
              <mx:Script>
                  <![CDATA[
                      private function clickHandler():void {
                          dispatchEvent(new Event('myClickEvent')):
                      }
                  ]]>
              </mx:Script>
             
              <mx:Metadata>
                  [Event(name="myClickEvent" type="flash.events.Event")]
              </mx:Metadata>
             
              <mx:Button x="10" y="20" label="Button" click="clickHandler()"/>
             
          </mx:Canvas>

           

          By using the <MetaData> tag you expose your custom event to mxml when you use your customComp tag in your main App.  So in your main app you can handle it there

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
              <ns1:CustComp x="23" y="28" myClickEvent="myClickHandler()">
              </ns1:CustComp>
          </mx:Application>

           

          That way you can write many event handlers for the different ways to want when you instansiate your custom comp.

           

          Hope that helps

           

          Andrew

          • 2. Re: Component button Click Event
            Powder77 Level 1

            Thanks Andrew just what I was looking for your a star