Lecture # 6 Graphical User Interface(GUI)

Introduction A graphical user interface (GUI) presents a user- friendly mechanism for interacting with an application. The user interface is that part of a program that interacts with the user of the program. Gives an application a distinctive “look” and “feel.” Gives user a convenient way to use a software. Gives a lot of controls to user to use the software in best possible way.

Introduction (cont.) Built from GUI components. Sometimes called controls or widgets—short for window gadgets. User interacts via the mouse, the keyboard or another form of input, such as voice recognition. IDEs Provide GUI design tools to specify a component’s exact size and location in a visual manner by using the mouse. Generates the GUI code for you. Greatly simplifies creating GUIs, but each IDE has different capabilities and generates different code.

Introduction (cont.) Example of a GUI title bar at top contains the window’s title. menu bar contains menus ( File and View ). In the top-right region of the window is a set of buttons Typically, users press buttons to perform tasks. In the GUI Components area of the window is a combo box; User can click the down arrow at the right side of the box to select from a list of items.

AWT Package The Java programming language class library provides a user interface toolkit called the Abstract Windowing Toolkit, or the AWT. The AWT is both powerful and flexible. The AWT was designed to provide a common set of tools for graphical user interface design that work on a variety of platforms.

Introduction to GUI Programming What are the stages in building a GUI application? Design the user interface Organising pre-built GUI components to build windows, dialogs E.g buttons, tables, menus, etc Writing the application logic What does the application do? Writing event-handling code to tie the GUI components to the application logic More on event-handling.

Components and containers A graphical user interface is built of graphical elements called components Typical components include such items as buttons, scrollbars, and text fields, etc. In the AWT, all user interface components are instances of class Component or one of its subtypes. Components do not stand alone, but rather are found within containers. Containers contain and control the layout of components. Containers are themselves components, and can thus be placed inside other containers.

Component Tree

Example

Example: A Simple Framed Window import java.awt.*; import javax.swing.*; public class SwingTest { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(new Dimension(300,200)); frame.setLocation(100,100); frame.setVisible(true); }

Some AWT Component Methods void setSize(int width,int height) this property defines what would be the width and height of a component void setLocation(int x, int y) This property sets the location of a control on the screen. void setEnabled(boolean b) Either we give true or false if true then it would be enabled otherwise it would be disabled. void setVisible(boolean b) it Set the visiblity of a control, if true is value the it is visible otherwise nonvisible

Cont.. void setBackground(Color c) It Sets the background colour of a component void setForeground(Color c) It sets the foreground colour of a component, means what color of text would appear on it

Adding Color Color.black Color.blue Color.cyan Color.darkGray Color.gray Color.green Color.lightGray Color.magenta Color.orange Color.pink Color.red Color.white Color.yellow The java.awt.Color class has the following static fields (data members):

Simple GUI-Based Input/Output with JOptionPane Most applications use windows or dialog boxes (also called dialogs) to interact with the user. JOptionPane (package javax.swing ) provides prebuilt dialog boxes for input and output Displayed via static JOptionPane methods. JOptionPane.ShowInputDialogue (container,”message”)

Changing the title through user input public class Main { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(new Dimension(300,200)); frame.setLocation(100,100); frame.setVisible(true); String str= JOptionPane.showInputDialog(frame,"Enter ur Value"); frame.setTitle(str); }

Output Dialogue box Normally the messages that are displayed by the System are said to message boxes or dialogue boxes. Syntax JOptionPane.ShowMessageDialogue(String);

Program to Print a string in message box public class Main { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(new Dimension(300,200)); frame.setLocation(100,100); frame.setVisible(true); String str=“This is my Message”; JOptionPane.ShowMessageDialogue(frame,str); }

Container: Container is an AWT component. It is the second level Container. The AWT component like Button, TextField, ListBox etc are added into the Container Object. Syntax: Container Cont= new Container(); Cont.add(button); Cont.add(text); Cont.add(list);

Button: The widows form button control Allow the user to click it to perform an action. When a button is click it look like it is being pushed. Syntax JButton btn=new JButton(“Click Me”); btn.setSize(30,30); btn.setLocation(40,40);

Labels Labels are the Static text that are used to display for the information of the user. Syntax JLabel lbl=new Jlabel(“User Name”); Lbl.setSize(50,50); lbl.setLocation(50,40);