Graphical User Interface

Lecture 10 Graphical User Interface An introduction Sahand Sadjadee sahand.sadjadee@liu.se Programming Fundamentals 725G61 http://www.ida.liu.se/~725g61/ Department of Computer and Information Science (IDA) Linköping University Sweden January 10, 2014 1

Graphical User Interface (GUI) In general, a user interface is composed of a set of components which provide the possibility that a human via five senses interact with a device, machine or a unit which can perform a set of functionalities. A phone equipped with a User Interface for human interaction.

Every interaction with a telephone device is composed of three parts 1. Input to the device provided by the user. 2. Output from the device to the user. 3. Actions performed by the user which each lead to different functionalities executed by the device. In simple words an interaction with a device means working with it.

A sample interaction with a telephone device when a person tries to call another person: 1. Pick up the handset(action) to clear the line(functionality). 2. Dial via the dial pad (input) to make call(functionality) 3. The other party rings as you can hear a voice pattern via the head set (output). 4. The other party picks up and you start to speak via head set( input). 5. The other party speaks and you hear it via the head set (output). 6. The conversation is finished and you hang up(functionality) by putting back the head set (action).

Graphical User Interface Graphical User Interface or GUI Is a type of user interface which allows users to interact with computer programs through graphical components. By interaction, it means providing input, viewing output and executing different functionalities provided by the program. Microsoft Windows calculator equipped with Graphical User Interface.

Unlike Graphical User Interface, A Text-based user interface is only composed of characters formed in different lines. A finance program equipped with Text-based User Interface for human interaction.

Swing Swing is an API as part of Java Standard Library which provides classes and interfaces required for implementing Graphical User Interface for Java Desktop Applications. Java Desktop Applications are Java programs which run on Personal Computers. A simple calculator implemented by using Swing API.

Some facts about Swing 1. Swing components look the same on every Operating System like Linux, Unix, Mac OS X and Windows. 2. Every class as part of Swing which starts with J provides a viewable component. 3. The Swing API is located in javax.swing package. 4. It is not possible remember every detail about every class so it is necessary to refer to official Swing documentation available at http://docs.oracle.com/javase/7/docs/api/javax/swing/package-summary.html

Swing classes and interfaces

JFrame JFrame is a class designed for creating the main window in a Java desktop application. 1. the main window is displayed first when the program is executed by the user. 2. The main window is closed by the user for quitting the program. 3. The main window represents the main view of the application and contains other components.

An empty main window created by using JFrame class

Some of the methods provided by JFrame class 1. public void settitle(string title) Set the title of the main window. The default title is. 2. public void setvisible(boolean b) Displays the main window to the user. 3. public void setsize(int width, int height) Sets the size of the main window in pixels. The default size is 0X0. 4. public void setlocation(int x, int y) Sets the location of the main window in the screen in pixels. Top left corner has the (0,0) coordination. 5. public void setdefaultcloseoperation(int operation) Defines what happens when the user clicks on the close button of the main window. By default it hides and does not close. 6. public Component add(component comp) Adds a new component to the main window.

How do we use Jframe? 1. Create a class which has a main method. 2. Inside of the main method, create an object from class Jframe. 3. Inside of the main method, call the method setvisible(true) on the created object. Works fine and pretty straight forward but it has a problem! What is the problem then?

By using the previous approach we cannot change a behavior or add new attributes and behaviors to the main window! To be able to do that so, we need to use inheritance first as follow: 1. Create a new class. 2. Extend the new class by inheriting from JFrame class. 3. Override the desired methods, declare different constructors/destructor or add new fields and methods. 4. Create a class which has a main method. 5. Create an object from the newly created class inside of the main method. 6. Call method setvisible(true) on the created object. 7. initialize the main window by calling required methods inside of Of a constructor.

a program which has one main window with the default size of 640X480. // declaring a new class named MyFrame inheriting from the JFrame class, steps 1 and 2. // MyFrame.java class MyFrame extends javax.swing.jframe{ // declaring different constructors comparing to JFrame, step 3. public MyFrame(){ setsize(640, 480); // setting the default size to 640X480, step 7. } } //Main.java, step 4 class Main{ public static void main(string[] args){ // assuming MyFrame is imported or the Main and MyFrame classes locate in the same package. MyFrame mainwindow = new MyFrame(); // creating an object from MyFrame class, step 5. mainwindow.setvisible(true); // step 6 } }

JButton The JButton class is used for creating buttons in Java Desktop applications. 1. In general, a button is a click-able rectangular area which contains a label or/and an image representing the functionality it provides. 2. By clicking on a button, a method inside of the program executes. 3. A button must be placed inside of the main window.

Some of the methods provided by JButton class 1. public void settext(string title) Assigns a text as the label of the button. 2. public void setsize(int width, int height) Sets the size of the button located inside of the main window. 3. public void setlocation(int x, int y) Sets the location of the button inside of the main window. 4. public void addactionlistener(actionlistener l) Defines a method which is called when the button is clicked.

A button inside of the main window

How do we use class Jbutton? 8. Create a field of type Jbutton inside of the your newly created class which inherits the Jframe class(our MyFrame class). 9. Create an object inside of a constructor of it(our MyFrame class) 10. Call the desired methods on the created Jbutton object inside of the constructor like setsize and SetLocation methods. 11. add the button to the main window by using the Jframe::add method.

package se.liu.ida.gp.a8; import java.awt.event.actionevent; import java.awt.event.actionlistener; import javax.swing.jbutton; // declaring a new class named MyFrame inheriting from the JFrame class, steps 1 and 2. // MyFrame.java class MyFrame extends javax.swing.jframe { // declaring different constructors comparing to JFrame, step 3. public MyFrame() { setsize(640, 480); // setting the default size to 640X480, step 7 setlayout(null); // disabling layout manager, step 7 button = new JButton("Click me!"); // step 9 button.setsize(120, 40); button.setlocation(200, 200); button.addactionlistener(new ActionListener() { // step 10 @Override public void actionperformed(actionevent e) { System.out.println("I am Clicked!"); } }); add(button); //step 10 } private JButton button; // step 8 } // Main.java, step 4,5,6

Result- A button inside of the main window

JTextField The JTextField class is used for creating text fields in Java Desktop applications. In general, a text field is a single-line rectangular area for inputting and outputting text from/to the user. It only appears in the main window.. JTextArea The JTextArea class is used for creating text areas in Java Desktop applications. In general, a text area is a multi-line rectangular area for inputting and outputting text from/to the user. It only appears in the main window. In other words, they are both simple text editors!

Some of the methods provided by both JTextField and JTextArea classes 1. public void settext(string title) Assigns a text to the text editor. 2. public String gettext() Returns the text currently inside of the text editor. 3. public void setlocation(int x, int y) Sets the location of the text editor inside of the main window. 4. public void setsize(int width, int height) Sets the size of the text editor inside of the main window.

A text field and a button inside of the main window

How do we use class JTextField/JTextArea classes? We use these classes as we did for the JButton class. In fact this approach applies for every component which appears inside of the main window. Why is that!?

package se.liu.ida.gp.a8; import java.awt.event.actionevent; import java.awt.event.actionlistener; import javax.swing.jbutton; import javax.swing.jtextfield; // declaring a new class named MyFrame inheriting from the JFrame class, steps 1 and 2. // MyFrame.java class MyFrame extends javax.swing.jframe { // declaring different constructors comparing to JFrame, step 3. public MyFrame() { setsize(640, 480); // setting the default size to 640X480, step 7 setlayout(null); // disabling layout manager, step 7 button = new JButton("Click me!"); // step 9 button.setsize(120, 40); //step 10 button.setlocation(200, 200); //step 10 button.addactionlistener(new ActionListener() { // step 10 @Override public void actionperformed(actionevent e) { textfield.settext("i'm clicked!"); } }); add(button); //step 11

Continued... textfield = new JTextField(); // step 9 textfield.setsize(200, 40); //step 10 textfield.setlocation(340, 200); //step 10 add(textfield); //step 11 } private JButton button; // step 8 private JTextField textfield; //step 8 } // Main.java, step 4,5,6

Result- A text field and a button inside of the main window

JLabel The class JLabel is used for creating labels in GUI of a Java desktop application. 1. In general, a label is a descriptive piece of text and/or an image which is used for describing other components. 2. By design, some components have built-in labels like buttons and some don't like text fields and text areas. 3. JLabels only appear in the main window.

Some of the methods provided by JLabel class 1. public void settext(string title) Assigns a text as a label. 2. public String gettext() Returns the label. 3. public void setlocation(int x, int y) Sets the location of the label inside of the main window. 4. public void setsize(int width, int height) Sets the size of the label inside of the main window.

A label, a text field and a button inside of the main window

package se.liu.ida.gp.a8; import java.awt.event.actionevent; import java.awt.event.actionlistener; import javax.swing.jbutton; import javax.swing.jlabel; import javax.swing.jtextfield; // declaring a new class named MyFrame inheriting from the JFrame class, steps 1 a // MyFrame.java class MyFrame extends javax.swing.jframe { // declaring different constructors comparing to JFrame, step 3. public MyFrame() { setsize(640, 480); // setting the default size to 640X480, step 7 setlayout(null); // disabling layout manager, step 7 button = new JButton("Click me!"); // step 9 button.setsize(120, 40); //step 10 button.setlocation(200, 200); //step 10 button.addactionlistener(new ActionListener() { // step 10 @Override public void actionperformed(actionevent e) { textfield.settext("i'm clicked!"); } });

Continued... add(button); //step 11 textfield = new JTextField(); // step 9 textfield.setsize(200, 40); //step 10 textfield.setlocation(340, 200); //step 10 add(textfield); //step 11 label = new JLabel(); //step 9 label.settext("name"); //step 10 label.setsize(200, 40); //step 10 label.setlocation(340, 150); //step 10 add(label); //step 11 } private JButton button; // step 8 private JTextField textfield; //step 8 private JLabel label; //step 8 } // Main.java, step 4,5,6

Result- A label, a text field and a button inside of the main window

Result- A label, a text field and a button inside of the main window after the click on the button.

JOptionPane The JOptionPane class is used for showing different types of modal dialog boxes to the users. 1. A dialog box is a window containing certain components designed for inputting or outputting data from/to the users. 2. A modal dialog box does not allow the user to work with any other component in the application until the dialog box is dismissed. 3. A dialog box appears by clicking on a button inside of the main window.

4 different modal dialog boxes provided by JOptionPane Method Name showconfirmdialog Description Asks a confirming question, like yes/no/cancel. showinputdialog Prompt for some input. showmessagedialo g showoptiondialog Tell the user about something that has happened. The Grand Unification of the above three. All methods are static and there is no need to create an object from JOptionPane to use them!

package se.liu.ida.gp.a8; import java.awt.event.actionevent; import java.awt.event.actionlistener; import javax.swing.jbutton; import javax.swing.jlabel; import javax.swing.jtextfield; // declaring a new class named MyFrame inheriting from the JFrame class, steps 1 and 2. // MyFrame.java class MyFrame extends javax.swing.jframe { // declaring different constructors comparing to JFrame, step 3. public MyFrame() { setsize(640, 480); // setting the default size to 640X480, step 7 setlayout(null); // disabling layout manager, step 7 button = new JButton("Click me!"); // step 9 button.setsize(120, 40); //step 10 button.setlocation(200, 200); //step 10 button.addactionlistener(new ActionListener() { // step 10 @Override public void actionperformed(actionevent e) { String text = textfield.gettext(); Javax.swing.JoptionPane.showMessageDialog(null, text); } });

Continued... add(button); //step 11 textfield = new JTextField(); // step 9 textfield.setsize(200, 40); //step 10 textfield.setlocation(340, 200); //step 10 add(textfield); //step 11 label = new JLabel(); //step 9 label.settext("name"); //step 10 label.setsize(200, 40); //step 10 label.setlocation(340, 150); //step 10 add(label); //step 11 } private JButton button; // step 8 private JTextField textfield; //step 8 private JLabel label; //step 8 } // Main.java, step 4,5,6

Result- calling showmessagedialog on JoptionPane class.

That was it, hope you enjoyed it!