XML Forms from Schema?

[hart]

Hi,

I'm new to Ext JS and I must say I'm very impressed with the look and feel of the output. I stumbled across Ext JS while looking for a solution to a fairly simple problem that is seemingly more difficult than I imagine it should be :)

I've spent the evening browsing and searching the forums and reading a lot of the tutorials and examples on the site without much success - so I thought I'd throw it out there.

I want to create a simple UI to add, edit, remove XML objects based on an XML Schema. Ie: every time I decide to add another element to the structure, I don't want to have to re-write the UI.

I have a fairly simple XML document structure:


<?xml version="1.0"?>
<config>
<name>example</name>
<domain>example.domain</domain>
<server>
<fqdn>mail.domain</fqdn>
<ip>192.168.1.1</ip>
<type>mail</type>
</server>
<server>
<fqdn>web.domain</fqdn>
<ip>192.168.1.2</ip>
<type>web</type>
</server>
<database>
<fqdn>db1.domain</fqdn>
<ip>192.168.1.3</ip>
</database>
</config>

With a corresponding XML Schema:


<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" attributeFormDefault="unqualified" elementFormDefault="qualified">
<xs:element name="config">
<xs:complexType>
<xs:sequence>
<xs:element minOccurs="1" maxOccurs="1" name="name" type="xs:string"/>
<xs:element minOccurs="1" maxOccurs="1" name="domain" type="xs:string"/>
<xs:element minOccurs="2" maxOccurs="unbounded" name="server">
<xs:complexType>
<xs:sequence>
<xs:element minOccurs="1" maxOccurs="1" name="fqdn" type="xs:string"/>
<xs:element minOccurs="1" maxOccurs="1" name="ip" type="xs:string"/>
<xs:element minOccurs="1" maxOccurs="1" name="type">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration value="mail"/>
<xs:enumeration value="web"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element minOccurs="0" maxOccurs="unbounded" name="database">
<xs:complexType>
<xs:sequence>
<xs:element minOccurs="1" maxOccurs="1" name="fqdn" type="xs:string"/>
<xs:element minOccurs="1" maxOccurs="1" name="ip" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>


I looked at length at the XML-FORM example but couldn't figure out how to dynamically create the form itself, from either the xml or the schema (preference, based on type information).

Additionally, even if I got that far, I am struggling with how to represent the form part of the UI - specifically when editing/adding a new entry, the form needs to be dynamically modifiable pre-submission to allow the "addition" of extra array elements such as "server"s and "database"s (see XML structure).

Doesn't seem that complicated in my head, but when I stare at the code, my mind goes blank :(

Ideas/comments/suggestions welcome.

Cheers

Leigh

[Animal]

You could process that XML either server or client side to produce a form definition. It's not that difficult, just legwork, but nobody is going to do that for you!

I'd say your first step is to write the form manually and become very familiar with creating complex, nested Panel definition objects.

When you are familiar with this, you can then think about how to generate them from XML.

First steps first.

[hart]

Hi Animal,

Thanks for the feedback! I appreciate that nobody is going to jump in and provide a turn-key solution to my problem ;-)

What I am asking is if anyone in the community has done something like this before and, if so, would they be willing to share a few guiding steps towards how to best achieve it. I understand from the XML-FORM example how to fetch XML objects and subsequently validate them (great example btw) just not quite sure how to turn a fetched XML data structure (eg: Schema) into an Ext JS form structure.

Cheers

Leigh

[Animal]

A few months ago someone suggested exactly such a thing. And got pretty much the same response, "yes it's possible if you know Ext configs very well". I don't know what happened to the poster.

If you are an XML developer, then by far the easiest way would probably be a server-side XSL transformation.

[hart]

That's the current method I'm using (an XSLT stylesheet) - it works, but again isn't based on the schema. I do like the polished look and feel of Ext JS though!

I might dig into some more XML perl libraries and see what I can come up with. Again it's the problem of dynamically expanding the form to add more list elements that I struggle with.