Thanks, Richard

I tried, but failed, about the list,because it's new to me, and I have no APIs ,So I'm very confused.

To the list, I want to create, modify,and del when I select some paras,

Now, it can be created and moified when the paras are being selected without "ListStyleType.NONE", if I set the liststyletype to be none, in fact , it isn't removed.(at first, i think it's easy to make it.  set it like linkElement--->to remove linkElement),

var em:IEditManager=IEditManager(textflow.interactionManager);
em.selectRange(beginIndex, lastIndex)
em.applyLink("", null, false, null);

Now, I have two problems:

1. How can I get the list when I click the list?

2. Remove the list really.

The following below is my full TestList source code.

Thanks.

MXML:

<?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"
                            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.events.SelectionEvent;
               import flashx.textLayout.formats.ITextLayoutFormat;
               import flashx.textLayout.formats.ListMarkerFormat;
               import flashx.textLayout.formats.ListStylePosition;
               import flashx.textLayout.formats.ListStyleType;
               import flashx.textLayout.formats.TextLayoutFormat;
               import flashx.textLayout.operations.SplitParagraphOperation;
               import mx.controls.Alert;
               import net.diding.control.ListInsertManager;
               import spark.components.TextArea;
               import spark.utils.TextFlowUtil;
 
               private var listInsertManager:ListInsertManager 
               public var textflow:TextFlow;
 
               protected function initApp():void {
                    listInsertManager=new ListInsertManager(this);
                    textflow=_textArea.textFlow;
                    if(textflow)
                         textflow.addEventListener(SelectionEvent.SELECTION_CHANGE, selectionChangeListener, false, 0, true);
                    
               }
               public var selStart:int;
               public var selFinish:int;
               private function selectionChangeListener(ev:SelectionEvent):void
               {
                    selStart=_textArea.selectionAnchorPosition
                    selFinish=_textArea.selectionActivePosition;
               }
               protected function doSetList():void
               {
                    if (selStart != selFinish)
                    {
                         listInsertManager.doOpenListWinHandler(null,this);
                    }
                    else
                    {
                         Alert.show("Please select paras", "Notice")
                    }
               }
 
          ]]>
     </fx:Script>
     <s:VGroup left="5"
                 right="5"
                 top="10"
                 bottom="82">
          <s:Button label="SetList"
                      click="doSetList()"/>
          <s:TextArea id="_textArea"
                         width="100%"
                         height="100%"
                         editable="true"/>
     </s:VGroup>
     
</s:WindowedApplication>
 

ListInsertManager.as

package net.diding.control
{
     import flash.events.EventDispatcher;
     import flash.events.MouseEvent;
     import flash.text.engine.TextLine;
     import flash.ui.ContextMenu;
     import flash.ui.ContextMenuBuiltInItems;
     import flash.ui.ContextMenuItem;
     import flash.ui.Mouse;
     import flash.ui.MouseCursor;
     
     import flashx.textLayout.compose.TextFlowLine;
     import flashx.textLayout.edit.EditManager;
     import flashx.textLayout.edit.EditingMode;
     import flashx.textLayout.edit.IEditManager;
     import flashx.textLayout.edit.SelectionState;
     import flashx.textLayout.elements.FlowGroupElement;
     import flashx.textLayout.elements.LinkElement;
     import flashx.textLayout.elements.ListElement;
     import flashx.textLayout.elements.ParagraphElement;
     import flashx.textLayout.elements.SpanElement;
     import flashx.textLayout.elements.TextFlow;
     import flashx.textLayout.events.CompositionCompleteEvent;
     import flashx.textLayout.events.FlowElementMouseEvent;
     import flashx.textLayout.events.UpdateCompleteEvent;
     import flashx.textLayout.formats.ListMarkerFormat;
     import flashx.textLayout.formats.TextLayoutFormat;
     
     import mx.controls.Alert;
     import mx.core.FlexGlobals;
     import mx.managers.PopUpManager;
     
     import net.diding.window.UnOrderedListWindow;
     
     import spark.components.RichEditableText;
     
     public class ListInsertManager extends EventDispatcher
     {
          private var _Manager:*;
          private var showDisplay:*
          private var richEditableText:RichEditableText
          
          public function ListInsertManager(target:*=null)
          {
               super();
               _Manager=target;
          }
          
          /***********************************************************
           ************************ Set list********************
           * *********************************************************/ 
          //open the window to set or modify or remove the unordered list
          public function doOpenListWinHandler(listElement:ListElement=null, disPlayObj:*=null):void
          {
               if (listElement)
               {
                    var window:UnOrderedListWindow=UnOrderedListWindow(PopUpManager.createPopUp(disPlayObj, UnOrderedListWindow, true));
                    window.getWinFindArg(this, listElement, true)
               }
               else if (_Manager.selStart != _Manager.selFinish)
               {
                    var window2:UnOrderedListWindow=UnOrderedListWindow(PopUpManager.createPopUp(disPlayObj, UnOrderedListWindow, true));
                    window2.getWinFindArg(this);
               }
               else
               {
                    Alert.show("Please select the paras", "Notice")
               }
          }
          
          //set or modify the list
          private var watchIndex:int;
          
          public function setOrEditList(currentListElement:ListElement=null, listformat:TextLayoutFormat=null, lmf:ListMarkerFormat=null):void
          {
               var em:EditManager=EditManager(_Manager.textflow.interactionManager);
               if (currentListElement != null)
               {
                    //Edit
                    var beginIndex:int=currentListElement.getAbsoluteStart();
                    watchIndex=beginIndex
                    var lastIndex:int=beginIndex + currentListElement.textLength;
                    em.selectRange(beginIndex, lastIndex)
                    
                    /**************************************
                     * here
                     * i want to set the list just the same as i set url ,but failed
                     *if the listformat-->ListStyleType.NONE
                     *not really remove the list
                     * *************************************/
                     em.createList(null, listformat, lmf)
               }
               else
               {
                    //Create
                    em.selectRange(_Manager.selStart, _Manager.selFinish);
                    watchIndex=_Manager.selStart;
                    em.createList(null, listformat, lmf)
               }
               _Manager.textflow.interactionManager.setFocus();
               _Manager.textflow.flowComposer.updateAllControllers()
               richEditableText=_Manager.textflow.flowComposer.getControllerAt(0).container as RichEditableText;
               richEditableText.addEventListener(MouseEvent.MOUSE_DOWN, ListElementHandler)
          }
          
          /***************************************************
           *  ----I want to get the list that I clicked ,but failed-----
           * here I want to get the list to modify or remove when i click the list,but
           * when i click it in the list, always I get FlowGroupElement's numChildren is one;
           * outside ,i will see the list and its numchilren. Why?
           * **************************************************/
          private function ListElementHandler(event:MouseEvent):void
          {
               trace("event.target===" + event.target)
               var textLine:TextLine=event.target as TextLine;
               var flowGropElement:FlowGroupElement;
               
               if (textLine)
               {
                    trace("textLine.parent==" + textLine.parent)
                    if (textLine.userData)
                    {
                         var textFlowLine:TextFlowLine=textLine.userData as TextFlowLine;
                         
                         if (textFlowLine)
                         {
                              var paraElement:ParagraphElement=textFlowLine.paragraph as ParagraphElement;
                              
                         }
                         if (paraElement)
                         {
                              //The FlowGroupElement class is the base class for FlowElement objects 
                              //that can have an array of children. 
                              //These classes include 
                              //TextFlow, ParagraphElement, DivElement, and LinkElement
                              
                              flowGropElement=paraElement.parent as FlowGroupElement;
                         }
                         if (flowGropElement)
                         {
                              trace("flowGropElement numChildren==" + flowGropElement.numChildren)
                              var fgeChildNum:Number=flowGropElement.numChildren;
                              
                              if (fgeChildNum == 1)
                              {
                                   var tflow:TextFlow=flowGropElement.getTextFlow();
                                   //trace(tflow.getElementByID()
                                   trace(tflow.getChildAt(0))
                                   var para:ParagraphElement=tflow.getChildAt(0)as ParagraphElement;
                                   trace("para's parent" + para.parent)
                              }
                              
                              for (var k:int=0; k < flowGropElement.numChildren; k++)
                              {
                                   var childElement:*=flowGropElement.getChildAt(k);
                                   trace(childElement)
                                   //is listElement?
                                   if (childElement is ListElement)
                                   {
                                        var currentList:ListElement=childElement as ListElement;
                                        trace("listElement's child==" + currentList.numChildren)
                                        //each sign as a char
                                        trace("listElement's length==" + currentList.textLength + int(currentList.numChildren))
                                        var absIndex:int=currentList.getAbsoluteStart();
                                        var total:int=absIndex + currentList.textLength
                                        //is click listElement?
                                        //maybe there are many listelements in it
                                        if (_Manager.selStart < total && _Manager.selStart > absIndex)
                                        {
                                             doOpenListWinHandler(currentList, showDisplay)
                                             trace("cliked me")
                                             break;
                                        }
                                        
                                   }
                              }
                         }
                    }
               }
               
          }
          
          //remove
          public function delList(currentListElement:ListElement):void
          {
               //get listElement absoluteStart and the last
               var beginIndex:int=currentListElement.getAbsoluteStart();
               watchIndex=beginIndex;
               var lastIndex:int=beginIndex + currentListElement.textLength;
               var em:IEditManager=IEditManager(_Manager.textflow.interactionManager);
               em.selectRange(beginIndex, lastIndex)
               // how to moveChildren? Problem!
               //em.moveChildren()
               _Manager.textflow.interactionManager.setFocus();     
          }
          
          
     }
}

UnOrderedListWindow.as

package net.diding.window
{
     import flash.events.MouseEvent;
     
     import flashx.textLayout.edit.IEditManager;
     import flashx.textLayout.elements.ListElement;
     import flashx.textLayout.formats.ListMarkerFormat;
     import flashx.textLayout.formats.ListStylePosition;
     import flashx.textLayout.formats.ListStyleType;
     import flashx.textLayout.formats.TextLayoutFormat;
     
     import mx.containers.ControlBar;
     import mx.containers.HBox;
     import mx.containers.TitleWindow;
     import mx.containers.VBox;
     import mx.controls.Button;
     import mx.controls.ComboBox;
     import mx.controls.Image;
     import mx.controls.Label;
     import mx.controls.NumericStepper;
     import mx.core.FlexGlobals;
     import mx.events.CloseEvent;
     import mx.events.FlexEvent;
     import mx.events.NumericStepperEvent;
     import mx.managers.PopUpManager;
     
     import spark.components.FormItem;
     
     public class UnOrderedListWindow extends TitleWindow
     {
          
          public function UnOrderedListWindow()
          {
               super();
               this.showCloseButton=true;
               this.title="-->Create--Modify--Del--List";
               this.height=200;
               this.width=300;
               createUIFace();
               this.addEventListener(CloseEvent.CLOSE, removeOwnerwindow);
               this.addEventListener(FlexEvent.CREATION_COMPLETE, setViewPosition);
          }
          
          private function removeOwnerwindow(event:CloseEvent):void
          {
               PopUpManager.removePopUp(this);
          }
          
          private function setViewPosition(event:FlexEvent):void
          {
               this.x=FlexGlobals.topLevelApplication.width / 2 - this.width / 2;
               this.y=FlexGlobals.topLevelApplication.height / 2 - this.height / 2
          }
          private var listTypeCB:ComboBox;
          private var removeBtn:Button;
          
          private function createUIFace():void
          {
               var MainVBox:VBox=new VBox();
               MainVBox.setStyle("horizontalAlign", "center")
               MainVBox.setStyle("paddingTop", 20)
               MainVBox.percentHeight=100;
               MainVBox.percentWidth=100;
               this.addChild(MainVBox)
               
               var unorderedHBox:HBox=new HBox();
               unorderedHBox.percentWidth=100;
               MainVBox.addChild(unorderedHBox)
               
               
               var infoLabel:FormItem=new FormItem();
               infoLabel.label="Unordered List Style:";
               infoLabel.required=true;
               unorderedHBox.addChild(infoLabel)
               
               var dataArr:Array=[{label:"none", data:ListStyleType.NONE}, {label:"●", data:ListStyleType.DISC}, {label:"○", data:ListStyleType.CIRCLE}, {label:"■", data:ListStyleType.SQUARE}, {label:"□", data:ListStyleType.BOX}, {label:"√", data:ListStyleType.CHECK}, {label:"◆", data:ListStyleType.DIAMOND}, {label:"－", data:ListStyleType.HYPHEN}]
               listTypeCB=new ComboBox();
               listTypeCB.dataProvider=dataArr;
               unorderedHBox.addChild(listTypeCB)
               
               //---------------------------------------------------
               var MyControlBar:ControlBar=new ControlBar();
               MyControlBar.percentWidth=100;
               MyControlBar.setStyle("horizontalAlign", "center");
               MainVBox.addChild(MyControlBar)
               
               
               var SubmitBtn:Button=new Button();
               SubmitBtn.label="submit";
               SubmitBtn.addEventListener(MouseEvent.MOUSE_DOWN, doSendDataHandler)
               MyControlBar.addChild(SubmitBtn);
               
               removeBtn=new Button();
               removeBtn.label="Remove";
               removeBtn.visible=false
               removeBtn.addEventListener(MouseEvent.MOUSE_DOWN, doRemoveListHandler)
               //------------------------------------------------
               
          }
          
          private function doRemoveListHandler(event:MouseEvent):void
          {
               editor.delList(currentListElement)
               PopUpManager.removePopUp(this);
          }
          
          private function doSendDataHandler(event:MouseEvent):void
          {
               var listFormat:TextLayoutFormat=new TextLayoutFormat();
               listFormat.listStyleType=listTypeCB.selectedItem.data;
               listFormat.listStylePosition=ListStylePosition.INSIDE;
               
               
               
               var lmf:ListMarkerFormat=new ListMarkerFormat();
               lmf.listStyleType=listTypeCB.selectedItem.data;
               lmf.listStylePosition=ListStylePosition.INSIDE;
               lmf.afterContent=" ";
               
               /*********************************************************
                *if I don't set afterContent, when I set ListStyleType.NONE
                *will get an error :
                *ArgumentError: Error #2004: One of the parameters is invalid.
                *************************************************************/
               
               editor.setOrEditList(currentListElement, listFormat, lmf)
               PopUpManager.removePopUp(this);
          }
          
          private var editor:*;
          private var currentListElement:ListElement;
          
          public function getWinFindArg(geditor:*, editListElement:ListElement=null, isEdit:Boolean=false):void
          {
               editor=geditor;
               
               if (editListElement != null)
               {
                    updateComboBox(listTypeCB, editListElement.listStyleType);
               }
               if (isEdit)
               {
                    currentListElement=editListElement;
                    removeBtn.visible=true;
               }
               
          }
          
          private function updateComboBox(box:ComboBox, val:String):void
          {
               for (var i:int=0; i < box.dataProvider.length; i++)
               {
                    if (box.dataProvider[i].data == val)
                    {
                         box.selectedIndex=i;
                         return ;
                    }
               }
               box.text=val;
          }
          
          
          
     }
}

Robin,

Thanks for your reply

To my surprise:

Example One:

public function delList(currentListElement:ListElement):void
          {
               var em:IEditManager=IEditManager(_Manager.textflow.interactionManager);
 
               trace(currentListElement.numChildren);
               for (var j:int=0; j < currentListElement.numChildren; j++)
               {
                    //watch paras
                    trace(ListItemElement(currentListElement.getChildAt(j)).getChildAt(0))
                    var listItem:ListItemElement=currentListElement.getChildAt(j) as ListItemElement
                    trace("listItem======="+listItem)
                    var sourceIdx:int=currentListElement.getChildIndex(listItem)
                    trace("sourceIdx===="+sourceIdx)
                    var target:FlowGroupElement=listItem.parent.parent;
                    var targetIndex:int=target.getChildIndex(listItem.parent);
                    trace("targetIndex----=="+targetIndex);
                    //if I set arg2 is sourceIdx,I will get an error;
                    em.moveChildren(listItem,0,listItem.numChildren,target,targetIndex);
                    trace("loopNumber======="+j);
                    //why null?
                    trace("listItem.parent==="+listItem.parent)
               }
          }

when I select one para , and create it into list, then I lick it, and remove it , everything is OK, but when I select two paras or more, and create them into the list,and remove.  there will be always one or more ListItemElement that can't be removed.

Now, I change the idea, not use listitem, but use list:

Example Two:

public function delList(currentListElement:ListElement):void
          {
               var em:IEditManager=IEditManager(_Manager.textflow.interactionManager);
               trace(currentListElement.numChildren);
               var target:FlowGroupElement=currentListElement.parent;
               var targetIndex:int=target.getChildIndex(currentListElement);
               em.moveChildren(currentListElement,targetIndex,currentListElement.numChildren,target,targetIndex);
          }

If I do it like this, no matter I choose one or two or many paras , there will be always one ListItemElement left. And throw an error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
     at flashx.textLayout.edit::ElementMark()[C:\Vellum\dev\output\openSource\textLayout\src\flashx\textLayout\edit\ElementMark.as:38]
     at MoveElementMemento$/perform()[C:\Vellum\dev\output\openSource\textLayout\src\flashx\textLayout\edit\ModelEdit.as:576]
     at flashx.textLayout.edit::ModelEdit$/moveElement()[C:\Vellum\dev\output\openSource\textLayout\src\flashx\textLayout\edit\ModelEdit.as:52]
     at flashx.textLayout.operations::MoveChildrenOperation/doOperation()[C:\Vellum\dev\output\openSource\textLayout\src\flashx\textLayout\operations\MoveChildrenOperation.as:106]
     at flashx.textLayout.edit::EditManager/doInternal()[C:\Vellum\dev\output\openSource\textLayout\src\flashx\textLayout\edit\EditManager.as:699]
     at flashx.textLayout.edit::EditManager/doOperation()[C:\Vellum\dev\output\openSource\textLayout\src\flashx\textLayout\edit\EditManager.as:579]
     at flashx.textLayout.edit::EditManager/moveChildren()[C:\Vellum\dev\output\openSource\textLayout\src\flashx\textLayout\edit\EditManager.as:1148 

In fact , I'm surely that my selected listElement is correct(according to trace(currentListElement.numChildren);).But why two functions ,there are two results.Especially ,for e.g.2.When IEditManager moveChildren, why always remains one ListItemElement that can't be removed,  up to it,otheres can be removed.(e.g. If I select 18 paras, create them into the list, use function 2, now 17 listitems can be removed, only the last one can't be removed, what's more,and throw an error.)

Confused.

Thinking...

-Diding