1
JPN GUI and Applet
and the little computer knew then that
computers would always grow wiser and more
powerful - Isaac Asimov -
2
JPN GUI and Applet
JPN GUI and Applet
3
JPN the e-volution
100110 00101100 11100110 010011 11100
time
4
JPN the e-volution a definition

• The evolution of the electronics has leaded us to
  a moment in which the interaction between
  computers and humans is made by the use of a 2
  dimensional interface
• Because the control of the electronic equipment
  is quite complex, engineers have developed
  programs that use a reduced set of interaction
  possibilities in order to allow creators an easy
  way of work
• The GRAPHICAL USER INTERFACE (GUI from now)
  defines the use of interfaces which include some
  of that interaction methods
• Buttons, menus, scrollable windows and graphical
  drawings are used to communicate with the users

5
JPN the GUI an approach

• The are different ways of attacking the problem
  of designing a user interface
• One is directly related to the Internet
• As you know, HTML has got only some very basic
  features for the communication to users it is
  one-directional it goes from the server to the
  screen of the user, but, by itself, cannot
  capture any user actions
• As we have seen in the description of a browser,
  HTML interpreters can call to other programs that
  execute external code, as JAVA, improving the
  communication
• An approach to the GUI design is to program
  applets

6
JPN the GUI an approach with applets

• An applet is a Java program embedded in a web
  page. It is not only a way of providing a way of
  getting information form the user, because it is
  capable of compute something as well
• Applets use the GUI facilities that are provided
  with Java. These are NOT a part of the language
  proper they belong to a package of predefined
  classes known as the abstract window toolkit
  (AWT)
• Applets are defined in another package, called
  the applet package and, for that reason they
  dont have a main() declaration, it is a part of
  the class
• Applets can have a declaration called init()
  instead, which will contain special variable
  declarations and other stuff that should
  declared only once

7
JPN GUI and Applet program types
DOS application Windows application
Application Applet
Program

• When we want to implement one algorithm in Java,
  we have three different possibilities, as shown
  in the figure
• Applications are executed directly by the Java
  Virtual Machine that resides in our computer. If
  the output is shown under the command window it
  will be a DOS app. If it uses a graphical window,
  it will be a Windows app.
• Applets are executed by the JVM but using one
  browser as interface. This allows us to include
  applets in our Web Sites

8
JPN GUI and Applet program types

• Each one of this different programs has got a
  different user interface and will be used in
  different environments
• During the development phase, it is common to
  check the kernel of the program with a DOS
  application. So we can see if the functionality
  of the algorithm is the proper one
• Non-user-oriented programs run in OS applications
  (in our case we use DOS, which is a type of OS),
  because they do not need user interface
• Internet oriented programs are executed in the
  form of applets, in our browsers
• Java is a programming language like C or Pascal
  it is used for many other applications, than only
  Internet programming. In many cases we just need
  applications with nice user interfaces

9
JPN GUI and Applet monitor
The output on an Applet
Applets are just a way of showing the results of
Java programs in the platform most used today an
internet browser You have been working, for sure,
with the so-called command window. This window
has got the property of being divided into rows
and columns. It is a matrix of approximately 80
columns and 25 rows. The command window works in
Text mode, but the user interface of the
applets work in graphic mode. This means that
applets use the maximum representation capability
of our monitor!!
10
JPN GUI and Applet monitor
The output on an Applet

• Monitor in text mode
• When we send information to it we need to use
  commands like println or print
• After the end of one line, the system writes
  automatically onto the next one
• Therefore we dont need to write in the program
  the position of the information on the screen
• The position of a character is given by a pair
  row, column

25 rows
80 columns
11
JPN GUI and Applet monitor
The output on an Applet

• Monitor in graphic mode
• When we send information to it we need to use
  commands that include the position
• Each part of the text can be written separately
• The position of a character is given by a pair
  row, column
• The information can be mixed up on the user
  interface surface

480 pixels
640 pixels
12
JPN GUI and Applet monitor
The output on an Applet
But, we havent spoken yet about the way in which
we must declare the applet for being understood
by the browser. HTML includes one TAG called
ltAPPLETgt where it is possible to declare the use
of one of these programs. This means that we need
two files
the applet itself, compiled into a CLASS file
a HTML file with a ltAPPLETgt TAG
13
JPN GUI and Applet monitor
The output on an Applet
The minimum HTML file would be ltHTMLgt ltHEADgt ltTI
TLEgtFirst text appletlt/TITLEgt lt/HEADgt ltBODYgt ltHRgt
ltAPPLET CODE"textapplet.class" WIDTH"300
HEIGHT"300"gt lt/APPLETgt ltHRgt lt/BODYgt lt/HTMLgt
14
JPN the GUI some methods from AWT

• We already know one method contained into the AWT
  package
• Today we have seen the use of drawString in order
  to show some text on the screen
• In the AWT there are methods that can be used to
  define Graphics objects
• On of those objects models the drawing behavior
  of a portion of a computer screen that is, it
  will respond to messages requesting that
  rectangles be drawn, background colors be set,
  current font information be returned, etc.

15
JPN the GUI some methods from AWT

• Look this applet!!

import java.applet. import java.awt. public
class textapplet extends Applet public void
paint(Graphics g) g.drawString("Time
To Do Needings", 30, 30)
g.drawString("------------------------------------
--------- ", 30, 45) g.drawString("1000
wake up faith ", 30, 60)
g.drawString("1005 shower soap ", 30,
75) g.drawString("1025 breakfast
milk, juice, eggs, jam ... ", 30, 90)
g.drawString("1100 university pants,
T-shirt, books? ", 30, 105)

• There appears the problem of the alignment of the
  last column of the table
• AWT provides us some tools for solving this!!

16
JPN the GUI some methods from AWT

• AWT provides a Color and a Font class that enable
  the programmer to define and use new colors and
  fonts
• Colors are described using three integers that
  specify the amount of RGB in a scale of 0..255
  each
• Fonts are specified by naming a font family
  (expressed as a String TimesRoman or
  Helvetica, e.g.), a font style (Font.PLAIN,
  Font.BOLD or Font.ITALIC) and a number specifying
  point size (12 is typical)
• To change one of this features we need to first
  create an object and send a message to the
  Graphics object before drawing the text

17
JPN the GUI some methods from AWT

• Change the Color
• Color c
• c new Color(180,10,120)
• g.setColor(c)
• g.drawString("Time ", 30, 30)
• Change the Font
• Font f
• f new Font(Helvetica, Font.BOLD, 14)
• g.setFont(f)
• g.drawString("Time ", 30, 30)

18
JPN the GUI some methods from AWT

• Besides drawing strings and setting font and
  color, Graphics provides the following simple
  geometric object drawing methods
• fillOval draws an oval on the screen filled up
  with color
• fillRect draws a rectangle filled up with color
• drawOval draws an oval
• drawRect draws a rectangle
• drawLine draws a line
• An example would be
• import java.awt.
• import java.applet.
• public class DrawOval extends Applet
• public void paint(Graphics g)
• Color c new Color(20,120,160)
• g.setColor(c)
• g.fillOval(20,20,60,30)

19
JPN the GUI the problem appears

• Imagine a button

• Can you decompose it into different graphical
  components?
• DO YOU THINK YOU CAN?
• ARE YOU SURE? ? you have 5 minutes

20
JPN the GUI the problem appears

• Decomposition of the button

PRESS ME
PRESS ME
21
JPN the GUI the problem appears

• The common Interaction tools that we use for the
  interaction with computers are VERY COMPLICATED
  to be implemented each time that we need them
• Buttons, menu-bars, scroll controls, text boxes,
  radio buttons are predefined and ready to use
  in the AWT package so that we do not need to
  create them ourselves

22
JPN the GUI Applets are alive
Before we start to draw buttons on the screen, we
need to learn a little bit more about the life
cycle of applets
When an applet is first loaded into the browser,
the browser invokes its init() method
Each time that we make a change on the screen or
that we move the window the Applet class
invokes again all the methods contained into the
applet
But the init() method is called only once. Its
intended role is to do the initial setup for the
applet
23
JPN the GUI a place to press
Java AWT provides a predefined class for modeling
buttons, called Button
the constructor for Button accepts the text in it
(a String reference) as its argument
new Button (string)
An example of this would be
Button b b new Button(touch Bjorn)
24
JPN the GUI a place to press

• Now we have created the object button, but we
  must also accomplish the following
• Buttons should appear in the applet
• The applet should be able to respond to clicks in
  the buttons

Java AWT provides a predefined method that
handles both problems add()
The complete code would be
Button b b new Button(touch Bjorn) add(b)
25
JPN GUI and Applet monitor
The output on an Applet
The minimum Applet would be import
java.applet. import java.awt. public class
textapplet extends Applet public void
paint(Graphics g) g.drawString("Bjorn
cooks, Lisa cleans", 30, 30)