How to Build a Desktop Application with Java

We will build a simple desktop application that will translate English text to Morse Code and vice-versa in very simple steps plus an overview of Java GUI

This is how our final app will look like

This is going to be an introductory lesson into the world of Graphics User Interface (GUI) with Java Programming language. (confession: am in love with Java)

Translation Logic

First before diving into the graphics part, let’s look at the driving logic.

HashMap (a sub-class of Map which is Key-Value store) is used to build our dictionary of English letters and their corresponding Morse code. So we have something like this:

private HashMap<String, String> englishToMorseLib = new HashMap<>();
englishToMorseLib.put("A", ".-");
englishToMorseLib.put("B", "-...");
englishToMorseLib.put("C", "-.-.");
.
.
.
.
//link to full source code on github is giving at the end of the article 

Then, two methods were created: one to translate the English text to Morse code and the other to do the opposite. In both cases, the text is splitted using a regex that matches white space and new line characters. Each of the resulting array is processed using Java Streams for efficiency

//this method will convert English Words to Morse Code
public String englishWordToMorseWord(String englishWord) {
    StringBuffer buffer = new StringBuffer();
    Stream.of(englishWord.split("[\\s\\n]"))
            .forEach( s -> {
                for(char c: s.toCharArray()) {
                    buffer.append(englishToMorseLib.containsKey(String.valueOf(c).toUpperCase()) ? englishToMorseLib.get(String.valueOf(c).toUpperCase()) + " " : "?? ");
                }
                buffer.append(" / ");
            });
    return buffer.toString();
}
//this method will convert Morse code to English Word
public String morseWordToEnglishWord(String morseWord) {
    StringBuffer buffer = new StringBuffer();
    Stream.of(morseWord.split("[\\s\\n]"))
            .filter((s) -> s != null && !s.isEmpty())
            .forEach( s -> {
                if(s.equalsIgnoreCase("/") || s.equalsIgnoreCase("|")) {
                    buffer.append(" ");
                } else {
                    buffer.append((morseToEnglishLib.containsKey(s) ? morseToEnglishLib.get(s) : "?? ").toLowerCase());
                }
            });
    return buffer.toString();
}

GUI Elements In Java

Java has a rich set of GUI elements that serve as building blocks for a complete GUI Desktop Application.

JFrame

The top-most layer of Java GUI is the JFrame. It’s the outermost container that house other elements or containers. It is the part of the app with the close, minimize and maximize buttons. The following lines of code will create a JFrame object (Side-Note: Object Oriented Programming is sweet with Java).

//create JFrame Instance
JFrame frame = new JFrame(); 
frame.setTitle("Morse Code Translator by Seun Matt (@SeunMatt2)");
frame.setLayout(new BorderLayout());

//add other containers and elements to the JFrame
frame.add(mainPanel, BorderLayout.CENTER); 

frame.setSize(new Dimension(800, 650));

//this terminate the app when the close button is clicked
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

//this will make the app to always display at the center
frame.setLocationRelativeTo(null);

//well, I don't want you to resize the window
frame.setResizable(false);

//and yes this will show the visible frame/app
frame.setVisible(true);

What the code above does is to essentially create an instance of the JFrame object, set parameters like title, layout, size, location and as well set the behaviour of the JFrame like ability to resize the frame and it’s visibility.

JPanel

This is a container, meaning it holds other elements together. The child elements are arranged in a specific order using layout managers as we will later find out. The following lines of code is responsible for creating the button row at the bottom of the Morse Text area, to the right of the application.

JPanel morseControlPanel = new JPanel();

//set the layout style
morseControlPanel.setLayout(new FlowLayout(FlowLayout.RIGHT));

//add the Morse >> English button
morseControlPanel.add(morseToEnglishBt);

//add the Clear Text >> button
morseControlPanel.add(clearMorseText);

Other Elements Used in the App

Other Elements used in the program are

• JButton: Clickable buttons for performing special actions. For example the clear text button beneath the English text are is created thus:

JButton clearEnglishText = new JButton("<< Clear Text");

• JLabel: Well from the name we can infer that it is a label and labels are used for well labelling things. Here is the code that created the ‘English Text’ at the top of the English text area

JLabel englishTextLabel = new JLabel("English Text");
englishTextLabel.setHorizontalAlignment(SwingConstants.CENTER);

• JTextArea: This element is the container where we type texts into. JTextArea is meant for multi-line texts. (Note: These elements are Java Objects and thus their behaviour and properties can be specified. Like alignment, text, location etc. You can even bind events to them as we will see later)

//create the object instance
JTextArea englishTextArea = new JTextArea(20,20);
//set the object properties and behaviour
englishTextArea.setText("Hello World");
englishTextArea.setLineWrap(true);
englishTextArea.setWrapStyleWord(true);
englishTextArea.setMargin(new Insets(5, 5, 5,5));

• LayoutManagers: Layout managers specify how elements in a container will be arranged. In this application, we used FlowLayout and BorderLayout to specify how elements are laid out. With FlowLayout, elements will be laid out in sequence and in order in which they are added to the container. BorderLayout, on the other hand, will arrange GUI elements to the SOUTH, NORTH, EAST, WEST and CENTER

//this flowlayout will show the Clear Text button first
//followed by the English >> Morse button
//and they will be aligned to the left
JPanel englishControlPanel = new JPanel(new FlowLayout(FlowLayout.LEFT));
englishControlPanel.add(clearEnglishText);
englishControlPanel.add(englishToMorseBt);

//this panel uses the BorderLayout manager
//elements are added with specification of where they will be located
JPanel englishTextPanel = new JPanel();
englishTextPanel.setLayout(new BorderLayout());
englishTextPanel.add(englishTextLabel, BorderLayout.NORTH);
englishTextPanel.add(new JScrollPane(englishTextArea), BorderLayout.CENTER);
englishTextPanel.add(englishControlPanel, BorderLayout.SOUTH);

Event Listeners

Events bring GUI elements to live; so when a button is clicked, an event is generated in the system, and event listeners registered for the particular event will be invoked. The following code is responsible for registering the buttons for an ActionEvent that is fired when a button is clicked. (lamda expression at work #java8)

englishToMorseBt.addActionListener((e) -> {
    String english = englishTextArea.getText().trim();
    morseTextArea.setText(englishWordToMorseWord(english));
});

morseToEnglishBt.addActionListener((e) -> {
    String morse = morseTextArea.getText().trim();
    englishTextArea.setText(morseWordToEnglishWord(morse));
});

And this is where we registered the Text Areas to listen for Keyboard Events and automatically execute translation when the space bar or backspace key is pressed.

englishTextArea.addKeyListener(new KeyAdapter() {
    @Override
    public void keyTyped(KeyEvent e) {
        //when space bar is pressed (or back space) do the conversion
        if(Character.isWhitespace(e.getKeyChar()) || e.getKeyCode() == KeyEvent.VK_BACK_SPACE) {
            morseTextArea.setText(englishWordToMorseWord(englishTextArea.getText()));
        }
    }
});

morseTextArea.addKeyListener(new KeyAdapter() {
    @Override
    public void keyTyped(KeyEvent e) {
        //when space bar is pressed (or back space) do the conversion
        if(Character.isWhitespace(e.getKeyChar()) || e.getKeyCode() == KeyEvent.VK_BACK_SPACE) {
            englishTextArea.setText(morseWordToEnglishWord(morseTextArea.getText()));
        }
    }
});

Main Method

In the main method, which is the entry point for all Java applications, the look and feel of the app was set to NimbusLookAndFeel which look more pretty than the default java look and feel. Afterwards, the app is fired on.

public static void main(String[] args) {
    try {
        UIManager.setLookAndFeel("javax.swing.plaf.nimbus.NimbusLookAndFeel");
    } catch (Exception e) {
        e.printStackTrace();
    }

    SwingUtilities.invokeLater(() -> {
        new MorseCodeTranslator();
    });
}

Source Code

The complete source code is available on this Github repo. You can find instructions to contribute and run the app in the repo’s README (remember to give it a star)

Have you heard of PalCrib? It’s a new social media app that I am working on. If you love my writings, you’ll definitely enjoy the app. Download it now from Google PlayStore and let me know what you think