Page tree
Skip to end of metadata
Go to start of metadata

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:

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 &#8220;Smart Quotes&#8221;</p>";
       private static final String INITIAL_HTML2 = "<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with &#8220;Smart Quotes&#8221;</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 &#8220;Smart Quotes&#8221;</p>";
       private static final String INITIAL_HTML2 = "<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with &#8220;Smart Quotes&#8221;</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 &#8220;Smart Quotes&#8221;</p>";
       private static final String INITIAL_HTML2 = "<p>Original <i>HTML</i> loaded into EditLive! Instance 2</p><p>Text with &#8220;Smart Quotes&#8221;</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

  • No labels