The raise event functionality of EditLive! for Java can be used in a variety of situations to complement the existing functionality of the EditLive! for Java applet. For example, if a custom toolbar or menu item within EditLive! for Java was to call a JavaScript function which, in turn, called the window.open() function the new window created, with the use of some program scripting, could be used to receive extra user input. Thus, a user may be able to select an image or file from a list presented in a new window, submit their selection back to another function in the parent page (the page in which the EditLive! for Java applet is embedded) and have the result of their selection placed into EditLive! for Java via the InsertHTMLAtCursor EditLive! for Java JavaScript API function.
This example demonstrates how the raiseEvent functionality of EditLive! for Java custom toolbar buttons and custom menu items may be used to complement the functionality of the EditLive! for Java applet. This example combines client-side JavaScript and the EditLive! for Java JavaScript API to insert content into EditLive! for Java from image file browser present in another Web Page.
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 two Web pages and an XML configuration file for EditLive! for Java. When the example is started the user will first be presented with a Web page with EditLive! for Java embedded in it. This page also contains two JavaScript functions one of which is used to launch a new browser window containing a image selector and the other to insert the relevant image back into the instance of EditLive! for Java. The second of these two pages is used for selecting an image to insert into EditLive! for Java. A list of images is present on this page, images can be selected from this list, previewed and inserted into EditLive! for Java.
The XML configuration file for this example contains XML specifying a custom menu item and a custom toolbar button. Each of these uses the raiseEvent functionality of EditLive! for Java. In this example the regular Insert Image toolbar button has been replaced with a custom toolbar button which triggers the raiseEvent functionality. The custom menu item present in this example may be found in the Insert menu and is listed as Insert Image. In this example each of activating either of these commands will have the same effect.
This sample demonstrates how to perform the following with EditLive! for Java and JavaScript:
The raiseeventconfig.xml file contains the configuration information for the example. This file configures the custom menu item and custom toolbar button to use the raiseEvent functionality of EditLive! for Java.
Note: The examination here is only of those XML tags which pertain to the configuration of the custom menu item and custom toolbar button. For more information on how to create a complete EditLive! for Java XML configuration file and other XML elements please see the EditLive! for Java XML Reference.
<editLiveForJava>
...
<menuBar>
</menuBar>
...
</editLiveForJava>
<editLiveForJava>
...
<menuBar>
...
<menu
name="Insert">
</menu>
...
</menuBar>
...
</editLiveForJava>
<editLiveForJava>
...
<menuBar>
...
<menu
name="Insert">
...
<customMenuItem
name="exampleItem"
text="Insert Image"
action="raiseEvent"
value="launchWindow"
/>
...
</menu>
...
</menuBar>
...
</editLiveForJava>
The raiseeventexample.htm file contains the main page for this example. An instance of EditLive! for Java is embedded within this page. Also contained with this page are two JavaScript functions which launch the gallery.htm page in a new browser window and insert the selected image into the instance of EditLive! for Java in this page.
<html>
<head>
<!--Include the EditLive! for Java JavaScript library file-->
<script src = "../../../../redistributables/editlivejava/editlivejava.js" language="JavaScript" ></script>
<!--Define the JavaScript functions to interface with EditLive! for Java-->
<script language="JavaScript">
<!--
//Called by the raiseEvent functionality in EditLive! for Java.
//Launches a new window with the image selector
(gallery.htm)
function
launchWindow(){
var remote=null;
//Open a new browser window with the properties defined
remote = window.open("gallery.htm",'Preview','width=' + 800 + ',height=' + 600
+',status=no,resizable=yes,scrollbars=no,location=no,toolbar=no');
}
//Inserts the selected image from gallery.htm back into EditLive! for Java by
//calling the InsertHTMLAtCursor function from the EditLive! for Java JavaScript API
function
insertImage(src){
editlivejava.InsertHTMLAtCursor(escape("<img src=\"" + src + "\">"));
}
-->
</script>
</head>
<body>
<form name = myForm>
<script language="JavaScript">
<!--
//Create an instance of EditLive! for Java
var editlivejava;
editlivejava = new EditLiveJava("ELJApplet",640 , 400);
editlivejava.setDownloadDirectory("../../../../redistributables/editlivejava");
editlivejava.setLocalDeployment(false);
editlivejava.setXMLURL("raiseeventconfig.xml");
editlivejava.setDocument(escape('<html><body><p>EditLive! for Java Custom Functionality Example</p></body></html>'));
editlivejava.show();
-->
</script>
</form>
</body>
</html>
The gallery.htm file contains the image selector for this example. This page has a <SELECT> list and a image preview as well as Insert Image, Preview Image and Cancel buttons. The page also contains two JavaScript functions, one to assist with the insertion of the selected image into EditLive! for Java and the other to allow for the previewing of images.
<html>
<head>
<script language="JavaScript">
<!--
//This function displays the image in the Web page
function
previewImage(){
document.images[0].src = document.forms[0].imageList.options[document.forms[0].imageList.selectedIndex].value;
}
This function gets the URL representing the image location from the image
list and stores it in the correct place in the Web page's DOM, thus
displaying the image in the Web page.
//This function sends the selected image's details back to the parent
//window so that it can be inserted into EditLive! for Java
function insertImage(){
var parentWindow;
parentWindow = window.opener;
//Call the insertImage function of the parentWindow, the parameter is the URL for the image
parentWindow.insertImage(document.forms[0].imageList.options[document.forms[0].imageList.selectedIndex].value);
window.close();
}
-->
</script>
</head>
<body>
<form>
This function retrieves the URL representing the image location from the
image list and passes it as a parameter to the insertImage function
in the raiseeventexample.htm page.
<!--List the images, note that value for each option corresponds to
the URL for the image relative to this page-->
<select size=5
name="imageList">
<option value="eljlogo.jpg" selected>EditLive! for Java Logo
<option value="sample.jpg">Sample image
<option value="newimac.gif">New iMac
<option value="ibm_thinkpad.gif">IBM Thinkpad
<option value="applecomp.jpg">Apple Mac
</select>
<!--Buttons to call the JavaScript funtions defined above-->
<input type="button" value="Preview Image"
onclick="previewImage();">
<input type="button" value="Insert Image"
onclick="insertImage();">
<input type="button" value="Cancel"
onclick="window.close();">
</form>
<!--Set the initial image-->
<img src="sample.jpg" alt="Preview">
</body>
</html>
The following is a partial XML configuration file. The configuration listed here would facilitate the creation of a custom menu item and custom toolbar button for this example. However, the following XML listing would not be sufficient to correctly configure an instance of EditLive! for Java. For more information on how to create a complete EditLive! for Java XML configuration file and other XML elements please see the EditLive! for Java XML Reference.
<editLiveForJava>
...
<menuBar>
...
<menu
name="Insert">
...
<customMenuItem
name="exampleItem"
text="Insert Image"
action="raiseEvent"
value="launchWindow"
/>
...
</menu>
...
</menuBar>
...
</editLiveForJava>
The following is the completed code for the pages listed above. Note, some changes have been made from the steps listed above. The changes only effect the page formatting not the functionality.
<html>
<head>
<title>EditLive! for Java JavaScript API Example</title>
<link rel="stylesheet" href="stylesheet.css">
<!--Include the EditLive! for Java JavaScript library file-->
<script src = "../../../../redistributables/editlivejava/editlivejava.js" language="JavaScript" >
</script>
<!--Define the JavaScript functions to interface with EditLive! for Java-->
<script language="JavaScript">
<!--
//Called by the raiseEvent functionality in EditLive! for Java.
//Launches a new window with the image selector (gallery.htm)
function launchWindow(){
var remote=null;
//Open a new browser window with the properties defined
remote = window.open("gallery.htm",'Preview','width=' + 800 + ',height=' + 600
+',status=no,resizable=yes,scrollbars=no,location=no,toolbar=no');
}
//Inserts the selected image from gallery.htm back into EditLive! for Java by
//calling the InsertHTMLAtCursor function from the EditLive! for Java JavaScript API
function insertImage(src){
editlivejava.InsertHTMLAtCursor(escape("<img src=\"" + src + "\">"));
}
-->
</script>
</head>
<body>
<!--Form to contain the instance of EditLive! for Java-->
<form name = myform>
<script language="JavaScript">
<!--
//Create an instance of EditLive! for Java
var editlive1;
editlivejava = new EditLiveJava("ELJApplet",640 , 400);
editlivejava.setDownloadDirectory("../../../../redistributables/editlivejava");
editlivejava.setLocalDeployment(false);
editlivejava.setXMLURL("eljjsexample.xml");
editlivejava.setDocument(escape('<html><body><p>EditLive! for Java Custom Functionality Example</p></body></html>'));
editlivejava.show();
-->
</script>
</form>
</body>
</html>
<html>
<head>
<title>EditLive! for Java Raise Event Example</title>
<!--Define the JavaScript functions to interact with the raiseeventexample.htm page-->
<script language="JavaScript">
<!--
//This function displays the image in the Web page
function previewImage(){
document.images[0].src = document.forms[0].imageList.options[document.forms[0].imageList.selectedIndex].value;
}
//This function sends the selected image's details back to the parent
//window so that it can be inserted into EditLive! for Java
function insertImage(){
var parentWindow;
parentWindow = window.opener;
//Call the insertImage function of the parentWindow, the parameter is the URL for the image
parentWindow.insertImage(document.forms[0].imageList.options[document.forms[0].imageList.selectedIndex].value);
window.close();
}
-->
</script>
</head>
<body>
<h1>Image Gallery</h1>
<p></p>
<table>
<tr><td valign="top">
<form>
<!--List the images, note that value for each option corresponds to
the URL for the image relative to this page-->
<select size=5 name="imageList">
<option value="eljlogo.jpg" selected>EditLive! for Java Logo
<option value="sample.jpg">Sample image
<option value="newimac.gif">New iMac
<option value="ibm_thinkpad.gif">IBM Thinkpad
<option value="applecomp.jpg">Apple Mac
</select>
<br>
<!--Buttons to call the JavaScript funtions defined above-->
<input type="button" value="Preview Image" onclick="previewImage();">
<input type="button" value="Insert Image" onclick="insertImage();">
<input type="button" value="Cancel" onclick="window.close();">
</form>
</td>
<td>
<!--Set the initial image-->
<img src="sample.jpg" alt="Preview">
</td></tr>
<table>
</p>
</body>
</html>
The raiseEvent functionality of EditLive! for Java may be used in differing situations to complement the existing functionality of the EditLive! for Java applet. Custom toolbar buttons and menu items can call JavaScript functions which can perform developer defined functionality. The results of such functions can be placed back into EditLive! for Java using one of the methods provided by the EditLive! for Java JavaScript API as demonstrated in this example.
Copyright © 2001-2004 Ephox Corporation. All Rights Reserved.