[EMAIL PROTECTED] Wed Apr 07 03:09:46 2004
Return-Path: <[EMAIL PROTECTED]>
X-Sender: [EMAIL PROTECTED]
X-Apparently-To: [email protected]
Received: (qmail 4263 invoked from network); 7 Apr 2004 10:09:44 -0000
Received: from unknown (66.218.66.166)
by m10.grp.scd.yahoo.com with QMQP; 7 Apr 2004 10:09:44 -0000
Received: from unknown (HELO p15112434.pureserver.info) (217.160.168.91)
by mta5.grp.scd.yahoo.com with SMTP; 7 Apr 2004 10:09:43 -0000
Received: from [10.44.4.2] ([213.128.227.106])
(authenticated (0 bits))
by p15112434.pureserver.info (8.11.6/8.11.6) with ESMTP id i37A8ef31279
for <[email protected]>; Wed, 7 Apr 2004 11:08:40 +0100
To: [email protected]
In-Reply-To: <[EMAIL PROTECTED]>
References: <[EMAIL PROTECTED]>
Content-Type: multipart/alternative; boundary="=-KxE04gvaKeTqP6hKgQv+"
Organization: iteration::two
Message-Id: <[EMAIL PROTECTED]>
Mime-Version: 1.0
X-Mailer: Ximian Evolution 1.4.6
Date: Wed, 07 Apr 2004 11:08:34 +0100
X-eGroups-Remote-IP: 217.160.168.91
From: Alistair McLeod <[EMAIL PROTECTED]>
Subject: RE: [flexcoders] combobox with graphics and text
X-Yahoo-Group-Post: member; u=151017110
X-Yahoo-Profile: alimcleod
--=-KxE04gvaKeTqP6hKgQv+
Content-Type: text/plain
Content-Transfer-Encoding: 7bit
Hi,
Yes, custom Cell Renderers can be a better solution if we want more
control over what is being shown. Here is one i created to show a debit
or credit icon in a control (based heavily on an example that ships with
Flex). It could be extended to create both an image and a Label as the
cells for a combo box.
import mx.core.UIComponent
import mx.controls.Image
class com.iterationtwo.components.ImageCellRenderer extends UIComponent
{
[Embed(source="debit.png")]
var debitSymbol:String;
[Embed(source="credit.png")]
var creditSymbol:String;
var image : MovieClip;
var listOwner : MovieClip; // 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
function ImageCellRenderer()
{
}
function createChildren(Void) : Void
{
image = createClassObject( Image, "image", 1,
{styleName:this, owner:this});
size();
}
function size(Void) : Void
{
image._x = (layoutWidth-20)/2;
image._y = (layoutHeight-16)/2;
}
function setValue( str:String, item:Object, sel:Boolean ) : Void
{
var currentImage:String = image.source;
var newImage:String = "";
if ( item.type == "CDT" )
newImage = creditSymbol;
else if ( item.type == "DBT" )
newImage = debitSymbol;
if ( newImage != currentImage )
image.source = newImage;
}
function getPreferredHeight(Void) : Number
{
return 16;
}
function getPreferredWidth(Void) : Number
{
return 20;
}
}
On Wed, 2004-04-07 at 10:58, Waldo Smeets wrote:
> ..and if you want more control over the look and feel of each item and
> image, you might want to concider to use a custom CellRenderer.
>
> Waldo
--=-KxE04gvaKeTqP6hKgQv+
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">
<META NAME="GENERATOR" CONTENT="GtkHTML/3.0.10">
</HEAD>
<BODY>
Hi,<BR>
<BR>
Yes, custom Cell Renderers can be a better solution if we want more control
over what is being shown. Here is one i created to show a debit or credit icon
in a control (based heavily on an example that ships with Flex). It could be
extended to create both an image and a Label as the cells for a combo box.<BR>
<BR>
import mx.core.UIComponent<BR>
import mx.controls.Image<BR>
<BR>
class com.iterationtwo.components.ImageCellRenderer extends UIComponent<BR>
{<BR>
[Embed(source="debit.png")]<BR>
var debitSymbol:String;<BR>
[Embed(source="credit.png")]<BR>
var creditSymbol:String;<BR>
<BR>
var image : MovieClip;<BR>
var listOwner : MovieClip; // the
reference we receive to the list<BR>
var getCellIndex : Function; // the
function we receive from the list<BR>
var getDataLabel : Function; // the
function we receive from the list<BR>
<BR>
function ImageCellRenderer()<BR>
{<BR>
}<BR>
<BR>
function createChildren(Void) :
Void<BR>
{<BR>
image = createClassObject( Image, "image", 1, {styleName:this,
owner:this});<BR>
size();<BR>
}<BR>
<BR>
function size(Void) : Void<BR>
{<BR>
image._x = (layoutWidth-20)/2;<BR>
image._y = (layoutHeight-16)/2;<BR>
}<BR>
<BR>
function setValue( str:String,
item:Object, sel:Boolean ) : Void<BR>
{<BR>
var currentImage:String = image.source;<BR>
var newImage:String = "";<BR>
<BR>
if ( item.type == "CDT" )<BR>
newImage = creditSymbol;<BR>
else if ( item.type == "DBT" )<BR>
newImage = debitSymbol;<BR>
<BR>
if ( newImage != currentImage )<BR>
image.source = newImage;<BR>
}<BR>
<BR>
function getPreferredHeight(Void) :
Number<BR>
{<BR>
return 16;<BR>
}<BR>
<BR>
function getPreferredWidth(Void) :
Number<BR>
{<BR>
return 20;<BR>
}<BR>
<BR>
}<BR>
<BR>
<BR>
On Wed, 2004-04-07 at 10:58, Waldo Smeets wrote:
<BLOCKQUOTE TYPE=CITE>
<FONT COLOR="#737373" SIZE="2"><I>..and if you want more control over the look
and feel of each item and image, you might want to concider to use a custom
CellRenderer.</FONT><BR>
<FONT COLOR="#737373"> </FONT><BR>
<FONT COLOR="#737373" SIZE="2">Waldo</I></FONT>
</BLOCKQUOTE>
<BR>
</BODY>
</HTML>
--=-KxE04gvaKeTqP6hKgQv+--
