[flexcoders] Reusable CellRenderer

Tue, 31 Jan 2006 11:09:38 -0800

I would like to create a reusable cellRenderer that I can use on multiple columns in a dataGrid. But I am having a hrad time wrapping my brain around it. First, how would you call the same cellRenderer for each column but populate it with different data for each? I have tried to assign the cellReneder in actionscript like, dataGrid.getColumnAt(7).cellRenderer = "comboBoxCellRenderer"; and then set a dataProvider variable in the renderer but I cannot get that to work.

Even if I set the cell renderer with mxml I can only get the dataProvider variable to populate the cellRenderer if I pass it a hard coded object. If I pass it an object being coming in from a web service, it doesn't work. I think that has something to do with timing. LIke the cellRenderer gets created before the data come back from the WS. Any help in the right direction would be appreciated.

Here is some of the code...

<!------------------------------------------------>
//comboBoxcellRenderer.mxml (From http://www.richinternetapps.com/archives/000072.html)
<!------------------------------------------------>

<mx:Canvas borderStyle="none" xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Script>
<![CDATA[

  import mx.controls.*;
  import com.iterationtwo.cairngorm.control.*;

  var combo : ComboBox;
  var comboLabel : Label;
 
  var listOwner : Object; // the reference we receive to the list
  var getCellIndex : Function; // the function we receive from the list
  var getDataLabel : Function; // the function we receive from the list
  var selectedItem : Object;

  static var dataProvider;
 
//------------------------------------------------------------

  function createChildren(Void) : Void
  {
    super.createChildren();

    createClassObject( Label, "comboLabel", 1, { styleName:this, owner:this } );
    createClassObject( ComboBox, "combo", 2, { styleName:this, owner:this, selectable:true, editable:true } );

    combo.addEventListener( "change", this );
    combo.addEventListener( "enter", this );

    combo.dataProvider = comboBoxCellRenderer.dataProvider;

    combo.setStyle( "backgroundColor", getStyle( "selectionColor" ) );
       
    size();
  }

//------------------------------------------------------------

  function size( Void ) : Void
  {
    combo.setSize( width, 20 );
    comboLabel.setSize( width, 20 );
  }

//------------------------------------------------------------

  function setValue( str : String, item : Object, selection : String ) : Void{
  combo.dataProvider = comboBoxCellRenderer.dataProvider;
    combo.labelField = 'PERSONNELFULLNAME';
    if ( item == undefined ){
      comboLabel.visible = false;
      combo.visible = false;
      return;
    }

    if ( selection == "normal" || selection == "highlighted" ){
      comboLabel.text = item[ getDataLabel() ];
      combo.visible = false;
      comboLabel.visible = true;
    }
    else if ( selection == "selected" ){
      selectedItem = item;
     
      for( var i = 0; i < combo.dataProvider.length; i++ ){
        if( combo.dataProvider[i] == item[ getDataLabel() ] ){
           combo.selectedIndex = i;
           break;
        }
      }
      comboLabel.visible = false;
      combo.visible = true;
      combo.setFocus( false );
    }
  }

//------------------------------------------------------------

  function getPreferredHeight( Void ) : Number{
    return 20;
  }
 
//------------------------------------------------------------

  function getPreferredWidth( Void ) : Number{
    return 125;
  }

//------------------------------------------------------------

  function reorder( datos : Array, choice : String ) : Array{
    var index:Number = 0
    var newArray = new Array()
    for( var i=0; i < datos.length; i++ )
    {
      if( datos[i].label != choice )
      {
        index++;
        newArray[index] = datos[i];
      }
      else
      {
        newArray[0] = datos[i];
      }
    }
    return newArray;
  }

//------------------------------------------------------------

  function change(){
    selectedItem[ getDataLabel() ] = combo.selectedItem;
    EventBroadcaster.getInstance().broadcastEvent( "updateItem", selectedItem );
  }

//------------------------------------------------------------

  function enter(){
    if ( combo.text != undefined && combo.text.length > 0 )
    {
      dataProvider.addItem( combo.text );
      selectedItem[ getDataLabel() ] = combo.text;
      EventBroadcaster.getInstance().broadcastEvent( "updateItem", selectedItem );
    }
  }

//------------------------------------------------------------

  function draw() : Void{
    super.draw();

    if ( combo.text_mc.border_mc.getDepth() > combo.text_mc.label.getDepth() )
      combo.text_mc.border_mc.swapDepths( combo.text_mc.label );
  }

]]>

</mx:Script>
</mx:Canvas>






<!------------------------------------------------>
//projectTaskView.mxml  (excerpt only)
<!------------------------------------------------>

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
    xmlns:mx="http://www.macromedia.com/2003/mxml"
    xmlns:ppcView="com.thomson.ppc.stickies.view.*"
    width="100%"
    height="595"
    backgroundColor="#666666"
    cornerRadius="24"
    creationComplete="initCellRenderer();"
    marginBottom="6"  marginTop="6"  marginLeft="6"  marginRight="6">
   
    <ppcView:ProjectTasksViewHelper name="projectTasksViewHelper" view="{ this }" />
   
    <!-- ============================================================================================ -->

    <mx:Script>
    <![CDATA[
        import com.iterationtwo.cairngorm.view.ViewLocator;
        import com.iterationtwo.cairngorm.control.EventBroadcaster;
        import com.thomson.ppc.renderers.*;

        //page variables
        var aProjectTasks : Array = new Array();
        var oPersonnel : Object = new Object();
                     
       
        //-----------------------------------------------------------------------------------

//Here is where I am trying to popualte the cellrenderer

        private function initCellRenderer() : Void{
            //upon init, populate the custom rendered combo with personnel
            var projectAssignmentsViewHelper = ViewLocator.getInstance().getViewHelper("projectAssignmentsViewHelper");
            oPersonnel = projectAssignmentsViewHelper.getPersonnel();
           
            comboBoxCellRenderer.dataProvider = oPersonnel;

       
        //-----------------------------------------------------------------------------------

       
       

       

      ]]>
     </mx:Script>
 
 <!-- ============================================================================================ -->

<mx:DataGrid id="projectTasksGrid" editable="true" cellFocusOut="updateResultSet(event)" width="100%">
    <mx:columns>
        <mx:Array>
            <mx:DataGridColumn columnName="NUMPERCENTCOMPLETE"    headerText="Complete" width="38" labelFunction="concatPercent"  />
            <mx:DataGridColumn columnName="TXTTASK" headerText="Task" width="160"/>
            <mx:DataGridColumn columnName="TXTPRIORITY" headerText="Priority" width="32" labelFunction="convertPriority" />
            <mx:DataGridColumn columnName="NUMRANK" headerText="Rank" width="40"/>
            <mx:DataGridColumn columnName="TXTEFFORT"     headerText="Effort" width="25" labelFunction="convertEffort"/>
            <mx:DataGridColumn columnName="NUMHOURS"     headerText="Hours" width="32"/>
            <mx:DataGridColumn columnName="NUMDURATION"     headerText="Duration" width="30"/>
            <mx:DataGridColumn columnName="NUMPERSONNELID" headerText="Responsible" width="78"/>
            <mx:DataGridColumn columnName="YNTESTINGNEEDED"     headerText="Testing Needed" width="35" labelFunction="convertTesting"/>
            <mx:DataGridColumn columnName=""     headerText="Hours Left" width="65" labelFunction="calculateHoursLeft" backgroundColor="#eaeaea" editable="false"/>
            <mx:DataGridColumn columnName=""     headerText="Dur. Left" width="65" backgroundColor="#eaeaea" labelFunction="calculateDurLeft" editable="false" />
            <mx:DataGridColumn columnName=""     headerText="DONE" width="55" backgroundColor="#eaeaea" labelFunction="calculateComplete" editable="false"/>
        </mx:Array>
    </mx:columns>
</mx:DataGrid>
   
</mx:VBox>
       




--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com



SPONSORED LINKS
Web site design development Computer software development Software design and development
Macromedia flex Software development best practice

YAHOO! GROUPS LINKS



Reply via email to