Getting Started
Required Skills
The following skills are required prior to working with this tutorial:
- Basic Java programming with the Swing library
- 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! for Java Swing 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="http://www.ephox.com/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 raise a TextEventwith the following parameters:
- Action Command: TextEvent.CUSTOM_ACTION
- Extra String: displayDialog.
Save the file as customItem.xml.
Step 2. Create an Instance of EditLive! for Java Swing in a JFrame
As shown in the Instantiation Tutorial, create an instance of EditLive! for Java Swing in a JFrame.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class CustomToolbarItem {
/** html content to appear in the instance of EditLive! for Java Swing */
private static final String INITIAL_HTML = "<html><head><title>Initial Title</title></head><body><p></p></body></html>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("customItem.xml"), false);
public CustomToolbarItem() throws Exception {
super("Tutorial - Custom Toolbar Items");
this.getContentPane().setLayout(new FlowLayout());
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
editLiveBean.init();
}
});
// Create a JPanel to hold the ELJBean
JPanel editorHolder = new JPanel(new FlowLayout());
editorHolder.add(editLiveBean);
// Add the JPanel to the JFrame
this.getContentPane().add(editorHolder);
// Display the JFrame.
this.setSize(new Dimension(710, 620));
this.setVisible(true);
// Adding a listener to detect if the JFrame is closing, to close the application if needed.
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
}
/** Sets up the application and begins its execution
*
* @param args the command line arguments - ignored
*/
public static void main(String args[]) throws Exception {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch(Exception e) {
System.out.println("Unable to locate UIManager class");
e.printStackTrace();
}
new CustomToolbarItem();
}
}
Note that the customItem.xml EditLive! for Java Swing Configuration File created above is specified.
Save this class as CustomToolbarItem.java.
Step 3. Implement an EventListener Interface and Create the raiseEvent Method
As mentioned in step 1, the custom toolbar button will create a TextEvent and send this event to all registered listeners. TextEvent are listened to by classes extending the EventListener interface. The raiseEvent method of the EventListener interface is responsible for handling these TextEvents.
For the CustomToolbarItem class, we want to catch only TextEvents with the parameters matching those specified for our custom toolbar button.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class CustomToolbarItem implements EventListener {
/** html content to appear in the instance of EditLive! for Java Swing */
private static final String INITIAL_HTML = "<html><head><title>Initial Title</title></head><body><p></p></body></html>";
/** Base class for EditLive! for Java Swing */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("customItem.xml"), false);
public CustomToolbarItem() throws Exception {
super("Tutorial - Custom Toolbar Items");
this.getContentPane().setLayout(new FlowLayout());
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive! and add this class as an event listner
editLiveBean.init();
editLiveBean.addEditorEventListener(CustomToolbarItem.this);
}
});
// Create a JPanel to hold the ELJBean
JPanel editorHolder = new JPanel(new FlowLayout());
editorHolder.add(editLiveBean);
// Add the JPanel to the JFrame
this.getContentPane().add(editorHolder);
// Display the JFrame.
this.setSize(new Dimension(710, 620));
this.setVisible(true);
// Adding a listener to detect if the JFrame is closing, to close the application if needed.
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
}
/** raiseEvent method inherited from EventListener. Every action in EditLive! for Java Swing
* raises a TextEvent.
*
* @param e TextEvent information sent on action.
*/
public void raiseEvent(TextEvent e) {
if(e.getActionCommand() == TextEvent.CUSTOM_ACTION && e.getExtraString().equals("displayDialog")) {
}
}
/** Sets up the application and begins its execution
*
* @param args the command line arguments - ignored
*/
public static void main(String args[]) throws Exception {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch(Exception e) {
System.out.println("Unable to locate UIManager class");
e.printStackTrace();
}
new CustomToolbarItem();
}
}
Step 4. Create a New JFrame to Display
When a user clicks the custom toolbar button, the desired result will be to display a new dialog. To do this, a new class will need to be created that displays a JFrame.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class CustomToolbarItem implements EventListener {
/** html content to appear in the instance of EditLive! for Java Swing */
private static final String INITIAL_HTML = "<html><head><title>Initial Title</title></head><body><p></p></body></html>";
/** Base class for EditLive! for Java Swing */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("customItem.xml"), false);
public CustomToolbarItem() throws Exception {
super("Tutorial - Custom Toolbar Items");
editLiveBean.addEditorEventListener(this);
this.getContentPane().setLayout(new FlowLayout());
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive! and add this class as an event listner
editLiveBean.init();
editLiveBean.addEditorEventListener(CustomToolbarItem.this);
}
});
// Create a JPanel to hold the ELJBean
JPanel editorHolder = new JPanel(new FlowLayout());
editorHolder.add(editLiveBean);
// Add the JPanel to the JFrame
this.getContentPane().add(editorHolder);
// Display the JFrame.
this.setSize(new Dimension(710, 620));
this.setVisible(true);
// Adding a listener to detect if the JFrame is closing, to close the application if needed.
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
}
/** raiseEvent method inherited from EventListener. Every action in EditLive! for Java Swing
* raises a TextEvent.
*
* @param e TextEvent information sent on action.
*/
public void raiseEvent(TextEvent e) {
if(e.getActionCommand() == TextEvent.CUSTOM_ACTION && e.getExtraString().equals("displayDialog")) {
}
}
/** Sets up the application and begins its execution
*
* @param args the command line arguments - ignored
*/
public static void main(String args[]) throws Exception {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch(Exception e) {
System.out.println("Unable to locate UIManager class");
e.printStackTrace();
}
new CustomToolbarItem();
}
}
class ExampleDialog extends JFrame {
private JLabel headingLabel = new JLabel("Example Dialog");
private JLabel infoLabel = new JLabel("Click the OK button to load the string \"<b>dialog called</b>\" into EditLive! and close this window.");
private JButton OKButton = new JButton("OK");
ExampleDialog() {
super("Example Dialog");
headingLabel.setFont(new java.awt.Font("Arial", Font.BOLD, 14));
this.getContentPane().setLayout(new GridLayout(3, 1));
this.getContentPane().add(headingLabel);
this.getContentPane().add(infoLabel);
JPanel buttonPanel = new JPanel(new FlowLayout());
buttonPanel.add(OKButton);
this.getContentPane().add(buttonPanel);
// Display the JFrame.
this.setSize(new Dimension(500, 175));
this.setVisible(true);
// Adding a listener to detect if the JFrame is closing, to close the application if needed.
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
dispose();
}
});
}
}
Step 5. Call the New JFrame
The ExampleDialog class can be called from the raiseEvent method. In order to ensure the ExampleDialog class can communicate with the instance of the EditLive! for Java JavaBean.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class CustomToolbarItem implements EventListener {
/** html content to appear in the instance of EditLive! for Java Swing */
private static final String INITIAL_HTML = "<html><head><title>Initial Title</title></head><body><p></p></body></html>";
/** Base class for EditLive! for Java Swing */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("customItem.xml"), false);
public CustomToolbarItem() throws Exception {
super("Tutorial - Custom Toolbar Items");
editLiveBean.addEditorEventListener(this);
this.getContentPane().setLayout(new FlowLayout());
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive! and add this class as an event listner
editLiveBean.init();
editLiveBean.addEditorEventListener(CustomToolbarItem.this);
}
});
// Create a JPanel to hold the ELJBean
JPanel editorHolder = new JPanel(new FlowLayout());
editorHolder.add(editLiveBean);
// Add the JPanel to the JFrame
this.getContentPane().add(editorHolder);
// Display the JFrame.
this.setSize(new Dimension(710, 620));
this.setVisible(true);
// Adding a listener to detect if the JFrame is closing, to close the application if needed.
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
}
/** raiseEvent method inherited from EventListener. Every action in EditLive! for Java
* raises a TextEvent.
*
* @param e TextEvent information sent on action.
*/
public void raiseEvent(TextEvent e) {
if(e.getActionCommand() == TextEvent.CUSTOM_ACTION && e.getExtraString().equals("displayDialog")) {
ExampleDialog exDialog = new ExampleDialog(editLiveBean);
exDialog.setVisible(true);
}
}
/** Sets up the application and begins its execution
*
* @param args the command line arguments - ignored
*/
public static void main(String args[]) throws Exception {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch(Exception e) {
System.out.println("Unable to locate UIManager class");
e.printStackTrace();
}
new CustomToolbarItem();
}
}
class ExampleDialog extends JFrame {
// Base class for EditLive! for Java Swing
private ELJBean elBean;
private JLabel headingLabel = new JLabel("Example Dialog");
private JLabel infoLabel = new JLabel("Click the OK button to load the string \"<b>dialog called</b>\" into EditLive! and close this window.");
private JButton OKButton = new JButton("OK");
ExampleDialog() {
super("Example Dialog");
elBean = _elBean;
headingLabel.setFont(new java.awt.Font("Arial", Font.BOLD, 14));
this.getContentPane().setLayout(new GridLayout(3, 1));
this.getContentPane().add(headingLabel);
this.getContentPane().add(infoLabel);
JPanel buttonPanel = new JPanel(new FlowLayout());
buttonPanel.add(OKButton);
this.getContentPane().add(buttonPanel);
// Display the JFrame.
this.setSize(new Dimension(500, 175));
this.setVisible(true);
// Adding a listener to detect if the JFrame is closing, to close the application if needed.
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
dispose();
}
});
}
}
Step 6. Extend the ActionListener Interface for the ExampleDialog Class
The final step of this tutorial is to extend the ActionListener interface for the ExampleDialog class. This will allow actions fired from the JButton in the dialog to then interact with the instance of EditLive! for Java Swing in the parent JFrame. The actionPerformed method provided by the ActionListener will use the insertHTMLAtCursor method of the EditLive! for Java JavaBean.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class CustomToolbarItem implements EventListener {
/** html content to appear in the instance of EditLive! for Java Swing */
private static final String INITIAL_HTML = "<html><head><title>Initial Title</title></head><body><p></p></body></html>";
/** Base class for EditLive! for Java Swing */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("customItem.xml"), false);
public CustomToolbarItem() throws Exception {
super("Tutorial - Custom Toolbar Items");
editLiveBean.addEditorEventListener(this);
this.getContentPane().setLayout(new FlowLayout());
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive! and add this class as an event listner
editLiveBean.init();
editLiveBean.addEditorEventListener(CustomToolbarItem.this);
}
});
// Create a JPanel to hold the ELJBean
JPanel editorHolder = new JPanel(new FlowLayout());
editorHolder.add(editLiveBean);
// Add the JPanel to the JFrame
this.getContentPane().add(editorHolder);
// Display the JFrame.
this.setSize(new Dimension(710, 620));
this.setVisible(true);
// Adding a listener to detect if the JFrame is closing, to close the application if needed.
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
}
});
}
/** raiseEvent method inherited from EventListener. Every action in EditLive! for Java
* raises a TextEvent.
*
* @param e TextEvent information sent on action.
*/
public void raiseEvent(TextEvent e) {
if(e.getActionCommand() == TextEvent.CUSTOM_ACTION && e.getExtraString().equals("displayDialog")) {
ExampleDialog exDialog = new ExampleDialog(editLiveBean);
exDialog.setVisible(true);
}
}
/** Sets up the application and begins its execution
*
* @param args the command line arguments - ignored
*/
public static void main(String args[]) throws Exception {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch(Exception e) {
System.out.println("Unable to locate UIManager class");
e.printStackTrace();
}
new CustomToolbarItem();
}
}
class ExampleDialog extends JFrame implements ActionListener {
// Base class for EditLive! for Java Swing
private ELJBean elBean;
private JLabel headingLabel = new JLabel("Example Dialog");
private JLabel infoLabel = new JLabel("Click the OK button to load the string \"<b>dialog called</b>\" into EditLive! and close this window.");
private JButton OKButton = new JButton("OK");
ExampleDialog() {
super("Example Dialog");
elBean = _elBean;
OKButton.addActionListener(this);
headingLabel.setFont(new java.awt.Font("Arial", Font.BOLD, 14));
this.getContentPane().setLayout(new GridLayout(3, 1));
this.getContentPane().add(headingLabel);
this.getContentPane().add(infoLabel);
JPanel buttonPanel = new JPanel(new FlowLayout());
buttonPanel.add(OKButton);
this.getContentPane().add(buttonPanel);
// Display the JFrame.
this.setSize(new Dimension(500, 175));
this.setVisible(true);
// Adding a listener to detect if the JFrame is closing, to close the application if needed.
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) {
dispose();
}
});
}
/** ActionListener for JButtons on the JFrame
*
* @param e ActionEvent sent by JButton
*/
public void actionPerformed(ActionEvent e) {
if (e.getSource() == OKButton) {
try {
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
elBean.insertHTMLAtCursor("<b>dialog called</b>");
// close window
dispose();
}
});
} catch (Exception exception) {
exception.printStackTrace();
}
}
}
}