oop&m - laboratory lectures1 “… and the little computer knew then that computers would...
Post on 21-Dec-2015
215 views
TRANSCRIPT
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
OOP&M - laboratory lectures 3
JPN – the e-volution
1001100010110011100110
01001111100
load reg;nop;add x;jmp $009;
time
OOP&M - laboratory lectures 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
OOP&M - laboratory lectures 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
OOP&M - laboratory lectures 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 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
OOP&M - laboratory lectures 7
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
OOP&M - laboratory lectures 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
OOP&M - laboratory lectures 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 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!!
OOP&M - laboratory lectures 10
JPN – GUI and Applet – monitor
The output on an Applet
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]
OOP&M - laboratory lectures 11
JPN – GUI and Applet – monitor
The output on an Applet
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
OOP&M - laboratory lectures 12
JPN – GUI and Applet – monitor
The output on an Applet
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
OOP&M - laboratory lectures 13
JPN – GUI and Applet – monitor
The output on an Applet
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>
OOP&M - laboratory lectures 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.
OOP&M - laboratory lectures 15
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!!
OOP&M - laboratory lectures 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
OOP&M - laboratory lectures 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);
OOP&M - laboratory lectures 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); }}
OOP&M - laboratory lectures 19
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
OOP&M - laboratory lectures 20
JPN – the GUI – the problem appears•Decomposition of the button:
PRESS MEPRESS ME
PRESS MEPRESS ME
OOP&M - laboratory lectures 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
OOP&M - laboratory lectures 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
OOP&M - laboratory lectures 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”);
OOP&M - laboratory lectures 24
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);