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 should be completed before attempting this tutorial:
- Instantiation Tutorial
- Setting the Body Tutorial
- Getting the Body Tutorial
- Creating and Editing Configuration Files Tutorial
Tutorial
Step 1. Specifying the Decoding Character Set
The decoding character set is used by EditLive! for Java Swing to decode the HTML loaded into the editor and created by the user.
The decoding character set used by EditLive! for Java Swing is specified by the <meta> tag in either the HTML document loaded into EditLive! for Java Swing or the Configuration File used by EditLive! for Java Swing. For more information on specifying the decodng character set, see the Developer Guide section of this SDK.
For the purpose of this tutorial, we will be loading HTML fragments into EditLive! for Java Swing (i.e setting the <BODY> element of the HTML Document). Hence, to define the decodinging character set, we'll need to specify this information in the Configuration File.
Open the sampleeljconfig.xml file packaged with EditLive! for Java Swing using a text editor. Locate the following line of code:
<!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
Remove the <!-- and --> characters wrapping to tag.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
This will specify the UTF-8 character set for decoding the HTML content in EditLive! for Java Swing. Save the file as charEncoding.xml.
Step 2. Create an Instance of EditLive! for Java in a JFrame and Set the Body
As shown in the Setting the Body in the Swing SDK Tutorial, create an instance of EditLive! for Java in a JFrame and set the <BODY>.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class CharEncoding {
/** html content to appear in the instance of EditLive! for Java Swing*/
private static final String INITIAL_HTML = "<p>Original <i>HTML</i> loaded into EditLive!</p>";
/** Base class for EditLive! for Java Swing*/
private ELJBean editLiveBean = new ELJBean(INITIAL_HTML, "", 700, 570, getClass().getResource("charEncoding.xml"), false);
public CharEncoding() throws Exception {
super("Tutorial - Specifying the Character Encoding");
this.getContentPane().setLayout(new FlowLayout());
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive! instances
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 GetBody();
}
}
Save this webpage as CharEncoding.java.
Step 3. Create Controls and Code to Extract the <BODY> of EditLive! for Java Swing and Display the HTML in the Textarea
As seen in the Getting the Body in the Swing SDK Tutorial, perform the following:
- Create a JTextarea
- Create a JButton
- Cause the class to implement an ActionListenter. Assign the listener to the button. Cause the listener method to copy the contents of EditLive! for Java Swing into the JTextarea.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
public class CharEncoding implements ActionListener {
/** Buttons used to get html contents of EditLive and set into JTextArea */
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("charEncoding.xml.xml"), false);
public CharEncoding() throws Exception {
super("Tutorial - Specifying the Character Encoding");
this.getContentPane().setLayout(new GridLayout(2, 1));
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive! instances
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) {
try {
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
if (e.getSource() == bodyButton) {
source.setText(editLiveBean.getBody());
}
}
});
} 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 CharEncoding();
}
}
Step 4. Create Another Instance of EditLive! for Java Swing
Create another instance of EditLive! for Java Swing in the JFrame. To do this, create another instance of the ELJBean class (you can use the same configuration file) and pack this bean into the frame.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
/** This tutorial shows developers how to specify the encoding for instances of EditLive! for Java Swing
* and how to use several instances of EditLive! for Java Swing in the one JFrame.
*/
public class CharEncoding extends JFrame implements ActionListener {
/** Buttons used to get html contents of EditLive! and copy to JTextArea source */
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! */
private static final String INITIAL_HTML1 = "<p>Original <i>HTML</i> loaded into EditLive! Instance 1</p><p>Text with “Smart Quotes”</p>";
private static final String INITIAL_HTML2 = "<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with “Smart Quotes”</p>";
/** Base class for EditLive! */
private ELJBean editLiveBean1 = new ELJBean(INITIAL_HTML1, "", 600, 300, getClass().getResource("charEncoding.xml.xml"), false);
private ELJBean editLiveBean2 = new ELJBean(INITIAL_HTML2, "", 600, 300, getClass().getResource("charEncoding.xml.xml"), false);
/** Creates JFrame and adds all class properties. Adds action listener to JButtons in JFrame
*
*/
public CharEncoding() throws Exception {
super("Tutorial - Specifying the Character Encoding");
// Setting overall layout for frame
this.getContentPane().setLayout(new GridLayout(2, 1));
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive! instances
editLiveBean1.init();
editLiveBean2.init();
}
});
// Creating panel for two EditLive! instances.
JPanel multiEditorHolder = new JPanel(new GridLayout(1, 2));
// Create a JPanel to hold the ELJBean
JPanel editorHolder1 = new JPanel(new FlowLayout());
editorHolder1.add(editLiveBean1);
// Add the JPanel to the JFrame
multiEditorHolder.add(editorHolder1);
// Create a JPanel to hold the ELJBean
JPanel editorHolder2 = new JPanel(new FlowLayout());
editorHolder2.add(editLiveBean2);
// Add the JPanel to the JFrame
multiEditorHolder.add(editorHolder2);
this.getContentPane().add(multiEditorHolder);
// 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(1210, 640));
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) {
try {
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
if (e.getSource() == bodyButton) {
source.setText(editLiveBean.getBody());
}
}
});
} 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 CharEncoding();
}
}
Step 5. Create Another Button to Extract the <BODY> and Adjust the ActionListener
A separate button now needs to be created to extract the <BODY> of the new instance of EditLive! for Java Swing. The actionPerformed method of the ActionListener also needs to be modified to detect which button was pressed in order to populate the JTextarea with the desired EditLive! for Java Swing <BODY>.
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
/** This tutorial shows developers how to specify the encoding for instances of EditLive! for Java Swing
* and how to use several instances of EditLive! for Java Swing in the one JFrame.
*/
public class CharEncoding extends JFrame implements ActionListener {
/** Buttons used to get html contents of EditLive! and copy to JTextArea source */
private JButton body1Button = new JButton("Get <BODY> for the above instance of EditLive!");
private JButton body2Button = new JButton("Get <BODY> for the above instance of EditLive!");
/** 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! */
private static final String INITIAL_HTML1 = "<p>Original <i>HTML</i> loaded into EditLive! Instance 1</p><p>Text with “Smart Quotes”</p>";
private static final String INITIAL_HTML2 = "<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with “Smart Quotes”</p>";
/** Base class for EditLive! */
private ELJBean editLiveBean1 = new ELJBean(INITIAL_HTML1, "", 600, 300, getClass().getResource("charEncoding.xml.xml"), false);
private ELJBean editLiveBean2 = new ELJBean(INITIAL_HTML2, "", 600, 300, getClass().getResource("charEncoding.xml.xml"), false);
/** Creates JFrame and adds all class properties. Adds action listener to JButtons in JFrame
*
*/
public CharEncoding() throws Exception {
super("Tutorial - Specifying the Character Encoding");
// Setting overall layout for frame
this.getContentPane().setLayout(new GridLayout(2, 1));
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive! instances
editLiveBean1.init();
editLiveBean2.init();
}
});
// Creating panel for two EditLive! instances.
JPanel multiEditorHolder = new JPanel(new GridLayout(1, 2));
// Create a JPanel to hold the ELJBean
JPanel editorHolder1 = new JPanel(new FlowLayout());
editorHolder1.add(editLiveBean1);
// Add the JPanel to the JFrame
multiEditorHolder.add(editorHolder1);
// Create a JPanel to hold the ELJBean
JPanel editorHolder2 = new JPanel(new FlowLayout());
editorHolder2.add(editLiveBean2);
// Add the JPanel to the JFrame
multiEditorHolder.add(editorHolder2);
this.getContentPane().add(multiEditorHolder);
// Create a JPanel to hold the buttons and the text area
JPanel buttonsAndText = new JPanel(new BorderLayout());
// Creating a panel for the two buttons
JPanel buttonsPanel = new JPanel(new GridLayout(1, 2));
buttonsPanel.add(body1Button);
// add listener to button
body1Button.addActionListener(this);
buttonsPanel.add(body2Button);
// add listener to button
body2Button.addActionListener(this);
// add button holding panel
buttonsAndText.add(buttonsPanel, BorderLayout.NORTH);
// specify textarea content
source.setText("Pressing the above button will copy the contents of the <BODY> attribute in EditLive! into this textarea.");
// create scrollable pane to hold text area
JScrollPane textAreaHolder = new JScrollPane(source);
buttonsAndText.add(textAreaHolder);
// add button and textarea to frame
this.getContentPane().add(buttonsAndText, BorderLayout.CENTER);
// Display the JFrame.
this.setSize(new Dimension(1210, 640));
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) {
try {
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
if (e.getSource() == body1Button) {
source.setText(editLiveBean1.getBody());
}
if (e.getSource() == body2Button) {
source.setText(editLiveBean2.getBody());
}
}
});
} 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 CharEncoding();
}
}
Step 6. Specifying Output Character Set
Finally, apply the setOutputCharset method to the second instance of EditLive! for Java Swing, specifying the ASCII character set. When running this code, users will be able to see the differences in the HTML extracted from the first editor instance (using the default UTF-8 output character set) and the second editor instance (using the ASCII character set).
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;
/** This tutorial shows developers how to specify the encoding for instances of EditLive! for Java Swing
* and how to use several instances of EditLive! for Java Swing in the one JFrame.
*/
public class CharEncoding extends JFrame implements ActionListener {
/** Buttons used to get html contents of EditLive! and copy to JTextArea source */
private JButton body1Button = new JButton("Get <BODY> for the above instance of EditLive!");
private JButton body2Button = new JButton("Get <BODY> for the above instance of EditLive!");
/** 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! */
private static final String INITIAL_HTML1 = "<p>Original <i>HTML</i> loaded into EditLive! Instance 1</p><p>Text with “Smart Quotes”</p>";
private static final String INITIAL_HTML2 = "<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with “Smart Quotes”</p>";
/** Base class for EditLive! */
private ELJBean editLiveBean1 = new ELJBean(INITIAL_HTML1, "", 600, 300, getClass().getResource("charEncoding.xml.xml"), false);
private ELJBean editLiveBean2 = new ELJBean(INITIAL_HTML2, "", 600, 300, getClass().getResource("charEncoding.xml.xml"), false);
/** Creates JFrame and adds all class properties. Adds action listener to JButtons in JFrame
*
*/
public CharEncoding() throws Exception {
super("Tutorial - Specifying the Character Encoding");
// Setting overall layout for frame
this.getContentPane().setLayout(new GridLayout(2, 1));
SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
// initialize EditLive! instances
editLiveBean1.init();
editLiveBean2.init();
// Setting the output character set to use 'ASCII' encoding.
// If the setOutoutCharset property is not specified, the default encoding
// for character output is 'UTF-8'.
editLiveBean2.setOutputCharacterSet("ASCII");
}
});
// Creating panel for two EditLive! instances.
JPanel multiEditorHolder = new JPanel(new GridLayout(1, 2));
// Create a JPanel to hold the ELJBean
JPanel editorHolder1 = new JPanel(new FlowLayout());
editorHolder1.add(editLiveBean1);
// Add the JPanel to the JFrame
multiEditorHolder.add(editorHolder1);
// Create a JPanel to hold the ELJBean
JPanel editorHolder2 = new JPanel(new FlowLayout());
editorHolder2.add(editLiveBean2);
// Add the JPanel to the JFrame
multiEditorHolder.add(editorHolder2);
this.getContentPane().add(multiEditorHolder);
// Create a JPanel to hold the buttons and the text area
JPanel buttonsAndText = new JPanel(new BorderLayout());
// Creating a panel for the two buttons
JPanel buttonsPanel = new JPanel(new GridLayout(1, 2));
buttonsPanel.add(body1Button);
// add listener to button
body1Button.addActionListener(this);
buttonsPanel.add(body2Button);
// add listener to button
body2Button.addActionListener(this);
// add button holding panel
buttonsAndText.add(buttonsPanel, BorderLayout.NORTH);
// specify textarea content
source.setText("Pressing the above button will copy the contents of the <BODY> attribute in EditLive! into this textarea.");
// create scrollable pane to hold text area
JScrollPane textAreaHolder = new JScrollPane(source);
buttonsAndText.add(textAreaHolder);
// add button and textarea to frame
this.getContentPane().add(buttonsAndText, BorderLayout.CENTER);
// Display the JFrame.
this.setSize(new Dimension(1210, 640));
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() == body1Button) {
source.setText(editLiveBean1.getBody());
}
if (e.getSource() == body2Button) {
source.setText(editLiveBean2.getBody());
}
}
/** 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 CharEncoding();
}
}
See Also
- <sourceEditor> Configuration Element