Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download as PowerPoint
Document related concepts
no text concepts found
Transcript
Java Applets for
Experiments
NSF Workshop, UC-Fullerton
Gary McClelland
10-13 August 2003
Java Workshop Outline
Java, what it is and isn’t
Object-Oriented Programming (OOP)
First applet: HelloWorld
Graphics drawing
Listening for events
mouse, keys, Buttons, Scrollbars
Java ≠ Javascript
Javascript
HTML scripting language
Forms
Interpreted
Java
Applets embedded in HTML page
Standalone applications
Complete programming language
Compiled
Java’s Goods & Bads
Strengths
Graphics
Interactivity (mouse, keys, scrollbars)
Precise control
Weaknesses
Timing at the ms level (some debate)
Learning curve
History of an Applet
Edit java source code & html
notepad Hello.java
notepad Hello.html
Compile source to ByteCodes
javac Hello.java
produces Hello.class
View applet (Java Virtual Machine)
appletviewer Hello.html
browser Hello.html
Integrated Development
Environment (IDE): JBuilder
Editor
Syntax checking
Command completion
Automatic compilation
HTML Viewer
Switch form editor to browser view
<html>
<body>
<applet code=“Hello.class”
width=“300” height=“300”>
</applet>
</body>
</html>
Object-Oriented
Programming (OOP)
Objects
State
Behavior
Car
Variables
Methods
State: running, speed, location
Behavior: brake, accelerate, changeGear,
start, stop
Java class: object blueprint
Class variables
Constructor (object “factory”)
Methods (subroutine definitions)
Inheritance
Car
Sedan
Blue
Convertible
Red
SUV
4-Wheel Drive
SoccerVan
Interface
Car
Brake pedal
Gas pedal
Steering wheel
Turn signal lever
MouseMotionListener
public void mouseMoved(MouseEvent me)
public void mouseDragged(MouseEvent me)
Encapsulation
Car
How brakes and engine work can be a
mystery
Java Object
private methods
We don’t need to know how they work
Card Constructor
Card(String s1, Color c1, String s2,
Color c2, int fontSize)
s1: text on “front” of card
c1: color on “front” of card
s2: text on “reverse” of card after click
c2: color on “reverse” of card after click
fontSize: size of font for both Strings
Card Object
As Loaded
After Click
add(new Card(“front”,Color.blue,“reverse”,
Color.red, 14));
Using Card in Wason Task
public void init() {
setLayout(new GridLayout(1,4,20,0));
add(new Card("E",Color.white,"E",Color.yellow,24));
add(new Card("K",Color.white,"K",Color.yellow,24));
add(new Card("4",Color.white,"4",Color.yellow,24));
add(new Card("5",Color.white,"5",Color.yellow,24));
repaint();
}
Wason Task with Feedback
public void init() {
setLayout(new GridLayout(1,4,20,0));
add(new Card("E",Color.white,"E",Color.green,24));
add(new Card("K",Color.white,"K",Color.red,24));
add(new Card("4",Color.white,"4",Color.red,24));
add(new Card("5",Color.white,"5",Color.green,24));
repaint();
}
Diagnosis Task
with 400 Cards
Diagnosis Task
after Sampling
Diagnosis Code
public void init() {
int rows = 20;
int cols = 20;
int n = rows * cols;
int pos = (38*n)/100; //38% of tests are positive
int neg = n - pos;
setLayout(new GridLayout(rows,cols,5,5));
int cpos = (80*pos)/100; //80% of pos are true pos
int cneg = pos - cpos;
for(int i=1; i<=pos; i++) {
if(Math.random() < (double)cpos/(double)(cpos+cneg)) {
add(new Card("M+",Color.yellow,"C+",Color.red,12));
cpos = cpos - 1; }
else {
add(new Card("M+",Color.yellow,"C-",Color.green,12));
cneg = cneg - 1; }
}
Diagnosis Code, Part 2
cpos = (20*pos)/100; //20% of negs are false pos
cneg = neg - cpos;
for(int i=pos+1; i<=n; i++) {
if(Math.random() < (double)cpos/(double)(cpos+cneg)) {
add(new Card("M-",Color.white,"C+",Color.red,12));
cpos = cpos - 1;
}
else {
add(new Card("M-",Color.white,"C-",Color.green,12));
cneg = cneg - 1;
}
}
repaint();
}
Your Turn!
Your first applet
“Hello World”
History of an Applet
Edit java source code & html
notepad Hello.java
notepad Hello.html
Compile source to ByteCodes
javac Hello.java
produces Hello.class
View applet (Java Virtual Machine)
appletviewer Hello.html
browser Hello.html
<html>
<body>
<applet code=“Hello.class”
width=“300” height=“300”>
</applet>
</body>
</html>
<html>
<body>
<applet code=“Hello.class”
width=“300” height=“300”>
</applet>
</body>
</html>
Save as Hello.html
import java.awt.Applet;
public class Hello extends Applet {
public void init() {
repaint();
}
public void paint(Graphics g) {
g.drawString(“Hello World!”,30,30);
}
}
import java.awt.Applet;
public class Hello extends Applet {
public void init() {
repaint();
}
public void paint(Graphics g) {
g.drawString(“Hello World!”,30,30);
}
}
Save as Hello.java
History of an Applet
Edit java source code & html
notepad Hello.java
notepad Hello.html
Compile source to ByteCodes
javac Hello.java
produces Hello.class
View applet (Java Virtual Machine)
appletviewer Hello.html
browser Hello.html
History of an Applet
Edit java source code & html
notepad Hello.java
notepad Hello.html
Compile source to ByteCodes
javac Hello.java
produces Hello.class
View applet (Java Virtual Machine)
appletviewer Hello.html
browser Hello.html
Graphics Object g
(0,0)
(x,y)
(width,height)
Graphics Methods: Size
getSize().width;
int wd = getSize().width;
getSize().height;
int ht = getSize().height;
g.drawRect(0,0,wd,ht);
draws largest possible rectangle
g.drawString(“Center”,wd/2, ht/2);
Graphics Methods: Shapes
g.drawRect(x,y,w,h);
g.fillRect(x,y,w,h);
g.drawOval(x,y,w,h);
g.fillOval(x,y,w,h);
g.drawLine(x1,y1,x2,y2);
Graphics: More Shapes
g.drawPolygon(xPts,yPts,nPts);
g.fillPolygon(xPts,yPts,nPts);
g.drawArc(x,y,w,h,startAngle,endAngle);
g.fillArc(x,y,w,h,startAngle,endAngle);
Graphics Methods: Colors
g.setColor(Color.black);
Color.red, Color.blue, Color.green, Color.orange,
Color.magenta, others…
g.setColor(new Color(r, g, b));
0 ≤ r ≤ 255
0 ≤ g ≤ 255
0 ≤ b ≤ 255
setBackground(Color.yellow);
Graphics Methods: Fonts
g.setFont(new Font(font, style, size));
Fonts: “Helvetica” “Courier” “Times”
Style: Font.PLAIN, Font.BOLD,
Font.ITALIC
Size: any integer
g.drawString(string, x, y);
FontMetrics
FontMetrics fm;
fm=getFontMetrics(getFont());
int len = fm.stringWidth(“Center”);
int fht = fm.getHeight();
g.drawString(“Center”, wd/2-len/2,
ht/2+fht/2);
Arrays
int x[] = new int[3];
Note: arrays start at 0
Above creates x[0], x[1], x[2]
double y[] = new double[5];
Card cards[][];
cards = new Card[20][10];
cards[2][3] = new Card();
Control Structures
if (logical statement) {
}
else {
}
for(int i=1; i<=n; i++) {
}
Widgets
Button
Scrollbar
TextField
ChoiceList
Menu
Checkbox
MouseListener
Object implements an interface
public class MouseDemo extends Applet
implements MouseListener {
Object registers to listen for events
addMouseListener(this);
MouseListener Methods
Object must have these methods
public void
public void
public void
me)
public void
public void
mouseClicked(MouseEvent me)
mousePressed(MouseEvent me)
mouseReleased(MouseEvent
mouseEntered(MouseEvent me)
mouseExited(MouseEvent me)
MouseEvent methods
getX()
getY()
getPoint()
getWhen()
Saving Data via cgi
//send data to server
//data saved locally in
String dataString;
public void recordData() {try
{
Socket t =
new Socket("samiam.colorado.edu",80);
DataOutputStream out = new
DataOutputStream(t.getOutputStream());
Constructing (Faking) POST
out.writeBytes(
"POST "+
"http://www.myuni.edu/scripts/saveData.cgi"
+ " HTTP/1.0\r\n");
out.writeBytes(
"Content-type: application/octet-stream\r\n");
out.writeBytes(
"Content-length: " + dataString.length() +
"\r\n\r\n");
out.writeBytes(dataString);
Remainder of recordData()
t.close(); //close Socket to server
}
catch(IOException e)
{System.out.println("Error" + e); }
}
}
recordData() complete
public void recordData() { //send data to server
try {
Socket t = new Socket(”www.myuni.edu",80);
DataOutputStream out = new
DataOutputStream(t.getOutputStream());
out.writeBytes(
"POST "+
"http://www.myuni.edu/scripts/saveData.cgi"+
" HTTP/1.0\r\n");
out.writeBytes("Content-type: application/octet-stream\r\n");
out.writeBytes(
"Content-length: " + dataString.length() + "\r\n\r\n");
out.writeBytes(dataString);
t.close();
}
catch(IOException e) {System.out.println("Error" + e); }
}
}
Object-Oriented Javascript
Objects
Window
Document
Frame
Form
RadioButton
Link
URL
Properties
;ocation
name
value
opener
Methods
open()
close()
write()
submit()
Object Syntax
object.property
car.speed
[= 30 mph]
window.location
[current URL]
object.method()
car.accelerate(40) [speed up to 40 mph]
window.close()
[close this window]
StoryMaker Illustrates:
Constructing web pages on the fly
Invisible to search engines
Control experiment flow
(e.g., no back button)
Pop-up windows
Dialog boxes
Hints
Instructions
Tree of “StoryMaker”
document
writeStory (function)
storyInfo (form)
nn (textbox for name)
value
birth (textbox for birth place)
value
Sex[0] (radio button for male)
checked
Sex[1] (radio button for female)
checked
StoryMaker continued
storyInfo (form, continued)
color (Select menu)
Length
value
selectedIndex
options[0] (“Red”)
options[1] (“Green”)
……
options[4] (“Blanced Almond”)
Related documents