Developer's Guide

Overview

This guide contains information on how to configure and integrate XSDForm into your web site. This is the main resource for using XSDForm.

Concept

XSDForm gets your XSD and creates a web form on your web site. Optionally, it gets XML data and fills the initial data of the web form.

The form sends the filled (prepared) XML string to specified web address. (Delivers xml).

Configuration

XSDForm stores information about your forms with their identifiers in a configuration file (XSDForm/admin/xsdformconfiguration.xml).

XSDForm

A Web form should have the following properties:

Identifier: This is a unique string for the web form. This identifier is used on your web page for integration. It should contain alphanumeric characters and no space.

XSD File: Path to the XSD file of this form. It may be absolute path on web server or relative path to /XSDForm directory.

Form Element Name: The root xml element of the web form.

Form Element Type Name: The type name of the root xml element. It is specified in XSD file. The whole web form is created with this type content.

Form Integration: XSDForm can create a full html form with its action and send button. Or XSDForm can create html input field into your existing html form. With this method, you have the responsibility to specify the action of the form and to post the form. The posted form contains your inputs and a hidden variable: xmlContent that contains the xml string preapared with XSDForm. The value of this field can be "standalone" or "embedded".

Form Action: This is the target of the form. Prepared xml string is posted to this address. It may be relative to web address of your web page or an absolute web url. This parameter is only used if the Form Integration field is assigned to standalone.

XSDForm has an easy to use web interface for its configuration.

Go to http://yourdomain.com/XSDForm/admin with your web browser. You can define as many forms as you want.

Integrating the XSDForm

You can use the XSD form on anywhere of your web page.

A sample usage is below:

Sample Usage

<html><head>
<!-- fixed lines that include the scripts -->
<script type="text/javascript" src="/XSDForm/jquery.min.js"></script>
<script type="text/javascript" src="/XSDForm/xsdformjs.php"></script>
<link href="/XSDForm/style.css" type="text/css" media="screen" rel="stylesheet">
<!-- Prepare the form on page load -->
<!-- Use the form identifier that is entered on configuration -->
<script>
$(document).ready(function() {
	getXSDForm("Customer_Form","formDivId","");
});
</script>
</head>
<!-- Your web page content -->
<body>
<center><h3>Customer Form</h3>
<table border="1" width="500px">
<tr><td>
<!-- This is the place that you want to place the web form -->
 <div id="formDivId"></div>
</td></tr>
</table>
</center>
</body></html>

Lines 3-5: HTML codes for including XSDForm scripts and css styles. "/XSDForm/" is the installation directory on your web directory.

Lines 8-12: Codes for loading the web form after the web page is loaded. Customer_Form is the form identifier specified on configuration. formDivId is the ID of the HTML div element that is replaced with generated form on your web page.

Line 20: Div element that will be placed with the web form. Put this line to anywhere you want to place the form content.

Field Name Notation

XSDForm displays field labels from name of the xml elements and name of the xml attributes. However, these names may not look visitor friendly.

XSDForm converts the names into word capatilize notation.

It splits the names into words with underscore characters and capital characters. Then it capitalizes the first character.

Example:
firstName => First Name
last_name => Last Name

acceptTerms => Accept Terms

Using as Standalone Form

Using as Part of your Form

Filling the Form with Initial Data

<?php
 $xmlCurrentContent = '<customer name="Smart" surname="Sunrise"><email>[email protected]</email><address><Name>work</Name><Street>Outlake Road 12</Street><City>Paris</City><Zip>34400</Zip><Country>France</Country></address><acceptTerms>acceptTerms</acceptTerms></customer>';
?>
<script>
  $(document).ready(function() {
    var xmlCurrentContent = '<?php echo base64_encode($xmlCurrentContent);?>';
    getXSDForm("gss","formcu",xmlCurrentContent);
  });
</script>

Styles

a: links.

.headerCollapse:The area which includes the collapse/expand arrow at the title.

.headerTitle: The area which defines the title text and add/remove buttons.

.headerRow: contains .headerCollapse and .headerTitle

.indent_1 .headerCollapse - .indent_6 .headerCollapse: they are combined with the .headerRow. The number increases due to the hierarchy. 1 is root, 2 is child of 1 ... 6 is child of 5.

.contentDiv: The area which contains all input fields and labels of the element.

.outer_element: This class is in .contentDiv to add more flexibile customization to it.

.fieldLabel: Label of the fields.

.input.inpfield: Fields.

.field: Contains .fieldLabel and .input.inpfield.

.multipleElementContainer: Contains all elements.

Hierarchy of the elements:

Content

Space Tools