The following skills are required prior to working with this tutorial:
- Basic Knowledge of XML
Required Tutorials Completed
The following tutorials are required to be undertaken before attempting this 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:
Add the following elements after the Color toolbar button:
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).
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.
Note that the customItem.xml file created above is the specified EditLive! Configuration File.
Save this webpage as customToolbarItem.html.
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!.
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!.
Save this page as mockDialog.html.