Flex :: How To Traverse / Rebuild UIComponent Tree Structure

I have some kind of UIComponent grouping which may look something like this with the classes "Group" and "Element". Groups can have children and children may be elements or groups again, basically similar to a file system or the str+g group function in several graphics programs. The simplest form of a group is a group with only children which are also the most low level groups in the tree.

The display hierarchy is already existant, i try to persist it to xml.
Group
- element
- Group
- element
- Group
-element
-element
- element
- element

I want to rebuild this structure in an xml-document for persistence. I know how to build an xml document in Flex but not how to (recursively) traverse this n-tree correctly. For getting only the child nodes one could make use of the following algorithm (pseudo code). But somehow I don't understand how to create the xml from this.

walkTree(group) {
children = node.getChildren
if(children != null) {
for(int i=0; i<children.length; i++) {
if(children[i].isGroup()) {
walkTree(group[i]);
} else {
trace(child);
}}}}