Custom Dialog Example

Custom Dialog Example
Prev	Chapter 4. Examples	Next

Introduction

This example will demonstrate how to create a custom dialog to allow the user to edit parts of the XML document. The dialog will be activated using an action button and changes made by the user will be immediately reflected and validated in EditLive! for XML. The dialog is generated using Java swing components through the Advanced APIs.

Overview

This tutorial demonstrates how to perform the following using the EditLive! for XML Advanced APIs:

Creating a Java class containing an instance of the ELXBean class.
Registering an EventListener with an instance of the ELXBean class.
Detect when an event has been fired by a specific custom menu item and display a dialog.
Changing the value of an XML element based on user input

Examination of the customDialog.xsl View

The XSL View used in this example utilises an ephox button to generate a dialog.

The action button is defined using the ephox:button element in the XSLT.

<ephox:button action="raiseEvent" text="Properties..." value="{@ephoxid}" />

The action is set to raiseEvent to indicate that when the user clicks the button, an event should be sent to all EventListeners registered with the bean. The value attribute is set to use an XPath expression to retrieve the ephox id for the context node and use that as the value for the event. This allows the application to retrieve the appropriate node from EditLive! for XML by looking up the ID. See Understanding Ephox IDs for more information on how to retrieve the Ephox ID correctly.

Creating the Main Class CustomDialog

The CustomDialog class is created in the file CustomDialog.java The main class for the example application is the CustomDialog class. This class takes an instance of the EditLive! for XML class, ELXBean and registers an event listener to the EditLive! for XML instance.

Retrieving an instance of the ELXBean class

In order to use the advanced APIs, the main class defined needs to provide a constructor allowing a single ELXBean class to be passed as a parameter. This instance of ELXBean will be the instance the developer defined using the instantiation APIs in the webpage containing the EditLive! for XML applet. See the Instantiating EditLive! for XML in a Webpage section of this example for the webpage instantiation of EditLive! for XML.

public class CustomDialog{
    private ELXBean _bean;

    public CustomDialog(ELXBean bean) {
        _bean = bean;
    }
}

Registering an EventListener with the instance of ELXBean

To detect events being fired by an instance of ELXBean, a class implementing the EventListener interface has to be registered with an instance of the ELXBean class. In this example, the CustomDialog class itself implements the EventListener interface and registers itself as a listener with the ELXBean instance.

public class CustomDialog implements EventListener {

  ELXBean _bean;

  public CustomDialog(ELXBean bean) {
    _bean= bean;
    System.err.println("Created with bean: " + bean);
    bean.addEditorEventListener(this);
  }

}

For this example, this method has to detect events fired by the above mentioned action button. The following steps are taken to detect when an event is fired by such an action button and display the name attribute of the XML element firing the action:

Check that the getActionCommand() for the event fired returns TextEvent.CUSTOM_ACTION
Create a reference to the XML Node firing the event.
Create a dialog displaying the name attribute of the Node. Allow users to change this attribute through the dialog.

public void raiseEvent(TextEvent e) {
  switch (e.getActionCommand()) {
    case TextEvent.CUSTOM_ACTION:
      if (e.getExtraInt() == TextEvent.CustomAction.RAISE_EVENT) {
        // Mark the event as handled.
        e.setHandled(true);

        // Get the ephoxID of the node.
        String ephoxID = e.getExtraString();

        // Get the node.  In this case the node will always be an Element.
        Element el = (Element)_bean.getNode(ephoxID);

        // Display the dialog for the user input.
        String newName = JOptionPane.showInputDialog(_bean,
          "Enter the new name for the item:", el.getAttributeNS(null, "name"));
      }
      break;

    default:
      // Do nothing.
      break;
  }
}

Finally, this method needs to apply the new user defined name attribute for the event firing Node. This is achieved through the setAttribute() function of the Element class.

public void raiseEvent(TextEvent e) {
  switch (e.getActionCommand()) {
    case TextEvent.CUSTOM_ACTION:
      if (e.getExtraInt() == TextEvent.CustomAction.RAISE_EVENT) {
        // Mark the event as handled.
        e.setHandled(true);

        // Get the ephoxID of the node.
        String ephoxID = e.getExtraString();

        // Get the node.  In this case the node will always be an Element.
        Element el = (Element)_bean.getNode(ephoxID);

        // Display the dialog for the user input.
        String newName = JOptionPane.showInputDialog(_bean,
          "Enter the new name for the item:", el.getAttributeNS(null, "name"));

        if (newName != null) {
          // Apply the users changes.
          // Note that setAttributeNS is used instead of setAttribute.
          el.setAttributeNS(null, "name", newName);
        }
      }
      break;

    default:
      // Do nothing.
      break;
  }
}

Instantiating the Newly Created EditLive! for XML Instance in a Webpage

Now this newly defined instance of EditLive! for XML has to be loaded into a webpage. In order to embed this new instance of EditLive! for XML the following steps must be undertaken:

Compile the created classes and store them in a jar file.
For detailed information on compiling Java classes and creating jar files, see the Compiling Examples section of this document.
For this example the jar containing these classes is named CustomDialog.jar.
Include the editlivexml.js file in the webpage.
EditLive! for XML requires a JavaScript file to be included. The file provides functions which EditLive! for XML uses to work.
```

<script src="redistributables/editlivexml/editlivexml.js"></script> 
```
Creating the instance of EditLive! for XML
For each instance of EditLive! for XML that you wish to create within a Web page, a new instance object must be created. Each instance of EditLive! for XML which is created must have a name property which is unique within that particular Web page (eg. ELXApplet1, ELXApplet2). Also, each EditLive! for XML JavaScript object should have a different name which is unique within that particular Web page (eg. editlivexml1, editlivexml2).
```
<script language="JavaScript">
  var editlivexml1;
  editlivexml1 = new EditLiveXML("ELXApplet1", "700", "400");
  editlivexml1.setDownloadDirectory("../../redistributables/editlivexml");
  editlivexml1.setXMLURL("sample_elxconfig.xml");
  editlivexml1.setXSDURL("customDialog.xsd");
  editlivexml1.addView("Custom Dialog", "customDialog.xsl");
```
Specify the new EditLive! for XML instance to load
To specify the new instance of EditLive! for XML use the addJar method. The method takes two parameters:
- Jar Location: the URL location of the jar file containing the new instance of EditLive! for XML
- Class Name: the fully qualified name of the class in the jar file that will load the new instance of EditLive! for XML
For this example, the following parameters are given to the addJar method:
```
  editlivexml1.addJar("CustomDialog.jar", "CustomDialog");
  editlivexml1.show();
</script> 
```

Summary

Using the advanced API, a new Java class can be created which can be loaded into a webpage instead of the default instance of the EditLive! for XML applet. This customized version of the EditLive! for XML applet can capitalize on creating new dialogs to allow xml attributes to be easily viewed and changed by users.

Prev	Up	Next
Basic Example	Home	Working With Ephox IDs