Highlight and Edit XML in a browser

Question

Trying to provide a user with editable XML page in a browser.

For example, the following is part of an XML.

<Employee name="John Doe" type="contract" ID="1000"> 
    <Salary>10000</Salary>  
    <Email>[email protected]</Email>  
</Employee>

When the above is presented to the user in a brower (either IE or FF), the user should be able to highlight an attribute or the value. When highlighted and the second mouse button is pressed, this would pop up a menu for editing. For attributes and tags, it could be something like ID-TEST-PRESENT or ID-TEST-OPTIONAL. Now instead of ID, the attribute should change to ID-TEST-PRESENT when selected.

Likewise, for values, a text box can be presented, where the user can enter a new value. Then this updated XML file needs to be sent to the back end and saved.

Is this doable? If yes, what would be the easiest way.

I have always written embedded applications. This is my first foray on the web browser side. Any help is appreciated.

Answer 1

It is doable of course, but it's not trivial. At least not for someone who is not used to Javascript and manipulating the DOM. You would have to parse the XML and create a HTML document with Javascript event listeners on each element.

You could try and use an existing component and modify it if necessary. I found a similar question here:

https://stackoverflow.com/questions/378205/web-xml-editor-with-xml-syntax-highlighting

Unless you are dealing with generic XML files, you are probably better off just reading the XML and generate a standard HTML form. The simplest way would be to base everything on a database that will export to XML to the backend processes if needed. This makes it much simpler to add/edit multiple rows of data

Answer 2

One way to to create an interface for editing information in a particular XML vocabulary is to use XForms. (I think it is by far the easiest and best, but YMMV.) Given an appropriate infrastructure (see below), using XForms for what you describe would involve:

1. Write a form, using XHTML + XForms. Specify editing widgets for the parts of the XML you want the user to be able to edit; make other parts of the XML read-only (or don't display them at all). Define how you want the edited data to be submitted. Style using CSS.
2. When the user opens the form, the XForms processor loads the XML document automatically and provides editing widgets as specified in the XForm you specified in step 1. The user edits.
3. When the user clicks on the submit button, the browser sends the data back to the server as XML, and software on the server performs the necessary validations (this is user input from the open web, you do want to check it) and processes it appropriately.

As you can see, it's a little simpler than rolling your own using AJAX (at least once you have the infrastructure set up).

What infrastructure is necessary for XForms depends in part on which XForms implementation you are using.

For client-based implementations of XForms (such as XSLTForms from AgenceXML, or Formula from EMC), you need (a) a copy of the software on your server (in the case of XSLTForms, this means one XSLT stylesheet, one Javascript library, and one CSS file), (b) possibly an appropriate link in the form itself (how this needs to be done varies with the implementation), and (c) a server willing to accept PUT requests. In some contexts, it will be (c) that is the hardest to get set up, but any server that provides a WebDAV interface will do, so SVN with auto-versioning, Apache (alone or on top of Subversion), and other tools can all be used.

For server-based implementations (such as Orbeon Forms or BetterForm), you need to install the XForms implementation and run it on your Web server; since they are typically servlets, you will need to put them in a servlet engine. In general, they will ship with some form of WebDAV server included.

Steven Pemberton of W3C and CWI has written a helpful tutorial introduction to XForms; I maintain a list of pointers to that and to other XForms-related materials that may also be helpful.