4 Replies Latest reply on Apr 16, 2008 5:42 AM by TrAvIkK

    My component

    TrAvIkK
      Hi.

      I wanted to create my own component, which would have 1 Label and 1 button.
      The idea is, that I can change Component's label from .as file. The button is for closing that component, which really would be a popup window. Is it possible?

        • 1. Re: My component
          peterskeeter
          I use this sort of functionality to present user with a popup, enter a value and hit ok or cancel....
          Here is my component


          <!-- <?xml version="1.0" encoding="utf-8"?>-->
          <mx:TitleWindow xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()" width="294" height="162" horizontalAlign="center" verticalAlign="middle" borderColor="#030000">
          <mx:Metadata>
          [Event("closepopup")]
          [Event("save_assessment_mark")]
          </mx:Metadata>
          <mx:Script>
          <![CDATA[
          import mx.controls.DataGrid;
          import mx.utils.ArrayUtil;
          import mx.collections.ArrayCollection;
          import mx.collections.IViewCursor;
          import mx.controls.Alert;
          import mx.events.*;
          import mx.controls.dataGridClasses.DataGridListData;
          import mx.controls.listClasses.BaseListData;
          import mx.controls.dataGridClasses.DataGridColumn;
          import mx.managers.PopUpManager;
          import mx.core.Application;
          var student_name:String;
          //------------------------------------------------------------------------------
          function init():void {
          PopUpManager.centerPopUp(this);
          LBL_title.text = "Assessment mark for " + student_name;
          TXT_***_mark.setFocus();
          }
          //------------------------------------------------------------------------------
          private function close():void{
          PopUpManager.removePopUp(this);
          }
          //------------------------------------------------------------------------------
          function popupResult():void {
          dispatchEvent(new MyClosePopupEvent({mark:TXT_***_mark.text}));
          PopUpManager.removePopUp(this);
          }
          //------------------------------------------------------------------------------
          ]]>
          </mx:Script>
          <mx:Label id="LBL_title" width="253" fontWeight="bold" textAlign="center"/>
          <mx:TextInput width="62" id="TXT_***_mark"/>
          <mx:HBox width="248" height="46" horizontalAlign="center" verticalAlign="middle">
          <mx:Button label="OK" click="popupResult()" id="ok"/>
          <mx:Button label="Cancel" click="close()" id="cancel"/>
          </mx:HBox>
          </mx:TitleWindow>




          Here is the caller of the component in the main .mxml

          var pop:AssessmentMarkPopup = AssessmentMarkPopup(PopUpManager.createPopUp(this,AssessmentMarkPopup,true));
          pop.addEventListener("closepopup",onClose);
          pop.addEventListener("save_assessment_mark", ***_mark_changed,false);
          pop.TXT_***_mark.text = this.BTN_***_mark.label;
          var row:int = this.parentApplication.DG_class_students.selectedIndex;
          pop.student_name = this.parentApplication.DG_class_students.selectedItem.firstname + " " + this.parentApplication.DG_class_students.selectedItem.lastname;

          Hope this helps...
          • 2. My component
            TrAvIkK Level 1
            Hm that helps ;)
            What would mean the code i've attached?
            OKay, now - can I determine, which button was pressed (OK or Cancel) in main .mxml file?
            • 3. Re: My component
              peterskeeter Level 1
              <mx:Metadata>
              [Event("closepopup")]
              [Event("save_assessment_mark")]
              </mx:Metadata>

              http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=metadata_141_09.html

              that code defines the events that a component 'emits'. Interesting enough I commented mine out and my event handlers and all still fired ok without any compilation errors...i guess we dont need em if it dont complain !

              Yes you can tell which button was pressed because of these 2 lines in the main.mxml

              pop.addEventListener("closepopup",onClose);
              pop.addEventListener("save_assessment_mark", ***_mark_changed,false);

              see how the first one will call the onClose() function ..thats my cancel button.
              The second is the ok button it will call the save_assessment_mark() function if ok was pressed in the component.


              oops I forgot to mention this important piece of glue.. "MyClosePopupEvent.as" file which is referenced in the previous code...

              // ActionScript file
              package
              {
              import flash.events.Event;

              public class MyClosePopupEvent extends Event
              {

              public var data:Object;

              public function MyClosePopupEvent(data:Object, bubbles:Boolean=false, cancelable:Boolean=false)
              {
              super("closepopup", bubbles, cancelable);
              this.data = data;
              }

              }
              }


              This custom "event wrapper" is dispatched from within my popup/component. Its job is to transport the data from the popup to the main.mxml..

              Hope that makes sense !
              • 4. Re: My component
                TrAvIkK Level 1
                Yes, it does make sense.
                Thank you for your help.