Question

I want to create an xml editor UI in flex.Basically I want to present the xml in a textarea.Users can then edit the xml and save it in database.Also,based on logged in user’s privilege,the level of editing allowed varies.A normal user can edit the attribute values as well as node values,but not attribute names and node names.

For eg: consider this XML

<users>
    <user id="1" country="aaaa">XASD</user>
    <user id="2" country="aaaa6">XASQWED</user>
    <user id="3" country="aaaa4">XASDRQQ</user>
</users>

Normal user can only edit id values(‘1′,’2′,’3’),country values(‘aaaa’,’aaaa6′,’aaaa4′) and user names(‘XASD’,’XASQWED’,’XASDRQQ’).But not node names(‘users’,’user’) and attribute names(‘id’,’country’).

I prefer to present the XML to the user as in an editor like interface and restrict editing there,rather than using a grid interface in which attribute names and values are listed in separate columns and enable editing for value column only.

Any idea how to achieve this selective editing(in a textarea?)?

Answer 1

This probably will be too complex to do in TextArea:

• Subclass TextArea to access protected IUITextField
• Parse XML yourself to find at which positions text is editable and at which is not
• Pass CHANGE events from textfield if selection in editable area and prevent them otherwise
• Reparse XML/update positions after each change

Working with text positions this way might be very error-prone. Consider another approach:
Present your XML in custom layout, where non-editable parts are Labels or Texts and editable are TextFields. Single tag might be HBox filled with these controls of FlowLayout in Flex4. TextFields must validate their content to keep XML valid.
To create editor, iterate tags/attributes, create controls. To get XML back, iterate controls, looking at their type and create tags/attributes. The only thing you lose is text selection on multiple tags/lines.
Update:
Actually, it should be quite trivial to do:

                     <VBox>
<tag>                  Label (<tag>)
    <subtag id="1"/>   HBox [ Label (<subtag ) Label(id=") TextInput(1) Label("/>) ]
</tag>                 Label (</tag>)
                     </VBox>