Flex/Flash TextArea Having a Checkbox at each new line

Question

Hi All

I am wondering how I would add a checkbox at the start every line in a textArea. Kinda creating a checklist.

Answer 1

The structure in MXML would look something like this:

<mx:VBox>
    <mx:HBox>
        <mx:CheckBox/><mx:TextArea/>
    </mx:HBox>
    <mx:HBox>
        <mx:CheckBox/><mx:TextArea/>
    </mx:HBox>
    <mx:HBox>
        <mx:CheckBox/><mx:TextArea/>
    </mx:HBox>
</mx:VBox>

You could use a Repeater to lay out the HBoxes above

Answer 2

you have to design you own component with Flex and ActionScript. Somthing along the line:

<mx:Panel> <mx:VBox> <mx:HBox><mx:CheckBox><mx:TextArea>...

and some ActionScript-functions, that respond to ENTER and BACKSPACE to create or destroy HBox-CheckBox-pairs.

maybe, what you want is a DataGrid with two Columns, one beeing the CheckBox, the other being a TextField or TextArea, both editable (look up the concepts of ItemRenderer and ItemEditor) and a next-row-Functionality

Answer 3

Sorry, you can't.

I've never looked at the TextArea source code but I guess you can extend it in some way to display checkboxes on each line

Answer 4

Actually, it's very possible.

Use the <mx:List> instead and use the itemRenderer attribute to point to a Flex component.

How to do it? If you have Flex Builder, just right-click on your source folder, and select New > Flex Component. Name your component something like myComponent. If not, a component is just a .mxml file with something in it, for example:

<mx:HBox>
    <mx:Text text="Some Component" />
</mx:HBox>

and that's all. Point the list's itemRenderer attribute to myComponent (or wherever it is). Do not include the ".mxml". The list will now display your custom component instead of some text. Just add some entries to the list's dataProvider or something to make it display your component.

In your case, you want to add an mx:CheckBox and an mx:TextInput into your component to give it the 'todo list' look.

Find the source here