30 Replies Latest reply: May 14, 2012 1:17 AM by jfweber RSS

    Multiline combobox with AS3?

    Petteri_Paananen Community Member

      Hi

       

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

        • 1. Re: Multiline combobox with AS3?
          kglad CommunityMVP

          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

          • 2. Re: Multiline combobox with AS3?
            Petteri_Paananen Community Member

            I tried to put those two line inside magLoaded function, but I got following error:

             

            ReferenceError: Error #1065: Variable TextInput is not defined.

             

             

            I use combobox component from library (CBtoc)... I populate it with following code, data comes from XML-file:

             

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

                CBtoc.visible = true;
                CBtoc.dropdown.rowHeight = 30;
                 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);

            }

             

             

            function captureData2(e:Event):void {
                CBtoc.removeAll();
                var tocXML:XML = new XML(e.target.data);
                var il:XMLList = tocXML.article;
               
                if (il.length()==1){
                    CBtoc.visible = false;
                    }
                for (var i:uint=0; i<il.length(); i++)
                {
                    CBtoc.addItem({data:il.spread.text()[i],    label:il.name.text()[i]});
                   
                }
               
            }

            • 3. Re: Multiline combobox with AS3?
              Petteri_Paananen Community Member

              ok, I forgot to import textinput class, now it doesnt give me any warnings but combobox doesn´t wrap long lines either.... do I have those lines in wrong place?

              • 4. Re: Multiline combobox with AS3?
                kglad CommunityMVP

                where's the code i suggested?

                • 5. Re: Multiline combobox with AS3?
                  Petteri_Paananen Community Member

                  I took it away before I pasted... sorry

                   

                  It´s inside magLoaded fuction

                   

                  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;


                       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);

                  }

                  • 6. Re: Multiline combobox with AS3?
                    kglad CommunityMVP

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

                    • 7. Re: Multiline combobox with AS3?
                      Petteri_Paananen Community Member

                      it should be…

                       

                      combo.gif

                      • 8. Re: Multiline combobox with AS3?
                        kglad CommunityMVP

                        double it and retest.


                        • 9. Re: Multiline combobox with AS3?
                          Petteri_Paananen Community Member

                          didn´t work... actually I couldn´t use a value higher that 48.

                          With value 49 or higher, my drop-down menu turns to drop-up menu.... and because it´s on the top of the screen, opening list goes over the edge ...

                          • 10. Re: Multiline combobox with AS3?
                            kglad CommunityMVP

                            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);

                            }

                            • 11. Re: Multiline combobox with AS3?
                              Petteri_Paananen Community Member

                              border appeared around first line only:

                               

                              cb2.gif

                              • 12. Re: Multiline combobox with AS3?
                                kglad CommunityMVP

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

                                • 13. Re: Multiline combobox with AS3?
                                  Petteri_Paananen Community Member

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

                                  • 14. Re: Multiline combobox with AS3?
                                    kglad CommunityMVP

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

                                     

                                    without increasing the row height?

                                    • 15. Re: Multiline combobox with AS3?
                                      Petteri_Paananen Community Member

                                      yep

                                       

                                      cb3.jpg

                                      • 16. Re: Multiline combobox with AS3?
                                        kglad CommunityMVP

                                        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;

                                        • 17. Re: Multiline combobox with AS3?
                                          Petteri_Paananen Community Member

                                          Actually I was using that code when I took a screenshot, but it works also without... but my problem is that in real usage XML will be generated automatically without line breaks, so it´s not a solution...

                                          • 18. Re: Multiline combobox with AS3?
                                            kglad CommunityMVP

                                            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.

                                            • 19. Re: Multiline combobox with AS3?
                                              Petteri_Paananen Community Member

                                              Im loading labels from XML. I cant influence to that xml, it comes automatically from other system. Normally labels are quite short and they are always in one line without linebreaks in that xml. I can put some linebreaks to that xml manually for testing it, but thats not a solution for real system.

                                               

                                              I´m trying to find a solution to put into that combobox. So that if label is more than, let´s say 30 characters, combobox would split that line into 2 or even 3 lines...

                                              • 20. Re: Multiline combobox with AS3?
                                                Petteri_Paananen Community Member

                                                Heres a simplified version of my project, I have stripped everything else off, just a combobox is left there, + of course XML that holds all those labels....

                                                 

                                                http://dl.dropbox.com/u/133381/cb_test.zip

                                                • 21. Re: Multiline combobox with AS3?
                                                  Vikash Srivastava

                                                  The smaple provided as download does not work.

                                                   

                                                  Can you please upload a revised sample.

                                                   

                                                  Best

                                                  Harry

                                                  • 22. Re: Multiline combobox with AS3?
                                                    Petteri_Paananen Community Member

                                                    hmmm...strange, I just tried it and it worked for me... do you get some alert?

                                                    • 23. Re: Multiline combobox with AS3?
                                                      jfweber Community Member

                                                      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();

                                                              }

                                                          }

                                                      }

                                                      • 24. Re: Multiline combobox with AS3?
                                                        elder.soares Community Member

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

                                                        • 26. Re: Multiline combobox with AS3?
                                                          elder.soares Community Member

                                                          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

                                                          • 27. Re: Multiline combobox with AS3?
                                                            jfweber Community Member

                                                            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

                                                            }

                                                            • 28. Re: Multiline combobox with AS3?
                                                              jfweber Community Member

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

                                                              • 29. Re: Multiline combobox with AS3?
                                                                elder.soares Community Member

                                                                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?

                                                                • 30. Re: Multiline combobox with AS3?
                                                                  jfweber Community Member

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