0 Replies Latest reply on May 3, 2010 8:43 PM by MageshR

    Using HTMLString in TLF

    MageshR Level 1

      Hi - I read that we can import html text into TLF using something like below.

       

      var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);

       

      I tried it and it worked. But I'm not able to apply any formatting like font or color or size change on them. Where as, for the same textarea, if I import a TLF, am able to do all formatting. Listed is the full code below. Pls advise what am I doing wrong. Thanks and let me know if you have any questions.

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
                     xmlns:local="*" creationComplete="init()" viewSourceURL="srcview/index.html">
         
          <!-- Based on original code from here and updated and enhanced for Flex 4:
              http://www.adobe.com/devnet/flex/articles/text_layout_framework_04.html
          -->
         
          <fx:Script>
              <![CDATA[
                  import flashx.textLayout.container.ContainerController;
                  import flashx.textLayout.conversion.ITextExporter;
                  import flashx.textLayout.conversion.ITextImporter;
                  import flashx.textLayout.conversion.TextConverter;
                  import flashx.textLayout.edit.EditManager;
                  import flashx.textLayout.edit.ElementRange;
                  import flashx.textLayout.edit.ISelectionManager;
                  import flashx.textLayout.edit.SelectionState;
                  import flashx.textLayout.elements.InlineGraphicElement;
                  import flashx.textLayout.elements.ParagraphElement;
                  import flashx.textLayout.elements.TextFlow;
                  import flashx.textLayout.events.FlowOperationEvent;
                  import flashx.textLayout.events.SelectionEvent;
                  import flashx.textLayout.events.StatusChangeEvent;
                  import flashx.textLayout.formats.Direction;
                  import flashx.textLayout.formats.TextLayoutFormat;
                  import flashx.textLayout.operations.FlowOperation;
                  import flashx.textLayout.operations.UndoOperation;
                  import flashx.textLayout.tlf_internal;
                  import flashx.undo.UndoManager;
                 
                  import mx.collections.ArrayCollection;
                  import mx.controls.CheckBox;
                  import mx.events.FlexEvent;
                  import mx.events.SliderEvent;
                 
                  import skins.TDFPanelSkin;
                 
                  import spark.components.Group;
                  import spark.core.SpriteVisualElement;
                 
                  //[Bindable]
                  //public var selectedColor = cp.selectedColor.toString(16);
                 
                  public var directions:ArrayCollection = new ArrayCollection(
                      [
                          {label:"Left-to-Right", data:Direction.LTR},
                          {label:"Right-to-Left", data:Direction.RTL}
                      ]
                  );

       

                  public var fontNames:ArrayCollection = new ArrayCollection(
                      [
                          {label:"Arial", data:"Arial"},
                          {label:"Comic Sans MS", data:"Comic Sans MS"},
                          {label:"Courier New", data:"Courier New"},
                          {label:"Times New Roman", data:"Times New Roman"}
                      ]
                  );
                 
                  public var alignNames:ArrayCollection = new ArrayCollection(
                      [
                          {label:"left", data:"left"},
                          {label:"center", data:"center"},
                          {label:"right", data:"right"},
                      ]
                  );

       

                  [Embed(source="adobe_air_logo.png")]
                  [Bindable]
                  static public var imgClass:Class;
                 
                  private var _textContainer:SpriteVisualElement = null;
                 
      /*            private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
                      <div>
                          <p><span>The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web.
                      Some benefits provided by this framework include: 1) rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens
                      2) cut, copy, paste, undo and standard keyboard and mouse gestures for editing 3) selection, editing and flowing text across multiple columns and linked containers
                      4) bidirectional text, vertical text and over 30 writing scripts including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, Vietnamese, and others
                      5) vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography. Try editing this text and playing with the options below! Notice an inline image is also included.</span></p>
                      </div>
                      </TextFlow>;
                  */
                  //private static const textInput:XML = <HTML><BODY><P ALIGN="CENTER"><FONT LINE-HEIGHT="34.94" FACE="CoronaSansHMK" SIZE="21.50" COLOR="#000000" LETTERSPACING="0" KERNING="0">I don't think of you as a boss, but more as a friend... A bossy friend maybe, but still a friend. :)</FONT></P></BODY></HTML>;
                  private static const textInput:String = "<HTML><BODY><P ALIGN=\"left\"><FONT FACE=\"Arial\" SIZE=\"16\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"1\">I don't think of you as a boss, but more as a friend... A bossy friend maybe, but still a friend.I don't think of you as a boss, but more as a friend... A bossy friend maybe, but still a friend.</FONT></P></BODY></HTML>";
                 
                  private var _textFlow:TextFlow;
                 
                  private function init():void {
                     
                      _textContainer = new SpriteVisualElement();
                     
                      canvas.addElement(_textContainer);
                      //var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);
                      var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
                      importer.throwOnError = false;

       

                      _textFlow = importer.importToFlow(textInput);
                      _textFlow.flowComposer.addController(new ContainerController(_textContainer, canvas.width-40, canvas.height));
                      // add the graphic
                     
                      var p:ParagraphElement = new ParagraphElement();
                      var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement();
                      inlineGraphicElement.source = imgClass;
                      inlineGraphicElement.width=32;
                      inlineGraphicElement.height=32;
                      p.addChild(inlineGraphicElement);
                      _textFlow.addChild(p);
                      _textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE, picLoaded);
                     
                      //adding Select/Edit/Copy/Paste/Undo features
                      _textFlow.interactionManager = new EditManager(new UndoManager());
                      _textFlow.addEventListener(SelectionEvent.SELECTION_CHANGE,mySelectionChangeListener,fals e,0,true);
                     
                      // initialize with a selection before the first character
                      _textFlow.interactionManager.selectRange(0,0);
                      _textFlow.flowComposer.updateAllControllers();
                  }
                  private function mySelectionChangeListener(e:SelectionEvent):void
                  {
                      trace("Selection change!");
                      var editMgr:EditManager = _textFlow.interactionManager as EditManager;
                      trace("Was this an undo operation? " + editMgr.undoManager.canUndo());
                  }
                 
                  private function picLoaded(event:StatusChangeEvent):void {
                      var image:InlineGraphicElement = event.element as InlineGraphicElement;
                      _textFlow.flowComposer.updateAllControllers();
                  }
                 
                  private function changeFontSize(event:Event):void {
                      //var tlf:TextLayoutFormat = new TextLayoutFormat();
                      _textFlow.fontSize =fontSize.value;
                      //_textFlow.format = tlf;
                      _textFlow.direction = direction.selectedItem.data;
                      _textFlow.flowComposer.updateAllControllers();
                  }
                 
                  private function changeColor(event:Event):void {
                      //var tlf:TextLayoutFormat = new TextLayoutFormat();
                      _textFlow.color =cp.selectedColor;
                      //tlf.textAlign="left";
                      //_textFlow.format = tlf;

       

                      _textFlow.flowComposer.updateAllControllers();
                  }
                 
                  private function changeAlign(event:Event):void {
                      //var tlf:TextLayoutFormat = new TextLayoutFormat();
                      _textFlow.textAlign =(event.target as DropDownList).selectedItem.data;
                      //_textFlow.textJustify=true;
                      //tlf.textAlign="left";
                      //_textFlow.format = tlf;
                      _textFlow.flowComposer.updateAllControllers();
                  }           
                 
                  private function changeFont(event:Event):void {
                      //var tlf:TextLayoutFormat = new TextLayoutFormat();
                      trace("(event.target as DropDownList).selectedItem.dat is::" + (event.target as DropDownList).selectedItem.data);
                      _textFlow.fontFamily =(event.target as DropDownList).selectedItem.data;
                      //_textFlow.format = tlf;
                      _textFlow.flowComposer.updateAllControllers();
                  }           
                 
                  private function changeNoColumns(event:Event):void {
                      var tlf:TextLayoutFormat = new TextLayoutFormat();
                      tlf.columnCount = cols.value;
                      tlf.columnGap = 15;
                      _textFlow.format = tlf;
                      _textFlow.direction = direction.selectedItem.data;
                      _textFlow.flowComposer.updateAllControllers();
                  }
                 
                  private function changeTextDirection(event:Event):void {
                      _textFlow.direction = (event.target as DropDownList).selectedItem.data;
                      _textFlow.flowComposer.updateAllControllers();
                  }
                 
                  protected function undo_clickHandler(event:MouseEvent):void
                  {
                      var em:EditManager = _textFlow.interactionManager as EditManager;
                      trace("Can undo " + em.undoManager.canUndo() + " can redo " + em.undoManager.canRedo());
                      em.undoManager.undo();
                  }
                  protected function redo_clickHandler(event:MouseEvent):void
                  {
                      var em:EditManager = _textFlow.interactionManager as EditManager;
                      em.undoManager.redo();
                  }
                  private function exportTLF():void {
                      trace("activeFlow is:::" + _textFlow);
                      var exporter:ITextExporter = TextConverter.getExporter(TextConverter.TEXT_LAYOUT_FORMAT);
                      var XML_TYPE:String = "xmlType";
                      var xmlExport:XML = exporter.export(_textFlow,  XML_TYPE) as XML;
                      trace("xmlExport is:" + xmlExport);
                  }           

       

              ]]>
          </fx:Script>
          <s:Panel skinClass="skins.TDFPanelSkin" title="Text Layout Framework Sample" width="100%" height="100%">
              <s:layout>
                  <s:VerticalLayout paddingTop="8" paddingLeft="8"/>
              </s:layout>
              <s:VGroup>
                  <s:Group id="canvas" width="600" height="200" />
                  <s:HGroup width="100%" verticalAlign="middle">
                      <s:Label text="Font Size:"/>
                      <s:NumericStepper id="fontSize" minimum="6" maximum="22" snapInterval="1" change="changeFontSize(event)" value="12" />
                      <s:Label text="# Columns:"/>
                      <s:NumericStepper id="cols"  minimum="1" maximum="20" snapInterval="1" change="changeNoColumns(event)" />
                      <s:Label text="Text Direction:"/>
                      <s:DropDownList id="direction" change="changeTextDirection(event)" dataProvider="{directions}" selectedItem="{directions[0]}"/>
                      <mx:ColorPicker id="cp" showTextField="true" selectedColor="0xFFFFFF" change="changeColor(event)" width="30"/>
                  </s:HGroup>
              </s:VGroup>
              <s:HGroup width="100%" verticalAlign="middle">
                  <s:Label text="Font Name:"/>
                  <s:DropDownList id="fontName" change="changeFont(event)" dataProvider="{fontNames}"></s:DropDownList>
                  <s:Label text="Align:&#xd;" width="47"/>
                  <s:DropDownList change="changeAlign(event)" id="alignName" dataProvider="{alignNames}" ></s:DropDownList>
                  <s:Button label="Export" id="exportBtn" click="exportTLF()"/>
              </s:HGroup>
          </s:Panel>
         
      </s:Application>