Skip to Content »

FlashApe » Setting the text color for the selected item in a List component in Flash CS 3

 Setting the text color for the selected item in a List component in Flash CS 3

  • December 3rd, 2007
  • 6:20 pm

In AS2, there was a style named textSelectedColor that would allow you to set the text color of the text of a selected item in a list-based component. In Flash CS 3, it appears to have been removed, which means (unless I totally missed something obvious...if I did, please let me know) that you need to create a CellRenderer and let it set the TextFormat of the label based on whether it is selected or not.

CellRenderers have a property called selected to let them know if their particular row is selected. CellRenderers also have access to any custom properties of it's class. So what I wound up doing was overriding the drawTextFormat() method (which CellRenderer inherits from LabelButton), checking the value of the selected property, and if it's true, use a custom selectedTextFormat property of the CellRenderer to format the text.

Looking at the code will propbably be a bit clearer, it's very simple:

Actionscript:
  1. package {
  2.    
  3.     import fl.controls.listClasses.CellRenderer;
  4.     import fl.controls.listClasses.ICellRenderer;
  5.     import fl.core.UIComponent;
  6.     import flash.text.TextFormat;
  7.  
  8.    
  9.     public class SelectedItemCellRenderer extends CellRenderer  {
  10.        
  11.         private var selectedTextFormat:TextFormat;
  12.  
  13.         public function SelectedItemCellRenderer(){
  14.             super();
  15.            
  16.             selectedTextFormat = new TextFormat();
  17.             selectedTextFormat.font = 'Verdana';
  18.             selectedTextFormat.size = '12';
  19.             selectedTextFormat.color = 0xFFFFFF;
  20.         }
  21.        
  22.         override protected function drawTextFormat():void {
  23.             // Apply a default textformat
  24.             var uiStyles:Object = UIComponent.getStyleDefinition();
  25.             var defaultTF:TextFormat = enabled ? uiStyles.defaultTextFormat as TextFormat : uiStyles.defaultDisabledTextFormat as TextFormat;
  26.             textField.setTextFormat(defaultTF);
  27.            
  28.             var tf:TextFormat = getStyleValue(enabled?"textFormat":"disabledTextFormat") as TextFormat;
  29.            
  30.             if(selected){
  31.                 tf = selectedTextFormat;
  32.             }
  33.            
  34.             if (tf != null) {
  35.                 textField.setTextFormat(tf);
  36.             } else {
  37.                 tf = defaultTF;
  38.             }
  39.             textField.defaultTextFormat = tf;
  40.            
  41.             setEmbedFont();
  42.         }
  43.        
  44.        
  45.     }
  46.    
  47. }

As far as the Flex components, they still have the textSelectedColor property.

1 Person had this to say...

Gravatar
  • haptic
  • January 5th, 2008
  • 6:34 pm

Thank you very, very much, you have saved my weekend!

Want your say?

* Required fields. Your e-mail address will not be published on this site


You can use the following XHTML tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>