The Visual Designer tool enables users to create and design forms for use with EditLive! for XML. Each form consists of a schema and one or more views. Together, these files form a solution which can be developed in the Visual Designer and then deployed for use with EditLive! for XML.
The Visual Designer allows for the editing of the schema for the intelligent forms used in EditLive! for XML.
The schema provides EditLive! for XML with the rules for the data to be captured from users.
The schema created by the Visual Designer Applet is output as an XML Schema Document (.xsd) which can then be used as an input to EditLive! for XML.
The schema created by the Visual Designer Desktop Application is output as part of the Solution File (.els) which can the be used as an input to EditLive! for XML.
The root element is the highest level XML element that contains all other elements in your document.
By default the name of the root is Untitled, this should be changed to something more meaningful for the schema which is being created. For example, if the schema was for a purchase order the root element may be named PurchaseOrder.
To change the name of the root:
Right click the root element and select Properties... on the shortcut menu.
In the Properties dialog, enter the name in the Name text box.
Click OK.
The names of fields cannot contain spaces and can only begin with a letter. They can only contain alphanumeric characters, underscores ("_"), periods (".") and hypens ("-").
Groups contain other elements and attributes and enable the creation of controls which contain other controls such as repeating sections. For example, in a purchase order schema you might have a Item group which contains elements or attributes for the item such as description, quantity and price.
To create a new group:
Right click the root element and select Add Group... on the shortcut menu.
In the Properties dialog, enter the name of the group in the Name text box.
Click OK.
Elements are used to store data within EditLive! for XML. Elements can exist as a child of the root element or a group. They may also be of a specific type. Creating a simple element of a specific type allows form designers to constrain the user input for a particular field. By default a simple element must appear only once within its parent. The element can be changed to be a repeating or optional element by setting the Minimum and Maximum occurrences for the element within its properties. For example, in purchase order schema may contain a CompanyName element for capturing the name of the company.
To create an element:
Right click the root element or group which is to be the parent of the element and select Add Simple Element... on the shortcut menu.
In the Properties dialog, enter the name of the group in the Name text box.
Click OK.
Attributes are similar to elements but are less flexible and cannot be extended as easily. Like elements, attributes may also be of a specific type and have constraints placed upon their value. Attributes may occur a maximum of once within an element.
To add an attribute:
Right click the root element, group or element the attribute is to be added to and select Add Attribute... on the shortcut menu.
In the Properties dialog, enter the name of the group in the Name text box.
Click OK.
The type of data which may be entered for a simple element or attribute can be specified via the Visual Designer.
A field with the type anySimpleType can contain any content as long as it is well-formed XML. When added to a view the default control for a field of type anySimpleType is a text box
A field with the type string can contain any Unicode character. When added to a view the default control for this data type is a text box.
A field with the type boolean can contain the values true or false. When added to a view the default control for this data type is a check box.
A field with the type integer can contain negative or positive whole number values. When added to a view the default control for this data type is a text box which will only enable a user to enter numbers or a positive (+) or negative (-) symbol. Examples of a valid integer are 1234, -4567 or +789.
A field with the type decimal can contain numeric values. When added to a view the default control for this data type is a text field which will only enable a user to enter numbers, a postivite (+) or negative (-) symbol, or a decimal point (.). Examples of a valid decimal are 0.3, -.3 or +3.5.
A field with the type date can contain date values. When added to a view the default control for this data type is a date-picker which enables users to easily enter a date manually or to select a date from a calendar. Dates will be presented to users in a format according to their client locale.
Dates are stored in the XML document in the format defined by Section 5.2.1 of ISO 8601 i.e. CCYY-MM-DD where CC represents the century, YY represents the year, MM represents the month and DD represents the day. Example dates include 2005-05-01 (May 1, 2005) and 1788-01-26 (January 26, 1788).
A field with the type time contains time values. When added to a view the default control for this data type is a time-picker which enables users to easily enter a time in a format specified by their client locale.
Times are presented to users according to their local time zone and stored in the XML document in coordinated universal time (UTC) which is a 24-hour time as defined by Section 5.3 of ISO 8601 i.e. hh:mm:ssZ where hh, mm and ss represent hour, minute and second respectively, the Z indicates that times are stored in UTC. Examples of valid times are 08:33:15Z (8:33 am and 15 seconds UTC) and 21:56:25Z (9:56 pm and 25 seconds UTC).
A field with the type dateTime contains both a date and a time value. When added to a view the default control for this data type is a date-time-picker which allows users to easily select both a date and a time. Date-time values will be presented to users in the format specified by their client locale.
Date-times are stored in the XML document in the format defined by Section 5.4 of ISO 8601 i.e. CCYY-MM-DDThh:mm:ssZ where CC represents the century, YY represents the year, MM represents the month and DD represents the day. The character T separates the date from the time and hh, mm and ss represent hour, minute and second respectively. The Z indicates that the time is expressed in UTC. Times are presented to users according to their local time zone and stored as a UTC representation. An example of a valid date-time is 2004-05-01T21:56:25Z (9:56pm and 25 seconds UTC, May 1, 2004).
A field with the type xhtml can contain rich text values. In an xhtml field authors can use formatting such as bold, italic and underline, insert images and hyperlinks and access other word processor-like functionality in EditLive! for XML. When added to a view an xhtml section appears as a rich text box.
Fields (simple elements or attributes) can have constraints placed upon their values. The types of constraints which may be placed on a field depends on the data type of the field. Each constraint consists of the property on which the constraint is applied, a comparison operator and a value. Users may select from a lists of properties and comparison operators to construct a constraint.
The schema enables designers to specify a default value for a field. When placed into EditLive! for XML the default value will appear within the control prior to any data being entered. To specify a default value for a field:
Right-click the simple element or attribute and select Properties...
Enter the default value in the Default Value text box
Click OK
By default, when elements are added to the schema they have both their minimum and maximum number of occurrences set to one.
To change a simple element to be optional:
Right-click the simple element or attribute and select Properties...
Change the Minimum Occurrences to 0
Click OK
To change a simple element to be repeating:
Right-click the simple element or attribute and select Properties...
Enter a number greater than 1 in the Maximum Occurrences text box or select the check box Unlimited Occurrences.
When adding a repeating or optional element a button with the label Add element name, where element name is the name of the element, will be automatically added to the form. This button will allow users to insert extra instances of the repeating element as required.
Repeating groups may also be defined. To create a repeating group of elements:
Create or move the related elements within a single group.
Right-click the group and select Properties...
Enter a number greater than 1 in the Maximum Occurrences text box or select the check box Unlimited Occurrences.
When a repeating group is added pressing the Add element name button in EditLive! for XML will result in the parent element and its children being added to the document.
A view is a representation of the schema which allows users to edit the underlying XML document. A view provides EditLive! for XML with a template for a form. Views contain controls, allowing the underlying XML document to be easily edited. In addition to controls views may also contain formatted text, tables, images and other rich text elements.
Rich text content within a view consists of all objects within a view except controls. By adding rich text elements to a view designers can provide visual cues indicating how a form should be filled out. The rich text editing capabilities of the Visual Designer are extensive and allow form designers to insert images, tables, lists, hyperlinks and formatted text into a view.
There are two ways in which an element or attribute can be added to a view. Elements and attributes can be drag-and-dropped into a view, they can also be inserted at the current cursor location within the view through the Insert at cursor menu item.
When an element is placed within a view its attributes, children and their attributes are all placed within the view with their default renderings.
Interaction with the underlying XML document in EditLive! for XML is performed through the inclusion of form controls. These controls allow content contributors to enter data within the XML document without exposing them to the XML. Controls are embedded within a view when a field from the schema is placed within a view. Action buttons, which allow users to create and remove repeating elements can also be added.
Form controls provide users with a means of entering data into an underlying XML document. When an element or attribute from the schema is placed into a view the form field associated with it is the default for that data type. The default form control type for each data type is as follows:
The default for this data type is a text field which will accept any character input.
The default for this data type is a text field which will accept any character input.
The default for this data type is a checkbox.
The default for this data type is a text field which will accept only numeric characters and the + and - characters.
The default for this data type is a text field which will accept only numeric characters and the +, - and . characters.
The default for this data type is a date-picker.
The default for this data type is a time-picker.
The default for this data type is a combined date-time-picker.
The default for this data type is a rich text field.
There are several types of form controls which may be used for interacting with the XML document in EditLive! for XML. Form designers can specify the type of intelligent form element which is associated with a schema element or attribute via the Control Properties dialog. The following provides a list of available form control types and their functionality.
A check box allows users to enter a value of either true or false into the XML document. When the check box is checked a value of true will be entered and when the check box is left blank a value of false is entered.
A date picker control allows users to select a date from a calendar interface. If constraints have been placed on the value of the date users may only select a date from the valid range.
A date time picker control enables users to select both the date and the time using a calendar interface to select the date and a clock to select the time.
A drop down list allows users to select a value for the field from a series of values which have been specified by the form designer. Form designers can specify a list of values via the Control Properties dialog when creating the view for the form. A drop down list only displays the currently selected value when it is not active. When active a drop down list will display a list of items to choose from.
A list allows users to select a value for the field from a series of values which have been specified by the form designer. Form designers can specify a list of values via the Control Properties dialog when creating the view for the form. A list differs from a drop down list in that all list options are visible to users, with the currently selected list item highlighted.
A text field control allows users to enter a plain text value. Valid input for a text field varies according to the data type used with the field. The following is a list of data types and the associated functionality of a text field:
If the data is of the type anySimpleType or string then the text field will accept the input of any characters.
If the data is of the type integer then the text field will accept numeric characters and the + and - characters.
If the data is of the type decimal then the text field will accept numeric characters and the +, - and . characters.
A time picker control allows users to enter a time more easily. Time contols accept time in 24-hour format. A time control is split into three values, hours, minutes and seconds. These can be selected separately.
Rich text controls may only be used with the XHTML data type. These give contributors access to full WYSIWYG rich text authoring. Users can include images, tables, lists, hyperlinks, formatted text and other rich content within these fields. Using these controls users may also copy content from Microsoft Word. Content from XHTML controls is stored within the XML document as XHTML.
Action buttons are added to a view to enable users to dynamically add or remove elements. The Visual Designer will automatically add action buttons if required when an element is added to a view. There are two types of action buttons available, Remove and Insert buttons. Remove action buttons are associated with each instance of an element. Insert action buttons are associated with a group of repeating elements. The Insert action button for an element will be present where the next element of that kind can be inserted. For insert buttons once the maximum number of instances for the relevant element has been reached the corresponding Insert action button will no longer be available.
When adding repeating elements to a view it is important to note that a view within the Visual Designer provides a template for the element and not an exact replica of the form from EditLive! for XML. For example, if an element has its minimum occurrences attribute set to three it will appear three times within EditLive! for XML. However, in the Visual Designer it will only appear once, as a template. The template for the element, as it appears in the Visual Designer, will appear for each of the three times it is present in EditLive! for XML.
Multiple views can be used with a single schema. Thus designers can split a schema across several forms. It also allows a schema to be presented to the user in several different ways. Views can be added via the Add button on the Views tab within the Visual Designer. Where multiple views are present within the Visual Designer form designers can use the Views tab to access separate views. Double clicking on the name of a view will open the view for editing within the Visual Designer.
The Visual Designer outputs the schema and views in formats which comply with XML standards. The schema is output as an XML Schema Document (XSD) and each view is output as an XML Style Sheet (XSL). These outputs can then be used as inputs to EditLive! for XML either from a Web accessible location on the file system or embedded as text when EditLive! for XML is instantiated. The Visual Designer Applet allows the schema and views to be created as seperate XSD and XSL outputs. The Visual Designer Desktop Application packages the schema and views into a single solution file for output.
The Visual Designer submits content as part of the browser's submit mechanism. The Visual Designer submits its content when the form it is embedded in is submitted via the JavaScript onSubmit function. When POSTing data the Visual Designer will output the schema as an XSD in one form field. Views will be submitted as XSLs, each XSL will be placed within separate fields with the same name. This creates a collection within the POST which may be iterated over to retrieve each view.
A schema for an instance of the Visual Designer will be submitted in the form field named designer_xsd where designer is the name of the instance of the Visual Designer.
The Visual Designer submits each view in a separate field, however, each view field has the same name. Thus, when processing the browser's request the set of views from the Visual Designer can be found as a collection within the POSTed data. The form fields in which views are submitted are named designer_xslt where designer is the name of the instance of the Visual Designer.
The collection of names for the views generated in the Visual Designer are also POSTed by the Visual Designer. Each view name is submitted in a separate field, however, each view name field has the same name in the POST. Thus, when processing the browser's request the set of view names from the Visual Designer can be found as a colelction within the POSTed data. The order in which the view names are POSTed is the same as that for the views. The form fields in which view names are submitted are named designer_viewName where designer is the name of the instance of the Visual Designer.
The Visual Designer enables users to export a view or schema to the file system. This enables users to store schemas and views on the file system which may be used as inputs for EditLive! for XML when placed in a Web accessible location. When exporting the schema it will be stored as an XSD on the file system with the extension .xsd. When using the Visual Designer Applet the XSD may be exported by using the Designer ->Export Schema menu item. When using the Visual Designer Desktop Application the XSD may be exported using the File -> Export Schema menu item. When exporting a view it will be stored as an XSL on the file system, with the extension .xsl. Using the Visual Designer Applet XSLs may be exported by using the Designer -> Export StyleSheet menu item. When using the Visual Designer Desktop Application XSLs may be exported by using the File -> Export StyleSheet menu item.
The Visual Designer is a tool which allows users to create schemas and views which are then used to construct an intelligent form within EditLive! for XML. The schema created within the Visual Designer designates what data is to be captured, the type of data and any constraints on the data. It also provides form designers with a means of logically grouping related data.
Views created within the Visual Designer allow form designers to specify how data will be presented to users. A view is a mixture of rich text objects and form controls. The rich text components of a view give designers the flexibility to add formatted text, images, tables, lists and other elements to each view while the addition of form controls provides an interface to the underlying XML document within EditLive! for XML.
The output from the Visual Designer is used within EditLive! for XML to validate and render XML documents. The Visual Designer provides two forms of output. The schema is output as an XML Schema Document (XSD) and each view is output as a separate XML Style Sheet (XSL) document. These can then be used by EditLive! for XML by reading them from a Web accessible location or directly from the page which EditLive! for XML is embedded in. The Visual Designer Desktop Application can also provide a solution file that can be used by EditLive! for XML when referenced from a Web accessible location.
Copyright 2001-2005 Ephox Corporation. All Rights Reserved.