Toolkits or Applications That Build UI From Xsd

Question

I need to build a user interface to edit and create xml documents that conform to a given xsd schema. What I'd like to do is, as far as possible, generate my user interface based upon that xsd schema. The xsd schema can (and will) change over time and so the solution needs to be somewhat flexible.

The user interface needs to be a web UI and, ideally, one built with ASP.NET MVC.

I suspect that this is a tall order and not one that can be fully addressed by a toolkit or library, but I'm interested to know if anyone else has gone down this path and succeeded (or failed) and whether they used particular libraries, toolkits or approaches that helped. I've started to look at T4 templates as an approach, and feel that this will get me a lot of the way, but don't want to commit to this if there are easier approaches.

Answer 1

I've built an engine that does something very similar to what you are describing but instead of using XSD, the schema was defined in JSON Schema and the interface rendered in the browser using the Ext JS framework.

It is pretty intense JavaScript but the benefits have been enormous for us in terms of time saved during development and maintenance.

I don't know if there is a tool that does exactly what you require, but the easiest path is to find a flexible, solid GUI framework (such as Ext JS, YUI, Dojo, etc) and map each type in your XSD to a 'widget type' in the GUI framework. You will have to basically keep 'pre-configurations' for each of those types and apply them as you parse the XSD. At a conceptual level, it's actually quite simple.

JavaScript turned out to be a fantastic language for such a task because of its dynamicity.

Answer 2

Do you mean something like this? This is an approach that I used in one of my projects to convert my xml's via an xsd to xhtml. It was quite flexible for my project.

Answer 3

You might want to take a look at StyleVision, which I've worked with in the past towards just that purpose. I know it looks very noisy in their screenshots but I think they're just trying to make it look impressive. It's worth checking it out, in my opinion.

Answer 4

Try JAXE. It's an XML editor that presents you with the contextual choices for what elements to insert inside a given element based on the XML schema which you give it. It's not a web interface, but a Java interface that could probably be embedded in a Java applet if you so choose. (It also doesn't give you that much flexibility as to what the interface looks like, but it does give you lots of flexibility as to what the schema looks like.) And it does look similar to Altova's StyleVision, which another answer suggested here, but JAXE is open source.

Answer 5

I've been doing a proof-of-concept using XSD, the Microsoft XmlSampleGenerator project to generate sample xml from an Xsd which is then used to build the GUI and Schematron (to define a rules and validation within the Xsd). A couple of things to note:

• The implementation is very much Microsoft-specific: a Silverlight front end UI generation from Xml, validated against an Xsd extended by Schematron (NMatrix Schematron.NET open source implementation) to include business rules.
• You could probably generate the GUI straight from the Xsd without the XmlSampleGenerator step, I included it in the POC because it simplified the xml parsing and cut out noise when generating the UI.

I am defining field types in Xml element attributes in the Xsd which when sent over the wire via WCF to Silverlight can be used to locate a suitable editor via DataTemplate lookup for the given type when in edit mode, e.g. display a DatePicker if the type is a System.DateTime, etc. If the type is more complex, then you could define you're own types which map to UI widgets for complex UI editing scenarios. I also have format masks as attributes on the xml for display formatting on various types.

I also looked at direct mapping from XML to hierarchical objects, e.g. a Node class with 'Name', 'Value' and 'ChildNodes' property which when wrapped as IEnumerable can then be bound to 3rd party controls, such as Infragistics XamGrid and XamDataTree, both of which are fully editable. Again, very much an MS implementation through all the layers.

Hope that helps.

Answer 6

It might be interesting to play around with transforming your XSD schema into XAML which could be instantiated as a silverlight form on your web page.

Not that this approach would necessarily be better than T4; I have never tried that.