OOP&M - laboratory lectures1 “… and the little computer knew then that computers would always grow wiser and more powerful …” - Isaac Asimov - JPN – GUI

OOP&M - laboratory lectures 1

“…and the little computer knew then that computers would always grow wiser and more powerful …”

- Isaac Asimov -

JPN – GUI and Applet


JPN – GUI and Applet

JPN: GUI and Applet


JPN – the e-volution

1001100010110011100110

01001111100

load reg;nop;add x;jmp $009;

time


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


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


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 don’t 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


JPN – GUI and Applet – program types

Application

Applet

Program

DOS application

Windows application

•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


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


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 browserYou 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!!




80 columns

25 r

ow

s

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 don’t 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]




640 pixels

480

pix

els

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




But, we haven’t spoken yet about the way in which we must declare the applet for being understood by the browser.

HTML includes one TAG called <APPLET> 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 <APPLET> TAG




The minimum HTML file would be:

<HTML><HEAD><TITLE>First text applet</TITLE></HEAD><BODY><HR><APPLET CODE="textapplet.class" WIDTH="300“ HEIGHT="300"> </APPLET><HR></BODY></HTML>


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.


JPN – the GUI – some methods from AWT

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("10:00 |wake up |faith ", 30, 60); g.drawString("10:05 |shower |soap ", 30, 75); g.drawString("10:25 |breakfast |milk, juice, eggs, jam ... ", 30, 90); g.drawString("11:00 |university |pants, T-shirt, books? ", 30, 105); }}

•Look this applet!!

•There appears the problem of the alignment of the last column of the table

•AWT provides us some tools for solving this!!


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


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);


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); }}


JPN – the GUI – the problem appears•Imagine a button:

PRESS MEPRESS ME

•Can you decompose it into different graphical components?

•DO YOU THINK YOU CAN?

•ARE YOU SURE? you have 5 minutes


JPN – the GUI – the problem appears•Decomposition of the button:

PRESS MEPRESS ME

PRESS MEPRESS ME


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


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


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”);


JPN – the GUI – a place to pressNow 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);




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); }}

Documents

OOP&M - laboratory lectures1 “… and the little computer knew then that computers would always grow wiser and more powerful …” - Isaac Asimov - JPN – GUI