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.
This example requires a JavaScript capable browser and a Web server.
The following skills are required prior to working with this sample:
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:
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.
<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="">
These hidden form fields act as an intermediary between the EditLive! for
Java applet and the browser.
<!-- 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>
<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;
}
<input type="button" name="buttonOne" value="Preview"
onClick="editlivejava1.GetStyles('getELJStyles');editlivejava1.GetBody('getELJContents');">
//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>
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>
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.
Copyright © 2001-2004 Ephox Corporation. All Rights Reserved.