#35 การควบคุมหน้าจอ

หน้าจอของเราประกอบด้วยปุ่ม 2 ปุ่ม คือ ปุ่ม Enter และปุ่ม Clear การที่ Controller จะรู้ว่าปุ่มใดถูกคลิกนั้น เราจะต้องเซ็ตค่าการควบคุมปุ่มต่างๆ เอาไว้ที่ส่วนของ View ก่อน ซึ่งมีขั้นตอนดังนี้

 

th-java-java-gui-mvc-35-1

ภาพที่ 35-1 แสดงหน้าจอโปรแกรม

 

 

ขั้นตอนการเซ็ตคำสั่งให้ Botton

1. เปิดไฟล์ View.java ขึ้นมา คลิกที่ Source เพื่อเข้าสู่มุมมองแบบโค้ด

th-java-java-gui-mvc-35-2

ภาพที่ 35-2 แสดงโค้ดไฟล์ View.java

 

2. เลื่อนหาเมธอดที่เป็น Constructor ของคลาส View ดังภาพที่ 35-3

th-java-java-gui-mvc-35-3

ภาพที่ 35-3 แสดงเมธอดที่เป็น Constructor ของไฟล์ View.java

 

3. เขียนโค้ดเพื่อ setActionCommand ให้กับปุ่ม Enter และปุ่ม Clear พิมพ์ btn และกดปุ่ม Ctrl+Space จะปรากฏรายชื่อตัวแปรชนิด Button ขึ้นมา

th-java-java-gui-mvc-35-4

ภาพที่ 35-4 แสดงการเพิ่มโค้ด

 

4. เลือก btnEnter จากนั้นกดปุ่มจุด (.) ที่คีย์บอร์ด พิมพ์ set แล้วกด Ctrl+Space จากนั้นเลือก setActionCommand(…)

th-java-java-gui-mvc-35-5

ภาพที่ 35-5 แสดงการเพิ่มโค้ด

 

5. พิมพ์ข้อความ “Enter” ลงไปแทนที่ null

th-java-java-gui-mvc-35-6

ภาพที่ 35-6 แสดงการเพิ่มโค้ด

 

6. ตอนนี้ตัวแปร btnEnter ถูก set action command ด้วยคำว่า “Enter” เรียบร้อยแล้ว

th-java-java-gui-mvc-35-7

ภาพที่ 35-7 แสดงการเพิ่มโค้ด

 

7. ทำซ้ำขั้นตอนที่ 3 ถึงขั้นตอนที่ 5 อีกครั้ง โดยเรียก btnClear มา setActionCommand(…) เป็น “Clear” และจะได้โค้ดดัง ภาพที่ 35-8

th-java-java-gui-mvc-35-8

ภาพที่ 35-8 แสดงการเพิ่มโค้ด

 

มาที่ไฟล์ Controller.java เราจะ implements อินเตอร์เฟสชื่อ ActionListener เข้ามา เพื่อที่จะได้เมธอด actionPerformed(...) มาใช้ควบคุมเหตุการณ์ ที่เกิดขึ้นบนหน้าจอ ซึ่งมีขั้นตอนดังนี้

 

 

ขั้นตอนการImplements อินเตอร์เฟส

1. เปิดไฟล์ Controller.java ขึ้นมา พิมพ์ imp หลังชื่อคลาส แล้วกด Ctrl+Spece โปรแกรม NetBeans จะเขียนโค้ด implements ให้เรา

th-java-java-gui-mvc-35-9

ภาพที่ 35-9 แสดงการ implements ไฟล์ชนิด interface

 

2. พิมพ์คำว่า Action กด Ctrl+Spece และเลือก ActionListener ตัวสุดท้าย

th-java-java-gui-mvc-35-10

ภาพที่ 35-10 แสดงการสั่ง implements ไฟล์ชนิด interface

 

3. เราจะได้คำสั่ง Implements ActionListener ขึ้นมา ดังภาพที่ 35-11

th-java-java-gui-mvc-35-11

ภาพที่ 35-11 แสดงการสั่ง implements ไฟล์ชนิด interface

 

4. คลิกที่รูปหลอดไฟ และเลือก Implements all abstract methods

th-java-java-gui-mvc-35-12

ภาพที่ 35-12 แสดงการเพิ่มเมธอดของ interface

 

5. เราจะได้เมธอด actionPerformed(...) เข้ามาไว้ใช้งาน โดยเมธอดนี้จะรับค่าชนิด ActionEvent ที่ชื่อว่า e เข้ามา

th-java-java-gui-mvc-35-13

ภาพที่ 35-13 แสดงเมธอดที่เพิ่มเข้ามา

 

หลังจากได้เมธอด actionPerformed(…) มาแล้ว เราจะทำการควบคุม Button ในตอนต่อไปค่ะ  😉 

 

Comments

comments

ธมนวรรณ มณีจันทร์

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ