Creating a Basic Web Browser Using Eclipse IDE

in #utopian-io7 years ago (edited)

What Will I Learn?

  • The user will learn how to create a Basic Web Browser.
  • The user will learn about JEditorPane
  • The user will learn about Hyperlink Listeners.

Requirements

  • A computer System is required for this tutorial.
  • Java Software Development Kit(JDK) must be installed on your computer.
  • An Integrated Development Environment(IDE) such as Eclipse or NetBeans is required to be installed on your computer.

Get JDK here

Get Eclipse here

Get NetBeans here

Difficulty

Intermediate.

Tutorial Contents

Today, we will look at how to create a very basic Web Browser that loads basic elements in a website, and also use the medium to talk about JEditorPane and Hyperlink Listeners.

JEditorPane

A JEditorPane is a text component that can handle different text with style.
By default, it can handle plain text, HTML, and Rich Text Format (RTF).
A JEditorPane is primarily used to display an HTML document with only basic HTML elements.

Hyperlink Listener

A Hyperlink Listener is a Listener Interface that listens for events to occur on links.

It has a single method hyperlinkUpdate which must be implemented when used.
The syntax for the implementation of the method is

public void hyperlinkUpdate(HyperlinkEvent event) 

In this tutorial, we will create two classes:

  • webBrowser Class: We will create a JTextField and JEditorPane objects to serve as an address field and a window.
    The user will type a URL in the address field and hit the enter button and the program will direct the user to the website, displaying the contents in the window.

  • webMain Class: Contains main method for run instructions.
    This tutorial is done in assumption that the user follows through previous tutorials and is familiar with the coding terms used therein, also, have basic Java programming knowledge.

1.png

2.png

CODE BLOCK

webBrowser Class
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
public class webBrowser extends JFrame {
    private JEditorPane window;
    public webBrowser() {
        super("Simple Web Browser Demo");
        addressField = new JTextField("Enter a URL!");
        addressField.addActionListener(
                new ActionListener() {
                    public void actionPerformed(ActionEvent event) {
                        loadSite(event.getActionCommand());
                    }
                }
                );
        add(addressField, BorderLayout.NORTH);
        window = new JEditorPane();
        window.setEditable(false);
        window.addHyperlinkListener(
                new HyperlinkListener() {
                    public void hyperlinkUpdate(HyperlinkEvent event) {
                        if (event.getEventType() == HyperlinkEvent.EventType.ACTIVATED) {
                        loadSite(event.getURL().toString());
                        }
                    }
                }
                );
        add(new JScrollPane(window), BorderLayout.CENTER);
    }
    private void loadSite(String text) {
        try {
            window.setPage(text);
            addressField.setText(text);
        }
        catch (Exception e) {
            JOptionPane.showMessageDialog(null, "Invalid URL!");
        }
    }
}
webMain Class
import javax.swing.JFrame;
public class webMain {
    public static void main (String args []) {
        webBrowser browser = new webBrowser();
        browser.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        browser.setSize(500,  300);
        browser.setVisible(true);
    }
}

Output

ezgif.com-optimize.gif

webBrowser Class

addressField = new JTextField("Enter a URL!");
addressField.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEvent event) {
loadSite(event.getActionCommand());
}
}
);
add(addressField, BorderLayout.NORTH);

The above code creates a JTextField object which will serve as the address field where user will enter a URL address. It has a default message saying “Enter a URL!”

An ActionListener interface is associated with the object to detect an event when the user hits the “Enter” button. The actionPerformed method is implemented.

The loadSite() is a method that will be created later in the program. It will contain instructions which will display the contents of a website to the screen when a URL is passed to it.

The object is then added to the screen.

window = new JEditorPane();
window.setEditable(false);
window.addHyperlinkListener(
new HyperlinkListener() {
public void hyperlinkUpdate(HyperlinkEvent event) {
if (event.getEventType() == HyperlinkEvent.EventType.ACTIVATED) {
loadSite(event.getURL().toString());
}
}
}
);
add(new JScrollPane(window), BorderLayout.CENTER);

This code creates a JEditorPane object called “window”. Because this window will display contents of a web page, the .setEditable(false) method is used to make the contents un-editable.

A Hyperlink Listener is associated with the window. This is because contents of the window may contain links and the user might click these links.
The Hyperlink Listener method hyperlinkUpdate is implemented.

The above “if” statement is interpreted as - if an event type is same as a hyperlink event; simply meaning “if a link is clicked”, the loadSite method is called which displays the web page of the clicked link.

The object is added to a JScrollPane component and added to the centre of the screen.
The loadSite method is now created.

private void loadSite(String text) {
try {
window.setPage(text);
addressField.setText(text);
}
catch (Exception e) {
JOptionPane.showMessageDialog(null, "Invalid URL!");
}
}
}

This method contains instructions which allows the contents of a web page to be displayed on the screen. The method takes a String argument which is the URL.

A try-catch statement is used to handle exceptions for events when a user enters a wrong URL address.

The inbuilt method .setPage() automatically reads the HTML file of the entered URL address and displays the contents of the web page on the screen. This is the most important piece of code in this program, without it, the web pagw till not be displayed.

The text on the address field is also set to the URL of the web page.

Exception handling catch statement displays a message to the screen of the user enters an invalid URL.

webMain class

import javax.swing.JFrame;

public class webMain {
public static void main (String args []) {
webBrowser browser = new webBrowser();
browser.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
browser.setSize(500,  300);
browser.setVisible(true);
}
}

Main class containing main method with instructions on how the program runs.

An object of the Slider class is created. The slider class holds instructions for running the program.

The program Exit Mode is set. This will close the program when user clicks the “X” button on the frame.

Size of the window is set using inbuilt methods .setSize

Visibility setting is set, making the frame visible, the code .setVisible(true) is used.

ezgif.com-optimize.gif

4.png

3.png

http://google.com

5.png

http://yahoomail.com

When the program is run, the user may enter any URL and the program will redirect to the website.

Note

This is a basic web browser and so may not be compatible with recent sophisticated webpages, but provides basic knowledge for building web browser. The user must enter complete URL, For Example: “http://google.com

6.png

7.png

8.png

Source Codes from GitHub Account.

You can get the codes at my GitHub Account if you want to try it on your own.

REFERENCES

Curriculum

Similar posts already posted on Utopian are:



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @will-ugo I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

That's great

Nice... Learning quite a lot from you Sir. Kudos!!

Thank you for visiting. I see you do programming contributions also, Nice One!

Yes, but I'm still a rookie compared to you. I think it should not be out of place for me to come to you for private tutorials.

Honestly, am not a pro myself, I started learning how to code recently. But with time, patience and dedication; we will all get to where we want to be in the world of programming.

Good tutorial