Skip navigation
Currently Being Moderated

Multiline combobox with AS3?

Apr 8, 2010 1:44 AM

Hi

 

Is there a way to define AS3 combobox to wrap long lines?

 
Replies
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 8, 2010 6:36 AM   in reply to Petteri_Paananen

    if cb is your combobox, import the textinput class and use:

     

    TextInput(cb.getChildAt(1)).textField.multiline=true
    TextInput(cb.getChildAt(1)).textField.wordWrap=true

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 8, 2010 8:51 AM   in reply to Petteri_Paananen

    where's the code i suggested?

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 8, 2010 12:47 PM   in reply to Petteri_Paananen

    is that rowHeight sufficient to display 2 rows of text?  increase it.

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 8, 2010 1:48 PM   in reply to Petteri_Paananen

    double it and retest.


     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 9, 2010 7:43 AM   in reply to Petteri_Paananen

    i don't think you have enough room to show the 2nd line.  take a screen shot after using this code:

     

    function magLoaded(e:Event) {
        CBtoc.prompt =  magXML.tocHeader[currentMagId];

        CBtoc.visible = true;
         CBtoc.dropdown.rowHeight = 30;

     

    TextInput(CBtoc.getChildAt(1)).textField.multiline=true;
    TextInput(CBtoc.getChildAt(1)).textField.wordWrap=true;

    TextInput(CBtoc.getChildAt(1)).textField.border=true;


          var tocNumero = CB.selectedIndex;
        var tocXML:XML;
        var  tocLoader:URLLoader = new URLLoader();
        tocLoader.load(new  URLRequest(magXML.Book.toc[tocNumero]));
         tocLoader.addEventListener(Event.COMPLETE, captureData2);

    }

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 9, 2010 9:33 AM   in reply to Petteri_Paananen

    there's no room for a 2nd line to display.

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 9, 2010 11:24 AM   in reply to Petteri_Paananen

    (it actually shows text in two lines if I make linebreak to xml where  those labels are loaded)

     

    without increasing the row height?

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 9, 2010 3:06 PM   in reply to Petteri_Paananen

    and you're NOT using this code to achieve multiline support:

     

    TextInput(CBtoc.getChildAt(1)).textField.multiline=true;
    TextInput(CBtoc.getChildAt(1)).textField.wordWrap=true;

     
    |
    Mark as:
  • kglad
    72,189 posts
    Jul 21, 2002
    Currently Being Moderated
    Apr 10, 2010 7:15 AM   in reply to Petteri_Paananen

    i don't understand what you're doing.

     

    the combobox labels will not display multiline content unless you code for that.  there are a number of ways to do that and i gave one.  if you claim you're doing that another way, you haven't explained and if you're not doing anything to make your combobox multiline you're mis-reporting.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2010 11:12 AM   in reply to Petteri_Paananen

    The smaple provided as download does not work.

     

    Can you please upload a revised sample.

     

    Best

    Harry

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 5:45 AM   in reply to Petteri_Paananen

    You should use a custom CellRenderer like this:

     


     

     

    =============================

     

    import fl.controls.ComboBox;

     

    ComboBox(dropDown).dropdown.setStyle("cellRenderer", MyCellRenderer);

     

     

     

     

    =============================

    Class MyCellRenderer
    =============================

     

    package views

    {

     

        import flash.text.TextFormat;

        import fl.controls.listClasses.CellRenderer;

     

     

        public class MyCellRenderer extends CellRenderer

        {

            public function MyCellRenderer()

            {

                super();

            }

    /*

    / This is another class of the CellRenderer class, which we need

    / to override to set new properties. We change the textField properties.

    / The textField is derived from the LabelButton, which is used for the

    / DataGrid and List components rows and headers. We set wordWrap to true if the

    / text is very long and give html properties to the textField. The string

    / for the textField has the name 'label'.

    */

            override protected function drawLayout():void

            {

                textField.wordWrap = true;

                textField.htmlText = this.label;

     

                super.drawLayout();

            }

        }

    }

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2012 1:40 PM   in reply to jfweber

    I tried your solution. It works partially. The problem is that rowCount is fixed for all rows. Is there any solution for this?

     
    |
    Mark as:
  • Currently Being Moderated
    May 10, 2012 1:57 AM   in reply to elder.soares
     
    |
    Mark as:
  • Currently Being Moderated
    May 10, 2012 8:33 AM   in reply to jfweber

    sorry, mistake + bad english! i meant rowHeight. what i need is a list with different height for each row. but this property is for all rows.  this image shows what happens to my list, applying the code above with some long labels.list error.png

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 1:45 AM   in reply to elder.soares

    You can set the row height to something like 40px

     

    comboBox.rowHeight = 40;

     

     

     

     

    Here is a different approach of the CellRenderer which has a function within which is called for each row; you may be able to modify this to have different row heights:

     

    MultiLineCell is also a Cellrenderer to be set by

     

    ComboBox(dropDown).dropdown.setStyle("cellRenderer", MultiLineCell);

     

     

    /********************************************************************* *******

    Copyright (C) 2005 Macromedia, Inc. All Rights Reserved.

    The following is Sample Code and is subject to all restrictions on

    such code as contained in the End User License Agreement accompanying

    this product.

     

    Class: MultiLineCell

    An example of a simple cell renderer class that creates a multiple line

    text Field.

    ********************************************************************** ******/

    class templates.MultiLineCell extends mx.core.UIComponent

    {

        private var multiLineLabel;     // The label to be used for text.

        private var owner;                 // The row that contains this cell.

        private var listOwner;             // The List/grid/tree that contains this cell.

       

        // Cell height offset from the row height total and preferred cell width.

        private static var PREFERRED_HEIGHT_OFFSET = 4;

        private static var PREFERRED_WIDTH = 100;

        // Starting depth.

        private var startDepth:Number = 1;

     

        // Constructor.  Should be empty.

        public function MultiLineCell()

        {

        }

     

        /* UIObject expects you to fill in createChildren by instantiating

        all the movie clip assets you might need upon initialization.

        In this case we are creating one label*/

        public function createChildren():Void

        {

            // The createLabel method is a useful method of UIObject and a handy way to make labels in components.

            var c = multiLineLabel = this.createLabel("multiLineLabel", startDepth);

            // Links the style of the label to the style of the grid

            c.styleName = listOwner;

            c.selectable = false;

            c.tabEnabled = false;

            c.background = false;

            c.border = false;

            c.multiline = true;

            c.wordWrap = true;

        }

     

        public function size():Void

        {

            /* By extending UIComponent, which imports UIObject, you get setSize for free,

            however, UIComponent expects you to implement size().

            Assume __width and __height are set for you now.

            You're going to expand the cell to fit the whole rowHeight.

            The rowHeight itself is a property of the list type component that we are rendering a cell in.

            Since we want the rowHeight to fit two lines, when creating the list type component using this

            cellRenderer class, make sure its rowHeight property is set large enough that two lines of text

            can render within it.*/

       

            /*__width and __height are the underlying variables

            of the getter/setters .width and .height.*/

            var c = multiLineLabel;

            c.setSize(__width, __height);

        }

     

        // Provides the preferred height of the cell.  Inherited method.

        public function getPreferredHeight():Number

        {

            /* The cell is given a property, "owner",

            that references the row. It’s always preferred

            that the cell take up most of the row's height.

            In this case we will keep the cell slightly smaller.*/

            return owner.__height - PREFERRED_HEIGHT_OFFSET;

        }

     

        // Called by the owner to set the value in the cell.  Inherited method.

        public function setValue(suggestedValue:String, item:Object, selected:Boolean):Void

        {

            /* If item is undefined, nothing should be rendered in the cell,

            so set the label as invisible. Note: For scrolling List type components

            like a scrolling datagrid, the cells are intended to be empty as they scroll

            just out of sight, and then the cell is reused again and set to a new value

            producing an animated effect of scrolling.  For this reason, you cannot rely on

            any one cell always having data to show or the same value.*/

            if (item==undefined){

                multiLineLabel.text._visible = false;

            }

            multiLineLabel.text = suggestedValue;

        }

        // function getPreferredWidth :: only for menus and DataGrid headers

        // function getCellIndex :: not used in this cell renderer

        // function getDataLabel :: not used in this cell renderer

    }

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 1:49 AM   in reply to jfweber

    Add some traces to the functions to see what functions are being called ^^

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 9:56 AM   in reply to jfweber

    thank you but i really can't make it work. despite lots of errors like Void with capital, not a package statement, properties with different names, it inherits from mx.core.UIComponent, which is for Flex, not Flash Professional since 8. I'm using fl.controls package. I think it doesn't fit for me. Is it AS2?

     
    |
    Mark as:
  • Currently Being Moderated
    May 14, 2012 1:17 AM   in reply to elder.soares

    Sorry, my mistake^^ forget both my last replies on this

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points