Getting Started

Required Skills

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

Basic client-side JavaScript
Basic knowledge of XML

Required Tutorials Completed

The following tutorials are required to be undertaken before attempting this tutorial:

Instantiation Tutorial

Tutorial

Step 1. Create an Introduction Page

Create a webpage that contains a hyperlink to another webpage called optimizingLoadTime.html. For the purpose of this tutorial, this webpage can be seen as the introduction or sign-in page for your system implementing EditLive!.

<html>
   <body>
         <h1>Loading the Java Virtual Machine (JVM)</h1>
      <p>This page uses the <i>quickStart</i> method to load the JVM. In the event your browser is <i>Internet Explorer</i>,
      the core files for EditLive! will also be downloaded to your machine via this method.</p>
 
      <p>Having the JVM already loaded before creating an instance
      of EditLive! will improve the load time for the editor.</p>
 
      <p>Click <a href="optimizingLoadTime.html">here</a> to load an instance of EditLive!</p>
   </body>
</html>

Save this page as firstPage.html.

Step 2. Create an Instance of EditLive!

Using the load-time properties described in the Instantiating the Editor tutorial, create an instance of EditLive!:

<html>
       <body>
               <h1>Using a Simple Plugin</h1>
               <!--
               Include the EditLive! JavaScript Library
               -->
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
               <!--
               The instance of EditLive!
               -->
               <script language="JavaScript">
                       // Create a new EditLive! instance with the name "ELApplet", a height of 400 pixels and a width of 700 pixels.
                       var editlive = new EditLiveJava("ELApplet", 700, 400);
 
                       // This sets a relative or absolute path to the XML configuration file to use
                       editlive.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
 
                       // .show is the final call and instructs the JavaScript library (editlivejava.js) to insert a new EditLive! instance
                       //  at the this location.
                       editlive.show();
               </script>
       </body>
</html>

Save this webpage as optimizingLoadTime.html.

Step 3. Use the Preload Function

Call the preload function. Pass it a function that you would like to execute when EditLive! has finished loading.

<html>
       <body>
               <h1>Using a Simple Plugin</h1>
               <!--
               Include the EditLive! JavaScript Library
               -->
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
               <!--
               The instance of EditLive!
               -->
               <script language="JavaScript">
                       // Create a new EditLive! instance with the name "ELApplet", a height of 400 pixels and a width of 700 pixels.
                       var editlive = new EditLiveJava("ELApplet", 700, 400);
		       
                       // This sets a relative or absolute path to the XML configuration file to use
                       editlive.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
 
		       editlive.setPreload(function() {
		          alert("EditLive! has finished loading.");
	               });
 
                       // .show is the final call and instructs the JavaScript library (editlivejava.js) to insert a new EditLive! instance
                       //  at the this location.
                       editlive.show();
               </script>
       </body>
</html>

Step 4. Add the ConfigurationText Load-Time Property

Delete the setConfigurationFile Method from the webpage. Replace this load-time property with the setConfigurationText Method.

<html>
       <body>
               <h1>Using a Simple Plugin</h1>
               <!--
               Include the EditLive! JavaScript Library
               -->
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
               <!--
               The instance of EditLive!
               -->
               <script language="JavaScript">
                       // Create a new EditLive! instance with the name "ELApplet", a height of 400 pixels and a width of 700 pixels.
                       var editlive = new EditLiveJava("ELApplet", 700, 400);
 
                       // This sets a relative or absolute path to the XML configuration file to use
                       editlive.setConfigurationText(encodeURIComponent("<?xml version=\"1.0\" ... "));
 
		       editlive.setPreload(function() {
		          alert("EditLive! has finished loading.");
	               });
 
                       // .show is the final call and instructs the JavaScript library (editlivejava.js) to insert a new EditLive! instance
                       //  at the this location.
                       editlive.show();
               </script>
       </body>
</html>

Using the setConfigurationText Method to specify the EditLive! setConfigurationFile Method will cause the editor to load much faster.

EditLive! 9 Documentation : Optimizing Load Times Tutorial