1. Java Graphics Chris North cs3724: HCI

2. Presentations peter hou Vote: UI Hall of Fame/Shame?

3. Project 1 ideas Direct Manipulation: Timeline for scheduling, set on/off flags Calendar shows overview of schedule (info vis!) Shneiderman experiment: timelines beat clock and numeric See book section 6.6

4. Review Layout managers Events Listener: interface, abstract base class Adapter: implements methods, stubs Object-oriented techniques for GUI programs: extends: inheritance, specialize a swing component Implements: listeners Anonymous classes, inner classes: listeners

5. Graphics in Java Draw in container: JPanel Build tree of nested panels to organize UI Subclass JPanel Override paintComponent( ) method Call repaint( ) to force redraw JPanel JFrame JPanel JButton

6. Code public class MyPanel extends JPanel { public void paintComponent(Graphics g){ super.paintComponent(g); // erases background Graphics2D g2 = (Graphics2D)g; //cast for java2 // my graphics: g2.setColor(new Color(255,0,0)); g2.fillRect(10,10,200,200); g2.setColor(new Color(0,0,0)); g2.drawString("Hello World", 10, 100); }

7. Basic Graphics Java.awt.Graphics Java.awt.Graphics2D http://java.sun.com/j2se/1.3/docs/api/index.html Basic shapes: g2.drawLine(),.drawRect(), … g2.fillRect(), … Color and fonts: g2.setColor(),.setFont() new Color(R,G,B) Line and Fill style: g2.setStroke(),.setPaint()

8. Advanced Shapes Java.awt.geom.* Creating shapes: Line2D, Rect2D, …, GeneralPath, … g2.draw(shape),.fill(shape)

9. In JBuilder Subclassing JPanel Overriding paintComponent( ) Using subclassed JPanel in a JFrame

10. Double Buffering Ugly flashing when repaint Paint background Redraw shapes Solution: Double buffering Draw all graphics in off-screen image Then paint image to JPanel Swing does this for you! Draw graphics on JPanel JPanel maintains off-screen image image panel

11. Problem Dynamic moving shapes over other graphics Examples: MacDraw, powerpoint Solutions: Minimize repaint rect: mypanel.repaint(rect) Modified double buffering: maintain buffer for background graphics XOR: draws by inverting pixel colors, drawing with XOR twice returns to original look, g2.setXORMode( )

12. Next Proj 2: design due today Spring break!!!! Presentations: UI critique or HW2 results Next Tues: pat kennedy, james walker Next Thurs: dan kirkpatrick, jason barnett