4 Replies Latest reply on Mar 9, 2007 10:48 AM by Newsgroup_User

    html formatting within List Component

    WarrenVIP
      Hello. Due to drive failures, the source file for a little video viewer flash movie has been lost. it consists of a list component with the videos on it and the movie plays to the side of it. The video information is being loaded from an external xml file. This information has the file name, duration . . . as well as some html formatted text within a CDATA. the html text includes img src tags, hspace, vspace and other html tags I didn't think were allowed in flash, but the person who built this (no longer with company) apparently made it work so that a small image and description would be generated by the html within the list component's cells. Is there something I have to set within the Schema to make this work? Could he have used some third party plug-in? Any help would be greatly appreciated. thnx

      _w
        • 1. Re: html formatting within List Component
          Level 7
          You'll need to create your own CellRenderer. Look at the CellRenderer API in
          the Components Language Reference


          • 2. Re: html formatting within List Component
            WarrenVIP Level 1
            I'm sorry. I'm having a helluva time trying to find what I need for this. All the documentation just refers to text formatting. Here is the html being imported from the xml file:

            • 3. Re: html formatting within List Component
              Level 7
              This will need some tweaking -- too much flickering -- but it's a start.

              First download the multiline cell render sample:
              http://www.adobe.com/support/documentation/en/flash/fl8/samples.html#component_samples


              Add a List component to the library and delete the DataGrid.

              Open MultiLineCell.as and modify the setValue 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.html=true;
              multiLineLabel.htmlText = suggestedValue;

              }


              Replace the code in frame 1 with this:


              var myHtml = "<img src='thumbs/clip01.jpg' hspace='0'
              vspace='0'>   ";
              myHtml += "<span class='videoTitle'>Clip 1</span><br/>   ";
              myHtml += "<span class='videoDescription'>Traveling in
              Style</span><br/>   ";
              myHtml += "<span class='videoDescription'>Duration: 0:56</span>";


              this.createClassObject(mx.controls.List, "myList", 1);
              myList.setSize(430,190);
              myList.move(40,40);
              myList.rowHeight = 60; // Allows for 4 lines of text at default text size.
              myList.vScrollPolicy = "auto";
              myList.setStyle("backgroundColor", 0xfcfcfc);

              myList.cellRenderer = "MultiLineCell";
              myList.addItem("myHtml");
              myList.addItem("myHtml");
              myList.addItem("myHtml");
              myList.addItem("myHtml");
              myList.addItem("myHtml");



              • 4. Re: html formatting within List Component
                Level 7
                oops!

                Should be:

                myList.addItem(myHtml);

                Not:

                myList.addItem("myHtml");