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 Webpage
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 SetBody {
/** 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"));
public SetBody() throws Exception {
super("Tutorial - Setting the <BODY> 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 SetBody();
}
}
Step 2. Setting the <BODY> 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 HTML into the <BODY> of the EditLive! for Java Swing editor:
<p>Original <i>HTML</i> loaded into EditLive!</p>
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class SetBody {
/** html content to appear in the instance of EditLive! for Java */
private static final String INITIAL_HTML = "<p>Original <i>HTML</i> loaded into EditLive!</p>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetBody() throws Exception {
super("Tutorial - Setting the <BODY> 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 SetBody();
}
}
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 SetBody {
/** 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 = "<p>Original <i>HTML</i> loaded into EditLive!</p>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetBody() throws Exception {
super("Tutorial - Setting the <BODY> 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 SetBody();
}
}
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 SetBody {
/** Buttons used to get html contents of JTextArea and set into EditLive */
private JButton bodyButton = 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 = "<p>Original <i>HTML</i> loaded into EditLive!</p>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetBody() throws Exception {
super("Tutorial - Setting the <BODY> 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(bodyButton);
// 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 SetBody();
}
}
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 SetBody implements ActionListener {
/** Buttons used to get html contents of JTextArea and set into EditLive */
private JButton bodyButton = 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 = "<p>Original <i>HTML</i> loaded into EditLive!</p>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetBody() throws Exception {
super("Tutorial - Setting the <BODY> 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(bodyButton);
// add listener to button
bodyButton.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 SetBody();
}
}
Step 6. Implementing the actionPerformed Method
Finally, to catch events fired by the JButton, implement the actionPerformed method.
In this method, the setBody() 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 SetBody implements ActionListener {
/** Buttons used to get html contents of JTextArea and set into EditLive */
private JButton bodyButton = 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 = "<p>Original <i>HTML</i> loaded into EditLive!</p>";
/** Base class for EditLive! for Java */
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("sample_eljconfig.xml"));
public SetBody() throws Exception {
super("Tutorial - Setting the <BODY> 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(bodyButton);
// add listener to button
bodyButton.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() == bodyButton) {
try {
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
editLiveBean.setBody(source.getText());
}
});
} catch (Exception exception) {
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 SetBody();
}
}
See Also
- <sourceEditor> Configuration Element
- getBody() method