2 Replies Latest reply on Oct 28, 2009 7:27 AM by Mike6679

    Custom Button Class wordWrap

    Mike6679

      Anyone know how to make text wrap for a custom  Button Class? I have tried everything (as you can see below) ! I even tried the Flexlib CanvasButton class, but not really sure how to apply that to a custom Class. BTW these buttons are inside a TileList if that makes any difference....I really like Flex but sometimes its these really simple things that you SHOULD be able to do easily that just drive me NUTS!

       

      thanks in advance!!

       

      -Mike

       

      package action.button
      {
          import flash.display.*;
          import flash.events.*;
         
          import mx.controls.Button;
          import mx.controls.listClasses.BaseListData;
          import mx.controls.listClasses.ListData;
          import action.button.NoTruncationUITextField;
          import mx.core.UITextField;
          import flexlib.controls.CanvasButton;

       

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

       

                  setStyle("horizontalGap",100);
                  setStyle("wordWrap",true);
                 
                  //wordWrap=true;
                 
                  addEventListener(MouseEvent.MOUSE_DOWN,onButtonClick);
                 
              }
              public function onButtonClick(e:Event):void
              {
                  _label = e.target.label;
                 
              }
              //----------------
              //to allow word wrap
              //for Button
              override protected function createChildren():void
              {
                  // Create a UITextField to display the label.
                  if (!textField)
                  {
                      textField = new UITextField();
                      textField.styleName = this;
                      addChild(DisplayObject(textField));
                  }
                  super.createChildren();
                  textField.multiline = true;
                  textField.wordWrap = true;
             
                 
                 
                  super.createChildren();
              }
              //-----------------
              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;
                  setStyle("wordWrap", true);
              }
              //-------------------------
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
                  super.updateDisplayList(unscaledWidth, unscaledHeight);

       

                 
                  this.textField.multiline = true;
                  this.textField.wordWrap = true;
                 
                  //data.@price <= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
              }
          }
      }

        • 1. Re: Custom Button Class wordWrap
          paul.williams Level 4

          You'll need to override measure() to get the correct behaviour. By default the Button sets its width from the TextField child. What you want is for the width of the TextField to be limited by the width of the Button, and the height of the Button to vary depending on the measured height of the TextField.

           

          I've had a quick go at this below, but it'll probably need more work. I used Alex Harui's multi-line radio button example as a starting point:

           

          http://blogs.adobe.com/aharui/2007/04/multiline_buttons.html

           

          ------------------------------------------------

           

          package
          {
              import flash.display.DisplayObject;
             
              import mx.controls.Button;
              import mx.core.IUITextField;

           

              public class WordWrapButton extends Button
              {
                  protected override function createChildren() : void
                  {
                      if ( !textField )
                      {
                          textField = IUITextField( createInFontContext( UITextFieldNoTruncation ) );
                          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();
                      }               
                  }
                 
                  override protected function updateDisplayList(
                      unscaledWidth : Number, unscaledHeight : Number ) : void       
                  {
                      super.updateDisplayList( unscaledWidth, unscaledHeight );
                     
                      textField.setActualSize(
                          textField.width,
                          textField.getExplicitOrMeasuredHeight() );
                     
                      textField.move( textField.x, getStyle( "paddingTop" ) );       
                  }       
              }
          }

           

          ------------------------------

           

          package
          {
              import flash.text.TextFormat;
              import flash.text.TextFormatAlign;
             
              import mx.core.UITextField;

           

              public class UITextFieldNoTruncation extends UITextField
              {   
                  public override function truncateToFit( truncationIndicator : String = null ) : Boolean
                  {
                      return false;   
                  }
              }
          }

           

          ------------------------------

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application
              xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              xmlns:local="*">
             
              <local:WordWrapButton
                  width="50"
                  label="A very long label that I would like the button to wrap"/>

           

              <local:WordWrapButton
                  width="100"
                  label="A very long label that I would like the button to wrap"/>

           

              <local:WordWrapButton
                  width="200"
                  label="A very long label that I would like the button to wrap"/>

           

              <local:WordWrapButton
                  width="300"
                  label="A very long label that I would like the button to wrap"/>

           

              <local:WordWrapButton
                  width="400"
                  label="A very long label that I would like the button to wrap"/>

           

          </mx:Application>

          • 2. Re: Custom Button Class wordWrap
            Mike6679 Level 1

            Thanks Paul!  That did the trick. Like you said , I just had to tweak it a bit....

             

             

            override protected function updateDisplayList(
                        unscaledWidth : Number, unscaledHeight : Number ) : void      
                    {
                        super.updateDisplayList( unscaledWidth, unscaledHeight );
                      
                        textField.setActualSize(
                            textField.width,
                            textField.getExplicitOrMeasuredHeight() );

                       // I added this code here to nudge the text box up a bit so the textfld is centered
                        if(textField.height > TEXTFLD_MIN_HEIGHT /* in my case 18 for one line 30 for multiline*/
                        {
                            var spaceTopBottom:Number = BUTTON_HEIGHT - textField.height;
                            textField.move( textField.x, textField.y-6 );
                        }

                       //else if one line it will be centered on its own........
                       
                              
                    }