5 Replies Latest reply on Nov 29, 2010 2:06 PM by Peter deHaan

    How to display a bulletted list

    JoshBeall Level 1

      Hi All,

       

      I'd like to display a list of agreements to the user as a bulleted list.  It's all the things that the user is agreeing to when they submit the application.

       

      What would be ideal is if there is a controller that I can bind to an array, and it will display each item in the array as a single bulleted list item.  The list of agreements will vary depending on how the user as filled out the application, and if I do it this way I could simply pass in a collection with all the items they are agreeing to.

       

      But I haven't been able to even figure out how to display a bulleted list.  I've found some posts online that address how you might do this if you're working on an editor, but I don't need editable text--I just want to display a bulleted list to users.  It seems like this is a basic feature that must be in Flex 4 somewhere, and I don't want to go reinventing the wheel.

       

      Thanks!

       

        -Josh

        • 1. Re: How to display a bulletted list
          Claudiu Ursica Level 4

          One way is to use normal List and put a bullet graphic inside the item renderer.

          Since Flex4 the label allows multiple lines so you can have the text inside

          labels.

           

          C

          • 2. Re: How to display a bulletted list
            Peter deHaan Level 4

            You can display a bulleted list in an mx:Text control using the <li> tag and setting the htmlText property. The example below just uses 8 random fonts from the user's machine, but you should be able to modify this to accept any sort of array and build the list/bullets.

            <?xml version="1.0" encoding="utf-8"?>

            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                           xmlns:s="library://ns.adobe.com/flex/spark"

                           xmlns:mx="library://ns.adobe.com/flex/mx">

             

                <fx:Script>

                    <![CDATA[

                        protected const FONTS_ARR:Array = Font.enumerateFonts(true).splice(-8).sortOn("fontName");

             

                        protected function init():void {

                            var bulletedFontsStr:String = "";

                            var fnt:Font;

                            for each (fnt in FONTS_ARR) {

                                bulletedFontsStr += "<li>" + fnt.fontName + "</li>";

                            }

                            txt.htmlText = "<ul>" + bulletedFontsStr + "</ul>";

                        }

                    ]]>

                </fx:Script>

             

                <mx:Text id="txt" creationComplete="init();" width="200" />

             

            </s:Application>

             

            Peter

            • 3. Re: How to display a bulletted list
              Devtron Level 3

              ^ NICE!!!!


              • 4. Re: How to display a bulletted list
                JoshBeall Level 1

                Ok, here's what I came up with for a bulleted list that you can bind an ArrayCollection of String items to.  Thoughts?  Any issues with this implementation?

                 

                I looked into a custom ItemRenderer, but this seemed much simpler and it's all I need in my case--a bulleted list.

                 

                I'm aware that no escaping of the input strings is being done, but that's actually intentionally--I may wish to pass in strings that include additional markup to make certain words/phrases bold.

                 

                The reason for the getter and setter on the dataProvider property is to ensure that anytime a new assignment is made to that property the change listeners are setup.

                 

                I'm interested in feedback on how I could do this better or differently, to best take advantage of the facilities Flex offers.

                 

                Thanks!

                 

                  -Josh

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           width="100%">
                     <s:layout>
                          <s:VerticalLayout/>
                     </s:layout>
                     <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                     </fx:Declarations>
                     <fx:Script>
                          <![CDATA[
                               import mx.collections.ArrayCollection;
                               import mx.events.CollectionEvent;
                               import mx.events.FlexEvent;
                               
                               private var _dataProvider:ArrayCollection;
                               
                               public function get dataProvider():ArrayCollection{
                                    if(_dataProvider == null){
                                         dataProvider = new ArrayCollection();
                                    }
                                    return _dataProvider;
                               }
                               
                               public function set dataProvider(value:ArrayCollection):void{
                                    _dataProvider = value;
                                    this.ensureBulletedListTextIsBuilt(dataProvider);
                                    this.dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE,handleItemsChange,false,0,true)
                               }
                               
                               protected function handleItemsChange(event:CollectionEvent):void{
                                    var collection:ArrayCollection = event.target as ArrayCollection;
                                    this.ensureBulletedListTextIsBuilt(collection);
                               }
                               
                               protected function ensureBulletedListTextIsBuilt(collection:ArrayCollection):void{
                                    var html:String = "";
                                    for each(var item:String in collection){
                                         html += "<li>" + item + "</li>";
                                    }
                                    bulletedListText.htmlText = html;
                                    
                               }
                
                          ]]>
                     </fx:Script>
                     <mx:Text id="bulletedListText" width="100%" />
                </s:Group>
                
                 
                

                • 5. Re: How to display a bulletted list
                  Peter deHaan Level 4

                  Not sure if this is any better, but you could also probably just use some data binding:

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                 xmlns:s="library://ns.adobe.com/flex/spark"

                                 xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:comps="comps.*">

                      <s:layout>

                          <s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" />

                      </s:layout>

                      <s:controlBarContent>

                          <s:Button label="Create ArrayCollection" click="createColl((Math.random() * 10)+1);" />

                      </s:controlBarContent>

                   

                      <fx:Script>

                          <![CDATA[

                              import mx.collections.ArrayCollection;

                   

                              [Bindable]

                              protected var coll:ArrayCollection;

                   

                              protected function createColl(len:uint):void {

                                  var arr:Array = [];

                                  var idx:uint;

                                  const fontArr:Array = Font.enumerateFonts(true).splice(-len).sortOn('fontName');

                                  for (idx = 0; idx < len; idx++) {

                                      arr.push(fontArr[idx].fontName);

                                  }

                   

                                  coll = new ArrayCollection(arr);

                              }

                   

                              protected function ensureBulletedListIsBuilt(collection:ArrayCollection):String{

                                  var html:String = "";

                                  for each(var item:String in collection){

                                      html += "<li>" + item + "</li>";

                                  }

                                  return html;

                              }

                          ]]>

                      </fx:Script>

                   

                      <s:Group width="300" x="30" y="20">

                          <mx:Text id="bulletedListText" htmlText="{ensureBulletedListIsBuilt(coll)}" width="100%" />

                      </s:Group>

                   

                  </s:Application>

                   

                   

                  Basically I just have a bindable ArrayCollection and then I bind the mx:Text control's htmlText property to ensureBulletedListIsBuilt() and pass in my bindable ArrayCollection variable. May or may not be easier than listening for collectionChange events.

                   

                  Peter