I have Internet

Yeah, I have internet also

  • Blog Random rants
  • Portfolio An showcase of past work
  • Contact Hire Me

June 21, 2010
Posted by admin

TextLayout Framework and The InlineGraphicElement

I have been working with tlf from adobe for quite some time. While building a chat application I had to overcome some small glitches, such as being able to use the GIFPlayer/GIFReader (http://www.bytearray.org/?p=95) for displaying animated gif, and recently being able to copy the underlineing text from an emoticon/InlineGraphicElement.

Every chat app has some type emoticons feature, and with that feature comes being able to copy the underlining text. Well with using the InlineGraphicElement class you can’t do so ( the .text attribute is declared protected and theirs no way to extend InlineGraphicElement since its declared final). So I took it upon myself to devise some short of hack to get this working, by using the “name” property on the InlineGraphicElement.source, an o so simple fix but required the change of 4 different classes and may break with feature release ( using the 1.0 595 (738907) from the flex 4 release)

A breakdown on changed classes

  • com.conceptualideas.chat.conversion
    • ExtendedPlainTextExporter.as
      • Extends flashx.textLayout.conversions.PlainTextExporter
      • Overrides exportTOString(source:TextFlow):String, which is a direct copy injecting our InlineGraphicElement check
  • com.conceptualideas.chat.edit
    • ExtendedSelectionManager.as
      • Extends flashx.textLayout.edit.SelectionManager
      • Overrides public function editHandler(event:Event):void
      • Applys an case for Event.COPY which will inject our custom ExtendedCopyOperation
    • ExtendedTextClipboard.as
      • Extends flashx.textLayout.edit.TextClipboard
      • Overrides tlf_internal static function createPlainTextExportString(scrap:TextScrap):String
      • Injects our custom ExtendedPlainTextExporter
  • com.conceptualideas.operations
    • ExtendedCopyOperation.as
      • Extends flashx.textLayout.operations.CopyOperation
      • Overrides public function doOperation():Boolean
      • Injects our ExtendedTextClipboard class

Execution Flow

  • TextFlow->InteractiveManager(ExtendedSelectionManager) ->editHandler -> When Event.COPY is being handle ->
  • Flush Operations and create a new ExtendedCopyOperation
  • Our ISelectionManager( ExtendedSelectionManager) will call doOperation ( withen editHandler) to process the operation
  • ISelectionManger.doOperation will invoke ExtendedCopyOperation.doOperation which will copy the current selection using the new ExtendedTextClipboard class
  • ExtendedTextClipboard.createPlainTextExportString will replace “plainTextExporter” with our ExtendedPlainTextExporter
  • ExtendedPlainTextExporter.exportToString(source:TextFlow), this is were the real work happens we will translate the “name” and do a bit of checking ( which holds our textRepresentation for this InlineGraphicElement)

Notes:
One would think that we could use InlineGraphicElement.tlf_internal::getBlockElement().userData, but it seems that the tlf will erase this on next “modelChange” pass ( atleast I think this is where it happens, couldn’t see where FlowLeafElement.tlf_internal::releaseContentElement() was being called, in any case one would still have to edit the current TextClipboard implementation for this to work off the ‘userData’

Links
Demo ( source view )
Classes ( download )
Bug Ticket

6 Comments

Posted Under Actionscript

6 Comments

  1. Zap
    July 10, 2010

    The animation doesn’t work, do you have an updated version?

  2. admin
    July 17, 2010

    The emoticon doesn’t animation , the demo is just to show how to copy the underlying text using the TLF framework

  3. Zap
    July 28, 2010

    Ahh ok, do you have an example of using GIFPlayer/GIFReader with spark textarea and the InlineGraphicElement class?

  4. Egbert
    November 4, 2010

    How can i get the text in the vertical middle near the smiley? It is now at the bottom..

  5. admin
    November 4, 2010

    @Ejbert, you need to alter the baseline for all InlineGraphics either by the global Configuration thats tied to the TextFlow, or by setting it per InlineGraphic

  6. Egbert
    November 9, 2010

    Do you have any example on how to do that? I never did anything like it before..

    Lets say i want to alter the baseline vor all InlineGraphics, can you give an example?

    Regards.

Leave a comment

* = Required

    • Posts
    • Twitter
    • Flickr
     

    Signing A Black...

    Blackberry

     

    ScriptUIFlexSer...

    Uncategorized

     

    TextLayoutFrame...

    Actionscript

    Sorry... I have not linked my Twitter
    to my blog yet
    Sorry... I have not set my Flickr
    account up yet
  • Categories

    • Actionscript
    • Blackberry
      • Playbook
    • Uncategorized
  • Archives

    • 2011
      • January
      • March
      • April
    • 2010
      • January
      • April
      • June
      • July
      • August
      • December

This site is using the Handgloves WordPress Theme
Designed & Developed by George Wiscombe

Subscribe via RSS