Getting Started
Required Skills
The following skills are required prior to working with this tutorial:
- Basic Java programming with the Swing library
Required Tutorials Completed
The following tutorials are required to be undertaken before attempting this tutorial:
Tutorial
Step 1. 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 SetDocument {
/** html content to appear in the instance of EditLive! for Java */
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("sample_eljconfig.xml"), false);
public SetDocument() throws Exception {
super("Tutorial - Setting the HTML of the EditLive! Document");
this.getContentPane().setLayout(new FlowLayout());
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive!
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 SetDocument();
}
}
Step 2. Setting the HTML Document to Appear When the Editor Loads
The ELJBean constructor can accept a HTML string to load into the Editor. This string can either be a complete HTML Document or simply the contents of the <BODY> element.
For the purpose of this tutorial, we will load the following complete HTML into the EditLive! for Java Swing editor:
<html><head><title>Default Document Title</title></head><body><p>Original <i>HTML Document</i> loaded into EditLive!</p></body></html>
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class SetDocument {
/** html content to appear in the instance of EditLive! for Java */
private static final String INITIAL_HTML = "<html><head><title>Default Document Title</title></head><body><p>Original <i>HTML Document</i> loaded into EditLive!</p></body></html>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetDocument() throws Exception {
super("Tutorial - Setting the HTML of the EditLive! Document");
this.getContentPane().setLayout(new FlowLayout());
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive!
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 SetDocument();
}
}
Step 3. Create a JTextArea and Add it to the JFrame
Add a JTextArea to the webpage. The purpose of this JTextArea will be to allow users to write HTML content, which they can then send to EditLive! for Java Swing at any time.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class SetDocument {
/** Allows users to enter html content to insert into EditLive!, or holds a copy of the html contents of EditLive! */
private JTextArea source = new JTextArea(10, 30);
/** html content to appear in the instance of EditLive! for Java */
private static final String INITIAL_HTML = "<html><head><title>Default Document Title</title></head><body><p>Original <i>HTML Document</i> loaded into EditLive!</p></body></html>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetDocument() throws Exception {
super("Tutorial - Setting the HTML of the EditLive! Document");
this.getContentPane().setLayout(new GridLayout(2, 1));
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive!
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);
// Create a JPanel to hold the button and the text area
JPanel buttonAndText = new JPanel(new BorderLayout());
// create scrollable pane to hold text area
JScrollPane textAreaHolder = new JScrollPane(source);
buttonAndText.add(textAreaHolder);
// add button and textarea to frame
this.getContentPane().add(buttonAndText, BorderLayout.CENTER);
// 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 SetDocument();
}
}
Step 4. Add a Button to Copy the JTextarea Contents into EditLive! for Java Swing
In order to copy the contents of the JTextArea into EditLive! for Java Swing, a JButton should be created to trigger the copying event. The listener for the button's click action will be added in the next step.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class SetDocument {
/** Buttons used to get html contents of JTextArea and set into EditLive */
private JButton documentButton = new JButton("Set HTML Document");
/** Allows users to enter html content to insert into EditLive!, or holds a copy of the html contents of EditLive! */
private JTextArea source = new JTextArea(10, 30);
/** html content to appear in the instance of EditLive! for Java */
private static final String INITIAL_HTML = "<html><head><title>Default Document Title</title></head><body><p>Original <i>HTML Document</i> loaded into EditLive!</p></body></html>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetDocument() throws Exception {
super("Tutorial - Setting the HTML of the EditLive! Document");
this.getContentPane().setLayout(new GridLayout(2, 1));
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive!
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);
// Create a JPanel to hold the button and the text area
JPanel buttonAndText = new JPanel(new BorderLayout());
// create a JPanel to hold the button
JPanel buttonHolder = new JPanel(new FlowLayout());
buttonHolder.add(documentButton);
// add button holding panel
buttonAndText.add(buttonHolder, BorderLayout.NORTH);
// create scrollable pane to hold text area
JScrollPane textAreaHolder = new JScrollPane(source);
buttonAndText.add(textAreaHolder);
// add button and textarea to frame
this.getContentPane().add(buttonAndText, BorderLayout.CENTER);
// 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 SetDocument();
}
}
Step 5. Extend the ActionListener and Add an ActionListener to the JButton
By implementing the ActionListener interface this class can listen to ActionEvents. Add this class as an ActionListener to the JButton.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class SetDocument implements ActionListener {
/** Buttons used to get html contents of JTextArea and set into EditLive */
private JButton documentButton = new JButton("Set <BODY>");
/** Allows users to enter html content to insert into EditLive!, or holds a copy of the html contents of EditLive! */
private JTextArea source = new JTextArea(10, 30);
/** html content to appear in the instance of EditLive! for Java */
private static final String INITIAL_HTML = "<html><head><title>Default Document Title</title></head><body><p>Original <i>HTML Document</i> loaded into EditLive!</p></body></html>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetDocument() throws Exception {
super("Tutorial - Setting the HTML of the EditLive! Document");
this.getContentPane().setLayout(new GridLayout(2, 1));
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive!
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);
// Create a JPanel to hold the button and the text area
JPanel buttonAndText = new JPanel(new BorderLayout());
// create a JPanel to hold the button
JPanel buttonHolder = new JPanel(new FlowLayout());
buttonHolder.add(documentButton);
// add listener to button
documentButton.addActionListener(this);
// add button holding panel
buttonAndText.add(buttonHolder, BorderLayout.NORTH);
// create scrollable pane to hold text area
JScrollPane textAreaHolder = new JScrollPane(source);
buttonAndText.add(textAreaHolder);
// add button and textarea to frame
this.getContentPane().add(buttonAndText, BorderLayout.CENTER);
// 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 SetDocument();
}
}
Step 6. Implementing the actionPerformed Method
Finally, to catch events fired by the JButton, implement the actionPerformed method.
In this method, the setDocument() method of the ELJBean is used to set EditLive! for Java Swing <BODY> with the contents of the JTextArea. This method is invoked on the Swing Thread to ensure no threading problems can occur between the ELJBean and the rest of the application.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class SetDocument implements ActionListener {
/** Buttons used to get html contents of JTextArea and set into EditLive */
private JButton documentButton = new JButton("Set <BODY>");
/** Allows users to enter html content to insert into EditLive!, or holds a copy of the html contents of EditLive! */
private JTextArea source = new JTextArea(10, 30);
/** html content to appear in the instance of EditLive! for Java */
private static final String INITIAL_HTML = "<html><head><title>Default Document Title</title></head><body><p>Original <i>HTML Document</i> loaded into EditLive!</p></body></html>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetDocument() throws Exception {
super("Tutorial - Setting the HTML of the EditLive! Document");
this.getContentPane().setLayout(new GridLayout(2, 1));
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive!
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);
// Create a JPanel to hold the button and the text area
JPanel buttonAndText = new JPanel(new BorderLayout());
// create a JPanel to hold the button
JPanel buttonHolder = new JPanel(new FlowLayout());
buttonHolder.add(documentButton);
// add listener to button
documentButton.addActionListener(this);
// add button holding panel
buttonAndText.add(buttonHolder, BorderLayout.NORTH);
// create scrollable pane to hold text area
JScrollPane textAreaHolder = new JScrollPane(source);
buttonAndText.add(textAreaHolder);
// add button and textarea to frame
this.getContentPane().add(buttonAndText, BorderLayout.CENTER);
// 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);
}
});
}
/** ActionListener for JButtons on the JFrame
*
* @param e ActionEvent sent by JButton
*/
public void actionPerformed(ActionEvent e) {
if (e.getSource() == documentButton) {
try {
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
editLiveBean.setDocument(source.getText());
}
});
} catch (Exception exception) {
// TODO Auto-generated catch block
exception.printStackTrace();
}
}
}
/** 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 SetDocument();
}
}
See Also
- <sourceEditor> Configuration Element
- getDocument() method