Editing an XML document in Adobe Flex?

Question

I am building a custom structured editor for an XML document in Flex. What I need is a way to do list operations on an XMLList with a minimum of fuss, using either an editable datagrid or a popup form (UI-wise, it doesn't matter which. Please don't focus on that). What is a good idiom for doing this?

Here is an example structure, with operations that I may want to do:

<itemList>
    <item id="1"/>
    <item id="2"/>
</itemList>

I might want to:

• add a new item at the end of the list.
• remove an existing item
• edit an item in such a way as to be able to cancel the edit (presumably, this means making a copy of the item, editing it, and replacing its source with the edited copy?)
• re-order the items

How should I go about doing this?

Answer 1

yeah, since flex builder is an eclipse based IDE use Web Tools Platform. I haven't installed it on straight flex builder, but you can download the Eclipse J2EE version and it includes WTP. Then just install flex builder as a plug-in. I think you should be able to find a Ganymede version of the J2EE IDE. However, if you cant, look into the workaround for getting Flex in Galileo and you're good to go!

Answer 2

We just built a rather complicated XML editor where I work, and my first suggestion is, if you can possibly avoid it, DO NOT DO THINGS THE WAY THAT FLEX DOES THEM UNLESS YOU ARE USING AN XMLListCollection DIRECTLY. Flex's XMLListCollection is a container for XMLListAdapter, and while it does work, it is much better if you use the parent node of an XMLList and use the native XML functions. If you try to duplicate their efforts it is long and nightmarish.

That said: XMLListCollection is your friend, but make sure that you have multiple layers if you have a lot of data binding. We originally always used ex4 searches from the root of our XML document, and that cost us a LOT of time and energy. We realized that we could break it up into three sub-lists, and each edit was a good deal faster.

As to the actual UI, well, there are a number of ways to do this and it depends on how your XML is structured overall.

If you have multiple itemLists, you could wish to use the tree component along with some of the code exemplified here: http://livedocs.adobe.com/flex/3/html/help.html?content=about%5Fdataproviders%5F6.html

On the other hand, if there is only one itemList, then I would have a simple List. That will allow you to drag items and re-order them. If you used a labelFunction, you could have it return the item's @id. You'd be able to add a TextField and a submit button for adding nodes. Perhaps an additional button for deleting, but it would not be that hard.

Cancelling an edit would be particularly easy -- simply wait until "Submit" has been hit before actually committing the change to the XML.

Answer 3

I'd personally abstract the XML structure to an object-graph and serialize the objects to XML after the fact. Then you aren't dealing with the XML during editing (outside of a real-time serialized display or whatever) and you get the ease of use that comes from dealing with Objects instead of parsing/manipulating XML nodes.