I’ve been extremely busy with a gig the last couple months, so posts have been sparse. This is a quick preview of some work with Paul Taylor’s TinyTLF – http://www.tinytlf.org. Paul and I have collaborated in the past on spline-constained text layout and dynamic scrolling with quad. Bezier splines. While I’ve been keeping up with progress on with TinyTLF, this is my first serious application of the library.
The problem is to render interactive ‘word selectors’ in-line with text, provided in html format. An example input is of the form,
<passage><p>Sarah’s <word>father</word> had died in 1797, two years earlier. Life was difficult with him gone, but the family had learned to <word>adapt</word>. Sarah found that she had to support the family with her daily hard work.</p><p>The family’s main <word>product</word> was cattle, but it also raised chickens—and Sarah had been put in charge of both types of animal. Father had worked hard at <word>farming</word> and building furniture, but that business was <word>defunct</word> now that he was gone. Together, the family survived without him due to their courage, tenacity, and <word>strength</word> of character.</p></passage>
Some passages may contain <b> or <i> tags as well. Everywhere a <word> tag is present, an interactive word selector must be rendered in-line with the text. TinyTLF is used to render the text and the word selectors are rendered by a custom TextBlock factory assigned to the TinyTLF text engine. The factory and the word selectors implement specified interfaces (IWordSelectorBlockFactory and IWordSelector). An event is dispatched when the word selectors are added to the stage, which allows the skinnable component controlling passage display to obtain references to the created IWordSelector.
TinyTLF allows the text to be easily styled by assigning styles, either through an external style sheet or constructed from Flex style properties assigned to the passage display class (the technique I use in this app). The rendered result is shown below after some interaction with the word selectors (the same synthetic data is used across all test passages, so the concept of correct vs. incorrect selection is meaningless in this example).
The really cool thing about programming the skinnable component to a set of interfaces and not specific implementations is the ability to quickly create new block factories and selector implementations. This was actually used to switch out rectangular 2D selectors with Actionscript 3D rectangular boxes.
After this gig is finished, I plan to become a contributor to TinyTLF and hope to create some cool examples for public consumption as well as advance the use of splines in TinyTLF layout.
The Algorithmist 
TinyTLF is one of those things that’s been on my list to did into for a while. You guys just keep making it more and more awesome. Now, where did I put that spare time I had laying around? 🙂
Spare time? What’s that? I didn’t know such a thing existed! Yeah, between dealing with parents and that whole making-a-living thing, I’m surprised I even have time to pick up a tennis racquet once a week 🙂
Hi.
How create input field with TinyTLF ?
There is no InputTextField in TinyTLF at this time.