Saturday, 16 March 2013

[JAVA] Create A Basic Notepad

Creating a basic notepad app

What do I already need to know in order to follow this tutorial?
Not a lot, actually. This stuff is a lot easier than people tend to make it look. My aim is to show you how simple it is to harness the power of Java. Just so long as you've got a basic grasp of the stuff, you should be able to take it in.



So what am I going to learn?
Hopefully, quite a bit! In this tutorial, I'm going to cover the basics of:
- Multiple inheritance (very basic explanation)
- GUI design
- Event handling
- File input/output
- Exception handling


So, to get started, we need to import a few things, namely:

import javax.swing.*; // for the main JFrame design
import java.awt.*; // for the GUI stuff
import java.awt.event.*; // for the event handling
import java.util.Scanner; // for reading from a file
import java.io.*; // for writing to a file

Next, let's go over multiple inheritance. Our notepad app is going to have the appearance of a JFrame, and the functionality of an ActionListener.

So, we're going to extend JFrame, and implement ActionListener. Makes sense, right?

public class Notepad extends JFrame implements ActionListener {

Now we're going to set up our basic stuff. The classes that we'll be using for the design are:
- TextArea
- MenuBar
- Menu
- MenuItem
So, let's go over it:

The TextArea The most important bit, right?
This is the area of text that the user can write in. You'd never guess that, would you?!

So, the constructor for our TextArea is quite big~ it accepts quite a few parameters.

private TextArea textArea = new TextArea("", 0,0, TextArea.SCROLLBARS_VERTICAL_ONLY);

Let's break it down.
First, we pass "" which is basically an empty string. The constructor is looking for the text to put in the TextArea initially, so you could pass "poo" and the TextArea would say poo when you launch the app.
Next, we have the size. 0,0 (Height/Width)
This might seem weird~ we're setting it to be 0x0 pixels, so it won't be visible, right? Wrong. The basic GUI design in Java will automatically set the TextArea to fill the window. In other words, we don't have to worry about it.
TextArea.SCROLLBARS_VERTICAL_ONLY adds WordWrap to our application, to make it look neater. Times where you shouldn't have WordWrap include code views (it all belongs on one line)


The MenuBar
Much simpler, the code speaks for itself:
       private MenuBar menuBar = new MenuBar(); // first, create a MenuBar item
private Menu file = new Menu(); // our File menu
// what's going in File? let's see...
private MenuItem openFile = new MenuItem();  // an open option
private MenuItem saveFile = new MenuItem(); // a save option
private MenuItem close = new MenuItem(); // and a close option!

On to the constructor!
Personally, I find it easier to go along code when it's together. So, I've added enough comments in to the constructor code for it to make sense:

public Notepad() {
 this.setSize(500, 300); // set the initial size of the window
 this.setTitle("Java Notepad Tutorial"); // set the title of the window
 setDefaultCloseOperation(EXIT_ON_CLOSE); // set the default close operation (exit when it gets closed)
 this.textArea.setFont(new Font("Century Gothic", Font.BOLD, 12)); // set a default font for the TextArea
 // this is why we didn't have to worry about the size of the TextArea!
 this.getContentPane().setLayout(new BorderLayout()); // the BorderLayout bit makes it fill it automatically
 this.getContentPane().add(textArea);

 // add our menu bar into the GUI
 this.setMenuBar(this.menuBar);
 this.menuBar.add(this.file); // we'll configure this later
 
 // first off, the design of the menuBar itself. Pretty simple, all we need to do
 // is add a couple of menus, which will be populated later on
 this.file.setLabel("File");
 
 // now it's time to work with the menu. I'm only going to add a basic File menu
 // but you could add more!
 
 // now we can start working on the content of the menu~ this gets a little repetitive,
 // so please bare with me!
 
 // time for the repetitive stuff. let's add the "Open" option
 this.openFile.setLabel("Open"); // set the label of the menu item
 this.openFile.addActionListener(this); // add an action listener (so we know when it's been clicked
 this.openFile.setShortcut(new MenuShortcut(KeyEvent.VK_O, false)); // set a keyboard shortcut
 this.file.add(this.openFile); // add it to the "File" menu
 
 // and the save...
 this.saveFile.setLabel("Save");
 this.saveFile.addActionListener(this);
 this.saveFile.setShortcut(new MenuShortcut(KeyEvent.VK_S, false));
 this.file.add(this.saveFile);
 
 // and finally, the close option
 this.close.setLabel("Close");
 // along with our "CTRL+F4" shortcut to close the window, we also have
 // the default closer, as stated at the beginning of this tutorial.
 // this means that we actually have TWO shortcuts to close:
 // 1) the default close operation (example, Alt+F4 on Windows)
 // 2) CTRL+F4, which we are about to define now: (this one will appear in the label)
 this.close.setShortcut(new MenuShortcut(KeyEvent.VK_F4, false));
 this.close.addActionListener(this);
 this.file.add(this.close);
}

See? That wasn't so bad now, was it? I told you this stuff is easy~ it's just a little repetitive at times.

Listening for Events
Remember how I said earlier that we implement ActionListener? Well, now it's time to learn about events. Because we're implementing ActionListener, we can have a function called ActionPerformed() which will listen for events for us. Neat, huh? Again, I've added plenty of comments so you can see what's happening along the way.
NOTE: This section will also cover the basics of file I/O, and the use of JFileChooser

public void actionPerformed (ActionEvent e) {
 // if the source of the event was our "close" option
 if (e.getSource() == this.close)
  this.dispose(); // dispose all resources and close the application
 
 // if the source was the "open" option
 else if (e.getSource() == this.openFile) {
  JFileChooser open = new JFileChooser(); // open up a file chooser (a dialog for the user to browse files to open)
  int option = open.showOpenDialog(this); // get the option that the user selected (approve or cancel)
  // NOTE: because we are OPENing a file, we call showOpenDialog~
  // if the user clicked OK, we have "APPROVE_OPTION"
  // so we want to open the file
  if (option == JFileChooser.APPROVE_OPTION) {
   this.textArea.setText(""); // clear the TextArea before applying the file contents
   try {
    // create a scanner to read the file (getSelectedFile().getPath() will get the path to the file)
    Scanner scan = new Scanner(new FileReader(open.getSelectedFile().getPath()));
    while (scan.hasNext()) // while there's still something to read
     this.textArea.append(scan.nextLine() + "\n"); // append the line to the TextArea
   } catch (Exception ex) { // catch any exceptions, and...
    // ...write to the debug console
    System.out.println(ex.getMessage());
   }
  }
 }
 
 // and lastly, if the source of the event was the "save" option
 else if (e.getSource() == this.saveFile) {
  JFileChooser save = new JFileChooser(); // again, open a file chooser
  int option = save.showSaveDialog(this); // similar to the open file, only this time we call
  // showSaveDialog instead of showOpenDialog
  // if the user clicked OK (and not cancel)
  if (option == JFileChooser.APPROVE_OPTION) {
   try {
    // create a buffered writer to write to a file
    BufferedWriter out = new BufferedWriter(new FileWriter(save.getSelectedFile().getPath()));
    out.write(this.textArea.getText()); // write the contents of the TextArea to the file
    out.close(); // close the file stream
   } catch (Exception ex) { // again, catch any exceptions and...
    // ...write to the debug console
    System.out.println(ex.getMessage());
   }
  }
 }
}

Oh, and don't forget to close off the class! }
So, you should now have a basic Notepad app!
As with all my other tutorials, I'll post the complete code, in case you got lost along the way:

THE FINAL PRODUCT!
FINAL Coding
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.util.Scanner;
import java.io.*;

public class Notepad extends JFrame implements ActionListener {
 private TextArea textArea = new TextArea("", 0,0, TextArea.SCROLLBARS_VERTICAL_ONLY);
 private MenuBar menuBar = new MenuBar(); // first, create a MenuBar item
 private Menu file = new Menu(); // our File menu
 // what's going in File? let's see...
 private MenuItem openFile = new MenuItem();  // an open option
 private MenuItem saveFile = new MenuItem(); // a save option
 private MenuItem close = new MenuItem(); // and a close option!
 
 public Notepad() {
  this.setSize(500, 300); // set the initial size of the window
  this.setTitle("Java Notepad Tutorial"); // set the title of the window
  setDefaultCloseOperation(EXIT_ON_CLOSE); // set the default close operation (exit when it gets closed)
  this.textArea.setFont(new Font("Century Gothic", Font.BOLD, 12)); // set a default font for the TextArea
  // this is why we didn't have to worry about the size of the TextArea!
  this.getContentPane().setLayout(new BorderLayout()); // the BorderLayout bit makes it fill it automatically
  this.getContentPane().add(textArea);

  // add our menu bar into the GUI
  this.setMenuBar(this.menuBar);
  this.menuBar.add(this.file); // we'll configure this later
  
  // first off, the design of the menuBar itself. Pretty simple, all we need to do
  // is add a couple of menus, which will be populated later on
  this.file.setLabel("File");
  
  // now it's time to work with the menu. I'm only going to add a basic File menu
  // but you could add more!
  
  // now we can start working on the content of the menu~ this gets a little repetitive,
  // so please bare with me!
  
  // time for the repetitive stuff. let's add the "Open" option
  this.openFile.setLabel("Open"); // set the label of the menu item
  this.openFile.addActionListener(this); // add an action listener (so we know when it's been clicked
  this.openFile.setShortcut(new MenuShortcut(KeyEvent.VK_O, false)); // set a keyboard shortcut
  this.file.add(this.openFile); // add it to the "File" menu
  
  // and the save...
  this.saveFile.setLabel("Save");
  this.saveFile.addActionListener(this);
  this.saveFile.setShortcut(new MenuShortcut(KeyEvent.VK_S, false));
  this.file.add(this.saveFile);
  
  // and finally, the close option
  this.close.setLabel("Close");
  // along with our "CTRL+F4" shortcut to close the window, we also have
  // the default closer, as stated at the beginning of this tutorial.
  // this means that we actually have TWO shortcuts to close:
  // 1) the default close operation (example, Alt+F4 on Windows)
  // 2) CTRL+F4, which we are about to define now: (this one will appear in the label)
  this.close.setShortcut(new MenuShortcut(KeyEvent.VK_F4, false));
  this.close.addActionListener(this);
  this.file.add(this.close);
 }
 
 public void actionPerformed (ActionEvent e) {
  // if the source of the event was our "close" option
  if (e.getSource() == this.close)
   this.dispose(); // dispose all resources and close the application
  
  // if the source was the "open" option
  else if (e.getSource() == this.openFile) {
   JFileChooser open = new JFileChooser(); // open up a file chooser (a dialog for the user to browse files to open)
   int option = open.showOpenDialog(this); // get the option that the user selected (approve or cancel)
   // NOTE: because we are OPENing a file, we call showOpenDialog~
   // if the user clicked OK, we have "APPROVE_OPTION"
   // so we want to open the file
   if (option == JFileChooser.APPROVE_OPTION) {
    this.textArea.setText(""); // clear the TextArea before applying the file contents
    try {
     // create a scanner to read the file (getSelectedFile().getPath() will get the path to the file)
     Scanner scan = new Scanner(new FileReader(open.getSelectedFile().getPath()));
     while (scan.hasNext()) // while there's still something to read
      this.textArea.append(scan.nextLine() + "\n"); // append the line to the TextArea
    } catch (Exception ex) { // catch any exceptions, and...
     // ...write to the debug console
     System.out.println(ex.getMessage());
    }
   }
  }
  
  // and lastly, if the source of the event was the "save" option
  else if (e.getSource() == this.saveFile) {
   JFileChooser save = new JFileChooser(); // again, open a file chooser
   int option = save.showSaveDialog(this); // similar to the open file, only this time we call
   // showSaveDialog instead of showOpenDialog
   // if the user clicked OK (and not cancel)
   if (option == JFileChooser.APPROVE_OPTION) {
    try {
     // create a buffered writer to write to a file
     BufferedWriter out = new BufferedWriter(new FileWriter(save.getSelectedFile().getPath()));
     out.write(this.textArea.getText()); // write the contents of the TextArea to the file
     out.close(); // close the file stream
    } catch (Exception ex) { // again, catch any exceptions and...
     // ...write to the debug console
     System.out.println(ex.getMessage());
    }
   }
  }
 }
    // the main method, for actually creating our notepad and setting it to visible.
    public static void main(String args[]) {
        Notepad app = new Notepad();
        app.setVisible(true);
}
}

0 comments:

Post a Comment