This document discusses several ways in which the load time of EditLive! can be optimized. These include preloading the Java Plug-in, configuring the instance of EditLive! via text embedded in the relevant Web page instead of using URLs, and deploying the Java Runtime Environment (JRE) in the manner best suited to your environment.
Preloading the Java Plug-in
In order to run the EditLive! applet a browser must first load the Java Plug-in. The loading of the Java Plug-in occurs the first time a browser session seeks to use a Java applet, and the loading of the plug-in can take a noticeable amount of time. EditLive! includes functionality which allows for the preloading of the Java Plug-in for a browser session. This functionality can be added to any page within the relevant Web application to decrease the load time of EditLive! when it is eventually used. This functionality may be of most use when implemented on the user login page of a Web application, as it will decrease the load time for future uses of EditLive! within the Web application during the relevant session.
EditLive! provides the ability to preload the editor to decrease load time.
Preloading EditLive!
Once EditLive! has loaded for the first time in a browser session, all subsequent loads of the editor will be much faster. Developers can capitalize on this functionality to load a hidden instance of EditLive! in a page before the editor is ever displayed to the end user.
An example of the preloading functionality, implemented in JavaScript, can be seen below. For more information please refer to the setPreload Method.
Example
The following code would preload the JVM and EditLive! classes and then alert the user that EditLive! has finished loading by using the preloadReturn JavaScript callback function to create a JavaScript alert dialog.
<script language="javascript">
...
var editlive1;
editlive1 = new EditLiveJava("ELApplet1","1","1");
editlive1.setDownloadDirectory("redistributables/editlivejava");
editlive1.setConfigurationFile("editlivejava/sample_elconfig.xml");
editlive1.setBody(" ");
editlive1.setPreload("preloadReturn");
editlive1.show();
function preloadReturn(){
alert("Preloading of the JRE and applet is complete.");
// allow users to navigate to other webpages containing useable instances
// EditLive! now that many of the classes associated with the editor have been cached in
// the JVM.
}
...
</script>
For Internet Explorer browsers, the Ephox QuickStart utility method already preloads EditLive!.
Configuring EditLive! via the ConfigurationText Load-Time Property
When using an EditLive! configuration file to customize the EditLive! interface, EditLive! must make a HTTP request to the server to retrieve the relevant XML file. However, if the EditLive! configuration is set via an XML document which is embedded directly in the relevant page, EditLive! no longer has to make an extra HTTP request to the Web server and load time is decreased.
Embedding an EditLive! configuration document within the relevant Web page can be achieved by simply placing a URL encoded version of the XML configuration file onto the page. However, it is advisable to use the file reading capabilities of your server-side scripting language to read the relevant file directly from the Web server's file system into a temporary scripting variable on the relevant page and then load it into EditLive!. This is achieved via the Configuration Text load-time property.
Example
The following JavaScript code passes in an EditLive! configuration file document which will be used to customize EditLive!. The code uses the JavaScript encodeURI function to encode the document; however, where possible, a server-side URL encoding method should be used to encode the XML text.
The EditLive! for Java configuration file XML document seen here is not complete. The XML text passed in must comply with the EditLive! Configuration File's DTD.
<script language="javascript">
...
var editlive1;
editlive1 = new EditLiveJava("ELApplet1","700","400");
editlive1.setDownloadDirectory("redistributables/editlivejava");
editlive1.setConfigurationText( encodeURI('<?xml version="1.0" encoding="UTF-8"?> <editLive>...');
editlive1.show();
...
</script>
Setting the Document Styles
Setting the document styles via an external style sheet causes EditLive! to make a HTTP request to the relevant Web server. In order to avoid this the document styles can be set via the setStyles Method.
Example
The following code would set the initial style rules of the document within EditLive! for Java to be equal to:
body{ font-family: arial; background-color: white;}h1{ font-family: helvetica, arial, sans-serif; font-size: 16pt; font-style: normal; font-weight: bold;}p, td, th{ font-size: 12pt;}
This style information will be used to render the contents of EditLive! and will only be visible in the Code View.
The string passed to the setStyles property must be URL encoded or encoded using the JavaScript encodeURI function. The example below uses the JavaScript encodeURI function; however, where possible, a server side URL encoding method should be used.
<script language="javascript">
...
var editlive1;
editlive1 = new EditLiveJava("ELApplet1","700","400");
editlive1.setDownloadDirectory("redistributables/editlivejava");
editlive1.setConfigurationFile("editlivejava/sample_elconfig.xml");
editlive1.setBody(escape("<p>Initial contents of Ephox EditLive!</p>"));
editlive1.setStyles(escape('body{ font-family: arial; background-color: white;}
h1{ font-family: helvetica, arial, sans-serif;
font-size: 16pt; font-style: normal; font-weight: bold;}
p, td, th{ font-size: 12pt;}'));
editlive1.show();
...
</script>
Deploying the Java Runtime Environment
In order to use EditLive!, users must have the Java Runtime Environment (JRE) installed on their machine. If a user does not have the required version of the Java Runtime Environment installed on their machine it will be deployed automatically. In cases where the users of EditLive! are connected to a local intranet, it may be fastest to deploy the JRE from the local server. A copy of the JRE is provided with EditLive! for this purpose. To use this installer, simply set the local deployment property of EditLive! to true. The following example demonstrates how to achieve this with the setLocalDeployment Method.
Example
The following JavaScript code sets EditLive! to use the local copy of the JRE files from the server.
<script language="javascript">
...
var editlive1;
editlive1 = new EditLiveJava("ELApplet1","1","1");
editlive1.setDownloadDirectory("redistributables/editlivejava");
editlive1.setConfigurationFile("editlivejava/sample_elconfig.xml");
editlive1.setLocalDeployment(true);
editlive1.show();
...
</script>