Mar 20 2008

Flex "RadioButton" ListItemRenderer

Posted by Joe Rinehart at 2:44 PM
6 comments
- Categories: Flex

I'm becoming an ever increasing fan of the way the Flex visual components were built. Yeah, some things are private when protected would be nice, but for the kind of data-focused work I do I find myself rarely getting stuck. On top of that, building Flex widgets is the perfect 3:00AM brain exercise for when our 3 month old daughter wakes me up.

Anyhow, I needed a better way to show long lists of radio buttons in a UI. Using a repeater just kind of stank - I wanted something that worked like a normal list, but showed a RadioButton beside each item. Thirty minutes later, I was in business:

I decided to blog it as it's a dead simple example of how to extend a base Flex component, add additional visual children, and control both the layout and data-focused aspects through the UIComponent "lifecycle" methods and Flex events.

Here's the code for the renderer:

package com.firemoss.controls.list
{
   import mx.controls.RadioButton;
   import mx.controls.listClasses.BaseListData;
   import mx.controls.listClasses.ListBase;
   import mx.controls.listClasses.ListItemRenderer;
   import mx.events.ListEvent;
   
   public class RadioButtonListItemRenderer extends ListItemRenderer
   {
   
      /**
       * Radio button shown at left of control.
       */
      private var radioButton:RadioButton;
      
      /**
       * List owning this renderer.
       */
      private var list:ListBase;
      
      /**
       * Override createChildren() to create a radio button.
       */
      override protected function createChildren():void
      {
         super.createChildren();
         
         // Create our radio button and add it to the display list.          
         this.radioButton = new RadioButton();
         this.addChild(this.radioButton);
      }
      
      /**
       * Override updateDisplayList to position radio button
       * and shift label.
       */
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
         // Shift what super thinks of width by our radio's width...          
         super.updateDisplayList(unscaledWidth - this.radioButton.width, unscaledHeight);
         
         // For my purposes, a hard width is fine.      
         
         this.radioButton.width = 25;
         
         // Place our radio          
         this.radioButton.x = 6;
         this.radioButton.y = this.height / 2 - this.radioButton.height / 2;

         // Slide that label over          
         this.label.x = this.radioButton.width;
         
      }
      
      /**
       * Override the listData setter to add listener for changes to the owner (List selection change)
       */
      override public function set listData(value:BaseListData):void
      {
         super.listData = value;
         
         // If we're in the right condition          
         if (value.owner is ListBase)
         {
            // Remove event listeners from any prior assigned list             
            if (this.list)
            {
               this.list.removeEventListener(ListEvent.CHANGE, ownerChangeHandler);
            }
   
            // Keep the list around             
            this.list = value.owner as ListBase;
            
            // Watch the list for changes to its selection             
            this.list.addEventListener(ListEvent.CHANGE, ownerChangeHandler, false, 0, true);
         }
      }
      
      
      /**
       * When the list's selection changes, update the state of the radio button.
       */
      private function ownerChangeHandler(event:ListEvent):void
      {
         // If the list has a selection and it's this renderer's data, check the button          
         this.radioButton.selected = (this.data != null && this.data == this.list.selectedItem);
      }
      
   }
}

Enjoy, and happy listing!

Comments

Hussein Grant

Hussein Grant wrote on 08/14/08 2:15 PM

Hi Joe,

I am now getting into flex heavy and was wondering, where exactly did you find thorough documentation on all those overridable functions? Without this knowledge it's really hard to do certain things yourself and with a certain level of confidence.

Otherwise good mind teaser. I am hungry for flex lately.

Thanks,
Hussein
Hussein Grant

Hussein Grant wrote on 08/20/08 10:16 AM

Hello? Unless I am missing something which is always a great possibility, I didn't find anything specific in flex docs on overriding base methods or at least some level of instructional dos and don'ts guidelines. Are there books on the topic then? Can anyone offer some advice, please?

Thanks,
Hussein
Makayla

Makayla wrote on 09/20/08 8:22 AM

Nice!
laptop battery

laptop battery wrote on 09/27/08 11:37 PM

http://www.batteryfast.com/hp/dv9000.htm hp dv9000 battery,
http://www.batteryfast.com/hp/dv9200.htm hp dv9200 battery,
http://www.batteryfast.com/hp/dv9100.htm hp dv9100 battery,
http://www.batteryfast.com/hp/dv9500.htm hp dv9500 battery,
http://www.batteryfast.com/hp/dv9600.htm hp dv9600 battery,
http://www.batteryfast.com/hp/dv9700.htm hp dv9700 battery,
http://www.batteryfast.com/hp/f4486.htm hp f4486 battery,
http://www.batteryfast.com/hp/f2024a.htm hp f2024a battery,
http://www.batteryfast.com/hp/xe3.htm hp xe3 battery,

http://www.batteryfast.com/hp/xe3b.htm hp xe3b battery,
http://www.batteryfast.com/hp/xe3c.htm hp xe3c battery,
http://www.batteryfast.com/hp/xe3l.htm hp xe3l battery,
http://www.batteryfast.com/hp/f2024.htm hp f2024 battery,
http://www.batteryfast.com/hp/f2024b.htm hp f2024b battery,
http://www.batteryfast.com/hp/dv8000.htm hp dv8000 battery,
http://www.batteryfast.com/hp/dv8100.htm hp dv8100 battery,
http://www.batteryfast.com/hp/dv8200.htm hp dv8200 battery,
http://www.batteryfast.com/hp/dv8300.htm hp dv8300 battery,

http://www.batteryfast.com/hp/hstnn-db20.htm hp hstnn-db20 battery,
http://www.batteryfast.com/hp/nx6120.htm hp nx6120 battery,
http://www.batteryfast.com/hp/pb994a.htm hp pb994a battery,
http://www.batteryfast.com/hp/nc6100.htm hp nc6100 battery,
http://www.batteryfast.com/hp/nc6120.htm hp nc6120 battery,
http://www.batteryfast.com/hp/nx6100.htm hp nx6100 battery,
http://www.batteryfast.com/hp/6515b.htm hp 6515b battery,
http://www.batteryfast.com/hp/nx6325.htm hp nx6325 battery,
http://www.batteryfast.com/hp/hstnn-db11.htm hp hstnn-db11 battery,

http://www.batteryfast.com/hp/nc8230.htm hp nc8230 battery,
http://www.batteryfast.com/hp/nc8200.htm hp nc8200 battery,
http://www.batteryfast.com/hp/nw8200.htm hp nw8200 battery,
http://www.batteryfast.com/hp/nx8200.htm hp nx8200 battery,
http://www.batteryfast.com/hp/nc8430.htm hp nc8430 battery,
http://www.batteryfast.com/hp/pb992a.htm hp pb992a battery,
http://www.batteryfast.com/hp/nc6000.htm hp nc6000 battery,
http://www.batteryfast.com/hp/nx5000.htm hp nx5000 battery,
http://www.batteryfast.com/hp/nw8000.htm hp nw8000 battery,

Write your comment



(it will not be displayed)