1 / 50

Introduction to Java Applets: Concepts and Interactive Programming Techniques

This workshop, led by Gary McClelland at UC Fullerton from August 10-13, 2003, focuses on Java applets and their applications in experiments. Participants will learn what Java is, the principles of Object-Oriented Programming, and how to create simple applets like "Hello World." The workshop covers graphics drawing, event handling, and the difference between Java and JavaScript. Attendees will gain practical experience with Java development, using integrated development environments, and understanding object-oriented concepts through hands-on code examples.

latoya
Télécharger la présentation

Introduction to Java Applets: Concepts and Interactive Programming Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Java Applets for Experiments NSF Workshop, UC-Fullerton Gary McClelland 10-13 August 2003

  2. 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

  3. Java ≠ Javascript • Javascript • HTML scripting language • Forms • Interpreted • Java • Applets embedded in HTML page • Standalone applications • Complete programming language • Compiled

  4. Java’s Goods & Bads • Strengths • Graphics • Interactivity (mouse, keys, scrollbars) • Precise control • Weaknesses • Timing at the ms level (some debate) • Learning curve

  5. 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

  6. Integrated Development Environment (IDE): JBuilder • Editor • Syntax checking • Command completion • Automatic compilation • HTML Viewer • Switch form editor to browser view

  7. <html> <body> <applet code=“Hello.class” width=“300” height=“300”> </applet> </body> </html>

  8. Object-Oriented Programming (OOP) • Objects • State Variables • Behavior Methods • Car • State: running, speed, location • Behavior: brake, accelerate, changeGear, start, stop

  9. Java class: object blueprint • Class variables • Constructor (object “factory”) • Methods (subroutine definitions)

  10. Inheritance

  11. Interface • Car • Brake pedal • Gas pedal • Steering wheel • Turn signal lever • MouseMotionListener • public void mouseMoved(MouseEvent me) • public void mouseDragged(MouseEvent me)

  12. Encapsulation • Car • How brakes and engine work can be a mystery • Java Object • private methods • We don’t need to know how they work

  13. 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

  14. Card Object As Loaded After Click add(new Card(“front”,Color.blue,“reverse”, Color.red, 14));

  15. 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(); }

  16. 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(); }

  17. Diagnosis Task with 400 Cards

  18. Diagnosis Task after Sampling

  19. 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; } }

  20. 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(); }

  21. Your Turn! • Your first applet • “Hello World”

  22. 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

  23. <html> <body> <applet code=“Hello.class” width=“300” height=“300”> </applet> </body> </html>

  24. <html> <body> <applet code=“Hello.class” width=“300” height=“300”> </applet> </body> </html> Save as Hello.html

  25. import java.awt.Applet; public class Hello extends Applet { public void init() { repaint(); } public void paint(Graphics g) { g.drawString(“Hello World!”,30,30); } }

  26. 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

  27. 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

  28. 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

  29. Graphics Object g (0,0) (x,y) (width,height)

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

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

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

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

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

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

  36. 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();

  37. Control Structures if (logical statement) { } else { } for(int i=1; i<=n; i++) { }

  38. Widgets • Button • Scrollbar • TextField • ChoiceList • Menu • Checkbox

  39. MouseListener • Object implements an interface • public class MouseDemo extends Applet implements MouseListener { • Object registers to listen for events • addMouseListener(this);

  40. MouseListener Methods • Object must have these methods • public void mouseClicked(MouseEvent me) • public void mousePressed(MouseEvent me) • public void mouseReleased(MouseEvent me) • public void mouseEntered(MouseEvent me) • public void mouseExited(MouseEvent me)

  41. MouseEvent methods • getX() • getY() • getPoint() • getWhen()

  42. 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());

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

  44. Remainder of recordData() t.close(); //close Socket to server } catch(IOException e) {System.out.println("Error" + e); } } }

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

  46. Object-Oriented Javascript • Properties • ;ocation • name • value • opener • Methods • open() • close() • write() • submit() • Objects • Window • Document • Frame • Form • RadioButton • Link • URL

  47. 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]

  48. 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

  49. 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

  50. StoryMaker continued • storyInfo (form, continued) • color (Select menu) • Length • value • selectedIndex • options[0] (“Red”) • options[1] (“Green”) • …… • options[4] (“Blanced Almond”)

More Related