6 Replies Latest reply on Jul 9, 2007 8:01 AM by MLK_SS

    Trynig to access a variable in another mxml

    bitwyse Level 1
      Hi All,

      I'm looking for some guidance here as I am new to Flex. I have a datagrid with two colums at the end that contain item renderers. The idea is to allow the user to cick an edit or delete icon to edit or delete that row. I"m using a component mxml file for each renderer and can not figure out how to access values from the calling application. Since all my web service code etc. is in the parent application, I need to figure out how to access it.

      I have been reading various books and blogs and have tried setting up an event handler in both mxml files but I am unable to get the parent mxml to get the event. Below is some sample code. Any ideas?

      This is the component mxml file . . .
      <?xml version="1.0" encoding="utf-8"?>
      <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" horizontalAlign="center">

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

      <mx:Script>
      <![CDATA[
      private function clickHandler() : void
      {
      import mx.controls.Alert;

      Alert.show( "Called clickHandler in edit item renderer" );

      var eventObj:Event = new Event( "editCurrentHandler" );
      dispatchEvent( eventObj );
      }
      ]]>
      </mx:Script>
      <mx:Image id="imageDelete" source="images/bluepencil.gif" width="20" click="clickHandler()"/>
      </mx:HBox>



      This is an excerpt of the parent mxml file . . .
      private function initApp() : void
      {
      wsProjectInformation.getControlsProjects.send();
      addEventListener( "editCurrentHandler", editCurrentHandler );
      addEventListener( "deleteCurrentHandler", deleteCurrentHandler );

      }

      public function editCurrentHandler() : void
      {
      Alert.show( "Edit was clicked!" );
      }

      public function deleteCurrentHandler() : void
      {
      Alert.show( "Delete was clicked!" );
      }


      <mx:DataGrid id="dataGridDeliverables" visible="false"
      dataProvider="{wsProjectInformation.getProjectDeliverableDocuments.lastResult}"
      change="getProjectTasks()">
      <mx:columns>
      <mx:DataGridColumn headerText="ID #" dataField="projectDeliverableID" width="50"/>
      <mx:DataGridColumn headerText="Description" dataField="projectDeliverableName" width="200"/>
      <mx:DataGridColumn headerText="Est. Hours" dataField="projectEstHours" width="80"/>
      <mx:DataGridColumn headerText="Est. Dollars" dataField="projectEstDollars" width="80"/>
      <mx:DataGridColumn width="20" itemRenderer="com.psc.components.editRenderer"/>
      <mx:DataGridColumn width="20" itemRenderer="com.psc.components.deleteRenderer"/>
      </mx:columns>
      </mx:DataGrid>
        • 1. Re: Trynig to access a variable in another mxml
          peterent Level 2
          If I'm reading your entry correctly, this might be a little easier than you think. So you have a delete icon in a cell on a row. You want to click that icon and have the row deleted - is that right? Same for edit.

          Let's say your itemRenderer for that delete column is a Button with its icon property set (or maybe you are using the icon as a skin). When you click the Button an event is dispatched - a MouseEvent.CLICK event to be specific.

          That event is a bubbling event - meaning that travels up the parent-child UI chain until some piece of code intercepts it. Which means you can do this:

          <mx:DataGrid ... click="handleGridClick(event)" ... >

          That's right - add a click event handler to your DataGrid. The function takes a MouseEvent. Now any click on the DataGrid is going to trigger this event, so the function has to determine what triggered it.

          if( event.currentTarget is DeleteButton ) ...

          If your itemRenderer is a class called DeleteButton, the above test inside the click event handler will let you know that the click resulted from the delete button in a row. Now all you have to do is delete the corresponding record from the data provider.

          Likewise for the Edit event.
          • 2. Re: Trynig to access a variable in another mxml
            bitwyse Level 1
            Hi Peter,

            Thanks for the reply. I understand most everything your saying with one exception. Determining what was clicked. If you look at my item renderer in the code I sent, I'm not using a class. I was trying the event approach but didn't realize I could use the click event of the datagrid.

            Can you enlighten me how to figure out what was clicked? I'm using an image in the renderer, should I change that to a button? Or can I access a property of the image somehow?

            I appreciate all your help. As I am new to flex, I am a developer for many years. it's frustrating to not be able to just figure these things out!
            • 3. Re: Trynig to access a variable in another mxml
              peterent Level 2
              You do, in fact, have a class. Any MXML file is first turned into an ActionScript class and then that's compiled into your SWF. So you have this in your program:

              <mx:DataGridColumn width="20" itemRenderer="com.psc.components.deleteRenderer"/>

              So the if-statement would read: if( event.currentTarget is deleteRenderer )

              But the more I think about it, the more I realize this probably won't work. The event.currentTarget is going to be the Button itself, not the class which contains the Button (unless deleteRenderer extends Button - has it as its root tag).

              Inside your deleteRenderer, give the Button a specific ID like 'deleteButton' then you can do this:

              if( event.currentTarget.id == "deleteButton" )

              instead of checking for the class.

              I would run the app in the debugger and set a break-point inside the event handler. Then examine the event to see what data types you have. I believe currentTarget will be the Button and target the DataGrid - but I sometimes get these backwards.
              • 4. Re: Trynig to access a variable in another mxml
                bitwyse Level 1
                I don't mean to be a pest but I'm still struggling with this. . .I must be a goof but when I do that, the event comes from my data grid not my item renderer.


                <mx:DataGrid id="dataGridDeliverables" visible="false"
                dataProvider="{wsProjectInformation.getProjectDeliverableDocuments.lastResult}"
                click="dgDeliverableClickHandler( event )">
                <mx:columns>
                <mx:DataGridColumn headerText="ID #" dataField="projectDeliverableID" width="50"/>
                <mx:DataGridColumn headerText="Description" dataField="projectDeliverableName" width="200"/>
                <mx:DataGridColumn headerText="Est. Hours" dataField="projectEstHours" width="80"/>
                <mx:DataGridColumn headerText="Est. Dollars" dataField="projectEstDollars" width="80"/>
                <mx:DataGridColumn width="20" itemRenderer="com.psc.components.editRenderer"/>
                <mx:DataGridColumn width="20" itemRenderer="com.psc.components.deleteRenderer"/>
                </mx:columns>
                </mx:DataGrid>

                private function dgDeliverableClickHandler( event:Event ) : void
                {
                if( event.currentTarget.id == "imageEdit" )
                {
                editCurrentHandler();
                }
                else if( event.currentTarget.id == "imageDelete" )
                {
                deleteCurrentHandler();
                }
                else
                {
                getProjectTasks();
                }
                }

                private function editCurrentHandler() : void
                {
                Alert.show( "Edit was clicked!" );
                }

                private function deleteCurrentHandler() : void
                {
                Alert.show( "Delete was clicked!" );
                }

                • 5. Re: Trynig to access a variable in another mxml
                  bitwyse Level 1
                  I finally got this issue resolved. The key was creating my own datagrid class and adding my own events so they get called from my component item renderers. This was a bit over my head but thx to Adobe support for the assistance with this one!

                  package
                  {


                  import mx.controls.DataGrid;
                  import mx.events.ListEvent;

                  [Event( name = "MyDeleteCurrentEvent", type = "mx.events.ListEvent" ) ]
                  [Event( name = "MyEditCurrentEvent", type = "mx.events.ListEvent" ) ]

                  public class MyDataGrid extends DataGrid
                  {

                  public static var MY_DELETE_CURRENT_EVENT:String="MyDeleteCurrentEvent";
                  public static var MY_EDIT_CURRENT_EVENT:String="MyEditCurrentEvent";

                  public function MyDataGrid() { super()}

                  }
                  }

                  From my clickhandler in the component mxml
                  var event:ListEvent = new ListEvent( MyDataGrid.MY_EDIT_CURRENT_EVENT );
                  event.itemRenderer = this;
                  owner.dispatchEvent(event);
                  • 6. Trynig to access a variable in another mxml
                    MLK_SS
                    Hi,

                    I am new to Flex development and need to insert/ delete and edit a row according to the user click inside the data grid.

                    Can you please forward me the code that shows how to edit/delete rows inside the data grid.


                    Thanks for your time and consideration!!