[EMAIL PROTECTED] Wed Apr 07 02:59:05 2004 Return-Path: <[EMAIL PROTECTED]> X-Sender: [EMAIL PROTECTED] X-Apparently-To: [email protected] Received: (qmail 48678 invoked from network); 7 Apr 2004 09:59:04 -0000 Received: from unknown (66.218.66.216) by m15.grp.scd.yahoo.com with QMQP; 7 Apr 2004 09:59:03 -0000 Received: from unknown (HELO p01mgw01.macromedia.com) (216.104.212.90) by mta1.grp.scd.yahoo.com with SMTP; 7 Apr 2004 09:59:03 -0000 Received: from p50exm01.macromedia.com (p50exm01.macromedia.com [10.55.1.66]) by p01mgw01.macromedia.com (Switch-3.1.4/Switch-3.1.0) with ESMTP id i379wmYK019310 for <[email protected]>; Wed, 7 Apr 2004 02:58:49 -0700 (PDT) Received: by p50exm01.macromedia.com with Internet Mail Service (5.5.2657.72) id <GT2QAT5Q>; Wed, 7 Apr 2004 10:58:48 +0100 Message-ID: <[EMAIL PROTECTED]> To: [email protected] Date: Wed, 7 Apr 2004 10:58:48 +0100 MIME-Version: 1.0 X-Mailer: Internet Mail Service (5.5.2657.72) Content-Type: multipart/alternative; boundary="----_=_NextPart_001_01C41C86.EAFF8880" X-eGroups-Remote-IP: 216.104.212.90 From: Waldo Smeets <[EMAIL PROTECTED]> Subject: RE: [flexcoders] combobox with graphics and text X-Yahoo-Group-Post: member; u=180364736
------_=_NextPart_001_01C41C86.EAFF8880 Content-Type: text/plain ..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 _____ From: Alistair McLeod [mailto:[EMAIL PROTECTED] Sent: 07 April 2004 11:32 To: [email protected] Subject: Re: [flexcoders] combobox with graphics and text Hi Jonathan, This one got me intrigued, so I've spent an hour this morning seeing what I could come up with. You can use the fact that a ComboBox contains a List, and that the the List control has an iconField property that specifies an icon that can appear beside each item in the combo dropdown. So, here's what i have: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"; > <mx:Script> [Embed(source="1.jpg")] var iconSymbol1:String; [Embed(source="2.jpg")] var iconSymbol2:String; [Embed(source="3.jpg")] var iconSymbol3:String; </mx:Script> <mx:ComboBox id="theCombo" creationComplete="theCombo.getDropdown().iconField='icon'" > <mx:dataProvider> <mx:Array> <mx:Object label="One" icon="{ iconSymbol1 }" /> <mx:Object label="Two" icon="{ iconSymbol2 }" /> <mx:Object label="Three" icon="{ iconSymbol3 }" /> </mx:Array> </mx:dataProvider> </mx:ComboBox> <mx:Button label="Rotate Icons" click="rotate();" /> <mx:Script> <![CDATA[ function rotate() { var firstIcon = theCombo.dataProvider[0].icon; for ( var i = 1; i < theCombo.dataProvider.length; i++ ) { theCombo.dataProvider[i-1].icon = theCombo.dataProvider[i].icon; } theCombo.dataProvider[ theCombo.dataProvider.length - 1 ].icon = firstIcon; theCombo.bLabelFieldChanged = true; theCombo.invalidate(); theCombo.dispatchEvent({type:"labelFieldChanged"}); } ]]> </mx:Script> </mx:Application> In this example, the graphics to appear in the combo are embedded at compile time, but can be changed at runtime, as shown in the rotate() method. Data binding should work the same way. Hopefully theres enough in there to get you going - its a rough implementation - I'd extract a custom component from the above and I've not investigated the best way to inform the ComboBox that its embedded List control has changed (thats what the bits and the end of the rotate() function do). I've not got time to explain this in full details just now (I've got real work to do too :) ), but I'll blog about the implementation over on http://www.richinternetapps.com later today. Cheers, Ali On Tue, 2004-04-06 at 15:15, Jonathan Bezuidenhout wrote: Hi all, I am trying to create a combobox where each entry consists of a changeable graphic (that can be data bound) followed by some text. Say a tick mark in front of some text, if a certain condition changes in the system somewhere, I want the tick to automatically show up or not. Can something like this be done using MXML or AS, or can this only be done using Flash? Chapter 16 does not tell me very much - are there any examples of doing this for real? I looked in the flex for flash and it does not seem like what I need to do either. Thanks Jonathan Yahoo! Groups Links <http://groups.yahoo.com/group/flexcoders/> http://groups.yahoo.com/group/flexcoders/ [EMAIL PROTECTED] <http://docs.yahoo.com/info/terms/> http://docs.yahoo.com/info/terms/ -- _____ Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/flexcoders/ <http://groups.yahoo.com/group/flexcoders/> * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> * Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service <http://docs.yahoo.com/info/terms/> . ------_=_NextPart_001_01C41C86.EAFF8880 Content-Type: text/html Content-Transfer-Encoding: quoted-printable <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <META HTTP-EQUIV=3D"Content-Type" CONTENT=3D"text/html; charset=3Dus-ascii"= > <META content=3D"MSHTML 6.00.2800.1400" name=3DGENERATOR></HEAD> <BODY> <DIV dir=3Dltr align=3Dleft><FONT face=3DArial size=3D2><SPAN=20 class=3D009095809-07042004>..and if you want more control over the look and= feel=20 of each item and image, you might want to concider to use a custom=20 CellRenderer.</SPAN></FONT></DIV> <DIV dir=3Dltr align=3Dleft><FONT face=3DArial size=3D2><SPAN=20 class=3D009095809-07042004></SPAN></FONT> </DIV> <DIV dir=3Dltr align=3Dleft><FONT face=3DArial size=3D2><SPAN=20 class=3D009095809-07042004>Waldo</SPAN></FONT></DIV><BR> <BLOCKQUOTE=20 style=3D"PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #0000ff 2px soli= d; MARGIN-RIGHT: 0px"> <DIV class=3DOutlookMessageHeader lang=3Den-us dir=3Dltr align=3Dleft> <HR tabIndex=3D-1> <FONT face=3DTahoma size=3D2><B>From:</B> Alistair McLeod=20 [mailto:[EMAIL PROTECTED] <BR><B>Sent:</B> 07 April 2004=20 11:32<BR><B>To:</B> [email protected]<BR><B>Subject:</B> Re:=20 [flexcoders] combobox with graphics and text<BR></FONT><BR></DIV> <DIV></DIV>Hi Jonathan,<BR><BR>This one got me intrigued, so I've spent a= n=20 hour this morning seeing what I could come up with.<BR><BR>You can use th= e=20 fact that a ComboBox contains a List, and that the the List control has a= n=20 iconField property that specifies an icon that can appear beside each ite= m in=20 the combo dropdown.<BR><BR>So, here's what i have:<BR><BR><?xml=20 version=3D"1.0" encoding=3D"utf-8"?><BR><mx:Application=20 xmlns:mx=3D"http://www.macromedia.com/2003/mxml"=20 ><BR>  = ; &n= bsp;  = ; &n= bsp;  = ; &n= bsp;  = ; &n= bsp;  = ; =20 <BR> =20 <mx:Script><BR> &nbs= p; =20 [Embed(source=3D"1.jpg")]<BR> &n= bsp; =20 var=20 iconSymbol1:String;<BR> &n= bsp; =20 [Embed(source=3D"2.jpg")]<BR> &n= bsp; =20 var=20 iconSymbol2:String;<BR> &n= bsp; =20 [Embed(source=3D"3.jpg")]<BR> &n= bsp; =20 var iconSymbol3:String;<BR> =20 </mx:Script><BR> &nb= sp; = &nb= sp; = &nb= sp; = &nb= sp; = &nb= sp; =20 <BR> <mx:ComboBox=20 id=3D"theCombo" creationComplete=3D"theCombo.getDropdown().iconFiel= d=3D'icon'"=20 ><BR>  = ; =20 <mx:dataProvider><BR> &nbs= p; &= nbsp; =20 <mx:Array><BR>  = ; &n= bsp; =20 <mx:Object label=3D"One" icon=3D"{ iconSymbol1 }"=20 /><BR> &nbs= p; &= nbsp; =20 <mx:Object label=3D"Two" icon=3D"{ iconSymbol2 }"=20 /><BR> &nbs= p; &= nbsp; =20 <mx:Object label=3D"Three" icon=3D"{ iconSymbol3 }"=20 /><BR> &nbs= p; = =20 </mx:Array><BR> &nbs= p; =20 </mx:dataProvider><BR> =20 </mx:ComboBox><BR> &= nbsp; &nbs= p; &= nbsp; &nbs= p; &= nbsp; &nbs= p; &= nbsp; &nbs= p; &= nbsp; =20 <BR> <mx:Button label=3D"Rot= ate=20 Icons" click=3D"rotate();"=20 /><BR> &nbs= p; &= nbsp; &nbs= p; &= nbsp; &nbs= p; &= nbsp; &nbs= p; &= nbsp; &nbs= p; =20 <BR> =20 <mx:Script><BR> &nbs= p; &= nbsp; &nbs= p; &= nbsp; &nbs= p; &= nbsp; &nbs= p; &= nbsp; &nbs= p; =20 <BR> &nb= sp; =20 <![CDATA[<BR> &nb= sp; = &nb= sp; = &nb= sp; = &nb= sp; = &nb= sp; =20 <BR> &nb= sp; =20 function=20 rotate()<BR> &= nbsp; &nbs= p;=20 {<BR> &n= bsp;  = ; =20 var firstIcon =3D=20 theCombo.dataProvider[0].icon;<BR> &nb= sp; = =20 for ( var i =3D 1; i < theCombo.dataProvider.length; i++=20 )<BR> &n= bsp;  = ; =20 {<BR> &n= bsp;  = ; &n= bsp; =20 theCombo.dataProvider[i-1].icon =3D=20 theCombo.dataProvider[i].icon;<BR> &nb= sp; = =20 }<BR> &n= bsp;  = ; &n= bsp;  = ; &n= bsp;  = ; &n= bsp;  = ; &n= bsp;=20 <BR> &nb= sp; = =20 theCombo.dataProvider[ theCombo.dataProvider.length - 1 ].icon =3D=20 firstIcon;<BR>  = ; &n= bsp;  = ; &n= bsp;  = ; &n= bsp;  = ; &n= bsp;  = ; =20 <BR> &nb= sp; = =20 theCombo.bLabelFieldChanged =3D=20 true;<BR> &nbs= p; &= nbsp; =20 theCombo.invalidate();<BR>  = ; &n= bsp;  = ; &n= bsp;  = ; &n= bsp;  = ; &n= bsp;  = ; =20 <BR> &nb= sp; = =20 theCombo.dispatchEvent({type:"labelFieldChanged"});<BR> = &nb= sp; =20 }<BR> &n= bsp; =20 ]]><BR> &nb= sp; = &nb= sp; = &nb= sp; = &nb= sp; = &nb= sp; =20 <BR> =20 </mx:Script><BR> &nb= sp; = &nb= sp; = &nb= sp; = &nb= sp; = &nb= sp; =20 <BR></mx:Application><BR><BR>In this example, the graphics to appea= r in=20 the combo are embedded at compile time, but can be changed at runtime, as= =20 shown in the rotate() method. Data binding should work the same way.=20 <BR><BR>Hopefully theres enough in there to get you going - its a rough=20 implementation - I'd extract a custom component from the above and I've n= ot=20 investigated the best way to inform the ComboBox that its embedded List=20 control has changed (thats what the bits and the end of the rotate() func= tion=20 do).<BR><BR>I've not got time to explain this in full details just now (I= 've=20 got real work to do too :) ), but I'll blog about the implementation over= on=20 http://www.richinternetapps.com later=20 today.<BR><BR>Cheers,<BR><BR>Ali<BR><BR><BR>On Tue, 2004-04-06 at 15:15,= =20 Jonathan Bezuidenhout wrote:=20 <BLOCKQUOTE TYPE=3D"CITE"><PRE><FONT color=3D#737373><I>Hi all, I am trying to create a combobox where each entry consists of a changeable graphic (that can be data bound) followed by some text. Say a tick mark in front of some text, if a certain condition changes in the system somewhere, I want the tick to automatically show up or not. Can something like this be done using MXML or AS, or can this only be done using Flash? Chapter 16 does not tell me very much - are there any examples of doing this for real? I looked in the flex for flash and it does not seem like what I need to do either. Thanks Jonathan =20 Yahoo! Groups Links <*> To visit your group on the web, go to: </FONT><A href=3D"http://groups.yahoo.com/group/flexcoders/";><U>http:/= /groups.yahoo.com/group/flexcoders/</U></A> <FONT color=3D#737373> <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: </FONT><A href=3D"http://docs.yahoo.com/info/terms/";><U>http://docs.ya= hoo.com/info/terms/</U></A> <FONT color=3D#737373> </I></FONT></PRE></BLOCKQUOTE><PRE><TABLE cellSpacin= g=3D0 cellPadding=3D0 width=3D"100%"><TBODY><TR><TD><PRE>-- </PRE></TD></TR= ></TBODY></TABLE> </PRE></BODY></HTML> ------_=_NextPart_001_01C41C86.EAFF8880--
