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 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.

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");

Load the EditLive! for XML configuration file into a string and set the configuration text.

<?
//load the XML file into the string "$xmlConfig"
//  this helps to speed up the ELJ load time
$filename = "sample_eljconfig.xml";
$fd = fopen($filename,"r");
$xmlConfig = fread ($fd, filesize($filename));
fclose ($fd);
?>
editliveInstance.setConfigurationText("<?=rawurlencode($xmlConfig)?>");

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
<?php
$pageContent = '<?xml version="1.0"...'
?>
editliveInstance.setDocument("<?=rawurlencode($pageContent)?>");

Display the EditLive! for XML applet and close the script element.

// .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>

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.

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");

Load the EditLive! for XML configuration file into a string and set the configuration text.

<!--- Load the configuration file on the server to speed up loading --->
<cfset configpath=ExpandPath("sample_eljconfig.xml")>
<cffile action="read" file="#configpath#" variable="xmlConfig">

<cfoutput>
editliveInstance.setConfigurationText("#URLEncodedFormat(xmlConfig)#");
</cfoutput>

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
<cfset contents='<?xml version="1.0"...'>

<cfoutput>
editliveInstance.setDocument("#URLEncodedFormat(contents)#");
</cfoutput>

Display the EditLive! for XML applet and close the script element.

// .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>

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>ASP Example of Creating or Using Solution Files for the Visual
             Designer Desktop Application</title>
      <link type="text/css" rel="stylesheet" href="stylesheet.css">
   </head>
   <body>
      <h1>Ephox Visual Designer Desktop Application Example</h1>

This page will auto-detect if the client has Java Web Start installed on their system. If Web Start is not installed, the page will provide a link to Sun Mircosystem's website to obtain Java Web Start. If Web Start is installed, the page will create a link to the designer.jnlp file for users to load the Visual Designer Desktop Application:

<SCRIPT LANGUAGE="JavaScript">

// Detecting if Web Start is installed on Netscape

var javawsInstalled = 0;
var javaws142Installed=0;
var javaws150Installed=0;
isIE = "false";
 if (navigator.mimeTypes && navigator.mimeTypes.length)
 {
    x = navigator.mimeTypes['application/x-java-jnlp-file'];
    if (x)
    {
       javawsInstalled = 1;
       javaws142Installed=1;
       javaws150Installed=1;
    }
 }
 else
 {
    isIE = "true";
 }
</SCRIPT>


<SCRIPT LANGUAGE="VBScript">

'Detects is Java Web Start is installed on IE, and if so, the version

on error resume next
If isIE = "true" Then
  If Not(IsObject(CreateObject("JavaWebStart.isInstalled"))) Then
     javawsInstalled = 0
  Else
     javawsInstalled = 1
  End If
  If Not(IsObject(CreateObject("JavaWebStart.isInstalled.1.4.2.0"))) Then
     javaws142Installed = 0
  Else
     javaws142Installed = 1
  End If
  If Not(IsObject(CreateObject("JavaWebStart.isInstalled.1.5.0.0"))) Then
     javaws150Installed = 0
  Else
     javaws150Installed = 1
  End If
End If
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
 // Launches application if Java Web Start is installed, otherwise
 // redirects to a Java Runtime Environment Download

 /* Note that the logic below always launches the JNLP application
  *if the browser is Gecko based. This is because it is not possible
  *to detect MIME type application/x-java-jnlp-file on Gecko-based browsers.
 */

 document.write("<p>Click ");
 if(javawsInstalled || (navigator.userAgent.indexOf("Gecko") !=-1))
 {
     document.write("<a href=\"../../../redistributables/editlivexml/designer.jnlp\">here</a>");
     document.write(" to launch the Visual Designer Desktop Application</p>");
 }
 else
 {
     document.write("to <a href=\"http://java.sun.com/j2se/1.5.0/download.html\">");
     document.write("download and install JRE 5.0</a> to allow Web Start Applications.</p>");
 }
</SCRIPT>

View the previously created designs as solution files stored in the web server. For ASP the designs page is designer.asp and for JSP the designer page is designer.jsp.:

      <p><a href = "www.ephox.com">Click here</a> to open the Visual Designer.</p>
      <p><a href = "designs.jsp">Click here</a> here to load an instance of EditLive! for XML using a solution file.</p>

View the previously created designs as solution files stored in the web server. For ASP the designs page is designer.asp and for JSP the designer page is designer.jsp:

VBScript:

      <p><a href = "designs.asp">Click here</a> here to load an instance of EditLive! for XML using a solution file.</p

JSP Scripting:

      <p><a href = "designs.jsp">Click here</a> here to load an instance of EditLive! for XML using a solution file.</p

Finish the page.

   </body>
</html>

Start page and import any required packages.

VBScript:

<% @LANGUAGE = VBScript %>
<html>
   <head>
      <title>Solution File Selection</title>
      <link type="text/css" rel="stylesheet" href="stylesheet.css">
   </head>
   <body>

JSP Scripting:

<%@page contentType="text/html"%>
<%@page import="java.util.*"%>
<%@page import="java.io.*"%>
<%@page import="java.net.*"%>
<%
//These three lines prevent caching of the page, meaning it will always be
//loaded with the most current information available to the client at the 
//time of request
response.setHeader("Pragma", "No-cache");
response.setDateHeader("Expires", 0);
response.setHeader("Cache-Control", "no-cache");
%>
<html>
   <head>
      <title>Solution File Selection</title>
      <link type="text/css" rel="stylesheet" href="stylesheet.css">
   </head>
   <body>

Using JavaScript, create a function that will open the upload page in the current web browser.

VBScript:

      <script language="JavaScript">
        function uploadClick()
        {
           open('upload.asp', '_self');
        }
      </script>

JSP Scripting:

      <script language="JavaScript">
        function uploadClick()
        {
           open('fileUpload.jsp', '_self');
        }
      </script>

Create a form that will send a HTTP Post to the EditLive! for XML page. Create a list box in the form that can display eight options at a time.

VBScript:

  <form name = "designchoice" method = "POST" action = "ELXpage.asp">
     <select name = "designs" size = "8">

JSP Scripting:

  <form name = "designchoice" method = "POST" action = "ELXpage.jsp">
     <select name = "designs" size = "8">

Create variables to map a path to where solution files are stored on the web server. Iterate through this directory to add to the list box only files with an extension of .els (i.e. solution files).

VBScript:

   <%
    'Create a variable to map the path of the solution files repository for the example
    Dim path
    path = Request.ServerVariables("APPL_PHYSICAL_PATH") & _
       "examples\webstarteg\asp\solution"

    'Create a FileSytemObject to open files and folders
    Dim fileObject
    Set fileObject = CreateObject("Scripting.FileSystemObject")

    Dim basedir
    Set basedir = fileObject.GetFolder(path)

    'Create a string array of file names in the folder
    Dim FilesInDir
    Set FilesInDir = basedir.Files

    'Iterate through file names in solution files folder
    If FilesInDir.Count <> 0 Then
       For Each File In FilesInDir
          Dim filename, filenameext
          filename = File.Name
          filenameext = Right(filename, 4)

          'Only print out filenames to list box if file has
          'an extension of .els
          If filenameext = ".els" Then
             Call Response.Write("<option value = " & filename & ">" & _
                filename)
          End If
       Next

    End If
   %>

JSP Scripting:

   <%
   // current directory default
   File direct = 
      new File("./webapps/editlivexml/examples/webstarteg/jsp/solution");
   direct = new File(direct.getAbsolutePath());
               
   // String array containing all of the files located in the
   // current directory
   String[] dirfiles = direct.list();
               
   // Cycle through list of files in directory, outputing each name
   for(int i = 0; i < dirfiles.length; i++)
   {
      String dirFile = new String(dirfiles[i]);
      if(dirFile.endsWith("els"))
      {
         out.print("<option value = \"" + dirFile + "\">" + dirFile);
      }
   }
   %>

Close the list box. Create a submit button to send the HTTP Post. Create a button to call the JavaScript function to open the upload page.

  </select><br/><br/>
  <input type = "submit" name = "open" value="Open Solution">&nbsp;
  <input type = "button" name = "upload" value="Upload Solution" 
     onClick="uploadClick()"><br/>

Close the form and close the page.

      </form>
   </body>
</html>

Create the page

<% @LANGUAGE = VBScript %>
<html>
   <head>
      <title>Solution File Upload</title>
      <link type="text/css" rel="stylesheet" href="stylesheet.css">
   </head>
   <body>
      <h1>Select a File to Upload</h1>

Create a form that sends a HTTP Post to the desired upload file script. In this form, create a file input type to allow users to select a file from their local machine, and a submit button to send the HTTP Post.

VBScript:

      <form name = "designchoice" method = "POST" action = "fileUpload.asp" 
         enctype="multipart/form-data">
         <input type = "file" name = "image" size = "50" ><br/>
         <input type = "submit" name = "open" value="Upload Solution File">
         <br/>
      </form>

JSP Scripting:

For this example, Tomcat is operating on localhost port 8080. For this JSP example to function correctly, this value needs to be the correct server name and port that the example is operating on.

      <form name = "fileuploading" method = "POST" 
         action = "http://localhost:8080/editlivexml/solutionuploadscript" 
         enctype="multipart/form-data">
         <input type = "file" name = "images" size = "50"><br/>
         <input type = "submit" name = "open" value="Upload Solution File">
         <br/>
      </form>

Finish the page.

   </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 name="form1" 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 850 pixels and a width of 600 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 set the solution file.

VBScript:

  // This sets the solution to use XML validation and display the XML content.
  elx1.setSolution("solution/<% =Request( "designs" ) %>");

JSP Script:

            <%
            String elsFilename = request.getParameter("designs");
            out.print("elx1.setSolution(\"solution/" + elsFilename + "\");");
            %>

Show the instance of EditLive! for XML and finish the 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.setDebugLevel("Debug");
  elx1.show();

  -->
  </script>
  </form>
</body>
</html>

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"));
%>