Online XML Editor: Configuration Structure

Let's assume you have created an image gallery which uses an xml file as data source. The structure could look something like this:

<images>
  <image name="hello world" url="hello_world.jpg" description="this is just a test description"/>
  <image name="my second image" url="second_image.jpg" description="this is my second picture"/>
  <image name="and another pic" url="another_pic.jpg" description="another picture I took some time ago..."/>
</images>

You know the exact structure, because you have created it. Of course you know how to add/remove/rename images in this xml file, but wouldn't it be nice to enable your client or another person to update this gallery online in the browser? By using a configuration file you can exactly define what the user is allowed to do.

In the screenshot below you see the same xml file loaded in the Turtlebite Online XML Editor. The user is free to add/remove attributes, to place image nodes inside of other image nodes and so on:



In the next screenshot you can see that the configuration file is loaded. Now, instead of the node name, the content of the attribute “name” is displayed, it is not possible anymore to place an “image” node inside another “image” node, the attributes cannot be removed anymore. The attribute “description” is defined as optional.

<config/>
  <!-- node settings --> 
  <nodeSettings>
    <yourNode_1/>
      <attributeSettings/>       
    </yourNode_1>
    <yourNode_2/>
      <attributeSettings/>       
    </yourNode_2>
  </nodeSettings>
  <!-- node labels -->
  <nodeLabels>
    <display/>
    <display/>
  </nodeLabels>
  <!-- node depot -->  
  <nodeDepot>
    <yourNode_1/>
    <yourNode_2/>
  </nodeDepot>
</config>            

Real example:

• name (the name displayed in the bottom line when the configuration is loaded: “Configuration loaded: xxxx”
• newXMLFile (the xml file loaded if the user selects “File → Create new XML”
• hideAttributes (true or false, if the attributes of the root node should be hidden)

In node settings, you define all the nodes that will be needed in your final xml file. The node “nodeSettings” itself has no attributes. It contains the individual nodes. Let's try for example a node “image”. At first we need to define the behaviour of this node. We do this by setting its attributes. Please note that these are not the attributes the end user is going to see, they only describe how this node should behave. In the example in the screenshot below, the node will not be protected (it can therefor be moved around, deleted etc.). It cannot be placed inside another node named “image” ¹⁾, and the attributes (later defined in attributeSettings) should not be hidden (so the user can edit the values).

Here we define the final attributes of the node “image”. These are the attributes the user will see. I know this can be a bit confusing at first: in the configuration xml file the attributes are treated as nodes themselves, because we need to be more flexible. But once you got the idea it's no magic anymore.



Have a look at the screenshot above: the node “image” needs 3 attributes, “name”, “url” and “description”. Because we treat the attributes as nodes, we can now add attributes to describe how the final attributes have to behave (it's really confusing, isn't it? ). The attribute “name” is required (the user cannot deactivate or remove it), and it is of type “string”.

“true” or “false”. If true, the user cannot deactivate the attribute.

• string
  A simple string that can contain any characters.
• boolean
  A checkbox component will be used.
• list
  A list component will be used, showing the items defined in “values”.
• number
  Input will be restricted to numbers only and ”.”

Needed if you set “type” = “list”. For example: “top,middle,bottom,nested”

Default value

In the screenshot below you should get the idea. There are checkboxes (type=boolean) and lists (type=list). Attributes “id” and “src” are required, “depth” has a default value set to “top”. The light grey attributes are there if needed, but if not checked, they will not appear in the xml file itself.

Here you define what attributes should be displayed instead of the plain node names, what color the label should have and what color the background of the node.

Example:

When you look at your loaded plain xml file, the node labels displayed are the node names itself. This is not really comfortable, for example in the global navigation xml file shown above you will read “button, button, button…”. It would be much better to have the attribute “btnLabel” of the node button displayed, so you would read instead “Home, About us, Service…”, for example.

Look at this screenshot of configuration xml file for an image gallery:



You add nodes named “display” into “nodeLabels”. Each “display” node has 4 attributes:

• nodeName Set the target node.
• attributeName Set the name of the attribute. Then, the content of this attribute will be displayed instead of the node name.
• textColor Define the color of the text label on the node
• bgColor Define the color of the node itself.

For example, a site.xml file of a Gaia website could look like this:



Defined in the configuration file, the node “page” is colored red and shows the content of the attribute “id”, the node “asset” is colored blue and shows the content of the attribute “id”.

Finally, the node “nodeDepot” contains all nodes which will be needed in an xml file. If a configuration file is loaded, the user is not allowed anymore to freely add nodes.\\Instead, you define which nodes can be added, and what predefined attributes they have. In the screenshot below, you can see a configuration file for Gaia. Two nodes are needed, “page” and “asset”. The attribute “id”, which is required and later display instead of the node name “page”, is predefined: “new_page”. And the attribute “menu” is set to “true”.

If the user edits your xml file and wants to add a new node, he just drags and drops it from the “Node Depot” Window (found in the menu bar under “Window”). All predefined attributes will right be there. You can even prepare nested nodes, for example have an “asset” node already in a “page” node when the node is dropped.

As you can see, it's more than just an online xml editor. It's what you make it by using configuration files.

Please don't hesitate to leave a comment in the blog or contact me directly if you have a question!