Learn how to make a text editor with functions such as tabs for editing multiple files, new file, open, save, cut, copy and paste, using Java Swing.

text editor's preview

Today we’re going to make a text editor with the following features in Java:

  • Tabs for managing multiple files (JTabbedPane)
  • Menu Bar (JMenuBar)
  • New file
  • Open file
  • Save file
  • Cut
  • Copy
  • Paste
  • Shortcuts

The program is a bit long, but don’t worry, because it’s very simple and I’ll guide you through each step.

1. Creating a window using JFrame

Java’s got a lot of libraries for graphics, each one with its features suited for different programs.

In this project we’re going to use 2D elements – things such as buttons, text editor and so on -, so the best choice is Java Swing.

JFrames explained

First of all, let’s see how to create a window using JFrame.

First line

The first line creates a new window as an object, with “Text Editor” as title, and it assigns it to the variable window.

Second line

The second one tells the computer to exit the program when the user closes the window.

The function setDefaultCloseOperation is defined in the class JFrame, so you have to call it from an object instanced from that class – that’s how object oriented programming works, you’ll understand the mechanism programming.

Third line

Every JFrame window cointains a default panel that you can get with the function getContentPane. A panel is a container of elements.

A JFrame can contain only one panel, but each panel can contain many elements, containers – therefore panels too -.

You can use different panels and elements in one windows by gathering them all in one container and setting it as your window’s panel.

The window will contain only one panel, which however will contail all the elements you want. Everyone’s happy.

Some programmers prefer to use the default JFrame panel as main container, others prefer adding their own to it – like I did – but it doesn’t make any difference.

So, the line window.getContentPane().add(mainPanel, BorderLayout.CENTER); adds a custom JPanel, called mainPanel – which is created in the part of code I left out for this example (Look above for the full code↑) – at the center of the window.

You can change its position by changing the second parameter – in Eclipse you can press Ctrl + Space to see suggestions – but it won’t make any difference in this case.

The mainPanel panel will contain all the elements used in this program, apart from its menu, to which JFrame reserves a special space.

Fourth line

The fourth line packs the window and all its element, making it just the right size to allow all the elements to fit the space.

Fifth line

The final line makes the window visible by the user.

Have a look at this guide about JFrame

2. Basic text editing area

In this section we’re going to code the program’s heart: a single tab with an area for text editing.

How does the text editor work

We’ll add all the functions later.

First line

First of all you have to create a panel which will contain all the elements in this program.

It’s important to specify its layout, in order to change the default FlowLayout to a BorderLayout, which will display correctly the panel’s content – try and see what happens if you leave the brackets empty!.

Second line

The next line creates a JTabbedPane object, that is a container that uses tabs.

Why is it assigned to a undefined variable?

As you can see in the full code above, the variable tabs is defined outside the main function, in order to be able to use it in all the file’s functions.

Third line

The Editor class is a custom class defined in another one of the three files that make this program.

We’re going to see it in detail in the next step, but for now you just need to know that its parameters are number of characters per line, number of lines and text file’s name.

Fourth line

The fourth line adds a new tab and sets editor1 as its only element.

Like JFrames, each tab can contain only one element, so to use more of them, assign them to one container – such as a JPanel – and assign it to that tab – however this isn’t the case.

While the second element is the element to set as tab, the first is the tab’s name.

It seems quite complex, because I wanted to add an asterisk to the names of unsaved files.

All I did was add a string to the basic name stored in editor1’s variable name.

In order to decide whether to add an empty string “” or an asterisk “*”, I used a ternary operator, which is basically a one line alternative to if statement.

More on that in this article by JournalDev

Fifth and sixth lines

Nothing new here, just adding the tab container to the main panel and the main panel to the window’s default panel – just like in the previous section.

3. The Editor class

I’ve written this custom class for two reasons:

  1. to add that asterisk to unsaved files’ names;
  2. to open the file chooser in the file’s directory (for opened files).

It’s an exstension of the JTextArea class (the one used to create editable text area). This means that it has got all the functions and variables of its parent class, plus its own.

The important part of its code is this:

public Editor(...){...} is called constructor and it’s the function called when a new object is created.

A constructor is like a setup function.

Read what Guru99 says about contructors in Java

super(...) calls the constructor of the parent class, in this case JTextArea, so that the Editor object can be initialised correctly.

Apart from initialising an instanced object like every othe JTextArea object, the Editor’s constructor set the text area’s font using a function inherited from the JTextArea class.

The this keyword tells the computer that you want to call a function of that class, but you can also omit it. It isn’t always needed.

Finally, it sets the name of the file edited in that area.

The other two variables are the file’s path (set when a file is opened) and a boolean value (true or false) which indicates if the file has been modified since the last saving.

All other functions are just used to change or get those variables’ values from an instanced object.

4. Adding the menu

How does the menu bar's code work

The Menu bar

Adding a menu bar is simple: create a JMenuBar object, add some menusI used two custom functions for that – and set it as the window’s menu bar.

The addFileMenu function

The addFileMenu and addEditMenu functions are identical, apart from small changes, such as the names of the items in each menu.

First of all this function creates a new menu with the name “File”.

Then it creates three items, “New”, “Open” and “Save”.

The interesting part begins now.

The function adds an action listener – got through its parameters – to each item and then it adds some shortcuts (setAccelerator).

The setAccelerator() function takes a parameter called KeyStroke, which specify a combination of keys on the keyboard: a “normal” key – letters, numbers, etc – and a modifier – Ctrl (Toolkit.getDefaultToolkit().getMenuShortcutKeyMask), Alt, Shift, etc -.

Finally each item is added to the menu created in the first line, which is added to the menu bar – which I called menu in the program for short.

The addEditMenu function works the same way.

End of the first part

I was going to write this tutorial all in one post, but it started to get too long.

Therefore, I’ve divided it in two parts: this one mainly about graphics and stuff the user can see and the second one about elements’ functions.

While you’re waiting for the next part, you can try to understand the program by yourself, otherwise just wait for the explanation.

If you want to learn the basics of programming, it doesn’t matter if you want to code in Java, C++ or whatever, start from here: Learn C programming

As always if you have any questions, ask them in a comment and if you liked the article, please share it.

Anyway, the post is finished, have a good day and we will see next week!

From Zephyro it’s all, Bye!

Categories: Learn Java

Leave a Reply

%d bloggers like this: