GUI

1
GUI

• GUI programming consists of creating objects by
  which a user can effectively communicate with the
  underlying application program and effect its
  state and behavior.
• The user must be able to understand the
  interface, its functions, its images, and its
  logical flow.

2
GUI Effectiveness

• The users background, knowledge, experience, and
  perspective define a usage context.
• Different categories of users will have different
  expectations.
• The GUI should clearly convey the proper
  perspective and level of detail appropriate for
  the background of the target audience.

3
GUI Principles

• When designing a GUI application, address the
  users need first.
• The application should be comprehensive,
  meaningful, and appealing to the target audience.
• The software design should support an interface
  with the most meaningful abstractions, and be
  intuitive for the user.

4
GUI Tools

• C with MFC, OWL, Borland Component Classes,
  Motif (Unix), etc.
• Visual Basic
• Script languages Perl, Python, Tcl/Tk
• Java with JFC
• Others.

5
Tools (Cont.)

• The tools provide implementations of visual
  components that represent familiar objects with
  which the user interacts
• The software engineer creates visual abstractions
  of the interface using elements such as dialogs
  buttons, text fields, etc., as building blocks

6
Architecture for GUI Applications

• The software engineer must work with two
  orthogonal sets of abstractions
• The application logic
• The application interface to users
• The challenge to the software engineer is to
  bridge these abstractions so they can work
  together.

7
GUI Client/Server Model
8
Basic Graphical User Interfaces

• With graphical user interfaces (GUIs), the user
  interacts with graphical elements such as
  buttons, dialog boxes, menus, and others.
• Programs with graphical user interfaces present
  the user with a nice and convenient arrangement
  of graphical components and guide the user in a
  very effective manner when interacting with the
  application.
• Java provides two important graphical libraries
  (or packages) of classes
• the Abstract Windows Toolkit (AWT)
• Swing.

9
Graphical Objects

• The most relevant objects that form part of a
  graphical user interface are
• Containers
• Components
• Events
• Listeners

10
Components and Containers

• A container is an object that can hold graphical
  components and smaller containers. A container
  object also allows its contained objects to be
  arranged in various ways. This arrangement of
  objects is facilitated by special objects called
  layout managers. Examples of container objects
  are frames and panels.
• Components are small objects that are usually
  arranged with other components in a container
  object. Examples of component objects are
  buttons, labels, and text fields.

11
General Structure of a GUI
12
Importing the AWT and Swing

• The following two lines of code are the ones
  normally required by programs that access the
  graphical libraries AWT and Swing. The import
  statements shown give access to all the classes
  in the two packages.
• import java.awt.
• import javax.swing.

13
Frames

• The largest type of container is a frame. This
  container can be created simply as an object of
  class JFrame of the Swing library.
• An empty frame window can be built by creating an
  object of class JFrame with a specified title and
  setting the size for it. The next figure shows an
  empty frame (window). The relevant properties of
  this frame are its title, color, and size.

14
Empty Frame
15
KJP Code for Empty Frame

• import javax.swing. // Library for
  graphics
• /
• This class creates and displays an empty
  frame window.
• /
• public class Frame_sample
• /
• This is the main function of the
  application.
• /
• public static void main (Strings args)
• final static int WIDTH 400
• final static int HEIGHT 300
• JFrame frame_obj
• frame_obj new JFrame ("Frame sample)
• frame_obj.setSize ( WIDTH, HEIGHT)
• frame_obj.setVisible (true)
• endfun main
• //endclass Frame_sample

16
Pixel

• The size of graphical object on the screen is
  measured in pixels.
• A pixel is the smallest unit of space that can be
  displayed on the video screen.
• The total number of pixel on the screen defines
  the resolution of the screen.
• High-resolution screens have a larger number of
  pixels, and the pixels are much smaller.

17
Simple Components

• The simplest types of components are labels,
  which can display text titles and images.
• Text labels just display their text titles when
  they appear on a container of a window.
• A text label is defined as an object of class
  JLabel The following KJP statements declare two
  text labels
• JLabel blabel1 // text label
• JLabel blabel2

18
Creating Objects of Class JLabel

• When the objects of class JLabel are created,
  their text titles are defined. The following KJP
  statements create the two text objects and define
  their associated text titles.
• blabel1 new JLabel (
• "Kennesaw Java Preprocessor)
• blabel2 new JLabel (
• "The Language for OOP)

19
Image Labels

• Image labels display a picture by indicating the
  corresponding icon.
• In classes using Swing, a picture is set up into
  an icon in a label so that the classes can
  position the label in a container and display it.
  
• The pictures are normally in a standard format
  such as JPEG or GIF.
• A picture is defined as an icon, which is an
  object of class ImageIcon. The icon is then
  defined as part of the label.

20
Declaring and Creating Objects with Icons

• The following statements declare an object
  variable of class ImageIcon and an object of
  class JLabel.
• ImageIcon kjpimage // image
• JLabel kjplabel // for image
• kjpimage new ImageIcon(kjplogo2.gif)
• Finally, with the icon object created, it can be
  defined as part of a label. The following
  statement creates the label object with the icon
  defined in object variable kjpimage.
• kjplabel new JLabel (kjpimage)

21
Adding Components to a Window

• Components cannot be added directly to a window,
  which is an object of class JFrame.
• A special container called the content pane
  defines the working area for the window.
• All the graphical elements, (components) and
  smaller containers are added to the content pane.
  The content pane is an object of class Container.
• There are several ways to arrange graphical
  elements in the content pane. The type of
  arrangement is defined by the layout manager
  selected.

22
Layout Managers

• Border, which arranges the components in the
  north, east, west, center, and south positions in
  the container
• Flow, which arranges the components in the
  container from left to right
• Grid, which arranges the components in a matrix
  with row and column positions

23
Layout Managers (2)

• Box, which arranges the components in a single
  row or single column
• Card, which arranges the components in a similar
  manner as the stack of cards
• Gridbag, which arranges components in a similar
  manner as the grid but with variable size cells

24
Border Layout
25
import javax.swing. // Library for
graphics import java.awt. / Create and
display a frame window with an image and two text
labels. / public class KjpLogo /
This is the main function of the application.
/ public static void main
(String args) final static int WIDTH
400 final static int HEIGHT 300
26
JFrame frame_obj // window
Container cpane // content pane
JLabel blabel1 // text label
JLabel blabel2 ImageIcon kjpimage //
image JLabel kjplabel // for
image BorderLayout lmanager // layout manager
27
frame_obj new JFrame ("KJP logo)
blabel1 new JLabel ( "Kennesaw Java
Preprocessor) blabel2 new JLabel ("The
Language for OOP) kjpimage new
ImageIcon ("kjplogo2.gif) kjplabel new
JLabel (kjpimage) lmanager new
BorderLayout() cpane frame_obj.getContent
Pane() cpane.setLayout (lmanager)
// layout manager
28
// add the text image label and text label
components // to the content pane of the
window cpane.add (kjplabel,
BorderLayout.CENTER) cpane.add (blabel1,
BorderLayout.NORTH) cpane.add (blabel2,
BorderLayout.SOUTH) frame_obj.setSize
(WIDTH, HEIGHT) frame_obj.setVisible
(true) // end main // end class KjpLogo
29
A Frame with Three Components
30
Attributes of Frames

• Two attributes of frames that are used in the
  previous examples are title and size.
• The title was set with the constructor of class
  JFrame when creating a frame object. This
  attribute can be set at any time by invoking
  method setTitle with a string argument.
• For example, the following statement sets a title
  to the frame object declared with reference
  frame_obj in the previous example
• call setTitle of frame_obj using
• New Frame Title

31
Size

• The size of the frame object is normally set
  before displaying it on the screen.
• As mentioned before, the units for size are in
  pixels.
• The previous example used two named constants
  WIDTH and HEIGHT. This is the recommended manner
  to set the values for the size.
• The size is set by invoking method setSize with
  the values in pixels for width and height of the
  frame. For example, to set the size of the frame
  referenced by frame_obj, the statement is
• call setSize of frame_obj using WIDTH, HEIGHT

32
Color

• The third attribute of a frame is the color.
• This attribute is normally set to a container in
  the frame such as, the content pane of the frame
  or the panels defined and contained in the
  content pane. In other words, the color of any of
  these containers can directly be set.
• The most common method to invoke for a container
  is setBackground. The argument is normally a
  predefined constant in class Color, which is
  available in the AWT package.
• These constants represent various colors to apply
  as background color to the container.

33
Setting the Color

• To set the background color of a container in a
  frame object, method setBackground is invoked
  with the selected color. This method is defined
  in class JFrame.
• The following statement sets the background
  color to pink in frame frame_obj of the previous
  example.
• call setBackground of cpane using Color.pink

34
Events and Listeners

• An event is a special non-visible object that
  represents and an occurrence or signal. It
  indicates some occurrence in the interaction
  between the user and the executing program.
• Usually, the most important events are the ones
  originated by some user action. Examples are
• the click of the mouse,
• starting of mouse movement,
• a keystroke on the keyboard,
• and so on.

35
Listener

• A listener is an object that waits for a specific
  event to occur and that responds to the event in
  some manner.
• Each listener has a relationship with an event or
  with a group of similar events.
• Listener objects must be carefully designed to
  respond to its type of events.

36
Components and Events

• Buttons and text fields are examples of graphical
  components that generate events as a result of
  user actions.
• The listener object will respond when the user
  clicks on the button.

37
An Action Event
38
Action Event

• When a user clicks on a button, the type of event
  generated by the button is called action event.
• The figure illustrates the relationship among the
  button object, the action event, and the listener
  object.
• Creating the action event and invoking the
  appropriate function by the listener object to
  handle the event is done automatically.

39
Registering the Listener Object

• The action event generated by the button is sent
  to a corresponding listener object that responds
  to the event.
• The listener object must be set to respond to an
  event generated by the button object, this is
  known as registering the listener object with the
  button object.

40
Interaction Button - Listener

• The next figure shows the UML collaboration
  diagram for an object of class JButton and a
  listener object of class Bquithandler.
• The button object generates an action event that
  it sends to the listener object by invoking
  method actionPerformed.
• The interaction between these objects occurs
  automatically.

41
Button and Listener Object
42
Declare and Create a Button Object

• The following statement declares an object
  variable of class JButton.
• object mybutton of class JButton // kjp
• JButton mybutton // Java
• The button object is created with a title. The
  following statement creates the button object
  with title Push to Quit.
• create mybutton of class JButton using "Push
  to Quit"

43
Listener Object

• The listener object will respond when the user
  clicks the mouse on the button.
• The actual behavior of the listener object is
  defined in a class that has to be defined by the
  programmer.
• The following statements declare and create the
  listener object bhandler of class Bquithandler.
• object bhandler of class Bquithandler
• ...
• create bhandler of class Bquithandler

44
Registering the Listener Object

• The listener object has to be registered as the
  listener to the button object.
• The following statement invokes function
  addActionListener of the button to register its
  listener object, bhandler.
• addActionListener of mybutton using bhandler call
• Function addActionListener is defined in class
  JButton.

45
Adding the Button Object to Frame

• The button can now be added to the content pane
  of the window.
• The following statement adds the button defined
  before to the content pane and with the south
  position.
• call add of cpane using mybutton,
  BorderLayout.SOUTH
• The content pane uses the border layout manager
  in this example.

46
Class for Listener Object

• The class definition that implements the behavior
  of listener objects depends on the type of events
  that these objects can handle (or respond to).
• For action events, the class definition must
  implement interface ActionListener, which is
  included in package AWT.
• The only method specified in the interface is
  actionPerformed and it has to be completely
  implemented in the class defined for action
  listener objects.

47
Class for Listener

• import all javax.swing
• import all java.awt.event
• description
• This class defines the behavior of listener
• objects for the button. When the user clicks
• the mouse on the button, the program
  terminates.
• /
• class Bquithandler implements ActionListener is
• public
• description
• The only function in the class. /
• function actionPerformed parameters object
  myev of class ActionEvent is
• begin
• display Goodbye!
• call System.exit using 0
• endfun actionPerformed
• endclass Bquithandler

48
Data Input

• Instead of an object of class JButton, we can
  create an object of class JTextField.
• The following Java class example, lets the user
  type data into the text field

49
Java Class InputData

• import java.awt.
• import javax.swing.
• Class InputData
• public static void main (String args)
• JFrame myframe new JFrame(Input data)
• Container pane myframe.getContentPane()
• JTextField indata new JTextField(
• Edit data then press Enter)
• In_listener listener new In_listener()
• indata.addActionListener(listener)
• pane.add(indata)
• myframe.pack()
• myframe.show()

50
Java Class In_listener

• class In_listener implements ActionListener
• public void actionPerformed (ActionEvent e)
• JTextFiled myinput (JTextField)
  e.getSource()
• String mydata myinput.getText()
• System.out.println(mydata)
• // end method
• // end class
• If an integer value was expected
• int mynumber Integer.parseInt(mydata.trim())

51
Graphics

• A graphic object (of class Graphics) draws each
  pixel in a window
• Pixels are dots on the screen used to create
  graphic images
• Depending on the resolution, the screen has a
  large numbers of pixels (gt 786,432)
• We use a coordinate system to draw on the screen
• If g is of class Graphics, then to display a
  string
• g.drawString(Hello KSU!, 30, 40)

52
Drawing a Rectangle

• To draw a rectangle at some specified position on
  the screen, and at a specified size
• g.drawRect(50, 20, 100, 40)
• This draws a rectangle with the left top corner
  at position (50,20)
• The rectangle has size 100 pixels wide and 40
  pixels high

53
Coordinate Systems

• Each pixel can be identified using a
  two-dimensional coordinate system
• When referring to a pixel in a Java program, we
  use a coordinate system with the origin in the
  upper left corner

112
40
(112, 40)
54
Class for Display of Starburst

• import java.awt.
• import javax.swing.
• Class StarDisplay
• public static main (String, args)
• JFrame frame new JFrame(StarDisplay)
• Container pane frame.getContentPane()
• Starb star new Starb()
• pane.add(star)
• pane.pack()
• pane.show()

55
Class for Starburst

• import java.awt.
• import javax.swing.
• class Starb extends JComponent
• private static final int RADIUS 100
• public void paint (Graphics g)
• double x1, x2, y1, y2
• for (double angle 0 angle lt Math.PI
• angle angle Math.PI/16)
• x1 Math.cos(angle) RADIUS RADIUS
• y1 Math.sins(angle) RADIUS RADIUS
• x2 Math.cos(angle Math.PI RADIUS
  RADIUS
• x2 Math.sin(angle Math.PI RADIUS
  RADIUS
• g.drawLine( (int) x1, (int) y1, (int) x2, (int)
  y2)
• // end paint
• // end Starb

56
Java Applets

• A small application that runs with a Web browser
• Can be tested with the Java utility appletviewer.
  
• The applet is run from an HTML file

57
Applets

• A Java application is a stand-alone program with
  a main method (like the ones we've seen so far)
• An applet is a Java program that is intended to
  transported over the web and executed using a web
  browser
• An applet can also be executed using the
  appletviewer tool of the Java Software
  Development Kit
• An applet doesn't have a main method
• Instead, there are several special methods that
  serve specific purposes
• The paint method, for instance, is automatically
  executed and is used to draw the applets contents

58
Applets

• The paint method accepts a parameter that is an
  object of the Graphics class
• A Graphics object defines a graphics context on
  which we can draw shapes and text
• The Graphics class has several methods for
  drawing shapes
• The class that defines the applet extends the
  JApplet class
• This makes use of inheritance, an object-oriented
  concept.

59
Applets

• An applet is embedded into an HTML file using a
  tag that references the bytecode file of the
  applet class
• It is actually the bytecode version of the
  program that is transported across the web
• The applet is executed by a Java interpreter that
  is part of the browser

60
Source Java Code for an Applet
import java.applet. import java.awt. public
class Myapplet extends Applet public void
paint (Graphics mygraph)
mygraph.drawString (I am working in Java)
mygraph.drawRect(50, 50, 100, 30)
61
HTML file for the Applet
ltHTMLgt ltBODYgt ltAPPLET CODE Myapplet.class
WIDTH310 HEIGHT 200gt lt/APPLETgt lt/BODYgt lt/HTMLgt
62
Applets with GUIs

• Access the applet class
• Access the awt package -- The Abstract Windowing
  Toolkit
• import java.applet.
• import java.awt.
• These applets will normally need to declare and
  create GUI objects from the Awt or Swing packages
  

63
Placement of GUI Objects

• After creating the GUI objects, they are placed
  on the viewer window
• The default placing is left-to-right and
  top-to-bottom (the FlowLayout layout manager)

64
GreetingApplet

• This applet uses
• Two Label objects (prompt and greeting)
• One TextField object (inputLine)
• After declaring these objects, they need to be
  created, then they need to be associated with the
  applet by invoking the add method to make the
  objects visible.

65
Applet Example
Public GreetingApplet extends JApplet public
void init () Container pane
getContentPane() Label prompt new Label
(Type your name ) Label greeting new
Label() TextField inputLine new TextField
(20) // now make these objects visible
pane.add(prompt) pane.add(greeting)
pane.add(inputLine)
66
Drawing Shapes

• Let's explore some of the methods of the Graphics
  class that draw shapes in more detail
• A shape can be filled or unfilled, depending on
  which method is invoked
• The method parameters specify coordinates and
  sizes
• Java coordinate system has the origin in the
  upper left corner
• Many shapes with curves, like an oval, are drawn
  by specifying its bounding rectangle
• An arc can be thought of as a section of an oval

67
Drawing a Line
10
150
20
45
68
Drawing a Rectangle
50
20
page.drawRect (50, 20, 100, 40)
69
Drawing an Oval
175
20
bounding rectangle
page.drawOval (175, 20, 50, 80)
70
A Simple Applet
Import javax.swing. import java.awt. import
java.util.Calendar public class Myclass extends
JApplet ltFieldsgt ltMethodsgt
71
The Applet Methods

• Public void init()... invoked when the applet
  is loaded initially
• public void start()... invoked when entering
  the web page that contains the applet
• public void stop()... invoked when leaving the
  web page that contains the applet
• public void run()... run the applet, i.e., the
  main driver of the applet
• public void paint(Graphics g)... paint the
  picture

72
The Life-Cycle of Applet
73
HTML Source
lt!--AppletDemo.html--gt lthtmlgt ltheadgt
lttitlegtTesting Appletlt/titlegt lt/headgt ltbody
bgcolorwhitegt lth1gtThe Good Appletlt/h1gtltpgt ltapplet
codeDigitalClock.class width250
height80gt lt/appletgt ltpgtlthrgt lta
hrefMyapplet.javagtThe sourcelt/agt lt/bodygt lt/htmlgt
74
Representing Color

• A black and white picture can be stored using one
  bit per pixel (0 white and 1 black)
• A color picture requires more information, and
  there are several techniques for representing a
  particular color
• For example, every color can be represented as a
  mixture of the three primary colors Red, Green,
  and Blue
• In Java, each color is represented by three
  numbers between 0 and 255 that are collectively
  called an RGB value

75
The Color Class

• A color is defined in a Java program using an
  object created from the Color class
• The Color class also contains several static
  predefined colors
• Every graphics context has a current foreground
  color
• Every drawing surface has a background color

76
The java.awt.Color Class

• Instances of the Color class represent colors.
• new Color(r, g, b)
• where r, g, b are the values of the red, green,
  and blue components, respectively. They are
  in the in the range of 0 to 255.
• Some common colors are predefined as constants.
• black gray orange yellow
• blue green pink
• cyan lightGray red
• darkGray magenta white

77
The java.awt.Font Class

• Fonts are specified with three attributes
• font name Serif Sans-serif Monospaced Dialog
  DialogInput TimesRoman Helvetica Courier
  Dialog
• font style PLAIN BOLD ITALIC
• Styles can be combined Font.BOLDFont.ITALIC
• font size a positive integer
• A font can be created as follows
• new Font(name, style, size)