How to display a bulletted list

Question

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

Answer 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>