Eclipse

Eclipse HTML Plugin Example

Hello, I started using Eclipse IDE to work with HTML5 and Bootstrap. However, editing HTML files in Eclipse IDE was not nice and it felt like using Windows Notepad. In this tutorial, we will learn how to use the HTML Editor available through the Web Tools Platform (WTP) within Eclipse.
 
 
 
 
 
 
 
 

1. Introduction

HTML stands for Hyper Text Markup Language and is a language for specifying how the text and graphics will appear on a web page. The web browser can read such HTML documents and compose them into visible or audible web pages. The web browser does not display the HTML tags, but uses them to interpret the content of the page.

Fig. 1: Overview to HTML
Fig. 1: Overview to HTML

This post details the instructions for adding Web Page Editor to the Eclipse. It is really a simple process, but I’ve detailed it out anyway.

1.1 HTML Editor

Eclipse HTML Editor is an Eclipse plugin for HTML, JSP, and XML editing and has the following features:

  • HTML, JSP, XML, CSS, DTD, and JavaScript colored highlighting.
  • HTML and JSP preview.
  • JSP and XML validation.
  • Contents Assist for HTML Tags and Attributes, XML based on DTD and JSP Taglib and more.
  • Wizards for creating HTML, JSP, and XML files.
  • Editor Preferences.
  • Web Browser.
  • CSS code completion.
  • DTD code completion, outline, and validation.
  • JavaScript code completion, outline, and validation.
  • Format all or portion of a document.

In short, The Eclipse HTML editor helps ease HTML, JSP, and XML page development within the eclipse.

Fig. 2: Eclipse HTML Editor
Fig. 2: Eclipse HTML Editor

1.2 HTML Editor Plugin Installation

I’m using Eclipse Kepler SR2 and it’s probably a similar process in other versions. Below are the steps involved in the installation of this plugin.

  • Go to Help –> Install New Software…

Fig. 3: Installation Step 1
Fig. 3: Installation Step 1

  • Select the Juno Repository (http://download.eclipse.org/releases/juno/) from the ‘Work with:‘ menu.

Fig. 4: Installation Step 2
Fig. 4: Installation Step 2

  • In the search box, enter web to filter the results and select ‘Web Page Editor‘.

Fig. 5: Installation Step 3
Fig. 5: Installation Step 3

  • Click Next.

Fig. 6: Installation Step 4
Fig. 6: Installation Step 4

  • Accept the terms and click Finish.

Fig 7: Installation Step 5
Fig 7: Installation Step 5

  • Wait for the installation to run.

Fig. 8: Installation Step 6
Fig. 8: Installation Step 6

  • You might see this – just click OK.

Fig. 9: Installation Step 7
Fig. 9: Installation Step 7

  • Click Yes when ready.

Fig. 10: Installation Step 8
Fig. 10: Installation Step 8

  • Now that you have finished installing this and restarted. All you need to do is go to the Window –> Preferences menu as shown.

Fig. 11: Installation Step 9
Fig. 11: Installation Step 9

  • Then for both *.htm and *.html, click on the Eclipse HTML Editor in the Window below and click the Default and OK to apply. The result should be like below.

Fig. 12: Installation Step 10
Fig. 12: Installation Step 10

Anyway, that was pretty easy, wasn’t it? Now, let’s start building the sample application!

2. Eclipse HTML Plugin Tutorial

After reviewing the HTML Editors features and configuration, let’s see now the HTML editor in action. Below are the steps involved in developing this application.

2.1 Getting Started

This section will demonstrate on how to create a Dynamic Web Java project with Eclipse. In Eclipse IDE, go to File -> New -> Dynamic web project.

Fig. 13: Create Dynamic Web Project
Fig. 13: Create Dynamic Web Project

In the New, Dynamic Project window fill in the below details and click next.

  • Enter the project name and project location.
  • Select Target runtime as Apache Tomcat v7.0 from the drop-down.

Fig. 14: Project Details
Fig. 14: Project Details

Leave everything as default in this window as we will be making the required java file at a later stage. Simply click next and we will land up on the web-module window.

Fig. 15: Java Src Window
Fig. 15: Java Src Window

In the Web Module window, leave the context_root and content_directory values as default (however, you can change the context_root but for the first application let’s keep it as a default value). Simply, check Generate web.xml deployment descriptor check box and click Finish.

Fig. 16: Web Module Window
Fig. 16: Web Module Window

Eclipse will create the project named Eclipse HTML Editor in the workspace and web.xml will be configured.

2.2 HTML Editor in Action

Once the web project is created, we can now create a new HTML file. Right click on the project context, and click New. Select HTML file and provide a name to the file: htmlEditorWelcome.html. Click Next.

Fig. 17: HTML File Creation
Fig. 17: HTML File Creation

In this step, we will select the desired template to use for the new HTML file. In this tutorial, we will use the already existing HTML 5 Template. Click Finish and the new HTML file will be created.

Fig. 18: HTML File Template Selection
Fig. 18: HTML File Template Selection

Once the HTML file is created, use the Ctrl + Space content assist to see the available HTML tags options.

Fig. 19: HTML Editor Content Assist - I
Fig. 19: HTML Editor Content Assist – I

On hitting Ctrl + Space the second time, the default and any new templates created are available to be inserted into the HTML file.

Fig. 20: HTML Editor Content Assist – II
Fig. 20: HTML Editor Content Assist – II

Let us complete our example HTML page by adding some headers and paragraph tags.

Fig. 21: New HTML Page
Fig. 21: New HTML Page

2.3 Application Building and Configuration

Here in the htmlEditorWelcome.html, we will have the basic HTML components. Add the following code to it.

htmlEditorWelcome.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="ISO-8859-1">
    <title>Eclipse HTML Editor</title>
</head>

<body>
    <h1>HTML Editor Example</h1>
    <p>This is an example about the HTML Editor</p>
    <h2><i>By Java Code Geeks!</i></h2>
</body>

</html>

Add the created HTML file as a welcome page in the web.xml.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
    <display-name>EclipseHTMLEditor</display-name>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
        <welcome-file>htmlEditorWelcome.html</welcome-file>
    </welcome-file-list>
</web-app>

3. Project Deploy

Once we are ready with all the changes, let us compile and deploy the application on Tomcat7 server. In order to deploy the application on Tomcat7, Right-click on the project and navigate to Run as -> Run on Server.

Fig. 22: How to Deploy Application on Tomcat?
Fig. 22: How to Deploy Application on Tomcat?

4. Project Demo

The result should look like the following.

Fig. 23: HTML Editor Application Output
Fig. 23: HTML Editor Application Output

That’s all for this post. Happy Learning!

5. Conclusion

In this article, we saw how to install an HTML Editor Plugin in Eclipse. We also discussed what HTML is and how we can easily create and edit an HTML file in Eclipse. There are other HTML Editor Plugins available in Eclipse but we chose this because it’s easy and powerful. You can try other plugins as well to see if they suit your requirements better.

6. Download the Eclipse Project

This was an example of Eclipse HTML Editor Plugin.

Download
You can download the full source code of this example here: Eclipse HTML Editor Example

Yatin

An experience full-stack engineer well versed with Core Java, Spring/Springboot, MVC, Security, AOP, Frontend (Angular & React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button