EditLive! for Java JavaScript API Load Contents Example

Introduction

This example demonstrates how to load the contents of the EditLive! for Java applet at run time using the EditLive! for Java JavaScript API.

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 a single Web page which contains an instance of EditLive! for Java and a text area.  Valid HTML content can be placed in the text area and then loaded into EditLive! for Java between the <BODY> tags through the click of a button.  In order to achieve this functionality the example uses the run time functions of the EditLive! for Java JavaScript API.

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

Examination of loadcontents.htm

  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. Create a text area for the entry of EditLive! for Java content and set some initial content.

    <!--Create a textarea to load the applet contents from-->
    <P>
    <TEXTAREA name="bodyContents" cols="40" rows="10"><p>Content to be loaded</p></TEXTAREA>
    </P>

    Note: The content to be placed into EditLive! for Java will be placed between the <BODY> tags and must be valid HTML.
  4. Create a HTML button which, when clicked, will load the content of the text area into the EditLive! for Java applet.

    <INPUT type="button" name="button1" value="Set Contents"
        onClick="editlivejava1.SetBody(escape(document.exampleForm.bodyContents.value));" >


    This button calls the SetBody function of the EditLive! for Java JavaScript API.  Note that the string this function takes as a parameter must be escaped.  This can be done through the use of the JavaScript escape function as above.
  5. Create an instance of EditLive! for Java.

    <!--Create an instance of EditLive! for Java-->
    <SCRIPT language="JavaScript">
    <!--
        var editlivejava1;
        editlivejava1 = new EditLiveJava("eljava",450 , 275);
        editlivejava1.setDownloadDirectory("../../../../editlivejava");
        editlivejava1.setLocalDeployment(false);
        editlivejava1.setXMLURL("../sample_eljconfig.xml");
        editlivejava1.show();
    -->
    </SCRIPT>

Complete HTML and JavaScript

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

<HTML>
    <HEAD>
        <TITLE>EditLive! for Java JavaScript Example</TITLE>
        <!--Include the EditLive! for Java JavaScript Library-->
        <SCRIPT src="../../../../editlivejava/editlivejava.js" language="JavaScript"></SCRIPT>
    </HEAD>
    <BODY>
        <FORM name = exampleForm>
            <P>EditLive! for Java contents will be loaded from here</P>
            <!--Create a textarea to load the applet contents from-->
            <P>
                <TEXTAREA name="bodyContents" cols="40" rows="10"><p>Content to be loaded</p></TEXTAREA>
            </P>
            <P>Click this button to set applet contents</P>
            <P>
                <INPUT type="button" name="button1" value="Set Contents"
                    onClick="editlivejava1.SetBody(escape(document.exampleForm.bodyContents.value));" >
            </P>
            <!--Create an instance of EditLive! for Java-->
            <SCRIPT language="JavaScript">
            <!--
                var editlivejava1;
                editlivejava1 = new EditLiveJava("eljava",450 , 275);
                editlivejava1.setDownloadDirectory("../../../../editlivejava");
                editlivejava1.setLocalDeployment(false);
                editlivejava1.setXMLURL("../sample_eljconfig.xml");
                editlivejava1.show();
            -->
            </SCRIPT>
        </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 of EditLive! for Java can then loaded at run time 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 enable the loading of content into EditLive! for Java from a text area.

See Also