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
July 10, 2010
The animation doesn’t work, do you have an updated version?
July 17, 2010
The emoticon doesn’t animation , the demo is just to show how to copy the underlying text using the TLF framework
July 28, 2010
Ahh ok, do you have an example of using GIFPlayer/GIFReader with spark textarea and the InlineGraphicElement class?
November 4, 2010
How can i get the text in the vertical middle near the smiley? It is now at the bottom..
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
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