Skip to main content
June 10, 2009
Question

Active elements inside text

  • June 10, 2009
  • 2 replies
  • 1393 views

Hi.

I am struggling to implement what's called a 'cloze' exercise: A paragraph with missing words, which the user needs to type them in. I already managed to break the paragraph into TextElements and groups, etc., but how do I go about  being able to insert my own inline components, which are also interactive (in my case a textinput - but could be also comboboxes etc.) ?

( I thought about doing it with GraphicElements, but I can't seem to insert components like TextInput or Label with addChild() to a sprite etc - they just don't show up)

Any help or ideas will be greatly appreciated.

This topic has been closed for replies.

2 replies

Participating Frequently
June 12, 2009

Although it would be very cool to have Flex components actually INSIDE a TextFlow, neither TextFlow nor Flex components were designed with this as a goal. I suggest thinking instead about having ImageGraphicElement placeholders marked with "user styles", like <img width="150" height="20" component="spark.components.TextInput"/>, in the flow. Then walk the FlowElements, find these placeholders, determine their bounds, dynamically create the Flex components that they specify, and positioning the components on top of the <img>s. That way, the components like the TextInput are actually siblings of the RichText or RichEditableText but positioned above it.

Gordon Smith

Adobe Flex SDK Team

June 14, 2009

Thanks a lot!

I tried your idea roughly (only with 'empty' text elements and not inline graphics) and it looks like it WOULD be possible to pull it off.

I'm currently listening to the compositionComplete event, then getting to the regions (via TextLine), locating my element's region, getting its bounds,

and creating my UIComponent and locating it according to those bounds.

Participating Frequently
June 11, 2009

Are you talking about typing into a fixed size input fields that seem to be part of the text flow, so that as you type nothing else changes? Or are you talking about the text flow re-wrapping as you type in some places, but not allowing you to type in others?

June 11, 2009

I'm talking about fixed size input fields, the text itself is static (user can't edit it).

(although, at some point I might want to be able to change these boxes somehow - for example if the user gave the correct input for a specific input field, perhaps I'd want to switch this input field into a regular textElement (thus 'pushing' or otherwise moving the rest of the text and/or other input fields)

for example:

Marry had a ___ lamb.

* [ user types 'little' in the input field, which is the correct answer: ]

Marry had a little lamb.  

* [ The word 'lamb' is 'pushed' to the right, because the word 'little' is a bit wider than the input-field ('___')... And if there were more sentences after that in the paragraph with other text inputs, they will also be pushed or moved back, depending on whether the word was wider or narrower than the input field) ]

Adobe Employee
June 12, 2009

I think you're going to have a hard time getting GraphicElements to work this way. I think it might be easier to use text spans for the "____" replacement text, where the spans are marked with custom attributes to flag that they are replacement text. Then if you want to disallow editing everywhere else, you could put in a listener for FLOW_OPERATION_BEGIN that cancels editing operations that apply to text outside the replacement area. You will still have mixed selections allowed, but you could change the editing operations so they only apply to the replacement text. I'm not sure this will get you all the way to what you want, but it might be worth thinking through what you could get with this approach and whether that's enough.