list remove

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.data == val)
                    {
                         box.selectedIndex=i;
                         return ;
                    }
               }
               box.text=val;
          }
          
          
          
     }
}