Lab Object: Introduction to the use of Graphics, ArrayList และ Iterator

เราต้องการสร้างโปรแกรมที่ทำงานเหมือนกับ screensaver ดังนี้ โดยเมื่อเริ่มโปรแกรม ให้สุ่มวาดสี่เหลี่ยม (สุ่มสีและขนาดด้วย)ดังรูป

เมื่อเวลาผ่านไป สี่เหลี่ยมอื่นๆจะถูกวาดทับลงมาเรื่อยๆ ดังรูป

เมื่อกด clear จะเห็นว่าสี่เหลี่ยมทุกอันที่เคยถูกวาดจะหายไปหมด แล้วโปรแกรมก็เริ่มสุ่มวาดสี่เหลี่ยมใหม่ตั้งแต่ต้น

โอเค เรามาดูสรุปการทำงานของโค้ดโดยรวม ก่อนที่จะไปเขียนคลาสทีละคลาสกัน การทำงานของโปรแกรมโดยรวมเป็นดังนี้

เมื่อรันโปรแกรม
    ให้เริ่มจับเวลา ใช้ Timer ได้

เมื่อ timer ติ๊ก (ทุก 0.25 วินาที)
    ให้สุ่มค่า x, y, width, height ของสี่เหลี่ยมที่จะวาดบนจอ
    สุ่มเลือกสี
    สร้างสี่เหลี่ยมขึ้นมาด้วยค่าที่สุ่มข้างต้น
    เอาสี่เหลี่ยมที่สร้างขึ้นใหม่นี้ ใส่ ArrayList // ArrayList คือ อาร์เรย์สำหรับใส่ object
    //ที่ขยายขนาดได้เองโดยอัตโนมัติ
    สั่ง repaint ตัว JPanel ที่เราจะวาดสี่เหลี่ยมลงไปนี้ // การรีเพ้นท์ คือการเคลียร์จอ แล้วเรียกเมธอด
//paintComponent

เมื่อ paintComponent ถูกเรียกใช้
    สร้าง Iterator สำหรับ ArrayList // Iterator คือ ออบเจ็กต์ที่ "จ้อง" ไปยังตำแหน่งใดตำแหน่งหนึ่งในลิสต์ ตัว
// Iterator นั้นมีเมธอดหลายๆอันสำหรับ เปลี่ยนจุดจ้อง
// หรือเลื่อนไปมองจุดอื่นในลิสต์ เช่นเมธอด hasNext() จะบอกเราได้ว่า
//ตำแหน่งถัดไปในลิสต์นั้นมีหรือไม่ ส่วนเมธอด next()
//นั้นก็จะรีเทิร์นของในตำแหน่งถัดไปในลิสต์ออกมา (โดยที่ตำแหน่งที่ "จ้อง"
//ก็จะย้ายไปเป็นตำแหน่งถัดไปในลิสต์นั้นด้วย)
    ใช้ Iterator ช่วยในการวนลูปดูทุกสี่เหลี่ยมใน ArrayList และทำการวาดแต่ละสี่เหลี่ยมออกมา

เมื่อกดปุ่ม clear
    เคลียร์ของที่อยู่ใน ArrayList ทั้งหมด
    สั่ง repaint() ตัว JPanel ที่เราใช้วาด

สิ่งที่ต้องทำ อย่างแรกคือ สร้างคลาส MyRectangle

สร้างคลาส MyRectangle ซึ่ง extends มาจาก Rectangle ใน java.awt ต้องสร้างให้มีข้อมูล x, y, width, height และ color ให้ครบ ไปดู Rectangle ว่ามีอะไรแล้วบ้าง จะได้ไม่ต้องมานิยามซ้ำ
สร้างคอนสตรัคเตอร์ที่รับพารามิเตอร์ห้าตัว เพื่อเซ็ตค่า x, y, width, height และ color
สร้าง set และ get สำหรับพารามิเตอร์ที่ยังไม่มี set และ get
สร้างเมธอด draw ดังนี้

   public void draw( Graphics g )
   {
      g.setColor( fillColor ); //เซ็ตสีที่จะใช้
      g.fillRect( x, y, width, height ); // วาดสี่เหลี่ยม x, y นับจากด้านซ้ายบนของตัววินโดว์ที่เราไปวาด

   } // end method draw

ต่อไป สร้างคลาส DrawJPanel ซึ่งเป็น JPanel ที่เราจะเอาไว้วาดสี่เหลี่ยม โครงอยู่นี่

สร้าง DrawJPanel ให้มีตัวแปรตามนี้

// Random object to create random numbers
   private Random randomNumber = new Random(); //ไปค้นเมธอดของคลาสนี้ซะ

   // Timer object to generate events
   private Timer drawTimer;

   // ArrayList object to hold MyRectangle objects
   private ArrayList rectangleArrayList = new ArrayList(); //ไปค้นเมธอดซะ จะได้รู้วิธีใช้

   // array of possible MyRectangle colors
   private Color[] colors = { Color.BLUE, Color.ORANGE, Color.PINK,
      Color.CYAN, Color.MAGENTA, Color.YELLOW, Color.BLACK,
      Color.WHITE, Color.RED, Color.GREEN };

้้้่้้้้

สร้าง Constructor ของ DrawJPanel โดยเซ็ต Timer ให้เรียบร้อยด้วย
ข้างใน drawTimerActionPerformed() นั้น เขียนการสุ่มค่าต่างๆของสี่เหลี่ยมที่จะวาดให้เรียบร้อย พอได้ค่าทั้งหมดก็เอามาสร้างตัวสี่เหลี่ยมของเราขึ้นมา
แล้วเอาสี่เหลี่ยมที่สร้างขึ้นไปใส่ ArrayList
ต่อจากนั้นเรียก repaint() เพื่อสั่งให้วาดสี่เหลี่ยมทุกชิ้นที่อยู่ในอาร์เรย์ทั้งหมด เอฟเฟคที่จะเห็นคือ มีสี่เหลี่ยมวาดเพิ่มขึ้นมาทับของเดิม ที่ต้องรู้ก็คือ โค้ดของ repaint() นั้น เราจะเขียนในเมธอด paintComponent(Graphics g) นะ เพราะ repaint() หมายถึง เคลียร์พื้นที่ให้วาดได้ถูกต้อง แล้วเรียก paintComponent(Graphics g)
ต่อจากนั้นก็เขียนเมธอด public void paintComponent(Graphics g) จริงๆนี่คือการ override เพราะ JComponent ซึ่งเป็น super class ของ JPanel ได้นิยามเมธอดนี้ไว้ จาว่ารู้เรื่องอยู่แล้ว ว่าถ้า repaint() จะมาเรียกเมธอดนี้เสมอ

ใน paintComponent(Graphics g) ต้องเรียก super. paintComponent(g); เพื่อเคลียร์สภาพจอให้ถูกต้องก่อนการวาดอะไรทับใหม่ทุกครั้ง

ใช้ Iterator ในการลูปวาดสี่เหลี่ยมให้ครบทุกรูปที่ใส่ไว้ใน ArrayList // ตรงนี้ต้องไปค้นเรื่อง Iterator ของ ArrayList นะ

เขียนเมธอด clear() ซึ่งทำการเคลียร์ ArrayList และเคลียร์หน้าจอไปในตัว

สิ่งที่ต้องทำขั้นสุดท้ายคือ เอา DrawJPanel ไปใส่ในโปรแกรมหลักให้ถูก ทำซะ วันนี้ไม่มีทำ JUnit

ส่งในวันที่ทำแล็บ ภายในเวลาเที่ยงคืน ส่งในรูปของ executable jar file นะ ต้องใส่ source มาด้วย ส่งเมล์โปรแกรมที่ทำเสร็จแล้วมาที่ progmethcp@gmail.com โดยในเมล์ subject ต้องเขียนเป็น studentID_Screensaver_secNumber และไฟล์ต้องมีชื่อว่า studentID_Screensaver_secNumber.jar

studentID คือเลขประจำตัวนิสิต
secNumber คือเบอร์ตอนเรียน