INTEGRATIVE PROGRAMMING & TECHNOLOGIES

CHAPTER 1

Graphical User Interfaces

DESCRIBES ABSTRACT WINDOW TOOLKIT (AWT) FUNDAMENTALS�

CLO

• Upon completion of this course, students should be able to:
• CLO1 : Construct the elements of GUI from java package that integrates database for an interactive GUI application ( P4, PLO 3 )
• CLO2 : Perform the use of digital application that show eventbased GUI handling principles in Java program ( P4, PLO 6 )
• CLO3 : Demonstrate positive value and ethics in designing GUI applications to solve real world problems based on Java programming environment

COURSE CONTENT OUTLINE

Build Frame Windows and Menu Bars in Java programs.

THREE PART OF GUI

A GUI program consists of three types of software:

1. Graphical Components that make up the Graphical User Interface.
2. Listener methods that receive the events and respond to them.
3. Application methods that do useful work for the user.

​

WHAT IS AWT?

• AWT 🡪 Abstract Window Toolkits
• java.awt is a standard package of Java.
• It is a GUI(Graphical User Interface) package, which has classes in it such as Frame, Panel, and Button.
• Most of the package was later replaced with the javax.swing package, which has most of the same classes, only with a J prepended to them (JFrame, JPanel, JButton).
• However the java.awt package still includes some event handlers that are considered standard in java (java.awt.event).

​

WHAT IS AWT?

• Provides basic UI components:
• Buttons, lists, menus, textfields, etc
• Event handling mechanism
• Clipboard and data transfer
• Image manipulation
• Font manipulation
• Graphics

​

AWT FUNDAMENTALS

• The classes and interfaces of the Abstract Windowing Toolkit (AWT) are used to develop stand-alone applications and to implement the GUI controls used by applets.
• These classes support all aspects of GUI development, including event handling.
• The Component and Container classes are two of the most important classes in the java.awt package.
• The Component class provides a common superclass for all classes that implement GUI controls.
• The Container class is a subclass of the Component class and can contain other AWT components.

​

​

AWT FUNDAMENTALS

AWT FUNDAMENTALS

• The Window class is a subclass of the Container class that provides a common set of methods for implementing windows.
• The Window class has two subclasses, Frame and Dialog, that are used to create Window objects.
• The Frame class is used to create a main application window
• The Dialog class is used to implement dialog boxes.

AWT PACKAGE

• The java.awt package contains the core AWT graphics classes:
• GUI Component classes, such as Button, TextField, and Label,
• GUI Container classes, such as Frame and Panel,
• Layout managers, such as FlowLayout, BorderLayout and GridLayout,
• Custom graphics classes, such as Graphics, Color and Font.

AWT PACKAGE

java.awt Basic component functionality

java.awt.accessibility Assistive technologies

java.awt.color Colors and color spaces

java.awt.datatransfer Clipboard and data transfer support

java.awt.dnd Drag and drop

java.awt.event Event classes and listeners

java.awt.font 2D API font package

java.awt.geom 2D API geometry package

java.awt.im Input methods

java.awt.image Fundamental image manipulation classes

java.awt.peer Peer interfaces for component peers

java.awt.print 2D API support for printing

java.awt.swing Swing components

​

FOUR MAIN COMPONENTS IN AWT:

a) Container

• Container inherits AWT class and it consists of other components, including the other containers. A common container is called Panels.

b) Canvases

• Canvas is an easy surface for drawing. It is good to colour an image or to execute other graphical operations.

c) Interface Component

• User Interface includes button, list, simple pop-up, menu, check box, TextField and other usual interface elements.

d) Window Construction

• The window components include window, frame, bar menu and dialog box.

• boxes.

Windows Fundamentals

Windows Fundamentals

WINDOWS FUNDAMENTALS

• The AWT defines windows according to a class hierarchy the added functionality and specificity with each level.
• The two most common windows are those derived from Panel, which is used by applets, and those derived from Frame, which creates a standard window.
• Much of the functionality of these windows is derived from their parent classes.
• Thus, a description of the class hierarchies relating to these two classes is fundamental to their understanding.

​

AWT

• AWT Hierarchy

AWT

• AWT Hierarchy

COMPONENTS

• At the top of the AWT hierarchy is the Component classes.
• Component is an abstract class that encapsulates all of the attributes of a visual component.
• All user interface elements that are displayed on the screen and that interact with the user are subclasses of component.

COMPONENTS

The Component class defines data and methods which are relevant to all Components

​

• setBounds
• setSize
• setLocation
• setFont
• setEnabled
• setVisible
• setForeground -- colour
• setBackground -- colour

​

CONTAINER

• The Container class is a sub class of component.
• It has addAitional methods that allow other component objects to be nested within it.
• Other Container objects can stored inside of the container (since they are themselves instance of component).
• This makes for a multileveled containment system.
• A container is responsible for laying out ( that is, positioning) any components that it contains.
• It does this through the use of various layout managers.

CONTAINER

The Container class defined all the data and methods necessary for managing groups of Components

• add
• getComponent
• getMaximumSize
• getMinimumSize
• getPreferredSize
• remove
• removeAll

​

Top-Level Containers: Frame, Dialog and Applet

• Each GUI program has a top-level container.
• The commonly-used top-level containers in AWT are Frame, Dialog and Applet:
• A Frame provides the "main window" for the GUI application, which has a title bar (containing an icon, a title, the minimize, maximize/restore-down and close buttons), an optional menu bar, and the content display area.

​

Container

TO WRITE A GUI PROGRAM, WE TYPICALLY START WITH A SUBCLASS EXTENDING FROM JAVA.AWT.FRAME TO INHERIT THE MAIN WINDOW AS FOLLOWS:�

CONTAINER

• In a GUI program, a component must be kept in a container. You need to identify a container to hold the components.
• Every container has a method called add(Component c).
• A container (say c) can invoke c.add(aComponent) to add aComponent into itself. For example,

CONTAINER

• Panel pnl = new Panel(); // Panel is a container �Button btn = new Button("Press"); // Button is a component �pnl.add(btn); // The Panel container adds a Button component

• The Panel class is a concrete subclass of Container.
• It doesn’t add any new methods, it simply implements Container.
• A Panel may be thought of as a recursively nestable, concrete screen component.
• Panel is the superclass for Applet.
• When screen output is directed to an applet, it is drawn on the surface of a Panel object.

Panel

• In essence, a Panel is a window that does not contain a title bar, menu bar, or border.
• Other components can be added to a Panel object by its add() method ( inherited from Container).
• Once these components have been added, you can position and resize them manually using the setLocation(), setSize(), or setBounds() methods defined Component.

Panel

• Panel functions as a smallest container that groups together the user interface component.
• Constructor that can be used:
• Panel()

​

• By default, panels will use FlowLayout.

​

• Panel can be placed inside a frame or inside another panel.

​

Panel

Panel

• Can be used to draw graphics and enable users interaction.
• Look as a blank space inside a container.
• Able to execute a few function for manipulating a canvas ( as below):

- Setting the colour

- Setting the size

- Getting an events.

​

Canvas

Canvas

• The Window class creates top-level window.
• A top-level window is not contained within any other object; it sits directly on the desktop.
• Generally, you won’t create Windows objects directly. Instead, you will use a subclass of Window called Frame

​

Window

CREATING USER INTERFACE (WITHOUT EVENT)

Graphical User Interface (GUI) is easy which tackles users to use the system.

​

• Building a GUI requires creativity and knowledge on how GUI components function.

• add() method is used to add components into container.

• remove() method used to discard component from container.

• Frame encapsulates what is commonly thought to as a “window.”
• It is a subclass of Windows and has a title bar, menu bar, border, and resizing corners.
• If you create Frame object from within an applet, it will contain a warning message, such “Warning: Applet Windows,” to the user that an applet windows has been created.

Frame

• This message warns users that the windows they see was started by an applet and not by software running on their computer.
• When a Frame window is created by a program rather than an applet, a normal window is created.
• Once defined, a Frame is a Container which can contain Components
• Frame aFrame = new Frame(� Hello World� );
• aFrame.setSize(100,100);
• aFrame.setLocation(10,10);
• aFrame.setVisible(true);

​

​

Frame

• Useful Methods of Component class

The Use of Frame

• Frame’s constructors are as follows:
• Frame( )
• Frame(String title)

​

• The first form creates a standard window that does not contain a title.
• The second form creates a window with the title specified by title. We cannot specify the dimensions of the window. We must set the size of the window after it has been created.
• Some of the methods used when working with windows are as follows:

FRAME WINDOW

• Public : is an Access Modifier, which defines who can access this Method. Public means that this Method will be accessible by any Class(If other Classes are able to access this Class.).
• Static : is a keyword which identifies the class related thing. This means the given Method or variable is not instance related but Class related. It can be accessed without creating the instance of a Class.
• Void : is used to define the Return Type of the Method. It defines what the method can return. Void means the Method will not return any value.
• main: is the name of the Method. This Method name is searched by JVM as a starting point for an application with a particular signature only.
• String args[] : is the parameter to the main Method.

public static void main(String args[]

• You can change the title in a frame window using setTitle( ).
• Its signature is shown here:

​

void setTitle(String newTitle)

​

• Here, newTitle is the new title for the window.��

Setting a Window’s Title

• The setSize( ) method is used to set the dimensions of the window. Its signature is shown here:

​

void setSize(int newWidth, int newHeight)

​

void setSize(Dimension newSize)

​

• The new size of the window is specified by newWidth and newHeight, or by the width and height fields of the Dimension object passed in newSize. The dimensions are specified in terms of pixels.���

​

Setting the Window’s Dimensions

• When using a frame window, your program must remove that window from the screen when it is closed, by calling setVisible(false).
• To intercept a window-close event, you must implement the windowClosing( ) method of the WindowListener interface.
• Inside windowClosing( ), you must remove the window from the screen.

​

Closing a Frame Window

• import java.awt.*;  
• class First extends Frame{  
• First(){  
• Button b=new Button("click me");  
• b.setBounds(30,100,80,30); // setting button position  
•   
• add(b); //adding button into frame  
• setSize(300,300); //frame size 300 width and 300 height  
• setLayout(null); //no layout manager  
• setVisible(true); //now frame will be visible, by default not visible  
• }  
• public static void main(String args[]){  
• First f=new First();  
• }}  

​

Creating Frame

• A top-level window can have a menu bar associated with it.
• A menu bar displays a list of top-level menu choices.
• Each choice is associated with a drop-down menu.
• This concept is implemented in Java by the following classes: MenuBar, Menu, and MenuItem.

​

Menu Bars & Menu

• In general, a menu bar contains one or more Menu objects. Each Menu object contains a list of MenuItem objects.
• Each MenuItem object represents something that can be selected by the user.
• Since Menu is a subclass of MenuItem, a hierarchy of nested submenus can be created. It is also possible to include checkable menu items.
• These are menu options of type CheckboxMenuItem and will have a check mark next to them when they are selected.

​

Menu Bars & Menu

• To create a menu bar, first create an instance of MenuBar. This class only defines the default constructor. Next, create instances of Menu that will define the selections displayed on the bar.
• Following are the constructors for Menu:�Menu( )
• Menu(String optionName)
• Menu(String optionName, boolean removable)

​

Menu Bars & Menu

MENU BARS & MENU

• A Dialog is a top-level window with a title and a border that is typically used to take some form of input from the user.
• The size of the dialog includes any area designated for the border.
• The dimensions of the border area can be obtained using the getInsets method, however, since these dimensions are platform-dependent, a valid insets value cannot be obtained until the dialog is made displayable by either calling pack or show.

Dialog

• Dialog boxes are primarily used to obtain user input.
• They are similar to frame windows, except that dialog boxes are always child windows of a top-level window.
• Also, dialog boxes don’t have menu bars. In other respects, dialog boxes function like frame windows.
• You can add controls to them, in the same way that you add controls to a frame window.
• Dialog boxes may be modal or modeless. When a modal dialog box is active, all input is directed to it until it is closed.
• This means that you cannot access other parts of your program until you have closed the dialog box. When a modeless dialog box is active, input focus can be directed to another window in your program.
• Thus, other parts of your program remain active and accessible.

Dialog Box

• Since the border area is included in the overall size of the dialog, the border effectively obscures a portion of the dialog, constraining the area available for rendering and/or displaying subcomponents to the rectangle which has an upper-left corner location of (insets.left, insets.top), and has a size of width - (insets.left + insets.right) by height - (insets.top + insets.bottom).

​

Dialog

Dialog Box

• A program designed to be executed from within another application.
• Unlike an application, applets cannot be executed directly from the operating system.
• With the growing popularity of OLE (object linking and embedding), applets are becoming more prevalent.
• A well-designed applet can be invoked from many different applications.

Applet

• Web browsers, which are often equipped with Java virtual machines, can interpret applets from Web servers.
• Because applets are small in files size, cross-platform compatible, and highly secure (can't be used to access users' hard drives), they are ideal for small Internet applications accessible from a browser.

​

​

Applet

GUI COMPONENTS

a) Label

b) List

c) TextField

d) Button

e) TextArea

f) Choice

g) CheckBox

• Simple text string that is used to label other GUI components (usually a textfield)
• Three constructors can be used:

i. Label()

ii. Label(String s)

iii. Label(String s, int alignment)

• getText() method can be used to get string.
• setText() method can be used to change text.
• getAlignment() method can be used to set text alignment
• setAlignment() method can be used to reset text alignment

​

​

Label

Label

​

• Component that produces an event when pushed.
• Two constructors can be used:

i. Button()

ii. Button(String s)

​

• Use getLabel() method to obtain or reset label on button.
• Use setLabel(String s) method to change label on the button with a new word.

​

• Button produce an event (ActionEvent).
• ActionPerformed() method must be executed in action listener interface to enable button to respond.

​

​

Button

Button

• Have two states: on and off (true and false).
• Can be used in two ways: exclusive and non-exclusive.
• Three constructors that can be used:

i. Checkbox()

ii. Checkbox(String str)

iii. Checkbox(String str, Boolean on)

• getState() method is used to set the state.
• getLabel() method can be used to access the current situation for Checkbox.
• setLabel() method is used to set the label to a Checkbox.

​

CheckBox

CheckBox

• Input space for users to input data.

​

• Enables users to input data variables. (Example: name or description.)

​

• Three constructors can be used:

i. TextField(int width)

ii. TextField(String s)

iii. TextField(String s, int width)

​

• The length of text field is the length in pixel for the average amount of characters in the text field.
• It is according to the types of font, multiplied with width value.

​

TextField

GUI COMPONENTS

TextField

​

• Enables users to input a few of text lines.
• Two constructors can be used:

i. TextArea(int rows, int columns)

ii. TextArea(String s, int rows, int columns)

• Use insert(String s, int pos) method to input string into a specifics position in the text field.
• Append(String s) method is used to add string at the end of the existingtext.
• replaceRange(String s, int start, int end) method is used to change a few texts between start position until the end position.
• getrows() method is used to obtain the amount of lines existing in the text field.

​

TextArea

TextArea

• List of items where users can choose.
• Have only one constructor which is :

choice()

• addItem(String s) method is used to add item into choice.
• getItem(int index) method is used to get an item from choice according to specific index.
• getSelectedIndex()method gets an index for the selected item.
• select(int pos) method selects an item with a specifics position.
• select(String str) method selects an item with a specifics string.

​

Choice

Choice

• Basically it executes the same function as choice, but it enables users to choose a single or multiple lines.
• Two constructors can be used:

i. List(int rows, Boolean multipleSelection)

- creates a new scrolling list with the specifics number of visible

rows and enable to use parameter “multipleSelection” .

ii. List()

​

List

List

REVISION

• The Label and TextField clases are defined in the java.awt package.

A. True

B. False

Q1

REVISION

• What is a container object in GUI programming?

A. A container is another name for an array or vector.

B. A container is any class that is made up of other classes.

C. A container is a primitive variable that contains the actual data.

D. A container is an object like a Frame that has other GUI components placed inside of it.

​

Q2

REVISION

• Fill in the blanks so that this program displays a Frame:

import java.awt.*; public class microGUI {

public static void main ( String[] args ) {

Frame frm = new ___________();

frm.___________( 150, 100 );

frm.___________( true );

} } �

1.   Form, setVisible, setOn
2. Frame, setSize, setVisible
3. Frame, setVisible, setSize
4. Window, setSize, paint

Q3

REVISION

• Which of the following sets the frame to 300 pixels wide by 200 high?

A. frm.setSize( 300, 200 );

B. frm.setSize( 200, 300 );

C. frm.paint( 300, 200 );

D. frm.setVisible( 300, 200 )

​

Q4

REVISION

• Fill in the blanks so that the following draws a Frame containing "Hello".

import java.awt.*;

class helloFrame ___________ Frame {

public void ___________( Graphics g )

{ g.___________("Hello", 10, 50 );

} }

public class Tester {

public static void main ( String[] args ) {

helloFrame frm = new helloFrame();

frm.setSize( 150, 100 ); frm.setVisible( true );

} }

1.  import, drawString, paint
2. extends, paint, drawString
3. extends, draw, paint
4.  include, drawString, paint

Q5

REVISION

• Write a syntax to declare a label with left alignment. (2 marks)

_______________________________________

Q6

REVISION

• Write the codes to create 2 buttons, one with a label “Click Here” and the other with a label “Do Not Click Here”. You also have add the buttons into the frame.[

_______________________________________

Q7