#15 การสร้างคลาส View

"วิว (View)" คือส่วนที่เป็นหน้าจอโปรแกรม ที่ผู้ใช้งานมองเห็น และสามารถใช้งานโปรแกรมได้ ผ่านทางหน้าจอนี้

 

th-java-java-gui-mvc-15-1

ภาพที่ 15-1 แสดงผู้ใช้กำลังใช้งานโปรแกรม

 

ในมุมมองของนักพัฒนาซอฟต์แวร์นั้น เราจะมองเห็นหน้าจอใน 2 มุมมองคือ

 

1. หน้าจอที่เป็นกราฟฟิกสวยงาม ซึ่งประกอบไปด้วยรูปภาพและการตกแต่งด้วยสีสันต่างๆ

th-java-java-gui-mvc-15-2

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

 

2. เบื้องหลังของหน้าจอ ประกอบไปด้วยโค้ดคำสั่งหลายๆ บรรทัดประกอบรวมกัน ทำหน้าที่ควบคุมหน้าจอโปรแกรม

th-java-java-gui-mvc-15-3

ภาพที่ 15-3 แสดงโค้ดหน้าจอโปรแกรม (บางส่วน)

 

 

ขั้นตอนการสร้าง Package ใช้เก็บคลาส View

1. คลิกขวาที่ package: com.mystou.helloworld ไปที่ New และเลือก Java Package…

th-java-java-gui-mvc-15-4

ภาพที่ 15-4 แสดงการสร้าง Package

 

2. จะพบกับหน้าจอให้เพิ่ม package ใหม่

th-java-java-gui-mvc-15-5

ภาพที่ 15-5 แสดงหน้าตั้งชื่อ Package

 

3. พิมพ์ตัว v ทับคำว่า newpackage ซึ่ง v ย่อมาจากคำว่า View เราจะใช้ package นี้เก็บไฟล์ที่เกี่ยวข้องกับหน้าจอโปรแกรมเท่านั้น

th-java-java-gui-mvc-15-6

ภาพที่ 15-6 แสดงการตั้งชื่อ Package

 

4. กดปุ่ม “Enter” ที่คีย์บอร์ด เราจะได้ package ใหม่ที่สร้างขึ้นมา

th-java-java-gui-mvc-15-7

ภาพที่ 15-7 แสดง Package ใหม่ที่สร้างขึ้นมา

 

ซึ่งมีความหมายดังภาพที่ 15-8

th-java-java-gui-mvc-15-8

ภาพที่ 15-8 อธิบายชื่อ Package

 

 

ขั้นตอนการสร้างคลาส View

ส่วนของหน้าจอโปรแกรม เราจะสร้างขึ้นมาจากไฟล์ชนิด JFrame Form ซึ่งไฟล์ชนิดนี้จะทำให้เราได้หน้าจอโปรแกรมเปล่าๆ ขึ้นมา 1 หน้าจอ

 

1. คลิกขวาที่แพ็กเกจที่ลงท้ายด้วยตัว v ไปที่ New และเลือก JFrame Form…

th-java-java-gui-mvc-15-9

ภาพที่ 15-9 แสดงการสร้างไฟล์ JFrame Form...

 

2. จะพบกับหน้า ให้สร้างหน้าจอโปรแกรม

th-java-java-gui-mvc-15-10

ภาพที่ 15-10 แสดงหน้าตั้งชื่อไฟล์

 

3. ตั้งชื่อว่า View

th-java-java-gui-mvc-15-11

ภาพที่ 15-11 แสดงการตั้งชื่อไฟล์

 

4. จากนั้นกดที่ปุ่ม Enter ที่คีย์บอร์ด เราจะได้ไฟล์ View.java ขึ้นมา

th-java-java-gui-mvc-15-12

ภาพที่ 15-12 แสดงไฟล์ View.java

 

5. การทำงานกับไฟล์ชนิด JFrame From ฝั่งขวามีจะมี Palette ที่เตรียมองค์ประกอบต่างๆ เอาไว้ให้เราลากมาวางบนหน้าจอได้ตามต้องการ

th-java-java-gui-mvc-15-13

ภาพที่ 15-13 แสดงส่วนประกอบต่างๆ ของหน้าจอ

 

6. ลองคลิกขวาที่ไฟล์ View.java และเลือก Run File

th-java-java-gui-mvc-15-14

ภาพที่ 15-14 แสดงการสั่ง Run File

 

7. จะปรากฏหน้าจอโปรแกรมเปล่าๆ ขึ้นมา โดยค่าเริ่มต้น หน้าจอจะปรากฏที่มุมบนด้านซ้ายมือของหน้าจอคอมพิวเตอร์ของเรา

th-java-java-gui-mvc-15-15

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

 

8. คลิกที่ปุ่ม x เพื่อปิดหน้าจอนี้ลงไปก่อน

th-java-java-gui-mvc-15-16

ภาพที่ 15-16 แสดงการปิดหน้าจอ

 

ในตอนต่อไปเราจะเรียนรู้เกี่ยวกับ องค์ประกอบของหน้าจอกันค่ะ  😀 

 

Comments

comments

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

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