Include the editlivexml.js file

<script src="../../redistributables/editlivexml/editlivexml.js">
</script>

The editlivexml.js file contains the Ephox EditLive! JavaScript library. This library provides the interface between the browser and the EditLive! for XML .jar file (editlivexml.jar) which contains the code for the EditLive! for XML applet. The JavaScript library file can be found in the INSTALL_HOME/redistributables/editlivexml directory of the EditLive! for XML install.

Create a form to place an instance of EditLive! for XML in.

<form name="form1" method="POST">

Declare the EditLive! for XML JavaScript object.

<script language="JavaScript">
var editliveInstance;

Create a new instance of the EditLive! for XML object. When creating the EditLive! for XML object the name of the form field for the applet in addition to the width and height are declared. In this example the form field for the applet is ELApplet1, the width of the applet is 700 pixels and the height is 600 pixels.

// Create a new EditLive! for XML instance with the name 
// "ELApplet1", a height of 600 pixels and a width of 700 pixels.
editliveInstance = new EditLiveXML("ELApplet1", 700, 600);

Set the path to the source files for EditLive! for XML. These can be found in the INSTALL_HOME/webfolder/redistributables/editlivexml directory.

// This sets a relative path to the directory where
//  the EditLive! for XML redistributables can be
//  found e.g. editlivexml.jar
editliveInstance.setDownloadDirectory(
        "../../redistributables/editlivexml");

Set the URL for the EditLive! for XML configuration file.

// This sets a relative or absolute path to the XML
//  configuration file to use.
editliveInstance.setConfigurationFile("elconfig.xml");

Set the URL for the schema (XSD) to use with EditLive! for XML.

// This sets a relative or absolute path to the schema (XSD) 
//  to use for XML validation.
editliveInstance.setXSDURL("article.xsd");

Set the name and the URL for the view (XSL) to use. The name used here will be used within EditLive! for XML as the label for the tab representing the article.xsl view.

// This sets a relative or absolute path to the stylesheet (XSL) 
//  to use to display the XML content.
editliveInstance.addView("Article", "article.xsl");

Set the content for the applet. The content must be a valid, URL encoded XML file. The string used in the following code is provided as an example, it is not a complete XML document. For a complete version of the source code please see the example code available with the EditLive! for XML SDK.

// This sets the initial content to be displayed within 
//  EditLive! for XML
editliveInstance.setDocument(
       "%3C%3Fxml%20version%3D%221.0%22%20...");

Display the EditLive! for XML applet and close the script and form elements.

// .show is the final call and instructs the JavaScript 
//  library (editlivexml.js) to insert a new EditLive! for XML
//  at the this location.
editliveInstance.show();
</script>
</form>

Include the Ephox Visual Designer JavaScriptLibrary file, visualdesigner.js.

<script src="../../redistributables/editlivexml/visualdesigner.js">
</script>

The visualdesigner.js file contains the Ephox EditLive! JavaScript library. This library provides the interface between the browser and the Visual Designer .jar file (designer.jar) which contains the code for the Visual Designer applet. The JavaScript library file can be found in the INSTALL_HOME/redistributables/editlivexml directory of the EditLive! for XML SDK install.

Create a form to place an instance of the Visual Designer in.

<form name="form1" method="POST">

Declare the Visual Designer JavaScript object.

<script language="JavaScript">
var designerInstance;

Create a new instance of the Visual Designer object. When creating the Visual Designer object the name of the form field for the applet in addition to the width and height are declared. In this example the form field for the applet is VDApplet1, the width of the applet is 700 pixels and the height is 600 pixels.

// Create a new Visual Designer instance with the name 
// "VDApplet1", a height of 600 pixels and a width of 700 pixels.
designerInstance = new VisualDesigner("VDApplet1", 700, 600);

Set the path to the source files for the Visual Designer. These can be found in the INSTALL_HOME/webfolder/redistributables/editlivexml directory.

// This sets a relative path to the directory where
// the EditLive! for XML redistributables can be
// found e.g. designer.jar
designerInstance.setDownloadDirectory(
        "../../redistributables/editlivexml");

Set the URL for the Visual Designer configuration file.

// This sets a relative or absolute path to the XML
// configuration file to use.
designerInstance.setConfigurationFile("designerconfig.xml");

Set the schema (XSD) to be used with the Visual Designer.

// This sets the schema (XSD) to be edited with this instance of  
// the Visual Designer
designerInstance.setXSDAsText("%3C%3Fxml%20version%3D%221...");

Add the views to be used within the Visual Designer. This section of code adds three views for use with the Visual Designer. The views listed here are given the names Company, Second View and Third View.

// This sets the views to be edited with this instance of the 
// Visual Designer.
designerInstance.addViewAsText("Company Details",
  "%3C%3Fxml%20version%3D%221.0%22%20encoding...");
designerInstance.addViewAsText("Contact Details",
  "%3C%3Fxml%20version%3D%221.0%22%20encoding...");
designerInstance.addViewAsText("Activity Details",
  "%3C%3Fxml%20version%3D%221.0%22%20encoding...");

Display the Visual Designer applet and close the script and form elements.

// .show is the final call and instructs the JavaScript 
//  library (visualdesigner.js) to insert a new EditLive! for XML
//  at the this location.
designerInstance.show();
</script>
</form>

Create the page

<html>
<head>
<title>EditLive! for XML - Life Cycle Example</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>

<body>
<h1>Life Cycle Example</h1>

Create a form to allow the submission of the form selection. This form submits its content to the designer page. For ASP the designer page is designer.asp and for JSP the designer page is designer.jsp.

VBScript:

<form name="form1" action="designer.asp" method="GET">

JSP Scripting:

<form name="form1" action="designer.jsp" method="GET">

Provide the selection options and finish the page.

<p>Select one of the example forms below to get started.<br>  
  These forms are packaged with EditLive! for XML in the <i>forms</i>
  directory.</p>
  <p><select name="example">
    <option value="Contact Details">Contact Details</option>
    <option value="Expenses">Expenses</option>
    <option value="Invoice">Invoice</option>
    <option value="Leave Application">Leave Application</option>
    <option value="Partner Application">Partner Application</option>
    <option value="Quotation">Quotation</option>
    <option value="Sales Report">Sales Report</option>
    <option value="Support Issue">Support Issue</option>
    <option value="Vehicle Booking">Vehicle Booking</option>
    <option value="Create New Form">Create New Form</option>
  </select>
  <input type="submit" value="Select">
  </p>
</form>
</body>
</html>

Start page and import any required packages.

VBScript:

<%@ language="VBScript" %>
<html>
<head>
<title>EditLive! for XML - Visual Designer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1>Visual Designer</h1>
    <p>Edit the form and its data structure in the Visual Designer 
    and submit to EditLive! for XML.</p>

JSP Scripting:

<%@page import="java.util.*"%>
<%@page import="java.io.*"%>
<%@page import="java.net.*"%>
<html>
<head>
<title>EditLive! for XML - Visual Designer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
  <h1>Visual Designer</h1>
  <p>Edit the form and its data structure in the Visual Designer and 
  submit to EditLive! for XML.</p>

Create a method to read data files from the Web application file system (getFileContents). This method accepts two parameters, the file name and the subdirectory the file is contained in.

VBScript:

<%
  'This function reads a given file from the given forms subdirectory
  Function getFileContents(directory, fileName)
    Const ForReading = 1
    Dim fso, f, path, content
    'Construct the path to the file on the server
    path = Server.MapPath("../../../forms/" & directory) & "\" & fileName
    Set fso = Server.CreateObject("Scripting.FileSystemObject")
    Set f = fso.OpenTextFile(path, ForReading)
    'Read the file content
    content = f.ReadAll
    'Close and release the file
    f.Close
    Set f=Nothing
    Set fso=Nothing
    'return the file content
    getFileContents = content
  End Function
%>

JSP Scripting:

<%
  /*
  This method retrieves the content of a given file from a given subdirectory
  */
  public String getFileContents(String directory, String fileName) {
    try {
      //Construct the path to the file on the server.  
      //Note that this path is resolved relative to this application's
      //root directory
      String path = getServletContext().getRealPath("forms" + File.separator 
+ directory + File.separator + fileName);
      BufferedReader in = new BufferedReader(
new InputStreamReader(new FileInputStream(path)));
      StringBuffer buf = new StringBuffer();
      //Read the file into a variable one line at a time
      String line = in.readLine();
      while (line != null) {
        buf.append(line);
        buf.append("\n");
        line = in.readLine();
      }

      in.close();
      //Return the content of the file
      return buf.toString();
    } catch (Exception e) {
      e.printStackTrace();
      return "";
    }
  }
%>

Declare and initialize global variables for the page and process the request to determine which form has been selected.

VBScript:

<%
  Dim xsd
  Dim views(6)
  Dim viewNames(6)
  Dim viewCount
  Dim createNew

  createNew = false

  Dim example
  If Request.QueryString("example").Count > 0 Then
    example = Request.QueryString("example").Item(1)
  End If
...

JSP Scripting:

<%
  String xsd = "";
  List views = new ArrayList();
  List viewNames = new ArrayList();
  boolean createNew = false;

  String example = request.getParameter("example");

Read the requested data files into variables. The getFileContents method is used to retrieve the content of the requested files.

VBScript:

The ASP script places the content of the XSD file in the xsd variable and the content of each XSL forms an entry in the views array, finally, the label for each XSL is declared in the viewNames array.

'This series of if statements read the XSD and XSLs for the
'requested form into variables for outputting later.

'The XSD is read into the xsd variable

'Each XSL is assigned a name in the viewNames array and
'the content of the XSL is placed in the views array

If example = "Contact Details" Then
  'Read the files for the Contact Details form
  xsd = getFileContents("contactdetails", "contactdetails.xsd")

  viewNames(1) = "Company"
  views(1) = getFileContents("contactdetails", "company.xsl")
  viewNames(2) = "Contact"
  views(2) = getFileContents("contactdetails", "contact.xsl")
  viewNames(3) = "Activity"
  views(3) = getFileContents("contactdetails", "activity.xsl")
  viewCount = 3

ElseIf example = "Expenses" Then

  ...

ElseIf example = "Vehicle Booking" Then
  'Read the files for the Vehicle Booking form
  xsd = getFileContents("vehiclebooking", "vehiclebooking.xsd")

  viewCount = 1
  viewNames(1) = "Booking"
  views(1) = getFileContents("vehiclebooking", "booking.xsl")
ElseIf example = "Create New Form" Then
  'Set the create new form flag
  createNew = true
End If

JSP Scripting:

The JSP script places the content of the XSD file in the xsd string variable and the content of each XSL forms an entry in the views List, finally, the label for each XSL is declared in the viewNames list. The lists are instances of the java.util.ArrayList class.

/*
  This series of if statements read the XSD and XSLs for the 
  requested form into variables for outputting later.
        
  The XSD is read into the xsd variable
        
  Each XSL is assigned a name in the viewNames list and 
  the content of the XSL is placed in the views list
*/

if (example.equals("Contact Details")) {
  //Read the files for the Contact Details form
  xsd = getFileContents("contactdetails", "contactdetails.xsd");

  viewNames.add("Company");
  views.add(getFileContents("contactdetails", "company.xsl"));
  viewNames.add("Contact");
  views.add(getFileContents("contactdetails", "contact.xsl"));
  viewNames.add("Activity");
  views.add(getFileContents("contactdetails", "activity.xsl"));

}

...

else if (example.equals("Vehicle Booking")) {
  //Read the files for the Vehicle Booking form
  xsd = getFileContents("vehiclebooking", "vehiclebooking.xsd");

  viewNames.add("Booking");
  views.add(getFileContents("vehiclebooking", "booking.xsl"));
} else if (example.equals("Create New Form")) {
  //Set the create a new form flag
  createNew = true;            
}

Create a form which submits content to the page with EditLive! for XML embedded in it.

VBScript:

<form action="elx.asp" method="POST" name="form1">

JSP Scripting:

<form action="elx.jsp" method="POST" name="form1">

Create a form containing the Visual Designer. The Visual Designer is created and has its properties set using JavaScript.

<script src="../../../redistributables/editlivexml/visualdesigner.js" language="JavaScript">
</script>
<script language="JavaScript">
<!--
  var designerInstance;
  // Create a new Visual Designer instance with the name
  // "VDApplet1", a height of 700 pixels and a width of 800 pixels.
  designerInstance = new VisualDesigner("VDApplet1", 1000, 600);
  // This sets a relative path to the directory where
  // the EditLive! for XML redistributables can be
  // found e.g. designer.jar
  designerInstance.setDebugLevel("debug");
  designerInstance.setDownloadDirectory("../../../redistributables/editlivexml");
  // Set the output character set to ASCII to ensure that character 
  // encoding is correct
  designerInstance.setOutputCharset("ASCII");
  // This sets a relative or absolute path to the XML
  // configuration file to use.
  designerInstance.setConfigurationFile("designerconfig.xml");

Check the createNew flag and load the requested XSD into the Visual Designer if the createNew flag has not been set. Note the use of the server-side URL encoding.

VBScript:

<%
If Not createNew Then
%>
  // This sets the schema (XSD) to be edited with this instance of
  // the Visual Designer
  designerInstance.setXSDAsText("<%= Server.URLEncode(xsd) %>");
<%
End If
%>

JSP Scripting:

<%
if (!createNew){
%>
  // This sets the schema (XSD) to be edited with this instance of
  // the Visual Designer
  designerInstance.setXSDAsText("<% out.print(URLEncoder.encode(xsd)); %>");
<%
}
%>

Check the createNew flag and load the requested XSLs into the Visual Designer if the createNew flag has not been set. The XSLs and their associated names are loaded into the Visual Designer within a for loop. Note the use of the server-side URL encoding.

VBScript:

// This sets the views to be edited with this instance of the
// Visual Designer.
<%
If Not createNew Then
  Dim i
  For i = 1 to viewCount
    Response.Write "designerInstance.addViewAsText(""" 
& Server.URLEncode(viewNames(i)) & """, """ 
& Server.URLEncode(views(i)) & """);"
  Next
End If
%>

JSP Scripting:

// This sets the views to be edited with this instance of the
// Visual Designer.
<%
if(!createNew){
  Iterator namesIter = viewNames.iterator();
  Iterator viewsIter = views.iterator();
  while (namesIter.hasNext() && viewsIter.hasNext()) {
    out.println("designerInstance.addViewAsText(\"" + 
URLEncoder.encode((String)namesIter.next()) + "\", \"" + 
URLEncoder.encode((String)viewsIter.next()) + "\");");
  }
}
%>

Show the instance of the Visual Designer and finish the page. Buttons are included to allow the submission of content to the page containing EditLive! for XML and allowing navigation back to the form selection page.

        // .show is the final call and instructs the JavaScript
        // library (visualdesigner.js) to insert a new EditLive! for XML
        // at the this location.
        designerInstance.show();
      -->
      </script>
      <p>
        <input type="submit" value="View in ELX"> 
        <input type="button" value="Form Type Selection" 
onclick="location.href='default.jsp';">
      </p>
    </form>
  </body>
</html>

Import any required packages

VBScript:

<%@ language="VBScript" %>

JSP Scripting:

<%@page import="java.util.*"%>
<%@page import="java.net.*"%>

Start the HTML page

<html>
<head>
<title>EditLive! for XML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<h1>EditLive! for XML</h1>
    <p>EditLive! for XML combines the style sheet and data structure 
    generated in the Visual Designer to create an electronic form
    for authoring XML.  The style sheet from the Visual Designer 
    is used to present the underlying XML document while the data structure
    is used to ensure the validity of the XML document.  This page also 
    allows the content of EditLive! for XML to be submitted to the server
    for viewing.</p>

Create an instance of EditLive! for XML using JavaScript.

<!--
** First we need to include a link to the editlivexml.js file. This file contains all of the
** code required to handle loading EditLive! for XML across multiple browsers and platforms.
-->
<script src="../../../redistributables/editlivexml/editlivexml.js"></script>
  <form action="view.asp" method="POST">
  <script language="JavaScript">
  <!--
  /**
   ** This section of code creates the EditLive! for XML 
   ** instance and sets all of the relevant
   ** configuration information.
  */

  // Create a new EditLive! for XML instance with the name 
  // "elx", a height of 650 pixels and a width of 700 pixels.
  var elx1 = new EditLiveXML("elx", 850, 600);

  // This sets a relative path to the directory where the 
  // EditLive! for XML redistributables can be found e.g. editlivexml.jar
  elx1.setDownloadDirectory("../../../redistributables/editlivexml");

  // This sets a relative or absolute path to the XML configuration file to use.
  elx1.setConfigurationFile("elxconfig.xml");

Process the request variables to retrieve and set the XSD and the XSLs. Note the use of the server-side URL encoding methods.

VBScript:

// This sets a relative or absolute path to the schema (XSD) to use for XML validation.
elx1.addXSDAsText("<%= Server.URLEncode(Request.Form("VDApplet1_xsd").Item(1)) %>");

// This sets a relative or absolute path to the stylesheet (XSL) to use to display the XML content.
<%
  Dim i
  For i = 1 to Request.Form("VDApplet1_xslt").Count
    Response.Write "elx1.addViewAsText(""" & 
Server.URLEncode(Request.Form("VDApplet1_viewName").Item(i)) & 
""", """ & Server.URLEncode(Request.Form("VDApplet1_xslt").Item(i)) &
""");"
  Next
%>

JSP Script:

// This sets a relative or absolute path to the schema (XSD) to use for XML validation.
elx1.addXSDAsText("<% out.print(URLEncoder.encode(request.getParameter("VDApplet1_xsd"))); %>");

// This sets a relative or absolute path to the stylesheet (XSL) 
// to use to display the XML content.
<%
  String[] names = request.getParameterValues("VDApplet1_viewName");
  String[] views = request.getParameterValues("VDApplet1_xslt");
  if (names != null && views != null) {
    for (int i = 0; i < names.length && i < views.length; i++) {
      out.println("elx1.addViewAsText(\"" + 
URLEncoder.encode(names[i]) + "\", \"" + 
URLEncoder.encode(views[i]) + "\");");
    }
  }
%>

Show the instance of EditLive! for XML and finish the page. Buttons are included to allow the submission of content to the page allowing the XML content to be viewed and allowing navigation back to the form selection page.

  // .show is the final call and instructs the JavaScript library (editlivexml.js) 
  //  to insert a new EditLive! for XML
  //  at the this location.
  elx1.show();

  -->
  </script>
  <p>
  <input type="submit" value="View XML"> 
  <input type="button" value="Form Type Selection" 
onclick="location.href='default.asp';">
  </p>
  </form>
</body>
</html>

Import any required packages and get the submitted XML document from the request.

VBScript:

<%@ language="VBScript" %>
<%
Response.Write(Request.Form("elx"))
%>

JSP Scripting:

<%@page import="java.net.*"%>
<%
out.println(request.getParameter("elx"));
%>