Re: [flexcoders] Reusable CellRenderer

Tue, 31 Jan 2006 13:12:24 -0800

The terms "reusable" and "cellrenderer" are not mutually exclusive, sorry.
 
I've never had a project where I didn't write a new cellreneder for each DataGrid.  They are like finely crafted food dishes; each is unique and takes time, love, and care.
 
Granted, things like getCellLabel and getCellIndex help, but um... they are just so you feel better not hardcoding values from the outside so the cellrenderer works.  A cellrenderer that represents a boolean value that your server-side makes is still a cellrenderer created for that sole purpose.  Yes, you can re-use code, but I wouldn't fret over it.
 
Your code is correct, so it must be how your cellrenderer is getting the data to popuplate in the setValue function, or your class isn't getting compiled into the SWF.
 
Do:
 
import YourClass;
 
and then ensure it's in the SWF:
 
private var dependYourClass:YourClass;
 
 
Your cellrenderer code itself looks correct.  However, you don't populate cellrenderers with data, you populate the controls (List, DataGrid, Tree, etc.) with the dataProvider, and the cellrenderer gets the data.
 
 
----- Original Message -----
Sent: Tuesday, January 31, 2006 2:09 PM
Subject: [flexcoders] Reusable CellRenderer

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


YAHOO! GROUPS LINKS



Reply via email to