2 Replies Latest reply on Apr 5, 2010 11:30 PM by Flex harUI

    Ambiguity

    JPAntona

      I have created a custom component (not my first one - I've had success with this already). In fact, I have a custom component nested within another custom component. In the parent component, I reference the MXML tag of the child component (custom:GridRow) and I give it an ID value (see below). In the corresponding ActionScript class, I define a public variable with the name matching the ID tag value and the type assigned to the ActionScript class that corresponds to the child component (GridRow). I have a button in the parent component that adds more of the child components with each press. Everything compiled. Testing demonstrated that it was not rendering the presentation layer of the component. That is, it was sizing the UI as if the each added child component was there but nothing more than a blank canvas (which is what the child component extends) was being painted. It was as if the ActionScript class was not bound to the MXML presentation definition. Then I noticed that I did not add [Bindable] annotation before the child component class definition. So I added it.Immediately, nothing would compile. I started getting the following error on the line where I declare the child component variable in the parent AS definition.

       

      Can not resolve a multiname reference unambiguously. GridRow (from  C:\apps\FlexSpace\src\GridRow.mxml) and com.pbsj.flex.component:GridRow  (from C:\apps\FlexSpace\src\com\pbsj\flex\component\GridRow.as) are  available.    TimcardXfer/src/com/pbsj/flex/component    XferGrid.as     Unknown    1270487674813    2005

       

      Now I am confused. Help me! I want the MXML definition to be bound to every reference to the AS class, escpecially when I add the AS class as a child to a parent component.

       

      Here is the parent component MXML (a snippet):

       

      <?xml version="1.0" encoding="utf-8"?>
      <custom:XferGrid xmlns:custom="com.pbsj.flex.component.*"
           xmlns:mx="http://www.adobe.com/2006/mxml"
           width="100%"
           clipContent="false" xmlns:local="*">

       

          <mx:Canvas id="tblButtons" width="50%">
              ...MXML code here
          </mx:Canvas>
          <mx:Canvas id="tblFtr" width="100%">
              ...MXML code here
          </mx:Canvas>
          <mx:Canvas id="tblHeader" width="100%" x="1" y="1" >
              ...MXML code here
          </mx:Canvas>
         
         
          <!-- every row in the table will be a copy of this row -->
          <custom:GridRow id="tblRow" width="100%"/>
         
      </custom:XferGrid>

       

      Here is the child component MXML:

       

      <?xml version="1.0" encoding="utf-8"?>
      <custom:GridRow xmlns:custom="com.pbsj.flex.component.*"
           xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
           clipContent="false" >
         
          <mx:Grid width="100%" styleName="timecTable">
              <mx:GridRow width="100%" height="100%" id="grdTemplate" >
                  ...MXML code here
                  <mx:GridItem  styleName="timecTable" width="5%" id="col14">
                      <mx:TextInput width="100%"/>
                  </mx:GridItem>
              </mx:GridRow>
          </mx:Grid>
         
      </custom:GridRow>

       

      Here is the parent component AS:

      package com.pbsj.flex.component
      {
          import com.pbsj.flex.util.PbsjUtil;
         
          import flash.display.DisplayObject;
          import flash.events.MouseEvent;
          import flash.utils.describeType;
         
          import mx.containers.Canvas;
          import mx.containers.GridItem;
          import mx.events.FlexEvent;
          import mx.events.ItemClickEvent;
          import mx.logging.*;
          import mx.logging.targets.*;

       

          [Bindable]
          public class XferGrid extends Canvas
          {
              public var logLevl:int = LogEventLevel.ERROR
              public var tblHeader:Canvas;
              public var tblRow:GridRow;
              public var tblFtr:Canvas;
              public var tblButtons:Canvas;
              public var separation:int = 1;
              private var numCols:int = 14
              private var xLogger:ILogger;
              private var selectedRow:int = 3 // first row is the 3rd child of this component; we're really tracking child
             
              public function XferGrid()
              {
                  super();
                  initLogging();
                  init();
              }
             
              private function init():void {
                  // add event listeners
                  this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
              }
             
              private function initLogging():void {
                  // Create a target.
                  var logTarget:TraceTarget = new TraceTarget();

       

                  // Log only messages for the pbsj classes
                  logTarget.filters=["com.pbsj.*"];

       

                  // Log all log levels.
                  logTarget.level = logLevl;

       

                  // Add date, time, category, and log level to the output.
                  logTarget.includeDate = true;
                  logTarget.includeTime = true;
                  logTarget.includeCategory = true;
                  logTarget.includeLevel = true;

       

                  // Begin logging.
                  Log.addTarget(logTarget);
                  xLogger = Log.getLogger("XferGrid");
              }
             
              private function creationCompleteHandler(event:FlexEvent):void{
                  try {
                      //this.parent.setChildIndex(this,this.parent.numChildren-1);
                     
                      // position the elements correctly
                      tblRow.rowNum = 3;
                      tblRow.x = tblHeader.x;
                      tblRow.y = tblHeader.y + tblHeader.height + separation;
                      tblRow.width = tblHeader.width;
                      tblFtr.x = tblRow.x;
                      tblFtr.y = tblRow.y + tblRow.height + separation;
                      tblFtr.width = tblHeader.width;
                      tblButtons.x = tblHeader.x;
                      tblButtons.y = tblFtr.y + tblFtr.height + 25;
                      // align all the column boundaries
                      alignColumnWidths(tblHeader,tblRow,this.numCols);
                      //alignColumnBoundaries(tblHeader,tblFtr,this.numCols);
                     
                      // set the event handlers
                      this.addEventListener(MouseEvent.MOUSE_DOWN,recordRowFocus);
                  } catch ( error:Error ) {
                      xLogger.log(LogEventLevel.ERROR,"creationCompleteHandler: " + error.message);
                      throw error;
                  }
                 
              }
             
              private function alignColumnWidths(hdrComp:Canvas, rowComp:Canvas, numCols:int):void {
                  var hgi:GridItem;
                  var rgi:GridItem;
                  for ( var i:int = 1; i <= numCols ; i++ ) {
                      hgi = GridItem(PbsjUtil.getDescendentById(hdrComp,"col"+i));
                      rgi = GridItem(PbsjUtil.getDescendentById(rowComp,"col"+i));
                      rgi.width = hgi.width;
                  }
              }
             
              public function actionHandler(evt:ItemClickEvent):void {
                  if ( evt.label == "Add" ) {
                      var highRow:com.pbsj.flex.component.GridRow = this.getLastRow();
                      var newRow:com.pbsj.flex.component.GridRow = new com.pbsj.flex.component.GridRow();
                      newRow.x = highRow.x;
                      newRow.y = highRow.y + highRow.height + separation;
                      newRow.width = tblHeader.width;
                      newRow.height = tblRow.height;
                      newRow.rowNum = highRow.rowNum + 1;
                      tblFtr.x = newRow.x;
                      tblFtr.y = newRow.y + newRow.height + separation;
                      tblFtr.width = tblHeader.width;
                      tblButtons.x = tblHeader.x;
                      tblButtons.y = tblFtr.y + tblFtr.height + 25;
                      newRow.visible = true;
                     
                      this.addChild(newRow);
                     
                  } else if ( evt.label == "Remove" ) {
                     
                  } else if ( evt.label == "Copy" ) {
                     
                  } else if ( evt.label == "Clear" ) {
                     
                  }
              }
             
              private function recordRowFocus(evt:MouseEvent):void {
                  try {
                      var dobj:DisplayObject = DisplayObject(evt.target);
                      var selRow:com.pbsj.flex.component.GridRow;
                      selRow = com.pbsj.flex.component.GridRow(PbsjUtil.getAncestorByType(dobj,"GridRow"));
                      this.selectedRow = this.getChildIndex(selRow);
                      //Alert.show("recordRowFocus " + this.selectedRow);
                  } catch ( err:Error ) {
                      // do nothing
                  }
                 
              }
             
              private function getLastRow():com.pbsj.flex.component.GridRow {
                  var hrow:com.pbsj.flex.component.GridRow;
                  var nrow:com.pbsj.flex.component.GridRow;
                  var xType:XML;
                  for ( var i:int = 0; i < this.numChildren; i++ ) {
                      xType = describeType(this.getChildAt(i));
                      if ( xType.@name == "GridRow" ) {
                          nrow = com.pbsj.flex.component.GridRow(this.getChildAt(i));
                          if ( hrow == null ) {
                              hrow = nrow;
                          } else {
                              if ( nrow.rowNum > hrow.rowNum ) {
                                  hrow = nrow;
                              }
                          }
                      }
                  }
                  return hrow;
              }
          }
      }

       

       

      Here is the child component AS:

      package com.pbsj.flex.component
      {
          import mx.containers.Canvas;
          import mx.logging.*;
          import mx.logging.targets.*;
          import mx.events.FlexEvent;

       

          [Bindable]
          public class GridRow extends Canvas
          {
              public var logLevl:int = LogEventLevel.ERROR
              private var xLogger:ILogger;
              public var rowNum:int;
             
              public function GridRow()
              {
                  super();
                  initLogging();
                  init();
              }
             
              private function init():void {
                  // add event listeners
                  this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
              }
             
              private function initLogging():void {
                  // Create a target.
                  var logTarget:TraceTarget = new TraceTarget();

       

                  // Log only messages for the pbsj classes
                  logTarget.filters=["com.pbsj.*"];

       

                  // Log all log levels.
                  logTarget.level = logLevl;

       

                  // Add date, time, category, and log level to the output.
                  logTarget.includeDate = true;
                  logTarget.includeTime = true;
                  logTarget.includeCategory = true;
                  logTarget.includeLevel = true;

       

                  // Begin logging.
                  Log.addTarget(logTarget);
                  xLogger = Log.getLogger("GridRow");
              }
             
              private function creationCompleteHandler(event:FlexEvent):void{
                  try {
                      //this.parent.setChildIndex(this,this.parent.numChildren-1);
                     
                      // position the elements correctly
                     
                      //alignColumnBoundaries(tblHeader,tblFtr,this.numCols);
                     
                      // set the event handlers
                     
                  } catch ( error:Error ) {
                      xLogger.log(LogEventLevel.ERROR,"creationCompleteHandler: " + error.message);
                      throw error;
                  }
                 
              }
          }
      }