List Problem

Report · Nov 09, 2010

There are some words in the textArea, now I want to set some paras to be the list, but I failed,does anyone know how to add list dynamically?

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:ai="http://ns.adobe.com/ai/2009"
                            xmlns:d="http://ns.adobe.com/fxg/2008/dt"
                            xmlns:flm="http://ns.adobe.com/flame/2008"
                            creationComplete="initApp()">
     <fx:Script>
          <![CDATA[
               import flashx.textLayout.BuildInfo;
               import flashx.textLayout.compose.IFlowComposer;
               import flashx.textLayout.compose.TextFlowLine;
               import flashx.textLayout.conversion.TextConverter;
               import flashx.textLayout.edit.IEditManager;
               import flashx.textLayout.edit.SelectionFormat;
               import flashx.textLayout.edit.SelectionState;
               import flashx.textLayout.elements.FlowGroupElement;
               import flashx.textLayout.elements.ListElement;
               import flashx.textLayout.elements.ListItemElement;
               import flashx.textLayout.elements.ParagraphElement;
               import flashx.textLayout.elements.SpanElement;
               import flashx.textLayout.elements.TextFlow;
               import flashx.textLayout.formats.ITextLayoutFormat;
               import flashx.textLayout.formats.ListMarkerFormat;
               import flashx.textLayout.formats.ListStylePosition;
               import flashx.textLayout.formats.ListStyleType;
               import flashx.textLayout.operations.SplitParagraphOperation;
               
               import spark.components.TextArea;
               import spark.utils.TextFlowUtil;
               
               protected function initApp():void {
                    var version:String = "";
                    version += "TLF version: " + BuildInfo.VERSION + "<br/>"+"TLF Build number: " + BuildInfo.kBuildNumber;
                    var s:String = "";
                    s += "<TextFlow version='2.0.0' xmlns='http://ns.adobe.com/textLayout/2008'>";
                    s += "<p>Flex framework"+version+"</p>";
                    s += "<p>Flex is a free, open source framework for building highly interactive, expressive web applications that dep</p>";
                    s += "<p>Flex framework</p>";
                    s += "<p>Flex framework</p>";
                    s += "<p>I am a new paragraph and I'd like to start at the left below the image</p>";               
                    s += "</TextFlow>";
                    messageTA.textFlow = TextConverter.importToFlow(s, TextConverter.TEXT_LAYOUT_FORMAT);
                    
                    
               }

               protected function doSetList():void
               {
                    var interactionManager:IEditManager = messageTA.textFlow.interactionManager as IEditManager;
                         
                    var selStart:int=messageTA.selectionAnchorPosition
                    var selFinish:int=messageTA.selectionActivePosition;          
                    interactionManager.selectRange(selStart,selFinish)
                    

                    var list:ListElement = new ListElement()
                    list.tabStops="e20 s24";     
                    list.listStyleType=ListStyleType.CHECK
                    list.listStylePosition=ListStylePosition.INSIDE;
                    
                    
                    var lm:ListMarkerFormat=new ListMarkerFormat();
                    //lm.listStyleType=ListStyleType.DECIMAL;
                    lm.tabStops="e20 s24";
                    //lm.listStylePosition=ListStylePosition.INSIDE;
                    lm.fontSize=14 
                    lm.color="0xff0000" 
                    lm.paragraphEndIndent=5;
                    list.listMarkerFormat=lm;
                    
                    
                    var pA:Array=getParaArrAtPoint(messageTA,messageTA.mouseX, messageTA.mouseY);
                    trace("length==="+pA.length)
                    for(var j:int=0;j<pA.length;j++){
                         if(pA is ParagraphElement){
                              var item:ListItemElement = new ListItemElement();
                              item.addChild(pA);
                              list.addChild(item);
                              
                         }
                    }
                    
                    messageTA.textFlow.addChild(list);
                    
                    //interactionManager.applyContainerFormat(lm)
                   //messageTA.textFlow.interactionManager.setFocus();
                    messageTA.textFlow.flowComposer.updateAllControllers()     
               }
               

               private var charIdxAtPoint:int;
               private function getParaArrAtPoint(textArea:Object, x:Number, y:Number):Array {
                    var fc:IFlowComposer = textArea.textFlow.flowComposer;
                    var sPoint:Point = textArea.localToGlobal(new Point(x, y));
                    var paraArray:Array=[]     
                    for (var i:int = 0; i<fc.numLines; i++){
                         var tfLine:TextFlowLine = fc.getLineAt(i);
                         trace(i+"="+tfLine.paragraph)
                         paraArray.push(tfLine.paragraph)
                         return paraArray;
                         

                         if (y >= tfLine.y && y <tfLine.height+tfLine.y){
                              var lineAtomPosition:Number = tfLine.getTextLine().getAtomIndexAtPoint(sPoint.x, sPoint.y);
                              if(lineAtomPosition==-1){
                                   charIdxAtPoint=-1;
                                   return null;
                              }
                              
                              if (lineAtomPosition>= 0){
                                   charIdxAtPoint=tfLine.absoluteStart+lineAtomPosition+1;
                                   paraArray.push(tfLine.paragraph)
                                   return paraArray;
                              }
                              
                              if (x > tfLine.unjustifiedTextWidth){
                                   charIdxAtPoint=tfLine.absoluteStart+tfLine.textLength-1;
                                   paraArray.push(tfLine.paragraph)
                                   return paraArray;
                              }
                              
                              charIdxAtPoint=tfLine.absoluteStart;
                              paraArray.push(tfLine.paragraph)
                              return paraArray;
                              
                         }
                    }
                    charIdxAtPoint=textArea.text.length;
                    paraArray.push(tfLine.paragraph)
                    return paraArray;
               }
               protected function testScroll_clickHandler(event:MouseEvent):void
               {
                    point.text = '['+event.localX+', '+event.localY+']';
               }
               
          ]]>
     </fx:Script>
     <s:VGroup left="5"
                 right="5"
                 top="10"
                 bottom="82">
          <s:Button label="Set List At cursor position"
                      click="doSetList()"/>
          <s:TextArea id="messageTA"
                         width="100%"
                         height="100%"
                         click="testScroll_clickHandler(event)"
                         editable="true"/>
          
          <mx:ApplicationControlBar width="450">
               <s:Label text="Click Point:"/>
               <s:Label id="point"
                          width="60"/>
               <s:Label text="charIndex:"/>
               <s:Label id="index"
                          width="30"/>
          </mx:ApplicationControlBar>
     </s:VGroup>
     
</s:WindowedApplication>

Report · Nov 09, 2010

The easiest way is to use the EditManger.createList method. You have this call:

interactionManager.selectRange(selStart,selFinish)

If you add this line right after, it will create a list using that selection:

var list = interactionManager.createList()

You can do it through direct model manipulation, but it would be a bit more complicated than what you have now. The createList method manages this complexity for you.

Report · Nov 09, 2010

Thanks.Your help is very useful;

now I can set the list when I select some para

var interactionManager:IEditManager = messageTA.textFlow.interactionManager as IEditManager;
                         
var selStart:int=interactionManager.anchorPosition
var selFinish:int=interactionManager.activePosition
interactionManager.selectRange(selStart,selFinish)
                         
var lm:ListMarkerFormat=new ListMarkerFormat();
lm.listStyleType=ListStyleType.CHECK;
lm.tabStops="e20 s24";
lm.listStylePosition=ListStylePosition.INSIDE;
lm.fontSize=14 
lm.color="0xff0000" 
lm.paragraphEndIndent=5;     
                         
interactionManager.createList(null,lm)

At last, thanks again.

Report · Oct 24, 2011

After creating a LIST by using EditManager.createList(), how can the LIST be changed back to a paragraph element

Report · Oct 25, 2011

Record the listItem returned by createList. Find the paragraph you wanted to convert. Using the following section of codes:

//The following code scrap shows how to convert a list to a normal paragraph

textFlow.removeChild(list);

textFlow.addChild(paragraph);

textFlow.flowComposer.updateAllControllers();

Report · Oct 25, 2011

Hi, thank you for the information. The problem is that I may not always have the listitem created by createList as the content may have been imported and converted from HTML.

I'm building a small content editor in which content may be read and converted from HTML and this may already contain list(s). I have a button that creates lists using createList. I would like to be able to allow the user to make a text selectection over some list items and then convet them to paragraphs, with any formatting such as bold etc, by using the same button.

Report · Oct 25, 2011

You can also enum your list items with the following codes:

var elem:FlowElement = textFlow.getChildAt(0);

while (elem)

{

if (elem as ListElement)

{

var listElement:ListElement = elem as ListElement;

var elem1:ListItemElement = listElement.getChildAt(0) as ListItemElement;

var listMarkerFormat:ListMarkerFormat = new ListMarkerFormat();

listMarkerFormat.textDecoration = TextDecoration.NONE;

elem1.listMarkerFormat = listMarkerFormat;

break;

}

elem = elem.getNextSibling();

}

Adobe Community

List Problem