Deploying the Visual Designer

Introduction

Ephox provides the Visual Designer in two different forms, the Visual Designer Applet and the Visual Designer Desktop Application. The Visual Designer is released in two different forms to better meet specific needs of developer and user groups.

Visual Designer Applet

When used as an applet the Visual Designer is embedded in a web page allowing developers to integrate it into a web application. The Visual Designer Applet outputs the created schema as an XML Schema Document (XSD) and outputs created views as XML Style Sheet Documents (XSL). These ouputs are generated as form fields, when using a HTTP Post. For an example of using the Visual Designer Applet with a HTTP Post, see the Lifecycle Example. The Visual Designer Applet allows developers to facilitate seemless storage of developed schemas and views with an online repository by using server-side handling of the HTTP Post created by the Visual designer.

The Visual Designer Applet is stored as a .jar file and is initialised and accessed using JavaScript functions. For a more detailed example of using the Visual Designer Applet, see the Basic Visual Designer Integration Example.

The Visual Designer Applet is configured and customized using an .xml configuration file. This is the same method used for configuring EditLive! for XML. The configuration file is also used to register EditLive! for XML. For more information on obtaining and using licences with both the Visual Designer and EditLive! for XML, see Licensing EditLive! for XML. For more information on configuration files, see the XML Configuration API. For an example of the Visual Designer Applet using a configuration file, see the Basic Visual Designer Integration Example.

Visual Designer Desktop Application

The Visual Designer Desktop Application is a stand-alone application allowing users to easily create and store their developed schemas and views. As the Visual Designer Desktop Application is a standalone program, there is no requirement to integrate it into a Web application. The Visual Designer Desktop Application stores the created schema and associated views in a single solution file (with an .els extension). This allows users to create solutions and load these solutions into EditLive! for XML. For an example of how this can be done, see the Visual Designer Desktop Application Example. The Visual Designer Desktop Application also allows users to preview a solution in EdtiLive! for XML.

Each of the EditLive! for XML SDKs present the Visual Designer Desktop Application in two separate platform specific installers.

Visual Designer Web Start Deployment

This is a Java Web Start application. It allows the developer to deploy the application from the Web. Web Start applications are stored as .jnlp files. This ensures the user is always using the most current version of the Visual Designer, as well as the correct version of the Java Runtime Environment. Windows and Solaris users should download the latest JavaTM runtime environment for your desktop (version 1.4 or greater required). Mac OS X users will already have the latest JRE.

The Web Start application for the Visual Designer is named designer.jnlp. This file is located at SDK_INSTALL/webfolder/redistributables/editlivexml/ where SDK_INSTALL represents the directory EditLive! for XML has been installed.

In order for client's to access the Visual Designer Web Start, several steps must be followed:

  1. Follow the steps outlined in Chapter 2 - Deploying to An External Web Server.

  2. Ensure this web server has MIME types set compatible with Java Web Start applications. To set the required MIME type, perform the following steps:

    Microsoft Internet Information Services

    • On the Start menu, in Settings go to Control Panel. Now double-click on Administrative Tools and then Internet Services Manager.

    • Expand the tree next to your Computer Name.

    • Expand Web Sites. Expand Default Web Site.

    • Select the name of the Virtual Directory given to EditLive! for XML.

    • Right click the Virtual Directory and select Properties.

    • Select the HTTP Headers tag. Click the Files Types button. Click the New Type button.

    • In the Associated Extensions textbox, enter .jnlp

    • In the Content Type (MIME) textbox, enter application/x-java-jnlp-file.

    • Click OK. Click Apply to save the changes.

    Apache Tomcat Servers

    • Locate the directory where Apahce Tomcat is stored. Open the conf directory. Open the web.xml file in a text editor.

    • There will be a long list of <mime-mapping> elements. Search this list for the following element:

        <mime-mapping>
          <extension>jnlp</extension>
          <mime-type>application/x-java-jnlp-file</mime-type>
        </mime-mapping>

    • If this element does not exist, copy this code and paste it after the last </mime-mapping> string found in web.xml.

    • Save and close web.xml.

  3. Create a webpage that Visual Designer users can access. Ensure this page contains a link to the .jnlp file stored on the Web Server. This page should auto detect if the user has a Java Runtime Environment installed on their system, and either load the application or direct the user to Sun Microsystem's website to download the JRE. The following scripting code demonstrates how to do this:

    <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("Click ");
    
    if(javawsInstalled || (navigator.userAgent.indexOf("Gecko") !=-1))
    {
        document.write("<a href=../../../redistributables/editlivexml/XXXXXXXX.jnlp>here</a>");
        document.write(" to launch the Visual Designer Desktop Application");
    }
    else
    {
        document.write("<a href=http://java.sun.com/j2se/1.5.0/download.html>");
        document.write("to download and install JRE 5.0 and 
            the application.");
    }
    </SCRIPT>
  4. After clicking on the link and downloading the Designer, users will be prompted with a message box asking if they want to have the Visual Designer integrated into their desktop environment. Users are advised to select Yes.

  5. If users selected Yes in the previous step, they will now have a shortcut on their desktop allowing access to the Visual Designer.

For more information on Java Web Start Technology, visit Sun Microsystem's Java Website at http://java.sun.com/products/javawebstart/

To configure the Visual Designer Desktop Application, open the Visual Designer and in the menu bar click Edit -> Preferences. This dialog box facilitates registering the Designer and selecting the desired dictionary language for the Designer. For more information on licensing types and requirements, see Licensing EditLive! for XML.

Visual Designer Standalone Executable

A standalone executable. This executable can be run directly from the user's machine or a web server.

The Visual Designer Desktop Application standalone executable file is stored in a different location for each SDK. The following are the paths to the standalone executable file for each SDK. SDK_INSTALL represents the location that the EditLive! for XML has been installed to:

  • Windows SDK - SDK_INSTALL/designer.exe

  • OSX SDK - SDK_INSTALL/designer.app

  • Unix SDK - SDK_INSTALL/designer

To configure the Visual Designer Desktop Application, open the Visual Designer and in the menu bar click Edit -> Preferences. This dialog box facilitates registering the Designer and selecting the desired dictionary language for the Designer. For more information on licensing types and requirements, see Licensing EditLive! for XML.