24 Replies Latest reply on Nov 29, 2009 11:29 PM by Flex harUI

    TileList Padding for Button itemrenderer

    Mike6679 Level 1

      Hi,

       

      I have a TileList that uses a itemrenderer that is a Button Class . So in effect the TileList that diplays 2 colums of buttons in multiple rows. The problem I'm having is setting the spacing between the buttons. I tried using paddingTop, Bottom etc... in the Button class constructor but to no avail.  I think I need to wrap my Button class in an Hbox but not sure how to do that. Anyone know how to fix this?

       

       

       

       

       

      //MY TileList

      <mx:TileList   columnCount="2"
                             x="34" y="167"
                            height="239" width="482"
                            itemRenderer="action.button.ButtonCatSearch"
                            labelField="@name"
                             dataProvider="{MainApp.codesXML.children()}"  id="tileListCatNames"  allowMultipleSelection="false">
              </mx:TileList>

       

       

       

       

       

      // CUSTOM BUTTON CLASS

      package action.button
      {
          import mx.controls.Button;
          import mx.controls.listClasses.BaseListData;
          import mx.controls.listClasses.ListData;
          import mx.skins.Border;
          import flash.display.*;
          //import NoTruncationUITextField;

       

          public class ButtonCatSearch extends Button
          {
              private var _baseListData:BaseListData;
              private var _listData:ListData;
             
              public function ButtonCatSearch()
              {
                  super();
                  //make the cursor always behave like it's over a button
                  mouseChildren=false;
                  buttonMode=true;
                  useHandCursor=true;
                  height= 20;
                  width= 20;
                  setStyle("paddingLeft", 50);
                  setStyle("paddingRight", 50);
                  setStyle("paddingTop", 50);
                  setStyle("paddingBottom", 50);

       

                  setStyle("horizontalGap",100);
                  setStyle("verticalGap",100);
                 
              }
              //----------------
              //to allow word wrap
              //for Button
             override protected function createChildren():void
              {
                   super.createChildren();
                   if (textField)
                   {
                       textField.wordWrap = true;
                       textField.multiline = true;
                   }
              }
              //-----------------
              override public function get listData():BaseListData
              {
                  return _baseListData;
                      
              }
         
              /**
               *  @private
               */
              override public function set listData(value:BaseListData):void
              {
                  super.listData = value;
                  _baseListData = value;
                  _listData = _baseListData as ListData;
              }
               //-----------------
              override public function set data(value:Object):void{
                  /*if (_listData) {
                      if (_listData.icon) {
                          this.setStyle('icon', _listData.icon);
                      }
                  }
                  */
                  super.data=value;
              }
          }
      }

        • 1. Re: TileList Padding for Button itemrenderer
          Mike6679 Level 1

          Anyone? Anyone?  Bueler??

          • 2. Re: TileList Padding for Button itemrenderer
            Flex harUI Adobe Employee

            I think I'd override measure and report a larger size, then override updateDisplayList and position as desired.

             

            Alex Harui

            Flex SDK Developer

            Adobe Systems Inc.

            Blog: http://blogs.adobe.com/aharui

            • 3. Re: TileList Padding for Button itemrenderer
              Mike6679 Level 1

              Well, that is a good idea , however the TileList seems to be automatically adjusting the spacing around the buttons no matter what size I make them in measure(). Here is what I did below. Note: I already had code in both to set word wrap for the labels...

               

               

                    override protected function measure() : void
                      {
                          //added these 2 lines to adjust spacing between buttons

                          height = height + 20;
                          width = width + 20;
                         
                         
                          if ( isNaN( explicitWidth ) == false )
                          {
                              textField.text = label;
                            
                              textField.width =
                                  explicitWidth -
                                  getStyle( "paddingLeft" ) -
                                  getStyle( "paddingRight" );
                                
                              measuredHeight =
                                  textField.getExplicitOrMeasuredHeight() +
                                  getStyle( "paddingTop" ) +
                                  getStyle( "paddingBottom" );
                          }
                          else
                          {
                              super.measure();
                          }              
                      }

               

               

               

                     override protected function updateDisplayList(
                          unscaledWidth : Number, unscaledHeight : Number ) : void      
                      {
                          super.updateDisplayList( unscaledWidth, unscaledHeight );
                        
                          textField.setActualSize(
                              textField.width,
                              textField.getExplicitOrMeasuredHeight() );
                        
                        
                          if(textField.height > TEXTFLD_MIN_HEIGHT )
                          {
                              var spaceTopBottom:Number = BUTTON_HEIGHT - textField.height;
                              textField.move( textField.x, textField.y-6 );
                          }
                         
                                
                      }

              • 4. Re: TileList Padding for Button itemrenderer
                Flex harUI Adobe Employee

                I think for TileList the renderer has to handle the padding.  I'm not clear you are adjusting for that in updateDisplayList.

                • 5. Re: TileList Padding for Button itemrenderer
                  Mike6679 Level 1

                  No matter what I do, the buttons just seem to keep snapping to the size of the TileList

                   

                   

                   

                          override protected function measure() : void
                          {
                              height = height + 20;
                              width = width + 20;
                             
                             
                              if ( isNaN( explicitWidth ) == false )
                              {
                                  textField.text = label;
                                
                                  textField.width =
                                      explicitWidth -
                                      getStyle( "paddingLeft" ) -
                                      getStyle( "paddingRight" );
                                    
                                  measuredHeight =
                                      textField.getExplicitOrMeasuredHeight() +
                                      getStyle( "paddingTop" ) +
                                      getStyle( "paddingBottom" );
                              }
                              else
                              {
                                  super.measure();
                              }              
                          }
                         //---------------------
                          override protected function updateDisplayList(
                              unscaledWidth : Number, unscaledHeight : Number ) : void      
                          {
                              setStyle("paddingLeft", 50);
                              setStyle("paddingRight", 50);
                              setStyle("paddingTop", 50);
                              setStyle("paddingBottom", 50);
                             
                             
                              super.updateDisplayList( unscaledWidth, unscaledHeight );
                             
                            
                            
                              textField.setActualSize(
                                  textField.width,
                                  textField.getExplicitOrMeasuredHeight() );
                            
                            
                              if(textField.height > TEXTFLD_MIN_HEIGHT )
                              {
                                  var spaceTopBottom:Number = BUTTON_HEIGHT - textField.height;
                                  textField.move( textField.x, textField.y-6 );
                              }
                             
                                    
                          }

                  • 6. Re: TileList Padding for Button itemrenderer
                    Mike6679 Level 1

                    wait a minute I needed to adjust:

                     

                    unscaledWidth =  unscaledWidth - 20;
                    unscaledHeight = unscaledHeight - 20;

                    • 7. Re: TileList Padding for Button itemrenderer
                      Mike6679 Level 1

                      Here is the  final solution. This class also handles word wrap for the label....

                       

                       

                       

                      /*
                      This class provides a button that supports
                      word wrap for label & spacing between buttons
                      */
                      package action.button
                      {
                          import action.module.IModuleInterface;
                         
                          import flash.display.*;
                          import flash.events.*;
                         
                          import mx.controls.Button;
                          import mx.controls.listClasses.BaseListData;
                          import mx.controls.listClasses.ListData;
                          import mx.core.IUITextField;
                          import mx.core.Application;
                          //import flexlib.controls.CanvasButton
                         
                        
                          public class ButtonCatSearch extends Button
                          {
                             
                              private var _baseListData:BaseListData;
                              private var _listData:ListData;
                              private var _label:String="";
                              private var buttonLabel:String;
                              [Bindable]public var MainApp:procrit_icd9; //"procrit_icd9' is our Main Application
                             
                              private const TEXTFLD_MIN_HEIGHT:int = 18;
                              private const BUTTON_HEIGHT:int = 38;
                             
                             
                             
                              public function ButtonCatSearch()
                              {
                                   height= BUTTON_HEIGHT;
                                  
                                   addEventListener(MouseEvent.CLICK,onButtonClick);
                              }
                              //--------------
                              public function onButtonClick(e:Event):void
                              {
                                   //we use "MainApp" to get the loaded XML
                                  MainApp= Application.application as procrit_icd9;
                                  
                                  buttonLabel= e.currentTarget.label;
                                  
                                  //we will pass the category name back to the main app
                                  //then search_results will retrieve it from there
                                  MainApp.changeState("search_results");
                                  MainApp.setCategoryName(buttonLabel);
                              }
                       
                              /////////////////////////////////////
                              // Handlers below are for word wrap
                              //
                              protected override function createChildren() : void
                              {
                                  if ( !textField )
                                  {
                                      textField = IUITextField( createInFontContext( NoTruncationUITextField ) );
                                      textField.styleName = this;  
                                      addChild( DisplayObject( textField ) );
                                  }
                                
                                  super.createChildren();
                                
                                  textField.multiline = true;
                                  textField.wordWrap = true;
                              }
                              //--------------
                              override protected function measure() : void
                              {
                                  height = height + 10;
                                  width = width + 10;

                                 
                                 
                                  if ( isNaN( explicitWidth ) == false )
                                  {
                                      textField.text = label;
                                    
                                      textField.width =
                                          explicitWidth -
                                          getStyle( "paddingLeft" ) -
                                          getStyle( "paddingRight" );
                                        
                                      measuredHeight =
                                          textField.getExplicitOrMeasuredHeight() +
                                          getStyle( "paddingTop" ) +
                                          getStyle( "paddingBottom" );
                                  }
                                  else
                                  {
                                      super.measure();
                                  }              
                              }
                             //---------------------
                              override protected function updateDisplayList(
                                  unscaledWidth : Number, unscaledHeight : Number ) : void      
                              {
                               
                                 unscaledWidth =  unscaledWidth - 10;
                                  unscaledHeight = unscaledHeight - 10;

                                 
                                  super.updateDisplayList( unscaledWidth, unscaledHeight );
                                 
                                
                                
                                  textField.setActualSize(
                                      textField.width,
                                      textField.getExplicitOrMeasuredHeight() );
                                
                                
                                  if(textField.height > TEXTFLD_MIN_HEIGHT )
                                  {
                                      var spaceTopBottom:Number = BUTTON_HEIGHT - textField.height;
                                      textField.move( textField.x, textField.y-6 );
                                  }
                                 
                                        
                              }      
                             
                              /////////////////////////////////////
                              //  Not being used currently...
                              //
                              //-----------------
                              override public function get listData():BaseListData
                              {
                                  return _baseListData;
                                      
                              }
                              //-------------------
                              override public function set listData(value:BaseListData):void
                              {
                                  super.listData = value;
                                  _baseListData = value;
                                  _listData = _baseListData as ListData;
                              }
                               //-----------------
                              override public function set data(value:Object):void
                              {
                                  /*if (_listData) {
                                      if (_listData.icon) {
                                          this.setStyle('icon', _listData.icon);
                                      }
                                  }
                                  */
                                  super.data=value;
                              }
                          }
                      }

                      • 8. Re: TileList Padding for Button itemrenderer
                        Mike6679 Level 1

                        Only problem I see now are:

                         

                        1. When you roll over the button the highlight is way too big and the button grows

                         

                        2 The buttons are not centered

                         

                        any one have any ideas in these issues?

                         

                         

                        -Mike

                        • 9. Re: TileList Padding for Button itemrenderer
                          Flex harUI Adobe Employee

                          Having measure set height=height+10 sounds dangerous.  Every time measure gets called, I think the button would grow.

                           

                          Alex Harui

                          Flex SDK Developer

                          Adobe Systems Inc.

                          Blog: http://blogs.adobe.com/aharui

                          • 10. Re: TileList Padding for Button itemrenderer
                            Mike6679 Level 1

                            well if I take height=height+10 sounds out then the buttons are too small and still not centered as a whole in the TileList........

                            • 11. Re: TileList Padding for Button itemrenderer
                              Mike6679 Level 1

                              well, I added a custom skin for this class by using the "Flex Skin Design Extension for Flash". This seems to get rid of the problem of the button moving on Clicking and mouse over, However I still see the Halo light blue highlight when I click the button......how the heck do I get rid of that??

                              • 12. Re: TileList Padding for Button itemrenderer
                                Flex harUI Adobe Employee

                                If you look at the doc on measure() and various examples, you should see that they generally measure their content and compute measuredWidth/Height accordingly.  Once you get that computation to give the right values and updateDisplayList positions and sizes things as you want I would expect things to work better.

                                 

                                Alex Harui

                                Flex SDK Developer

                                Adobe Systems Inc.

                                Blog: http://blogs.adobe.com/aharui

                                • 13. Re: TileList Padding for Button itemrenderer
                                  Mike6679 Level 1

                                  forgive me Flex HarUI , but I still can't get this right. My original goal here was to add equal spacing between the buttons and have them centered. I was able to add spacing. However :

                                   

                                   

                                  1. The spacing is not equal

                                   

                                  2. The buttons are not centered

                                   

                                  3. When I click a button I see the Halo lt blue highlight that is much bigger than the button.

                                   

                                  thanks for the assitance....

                                   

                                   

                                  -Mike

                                   

                                   

                                  HERE IS MY CODE:

                                   

                                   

                                  /*
                                  o   This class provides a button that supports
                                       word wrap for label & spacing between buttons

                                  o   Its used by search_category.mxml module

                                   

                                  */
                                  package action.button
                                  {
                                      import flash.display.*;
                                      import flash.events.*;
                                     
                                      import mx.controls.Button;
                                      import mx.controls.listClasses.BaseListData;
                                      import mx.controls.listClasses.ListData;
                                      import mx.core.Application;
                                      import mx.core.IUITextField;
                                      //import flexlib.controls.CanvasButton
                                     
                                    
                                       public class ButtonCatSearch extends Button
                                      {
                                         
                                          private var _baseListData:BaseListData;
                                          private var _listData:ListData;
                                          private var _label:String="";
                                          private var buttonLabel:String;
                                          [Bindable]public var MainApp:procrit_icd9_web; //"procrit_icd9' is our Main Application
                                         
                                          private const TEXTFLD_MIN_HEIGHT:int = 18;
                                         
                                          private const BUTTON_HEIGHT:int = 38;
                                          private const BUTTON_WIDTH:int = 125;
                                          private const BUTTON_SPACING:int = 8;
                                          private const BUTTON_TEXT_COLOR:String = "ffffff";
                                         
                                       
                                         
                                          //for adobe bug: ////////////////////
                                          //note: may only need this declared
                                          //in the main app
                                          import mx.managers.IDragManager;
                                          private var iDragManager:IDragManager; 
                                          //////////////////////////////////////
                                         
                                          public function ButtonCatSearch()
                                          {
                                               height= BUTTON_HEIGHT;
                                               useHandCursor = true ;
                                               buttonMode = true;
                                               mouseChildren = false;
                                              
                                               addEventListener(MouseEvent.CLICK,onButtonClick);
                                               addEventListener(MouseEvent.MOUSE_OVER,onButtonOver);
                                               addEventListener(MouseEvent.MOUSE_MOVE,onButtonOver);
                                          }
                                          //--------------
                                          public function onButtonClick(e:Event):void
                                          {
                                              height = BUTTON_HEIGHT-10;
                                              width  = BUTTON_WIDTH-10;
                                             
                                               //we use "MainApp" to get the loaded XML
                                              MainApp= Application.application as procrit_icd9_web;
                                              
                                              buttonLabel= e.currentTarget.label;
                                              
                                              //we will pass the category name back to the main app
                                              //then search_results will retrieve it from there
                                              MainApp.changeState("search_results");
                                              MainApp.setCategoryName(buttonLabel);
                                          }
                                          //-------------
                                          public function onButtonOver (e:Event):void
                                          {
                                              height = BUTTON_HEIGHT-10;
                                              width  = BUTTON_WIDTH-10;
                                          }
                                   
                                          /////////////////////////////////////
                                          // Handlers below are for word wrap
                                          //
                                          protected override function createChildren() : void
                                          {
                                              if ( !textField )
                                              {
                                                  textField = IUITextField( createInFontContext( NoTruncationUITextField ) );
                                                  textField.styleName = this;  
                                                  addChild( DisplayObject( textField ) );
                                              }
                                            
                                              super.createChildren();
                                            
                                              textField.multiline = true;
                                              textField.wordWrap = true;
                                          }
                                          //--------------
                                         override protected function measure() : void
                                          {
                                              //for button spacing
                                              height = height + BUTTON_SPACING;
                                              width = width + BUTTON_SPACING;
                                             
                                         
                                              if ( isNaN( explicitWidth ) == false )
                                              {
                                                  textField.text = label;
                                                
                                                  textField.width =
                                                      explicitWidth -
                                                      getStyle( "paddingLeft" ) -
                                                      getStyle( "paddingRight" );
                                                    
                                                  measuredHeight =
                                                      textField.getExplicitOrMeasuredHeight() +
                                                      getStyle( "paddingTop" ) +
                                                      getStyle( "paddingBottom" );
                                              }
                                              else
                                              {
                                                  super.measure();
                                              }              
                                          }
                                         //---------------------
                                          override protected function updateDisplayList(
                                              unscaledWidth : Number, unscaledHeight : Number ) : void      

                                          {
                                           
                                              //for button spacing
                                              unscaledWidth =  unscaledWidth - BUTTON_SPACING;
                                              unscaledHeight = unscaledHeight - BUTTON_SPACING;
                                             
                                            
                                             
                                              super.updateDisplayList( unscaledWidth, unscaledHeight );
                                             
                                            
                                            
                                              textField.setActualSize(
                                                  textField.width,
                                                  textField.getExplicitOrMeasuredHeight() );
                                            
                                            
                                              if(textField.height > TEXTFLD_MIN_HEIGHT )
                                              {
                                                  var spaceTopBottom:Number = BUTTON_HEIGHT - textField.height;
                                                  textField.move( textField.x, textField.y-6 );
                                              }
                                             
                                            
                                             
                                          }      
                                          //---Set Style for Buttons----
                                          override public function set data(value:Object):void
                                          {
                                              /*if (_listData) {
                                                  if (_listData.icon) {
                                                      this.setStyle('icon', _listData.icon);
                                                  }
                                              }
                                              */
                                              super.data=value;
                                             
                                              styleName= "ButtonCategories";
                                             
                                           
                                          }
                                          /////////////////////////////////////
                                          //  Not being used currently...
                                          //
                                          //-----------------
                                          /*override public function get listData():BaseListData
                                          {
                                              return _baseListData;
                                                  
                                          }
                                          //-------------------
                                          override public function set listData(value:BaseListData):void
                                          {
                                              super.listData = value;
                                              _baseListData = value;
                                              _listData = _baseListData as ListData;
                                          }
                                           //----------------- */

                                      }
                                  }

                                  • 14. Re: TileList Padding for Button itemrenderer
                                    Flex harUI Adobe Employee

                                    Did you try using the centering techniques described here: http://blogs.adobe.com/aharui/2007/04/more_thinking_about_item_rende.html

                                     

                                    I still don't think you want to be changing height directly.

                                     

                                    Alex Harui

                                    Flex SDK Developer

                                    Adobe Systems Inc.

                                    Blog: http://blogs.adobe.com/aharui

                                    • 15. Re: TileList Padding for Button itemrenderer
                                      Mike6679 Level 1

                                      I looked at it but there or no TileList specific examples and I wasn't able to use any of the examples there and apply them to my situtation...

                                      • 16. Re: TileList Padding for Button itemrenderer
                                        Mike6679 Level 1

                                        Ok I have gotten closer  (changes in red) ......  In meaure()  I set the height and width and in updateDisplayList() I set the position. Which seems to get it close to centered and evenly spaced, however Flex still will not allow me to perfectly center them, as the second cloumn of buttons doesn't seem to be movable ( this.x = BUTTON_POS_COL2) doesn't  do anything  .  The bigger problem still remains when I mouse over or click the buttons....I see the lt blue halo rectangle (it seems to be the original size of the button before I sized it) around my newly sized button and I can't figure out how to get rid of it.....

                                         

                                        any ideas?

                                         

                                         

                                         

                                         

                                        ////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////

                                        /*
                                        o   This class provides a button that supports
                                             word wrap for label & spacing between buttons

                                        o   Its used by search_category.mxml module

                                         

                                        */
                                        package action.button
                                        {
                                            import flash.display.*;
                                            import flash.events.*;
                                           
                                            import mx.controls.Button;
                                            import mx.controls.listClasses.BaseListData;
                                            import mx.controls.listClasses.ListData;
                                            import mx.core.Application;
                                            import mx.core.IUITextField;
                                            //import flexlib.controls.CanvasButton
                                           
                                          
                                            public class ButtonCatSearch extends Button
                                            {
                                               
                                                private var _baseListData:BaseListData;
                                                private var _listData:ListData;
                                                private var _label:String="";
                                                private var buttonLabel:String;
                                                 [Bindable]public var MainApp:procrit_icd9_web; //"procrit_icd9' is our Main Application
                                               
                                                private const TEXTFLD_MIN_HEIGHT:int = 18;
                                               
                                                private const BUTTON_HEIGHT:int = 38;
                                                private const BUTTON_WIDTH:int = 125;
                                                private const BUTTON_SPACING:int = 20;
                                               
                                                private const BUTTON_POS_INIT_COL1:int = 0;
                                                private const BUTTON_POS_INIT_COL2:int = 199;
                                                private const BUTTON_POS_COL1:int =16;
                                                private const BUTTON_POS_COL2:int = 208;
                                                //private const BUTTON_TEXT_COLOR:String = "ffffff";
                                               
                                             
                                               
                                                //for adobe bug: ////////////////////
                                                //note: may only need this declared
                                                //in the main app
                                                import mx.managers.IDragManager;
                                                private var iDragManager:IDragManager; 
                                                //////////////////////////////////////
                                               
                                                public function ButtonCatSearch()
                                                {
                                                   
                                                     useHandCursor = true ;
                                                     buttonMode = true;
                                                     mouseChildren = false;

                                         

                                                    
                                                     addEventListener(MouseEvent.CLICK,onButtonClick);
                                                     addEventListener(MouseEvent.MOUSE_OVER,onButtonOver);
                                                     addEventListener(MouseEvent.MOUSE_MOVE,onButtonOver);
                                                }
                                                //--------------
                                                public function onButtonClick(e:Event):void
                                                {
                                                   
                                                    //we use "MainApp" to get the loaded XML
                                                    MainApp= Application.application as procrit_icd9_web;
                                                    
                                                    buttonLabel= e.currentTarget.label;
                                                    
                                                    //we will pass the category name back to the main app
                                                    //then search_results will retrieve it from there
                                                    MainApp.changeState("search_results");
                                                    MainApp.setCategoryName(buttonLabel);
                                                }
                                                //-------------
                                                public function onButtonOver (e:Event):void
                                                {
                                               
                                                }
                                         
                                                /////////////////////////////////////
                                                // Handlers below are for word wrap
                                                //
                                                protected override function createChildren() : void
                                                {
                                                    if ( !textField )
                                                    {
                                                        textField = IUITextField( createInFontContext( NoTruncationUITextField ) );
                                                        textField.styleName = this;  
                                                        addChild( DisplayObject( textField ) );
                                                    }
                                                  
                                                    super.createChildren();
                                                  
                                                    textField.multiline = true;
                                                    textField.wordWrap = true;
                                                }
                                                //--------------
                                                override protected function measure() : void
                                                {
                                                    //SIZE
                                                  width = BUTTON_WIDTH;
                                                    height = BUTTON_HEIGHT;

                                                   
                                                   if ( isNaN( explicitWidth ) == false )
                                                    {
                                                        textField.text = label;
                                                      
                                                        textField.width =
                                                            explicitWidth -
                                                            getStyle( "paddingLeft" ) -
                                                            getStyle( "paddingRight" );
                                                          
                                                        measuredHeight =
                                                            textField.getExplicitOrMeasuredHeight() +
                                                            getStyle( "paddingTop" ) +
                                                            getStyle( "paddingBottom" );
                                                    }
                                                    //else
                                                    //{
                                                    //    super.measure();
                                                    //}  
                                                   
                                                     super.measure();           
                                                }
                                               //---------------------
                                                override protected function updateDisplayList(
                                                    unscaledWidth : Number, unscaledHeight : Number ) : void      
                                                {
                                                 
                                                    //for button spacing
                                                    unscaledWidth =  unscaledWidth - BUTTON_SPACING;
                                                   
                                                    //NOW POSITION:
                                                    if(this.x == BUTTON_POS_INIT_COL1)
                                                         this.x = BUTTON_POS_COL1;
                                                    else if (this.x == BUTTON_POS_INIT_COL2)
                                                        this.x = BUTTON_POS_COL2;

                                                   
                                             
                                                  
                                                   
                                                    super.updateDisplayList( unscaledWidth, unscaledHeight );
                                                   

                                                   textField.setActualSize(
                                                        textField.width,
                                                        textField.getExplicitOrMeasuredHeight() );
                                                  
                                                  
                                                    if(textField.height > TEXTFLD_MIN_HEIGHT )
                                                    {
                                                        var spaceTopBottom:Number = BUTTON_HEIGHT - textField.height;
                                                        textField.move( textField.x, textField.y-6 );
                                                    }
                                                   
                                                  
                                                   
                                                }      
                                                //---Set Style for Buttons----
                                                override public function set data(value:Object):void
                                                {
                                                    /*if (_listData) {
                                                        if (_listData.icon) {
                                                            this.setStyle('icon', _listData.icon);
                                                        }
                                                    }
                                                    */
                                                    super.data=value;
                                                   
                                                    styleName= "ButtonCategories";
                                                   
                                                 
                                                }
                                                /////////////////////////////////////
                                                //  Not being used currently...
                                                //
                                                //-----------------
                                                /*override public function get listData():BaseListData
                                                {
                                                    return _baseListData;
                                                        
                                                }
                                                //-------------------
                                                override public function set listData(value:BaseListData):void
                                                {
                                                    super.listData = value;
                                                    _baseListData = value;
                                                    _listData = _baseListData as ListData;
                                                }
                                                 //----------------- */
                                            }
                                        }

                                        • 17. Re: TileList Padding for Button itemrenderer
                                          Flex harUI Adobe Employee

                                          One way would be to draw a background in the area around the button.  That should obscure the blue highlighting.

                                           

                                          It is not standard practice to set width/height in measure().  Hopefully none of our documentation and examples do that.  Note also that TileList is going to measure the the first item in the dataprovider and use that to determine the width of the columns of renderers.  If the TileList is wider than the area taken up by the columns of renderers it will simply show blank backgrounds to the right of the last column.  Columns do not automatically resize to fit the available area.  You can set columnWidth on the TileList and then you definitely don't want to set width/height in the renderer's measure as it will be assigned a different width/height before the call to updateDisplayList.

                                           

                                           

                                           

                                          Alex Harui

                                          Flex SDK Developer

                                          Adobe Systems Inc.

                                          Blog: http://blogs.adobe.com/aharui

                                          • 18. Re: TileList Padding for Button itemrenderer
                                            Mike6679 Level 1

                                            I appreciate your responses ...

                                             

                                            Ok I removed height and width in measure() and now I just set height in the contructor, adjust position in updatedisplaylist() and set the column wdith in my TileList declaration

                                             

                                             

                                            Now it did take some trial and error (with the column widths and positioning) to get it just right. and the spacing is not exactly what I want but everything is centered. Now I just need to get rid of that blue highlight....

                                             

                                             

                                            -Mike

                                             

                                             

                                             

                                             

                                            <!-- Tile List for displaying Button Categories-->  
                                                <mx:TileList     columnCount="2"
                                                                   x="0" y="171"
                                                                   height="279" width="400"
                                                                    columnWidth="188"
                                                                   itemRenderer="action.button.ButtonCatSearch"
                                                                   labelField="@name"
                                                                   dataProvider="{MainApp.codesXML.children()}"  id="tileListCatNames"  allowMultipleSelection="false">
                                                </mx:TileList>

                                             

                                             

                                             

                                             

                                             

                                            /*
                                            o   This class provides a button that supports
                                                 word wrap for label & spacing between buttons

                                            o   Its used by search_category.mxml module

                                             

                                            */
                                            package action.button
                                            {
                                                import flash.display.*;
                                                import flash.events.*;
                                               
                                                import mx.controls.Button;
                                                import mx.controls.listClasses.BaseListData;
                                                import mx.controls.listClasses.ListData;
                                                import mx.core.Application;
                                                import mx.core.IUITextField;
                                                //import flexlib.controls.CanvasButton
                                               
                                              
                                                public class ButtonCatSearch extends Button
                                                {
                                                   
                                                    private var _baseListData:BaseListData;
                                                    private var _listData:ListData;
                                                    private var _label:String="";
                                                    private var buttonLabel:String;
                                                     [Bindable]public var MainApp:procrit_icd9_web; //"procrit_icd9' is our Main Application
                                                   
                                                    private const TEXTFLD_MIN_HEIGHT:int = 18;
                                                   
                                                    private const BUTTON_HEIGHT:int = 38;
                                                    private const BUTTON_WIDTH:int = 125;
                                                    private const BUTTON_SPACING:int = 23;
                                                   
                                                    private const BUTTON_POS_INIT_COL1:int = 0;
                                                    private const BUTTON_POS_INIT_COL2:int = 199;
                                                    private const BUTTON_POS_COL1:int =20;
                                                    private const BUTTON_POS_COL2:int = 208;
                                                     //private const BUTTON_TEXT_COLOR:String = "ffffff";
                                                   
                                                 
                                                   
                                                    //for adobe bug: ////////////////////
                                                    //note: may only need this declared
                                                    //in the main app
                                                    import mx.managers.IDragManager;
                                                    private var iDragManager:IDragManager; 
                                                    //////////////////////////////////////
                                                   
                                                    public function ButtonCatSearch()
                                                    {
                                                       
                                                         useHandCursor = true ;
                                                         buttonMode = true;
                                                         mouseChildren = false;
                                                      
                                                         height = BUTTON_HEIGHT;

                                             

                                                        
                                                         addEventListener(MouseEvent.CLICK,onButtonClick);
                                                         addEventListener(MouseEvent.MOUSE_OVER,onButtonOver);
                                                         addEventListener(MouseEvent.MOUSE_MOVE,onButtonOver);
                                                    }
                                                    //--------------
                                                    public function onButtonClick(e:Event):void
                                                    {
                                                       
                                                        //we use "MainApp" to get the loaded XML
                                                        MainApp= Application.application as procrit_icd9_web;
                                                        
                                                        buttonLabel= e.currentTarget.label;
                                                        
                                                        //we will pass the category name back to the main app
                                                        //then search_results will retrieve it from there
                                                        MainApp.changeState("search_results");
                                                        MainApp.setCategoryName(buttonLabel);
                                                    }
                                                    //-------------
                                                    public function onButtonOver (e:Event):void
                                                    {
                                                   
                                                    }
                                             
                                                    /////////////////////////////////////
                                                    // Handlers below are for word wrap
                                                    //
                                                    protected override function createChildren() : void
                                                    {
                                                        if ( !textField )
                                                        {
                                                            textField = IUITextField( createInFontContext( NoTruncationUITextField ) );
                                                            textField.styleName = this;  
                                                            addChild( DisplayObject( textField ) );
                                                        }
                                                      
                                                        super.createChildren();
                                                      
                                                        textField.multiline = true;
                                                        textField.wordWrap = true;
                                                    }
                                                    //--------------
                                                    override protected function measure() : void
                                                    {
                                                       
                                                  
                                                       if ( isNaN( explicitWidth ) == false )
                                                        {
                                                            textField.text = label;
                                                          
                                                            textField.width =
                                                                explicitWidth -
                                                                getStyle( "paddingLeft" ) -
                                                                getStyle( "paddingRight" );
                                                              
                                                            measuredHeight =
                                                                textField.getExplicitOrMeasuredHeight() +
                                                                getStyle( "paddingTop" ) +
                                                                getStyle( "paddingBottom" );
                                                        }
                                                        //else
                                                        //{
                                                        //    super.measure();
                                                        //}  
                                                       
                                                         super.measure();           
                                                    }
                                                   //---------------------
                                                    override protected function updateDisplayList(
                                                        unscaledWidth : Number, unscaledHeight : Number ) : void      
                                                    {
                                                     
                                                        //for button spacing
                                                        unscaledWidth =  unscaledWidth - BUTTON_SPACING;
                                                       
                                                        //NOW POSITION:
                                                        if(this.x == BUTTON_POS_INIT_COL1)
                                                             this.x = BUTTON_POS_COL1;
                                                        //else if (this.x == BUTTON_POS_INIT_COL2)
                                                            //this.x = BUTTON_POS_COL2;
                                                           
                                                       
                                                       super.updateDisplayList( unscaledWidth, unscaledHeight );
                                                       

                                                       textField.setActualSize(
                                                            textField.width,
                                                            textField.getExplicitOrMeasuredHeight() );
                                                      
                                                      
                                                        if(textField.height > TEXTFLD_MIN_HEIGHT )
                                                        {
                                                            var spaceTopBottom:Number = BUTTON_HEIGHT - textField.height;
                                                            textField.move( textField.x, textField.y-6 );
                                                        }
                                                       
                                                      
                                                       
                                                    }      
                                                    //---Set Style for Buttons----
                                                    override public function set data(value:Object):void
                                                    {
                                                        /*if (_listData) {
                                                            if (_listData.icon) {
                                                                this.setStyle('icon', _listData.icon);
                                                            }
                                                        }
                                                        */
                                                        super.data=value;
                                                       
                                                        styleName= "ButtonCategories";
                                                       
                                                     
                                                    }
                                                    /////////////////////////////////////
                                                    //  Not being used currently...
                                                    //
                                                    //-----------------
                                                    /*override public function get listData():BaseListData
                                                    {
                                                        return _baseListData;
                                                            
                                                    }
                                                    //-------------------
                                                    override public function set listData(value:BaseListData):void
                                                    {
                                                        super.listData = value;
                                                        _baseListData = value;
                                                        _listData = _baseListData as ListData;
                                                    }
                                                     //----------------- */
                                                }
                                            }

                                            • 19. Re: TileList Padding for Button itemrenderer
                                              Mike6679 Level 1

                                              wouldn't you know it....adding a rect behind each button just throws a monkey wrench into everything........it works for some of the buttons , but it covers some of the buttons themselves instead of going behind them, and you still see blue behind the first two buttons in each column....

                                               

                                               

                                                //---------------------
                                                      override protected function updateDisplayList(
                                                          unscaledWidth : Number, unscaledHeight : Number ) : void      
                                                      {
                                                       
                                                          //for button spacing
                                                          unscaledWidth =  unscaledWidth - BUTTON_SPACING;
                                                         
                                                          //NOW POSITION:
                                                          if(this.x == BUTTON_POS_INIT_COL1)
                                                               this.x = BUTTON_POS_COL1;
                                                          //else if (this.x == BUTTON_POS_INIT_COL2)
                                                              //this.x = BUTTON_POS_COL2;
                                                             
                                                         
                                                         super.updateDisplayList( unscaledWidth, unscaledHeight );
                                                         

                                                         textField.setActualSize(
                                                              textField.width,
                                                              textField.getExplicitOrMeasuredHeight() );
                                                        
                                                        
                                                          if(textField.height > TEXTFLD_MIN_HEIGHT )
                                                          {
                                                              var spaceTopBottom:Number = BUTTON_HEIGHT - textField.height;
                                                              textField.move( textField.x, textField.y-6 );
                                                          }
                                                         
                                                      
                                                        
                                                           backgroundFillColor = 0xFFFFFF;


                                                         

                                                          var g:Graphics = graphics;
                                                          g.clear();
                                                          g.beginFill(backgroundFillColor,1.0);
                                                          g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                                                          g.endFill();
                                                          g.moveTo(0, 0);

                                               

                                                         
                                                        
                                                         
                                                      }

                                              • 20. Re: TileList Padding for Button itemrenderer
                                                Mike6679 Level 1

                                                also just realized that my background alpha for my tilelist is .3 so having a white border around the buttons won't work for me .........there has to be another way to get rid of that halo blue highlight.......I'm sure you have something in that Flex vault of yours......

                                                 

                                                 

                                                regards

                                                 

                                                -Mike

                                                • 21. Re: TileList Padding for Button itemrenderer
                                                  Flex harUI Adobe Employee

                                                  You can simply override drawHighlightIndicator/drawSelectionIndicator and shut it off completely.

                                                   

                                                  Alex Harui

                                                  Flex SDK Developer

                                                  Adobe Systems Inc.

                                                  Blog: http://blogs.adobe.com/aharui

                                                  • 22. Re: TileList Padding for Button itemrenderer
                                                    Mike6679 Level 1

                                                    Thanks,

                                                     

                                                    That did the trick. For anyone who has been follwing this discussion here is how you remove highlighting around a button in a Tilelist .....

                                                     

                                                    -Mike

                                                     

                                                     

                                                    <!-- Tile List for displaying Button Categories-->  
                                                        <tileListSpec:tilelistNoHighlight      columnCount="2"
                                                                                                  x="0" y="171"
                                                                                               height="279" width="400"
                                                                                               columnWidth="188"
                                                                                               backgroundAlpha=".3"
                                                                                               borderThickness="0"
                                                                                               itemRenderer="action.button.ButtonCatSearch"
                                                                                               labelField="@name"
                                                                                               dataProvider="{MainApp.codesXML.children()}" 
                                                                                               id="tileListCatNames" 
                                                                                               allowMultipleSelection="false" >
                                                                                          
                                                      
                                                        </tileListSpec:tilelistNoHighlight>

                                                     

                                                     

                                                    ////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////

                                                     

                                                     

                                                    package action.tilelist
                                                    {

                                                    import flash.display.Sprite;
                                                    import mx.controls.TileList;
                                                    import mx.controls.listClasses.IListItemRenderer;


                                                    public class tilelistNoHighlight extends TileList
                                                    {


                                                        // Remove the rollOver indicator
                                                        override protected function drawSelectionIndicator(
                                                            indicator:Sprite, x:Number, y:Number,
                                                            width:Number, height:Number, color:uint,
                                                            itemRenderer:IListItemRenderer):void
                                                        {
                                                            /* You can leave this method empty or manage your own design */
                                                        }


                                                        // Remove the Selection indicator
                                                        override protected function drawHighlightIndicator(
                                                            indicator:Sprite, x:Number, y:Number,
                                                            width:Number, height:Number, color:uint,
                                                            itemRenderer:IListItemRenderer):void
                                                        {
                                                            /* You can leave this method empty or manage your own design */
                                                        }


                                                        public function tilelistNoHighlight()
                                                        {
                                                            super();
                                                        }

                                                        }
                                                    }

                                                    • 23. Re: TileList Padding for Button itemrenderer
                                                      Marvin-Martian

                                                      I have a near identical problem to this - a TileList with a custom renderer

                                                      derived from Canvas which contains a bunch of other controls. I want to have some pad

                                                      ding around each canvas object / list item

                                                       

                                                      Setting the TileList paddingTop and paddingBottom does exactly what I'd expect - the padding is added to each list item. However paddingLeft and paddingRight has no effect - each item/renderer is expanded to fill the column width completely.

                                                       

                                                      Is this "expected" behaviour? Seems a little inconsistent to me....

                                                      • 24. Re: TileList Padding for Button itemrenderer
                                                        Flex harUI Adobe Employee

                                                        It is expected and inconsistent.  It is a holdover from Flex 2 when speed was important.

                                                         

                                                        Alex Harui

                                                        Flex SDK Developer

                                                        Adobe Systems Inc.

                                                        Blog: http://blogs.adobe.com/aharui