6 Replies Latest reply on Dec 7, 2006 1:33 PM by dimival

    Creating and using Custom Events

    davidmedifit
      Hello, I have a custom component, which is essentially a form, populated with select fields from a datagrid. I want a button on the form to switch the currentState of application from the default to "edit". I have made a try at this, but haven't gotten very far.

      I am trying to create a custom event from the component, to be listened for in the main application. I think it's the latter I'm havinf trouble with.

      First of all, is this the best way to do things? I thought it would be. My code is below, any help would be appreciated.

      Cheers,

      David

      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
      creationComplete="create1()" xmlns:components="components.*">
      <mx:Script>
      <![CDATA[
      public function stateChangeToEdit(eventObj:Event):void{
      currentState='edit'; //Do I need to qualify the application scope?
      }
      //This is where I think I should be "listening" for the even, but I'm unsure of the correct syntax
      ]]>
      </mx:Script>
      .. <!-- datagrid, webservice call, etc -->
      ..<!-- Call to component-->
      <components:form itemNameSet="{dg.selectedItem.ITEMNAME}" itemTypeSet="{dg.selectedItem.ITEMTYPE}"/>
      </mx:Panel>
      </mx:HBox>
      </mx:Application>

      <!-- component code -->

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Form xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%">
      <mx:Metadata>
      [Event (name="stateChangeToEdit", type="flash.events.Event")]
      </mx:Metadata>
      <mx:Script>
      <![CDATA[
      [Bindable] public var _itemName:String;
      [Bindable] public var _itemType:String;

      public function set itemNameSet(itemName_value:String):void
      {
      _itemName = itemName_value;
      }

      public function set itemTypeSet(itemType_value:String):void
      {
      _itemType = itemType_value;
      }

      public function buttonClickHandler():void{
      var eventObj:Event=new Event("stateChangeToEdit");
      dispatchEvent(eventObj);
      }
      ]]>
      </mx:Script>

      <mx:FormItem label="Item Name:" id="formitem2">
      <mx:Text id="itemName" text="{_itemName}"/>
      </mx:FormItem>
      <mx:FormItem label="Item Type:" id="formitem1">
      <mx:Text id="itemType" text="{_itemType}"/>
      </mx:FormItem>
      <mx:FormItem width="140" id="formitem3">
      <mx:Button label="Edit" id="button1" click="buttonClickHandler()"/>
      </mx:FormItem>
      </mx:Form>
        • 1. Re: Creating and using Custom Events
          dimival Level 1
          You need to add an eventListener to listen to the event. First give an id to your custom component:

          <components:form id="myForm" itemNameSet="{dg.selectedItem.ITEMNAME}" itemTypeSet="{dg.selectedItem.ITEMTYPE}"/>

          Now you are calling a create1function which is not declared anywhere, so change your application's script code to this:

          <mx:Script>
          <![CDATA[

          public function create1() : void
          {
          myForm.addEventListener('stateChangeToEdit', stateChangeToEdit);
          }

          public function stateChangeToEdit(eventObj:Event):void{
          currentState='edit'; //Do I need to qualify the application scope?
          }
          ]]>
          </mx:Script>

          Try this and let me know if it worked
          • 2. Re: Creating and using Custom Events
            davidmedifit Level 1
            dimival,
            That worked a charm - thanks! Just so I understand fully, I need to tell the application to listen for an event coming from a particular component - so if I wanted one component to listen to another components event, I would have to reference it by ID, correct? Is there a way to "globally" listen for events?

            If I was dynamically generating components, how difficult would it be to create listeners for those components (I am think along the lines of a repeater) - not too sure how abstract that questions is.

            Thanks again - one roadblock passed...on to the next!

            David
            • 3. Re: Creating and using Custom Events
              davidmedifit Level 1
              dimival,
              That worked a charm - thanks! Just so I understand fully, I need to tell the application to listen for an event coming from a particular component - so if I wanted one component to listen to another components event, I would have to reference it by ID, correct? Is there a way to "globally" listen for events?

              If I was dynamically generating components, how difficult would it be to create listeners for those components (I am think along the lines of a repeater) - not too sure how abstract that questions is.

              Thanks again - one roadblock passed...on to the next!

              David
              • 4. Re: Creating and using Custom Events
                dimival Level 1
                I suggest you to read the Events Chapter in the the Flex 2 Developer's Guide, you will understand it better than if i try to explain it :P, but read it because events have some limitations.
                I am glad i could help you out
                • 5. Re: Creating and using Custom Events
                  davidmedifit Level 1
                  Dimival,
                  Did you just tell me to RTFM? Oh, the indignity!

                  I did actually suffer through the Flex 2 Developers Guide, without getting the answer I needed - then I discovered on the Adobe site the guide to "Creating and Extending Components" - much better!

                  For what it's worth, I found that if you declare a custom event in a component, and then reference that component in MXML from your main app, the event appears as an referencable method when you press the space bar (if you have FB2, that is).

                  In my particular situation, I found this easier than manually coding the listener. That was partially becuase I was trying to reference events in components that were rendered in different states (not the default), and to code the listener in a "createComplete" function was causing en error.

                  Thanks, again, for your help.

                  David
                  • 6. Re: Creating and using Custom Events
                    dimival Level 1
                    Sometime RTFM helps jejejeje, i am glad you made it work now.