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

Tutorial

Step 1. Create a Java class

Create a Java class called Instantiation.

import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;


public class Instantiation {
       public Instantiation() {
       }

       /** Sets up the application and begins its execution
        *
        * @param args the command line arguments - ignored
        */
       public static void main(String args[]) {
               new Instantiation();
       }
}

Save this class in a file called Instantiation.java.

Step 2. Display a JFrame

Extend the Java class JFrame. Set the layout for the frame, as well as its size dimensions. Display the frame using setVisible(true).

import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;


public class Instantiation {
       public Instantiation() {
               super("Instantiation Tutorial");
               this.getContentPane().setLayout(new FlowLayout());
               // Display the JFrame.
               this.setSize(new Dimension(710, 620));
               this.setVisible(true);
       }

       /** Sets up the application and begins its execution
        *
        * @param args the command line arguments - ignored
        */
       public static void main(String args[]) {
               new Instantiation();
       }
}

Add a call to the UIManager class to render the frame using the native look aand feel of your operating system.

import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;


public class Instantiation {
       public Instantiation() {
               super("Instantiation Tutorial");
               this.getContentPane().setLayout(new FlowLayout());
               // Display the JFrame.
               this.setSize(new Dimension(710, 620));
               this.setVisible(true);
       }

       /** Sets up the application and begins its execution
        *
        * @param args the command line arguments - ignored
        */
       public static void main(String args[]) {
               try {
                       UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
               } catch(Exception e) {
                       System.out.println("Unable to locate UIManager class");
                       e.printStackTrace();
               }
               new Instantiation();
       }
}

Finally, add code to allow the user to close the frame and remove the application from the JVM.

import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;


public class Instantiation {
       public Instantiation() {
               super("Instantiation Tutorial");
               this.getContentPane().setLayout(new FlowLayout());
               // 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[]) {
               try {
                       UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
               } catch(Exception e) {
                       System.out.println("Unable to locate UIManager class");
                       e.printStackTrace();
               }
               new Instantiation();
       }
}

Step 3. Create an Instance of the ELJBean

The EditLive! for Java bean is created using the ELJBean class. This class has a number of constructors available. For the purpose of this tutorial, we will use a constructor requiring the following parameters:

  • String - the HTML Contents to be loaded into the editor.
  • String - the CSS Styles to be applied to the editor's content
  • int - the width, in pixels, of the editor
  • int - the height, in pixels, of the editor
  • File - the Configuration File to be used in conjunction with the editor.
  • boolean - whether to initialise the bean or wait for an implicit call to the init() method to initialize the bean

Passing the boolean flag to the constructor is the preferred method creating the ELJBean. Using this constructor you can completely configure the editor before calling init() when you finally need the editor to appear.

In order to customize and configure various elements of the editor, developers need to create and specify an EditLive! for Java Swing Configuration File. EditLive! for Java Swing Configuration Files are covered in detail in the both the Reference and Developer Guide sections of this SDK. The Creating and Editing Configuration Files tutorial describes in detail how to make and edit EditLive! for Java Swing Configuration Files.

import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;


public class Instantiation {
       /** 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 Instantiation() {
               super("Instantiation Tutorial");
               this.getContentPane().setLayout(new FlowLayout());
               // 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[]) {
               try {
                       UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
               } catch(Exception e) {
                       System.out.println("Unable to locate UIManager class");
                       e.printStackTrace();
               }
               new Instantiation();
       }
}

Step 4. Display EditLive!

Now that an instance of ELJBean has been created, this bean needs to be added to the frame to be displayed.

The editor is initialized on the Swing Thread. Initializing on the Swing Thread ensures the editor will load completely as expected.

import java.io.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import com.ephox.editlive.*;


public class Instantiation {
       /** 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 Instantiation() throws Exception {
               super("Instantiation Tutorial");
               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 Instantiation();
       }
}
  • No labels