EditLive! for Java JavaScript API Preview Example

Introduction

This example demonstrates how to retrieve the contents of EditLive! for Java at run time.  It also demonstrates how this content can be displayed in a new browser window, thus creating a preview of the EditLive! for Java content.

Getting Started

System Requirements

This example requires a JavaScript capable browser and a Web server.

Required Skills

The following skills are required prior to working with this sample:

Overview

This example consists of page in which EditLive! for Java is embedded with JavaScript functions that create a preview page allowing for the viewing of the contents of EditLive! for Java within a new browser window.  

In this example an instance of EditLive! for Java is embedded within a Web page using JavaScript.  Two JavaScript functions are also defined within the page.  These functions save the contents of the EditLive! for Java applet to temporary locations in preparation for the loading of the contents into a new browser window for previewing.

This sample demonstrates how to perform the following with EditLive! for Java and JavaScript:

Examination of previewexample.htm

The previewexample.htm file is the main page for this example.  It contains an instance of EditLive! for Java as well as the functions required to get and save the contents of the EditLive! for Java applet.

  1. Create a form for the EditLive! for Java applet to exist in.

    <form name="exampleForm">
  2. Include the EditLive! for Java JavaScript API file.

    <!--Include the EditLive! for Java JavaScript API -->
    <script language="JavaScript" src="../../../../editlivejava/editlivejava.js"></script>


    This file includes the JavaScript functions used to instantiate EditLive! for Java and the EditLive! for Java JavaScript API run time functions.
  3. Set the EditLive! for Java global JavaScript properties.  These are the properties which will remain the same for every instance of EditLive! for Java within the page.

    <!--Set the EditLive! for Java Global properties-->
    <script language="JavaScript">EditLiveForJavaGlobalDownloadDirectory="../../../../editlivejava";</script>
    <script language="JavaScript">EditLiveForJavaGlobalLocalDeployment=true;</script>
    <script language="JavaScript">EditLiveForJavaGlobalCookie="";</script>
  4. Create the hidden form fields that will be used to temporarily store the contents and styles from EditLive! for Java.  The eljContents field will be used to store the contents of EditLive! for Java and the eljStyles filed will be used to store the style information from EditLive! for Java.

    <!--
    Create hidden inputs to save the
    EditLive! for Java contents and styles to
    -->
    <input type="hidden" name="eljContents" value="">
    <input type="hidden" name="eljStyles" value="">

    These hidden form fields act as an intermediary between the EditLive! for Java applet and the browser.
  5. Create an instance of EditLive! for Java.

    <!-- Create an instance of EditLive! for Java -->
    <script language="JavaScript">
    var editlivejava1;
    editlivejava1=new EditLiveJava("ELJOne", "600", "400");
    editlivejava1.setXMLURL("../sample_eljconfig.xml");
    editlivejava1.setBody(escape("<p>This is the EditLive! for Java applet</p>"));
    editlivejava1.setDownloadDirectory(EditLiveForJavaGlobalDownloadDirectory);
    editlivejava1.setLocalDeployment(EditLiveForJavaGlobalLocalDeployment);
    editlivejava1.setCookie(EditLiveForJavaGlobalCookie);
    editlivejava1.show()
    </script>

  6. Create a JavaScript function to retrieve the contents of EditLive! for Java.  The function saves the contents of EditLive! for Java to the eljContents hidden form field.  This function also opens a new Web browser window in which to view the contents of EditLive! for Java.

    <script language="javascript">
    <!--
    //This function saves the contents of EditLive! for Java
    //to a hidden form field and opens the preview window.
    function getELJContents(src){
        document.exampleForm.eljContents.value=src;
        preview();
    }
  7. Create a JavaScript function to retrieve the style information from EditLive! for Java.  The function saves the style information from EditLive! for Java to the eljStyles hidden form field.

    //This function saves the contents of EditLive! for Java
    //to a hidden form field
    function getELJStyles(src){
        document.exampleForm.eljStyles.value=src;
    }
  8. Create an input button to run the JavaScript functions when clicked.  This button will first run the GetStyles function to retrieve the style information from EditLive! for Java, followed by the GetBody function to retrieve the applet contents.  These functions call the JavaScript functions defined in steps six (6) and seven (7) above.  For more information see the EditLive! for Java JavaScript Run Time Functions documentation.

    <input type="button" name="buttonOne" value="Preview"
    onClick="editlivejava1.GetStyles('getELJStyles');editlivejava1.GetBody('getELJContents');">

  9. Create a function to preview the contents of EditLive! for Java in a new window.

    //This function creates a new window and writes the content
    //retrieved from EditLive! for Java to it
    function preview(){
        var remote = null;
        remote = window.open("");
        remote.document.writeln("<html><head><title>Preview Window</title><style>");
        //Write the styles from EditLive! for Java
        remote.document.writeln(document.exampleForm.eljStyles.value);
        remote.document.writeln("</style></head><body>");
        //Write the contents from EditLive! for Java
        remote.document.writeln(document.exampleForm.eljContents.value);
        remote.document.writeln("</body></html>");
    }
    -->
    </script>

Complete HTML and JavaScript

The following is the completed code for the page listed above, as it would appear if the above steps were followed.

<html>
    <head>
        <title>EditLive! for Java JavaScript API Preview Example</title>
    </head>
    <body>
        <h1>Ephox EditLive! for Java JavaScript API Preview Example</h1>

        <form name="exampleForm" >

            <!--Include the EditLive! for Java JavaScript API -->

            <script language="JavaScript" src="../../../../editlivejava/editlivejava.js"></script>

            <!--Set the EditLive! for Java Global properties-->

            <script language="JavaScript">EditLiveForJavaGlobalDownloadDirectory="../../../../editlivejava";</script>
            <script language="JavaScript">EditLiveForJavaGlobalLocalDeployment=true;</script>
            <script language="JavaScript">EditLiveForJavaGlobalCookie="";</script>

            <!--
            Create hidden inputs to save the
            EditLive! for Java contents and styles to
            -->

            <input type="hidden" name="eljContents" value="">
            <input type="hidden" name="eljStyles" value="">

            <h2>Instance of EditLive! for Java</h2>

            <!-- Create an instance of EditLive! for Java -->

            <script language="JavaScript">
                var editlivejava1;
                editlivejava1=new EditLiveJava("ELJOne", "600", "400");
                editlivejava1.setXMLURL("../sample_eljconfig.xml");
                editlivejava1.setBody(escape("<p>This is the EditLive! for Java applet</p>"));
                editlivejava1.setDownloadDirectory(EditLiveForJavaGlobalDownloadDirectory);
                editlivejava1.setLocalDeployment(EditLiveForJavaGlobalLocalDeployment);
                editlivejava1.setCookie(EditLiveForJavaGlobalCookie);
                editlivejava1.show()
            </script>

            <!-- Create JavaScript functions to use in the page -->
    
            <script language="javascript">
            <!--
                //This function saves the contents of EditLive! for Java
                //to a hidden form field and opens the preview window.
                function getELJContents(src){
                    document.exampleForm.eljContents.value=src;
                    preview();
                }
                
                //This function saves the contents of EditLive! for Java
                //to a hidden form field
                function getELJStyles(src){
                    document.exampleForm.eljStyles.value=src;
                }

                //This function creates a new window and writes the content
                //retrieved from EditLive! for Java to it
                function preview(){
                    var remote = null;
                    remote = window.open("");
                    remote.document.writeln("<html><head><title>Preview Window</title><style>");
                    //Write the styles from EditLive! for Java
                    remote.document.writeln(document.exampleForm.eljStyles.value);
                    remote.document.writeln("</style></head><body>");
                    //Write the contents from EditLive! for Java
                    remote.document.writeln(document.exampleForm.eljContents.value);
                    remote.document.writeln("</body></html>");
                }
            -->
            </script>

            <p> </p>

            <!-- Button to run preview actions -->
            <input type="button" name="buttonOne" value="Preview"
                onClick="editlivejava1.GetStyles('getELJStyles');editlivejava1.GetBody('getELJContents');">
        </form>
    </body>
</html>

Summary

Through the use of the EditLive! for Java JavaScript API EditLive! for Java can be instantiated within a Web page.  The contents and styles from EditLive! for Java can then be retrieved through the use of the run time functions present in this API.  This example has demonstrated how to perform these operations using the aforementioned API in order to create a means by which the content of EditLive! for Java can be previewed.

See Also