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:

Tutorial

Step 1. Creating a customToolbarButton in the EditLive! Configuration File

Open the sampleeljconfig.xml file packaged with EditLive! using a text editor. Locate the following line of code:

<toolbarButton name="Color"/>

Add the following elements after the Color toolbar button:

<toolbarSeparator/>
<customToolbarButton
       name="displayDialog"
       text="Display Example Dialog"
       imageURL="images/small_logo.gif"
       action="raiseEvent"
       value="displayDialog" 
/>

The above custom toolbar button defines the following:

The unique name for the toolbar button is displayDialog.
The tool-tip text that will appear when the mouse hovers over the button will be Display Example Dialog.
The location of the image used in the custom toolbar button is images/small_logo.gif (this location is relative to the webpage where EditLive! is being instantiated).
This toolbar button will call to the Javascript method displayDialog().

Save the file as customItem.xml.

Step 2. Create an Instance of EditLive! in a Webpage

As shown in the Instantiation Tutorial, create an instance of EditLive! in a webpage.

<html>
       <body>
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
               <script>
                       var editlivejava = new EditLiveJava("ELJApplet", "700", "400");
                       editlivejava.setConfigurationFile("../../redistributables/editlivejava/sample_customItem.xml");
                       editlivejava.show();
               </script>
       </body>
</html>

Note that the customItem.xml file created above is the specified EditLive! Configuration File.

Save this webpage as customToolbarItem.html.

Step 3. Create the displayDialog Javascript Method

As depicted in Step 1, the custom toolbar button will call the Javascript method displayDialog(). This method will display a new HTML page (mockDialog.html) in a new window.

<html>
       <body>
               <script src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"></script>
               <script>
                       var editlivejava = new EditLiveJava("ELJApplet", "700", "400");
                       editlivejava.setConfigurationFile("../../redistributables/editlivejava/sample_customItem.xml");
                       editlivejava.show();
 
                       function displayDialog() {
                               window.open('mockDialog.html','MockDialog','width=' + 300 + ',height=' + 175 +',status=no,resizable=yes,scrollbars=no,location=no,toolbar=no');
                       }
               </script>
       </body>
</html>

Step 4. Create a Javascript Method to be Called from the New Window

In order for the mockDialog.html page to depict a dialog, the new window will need to be able to call back to its parent page and perform an interaction with EditLive!.

The insertString() function created below will insert the string dialog called into the instance of EditLive!.

<html>
       <body>
               <script src="../../redistributables/editlivejava/editlivejava.js" 
                       language="JavaScript"></script>
               <script>
                       var editlivejava = new EditLiveJava("ELJApplet", "700", "400");
                       editlivejava.setConfigurationFile("../../redistributables/editlivejava/sample_customItem.xml");
                       editlivejava.show();
 
                       function displayDialog() {
                               window.open('mockDialog.html','MockDialog','width=' + 300 + ',height=' + 175 +',status=no,resizable=yes,scrollbars=no,location=no,toolbar=no');
                       }
 
                       function insertString() {
                               editlive.insertHTMLAtCursor(encodeURIComponent("<b>dialog called</b>"));
                       }
               </script>
       </body>
</html>

Step 5. Create the mockDialog.html Webpage

The mockDialog.html page requires a control allowing the user to call back to the parent page and insert some text into EditLive!.

This can be performed through a simple Javascript routine triggered by a HTML button's onClick method.

<html>
       <head>
               <title>Example Dialog</title>
               <link rel="stylesheet" href="stylesheet.css">
       </head>
       <body>
               <h1>Example Dialog</h1>
 
               <p>Click the OK button to load the string "&lt;b&gt;dialog called&lt;/b&gt;" into EditLive! and close this window.</p>
 
               <input type="button" value="OK" onClick="window.opener.insertString();window.close()"/>
       </body>
</html>

Save this page as mockDialog.html.

EditLive! 9 Documentation : Custom Toolbar Buttons in the Applet Tutorial