3 Replies Latest reply on Apr 20, 2011 9:51 AM by bucpatr1

    Using Custom Component




      I have created a login form custom MXML component. It has 2 text fields and a login button in components package. Now I want to use it in my application. I have declared namespace           xmlns:comp="./components".


      and added the component as <comp:loginForm/>


      Its fine till now. But now I have a text area which should display entered username and password when i click login button. How to handle components inside custom components? I mean how to access/handle click event of login button inside my custom login form mxml component?


      Should I redeclare button and textfields for using them? If so where is the reusability of components and why to make custom MXML components in the first place? I have a serious doubt that my basic understanding is wrong. Help Me if so.




      Thanks in Advance,


        • 1. Re: Using Custom Component
          EvyatarBH Level 3

          Your options are as follows -

          1.Capture the event using the events bubbling mechanism (Never tried it personally)

          2. Handle the event inside the custom component, either locally or by causing button dispatching some custom event and handle it elsewhere, like you do with Cairngorm framework


          Note that my answer is limited to my experience and common sense...

          • 2. Re: Using Custom Component
            l33tian Level 1

            You should handle almost every login logic inside the components itself, if you need to pass variables to and from you component, Id the component and try to access the variables the way u access properties of predifined components...its just a guess, i have never tried it

            • 3. Re: Using Custom Component
              bucpatr1 Level 2

              Standard procedure for something like this ( assuming you aren't using a third-party framework like Cairngorm or Granite) is to expose the event inside your custom component using a Metadata declaration. Then you can listen for and respond to the exposed event in the parent component where your custom component is being used. For example, in the Login form you would add a tag like this:


              <fx:Metadata> [Event( name="loginClicked", type="flash.events.Event") ] </fx:Metadata>


              <s:Button id="myButton" label="login" click="{dispatchEvent( new Event('loginClicked', true, false) ) }" />


              Then in your parent compoenent you would add an event handler in the mxml tag of the login form declaration:




              <s:TextArea id="txtArea"/>


              <comp:loginForm id="form1" loginClicked="{ someHandlerMethod() }" />





              If you really wanted to get fancy you could also define a custom event class with additonal fields for transfering the username and password data out to the parent rather than having to 'reach in' to the login form to pull that data out. Usually that's overkill though unless those fields are private. If yo do decide to do that you would simply have to replace "flash.events.Event" in the Event tag with the fully qualified class name of you custom event and pass in the data as parameters when creating a new event in the click handler.


              Hope that helps.