#20 การวางองค์ประกอบหน้าจอ

หน้าจอโปรแกรมของเราประกอบไปด้วย Label, Text Field และ Button

 

th-java-java-gui-mvc-20-1

ภาพที่ 20-1 แสดงส่วนต่างๆ ของหน้าจอ

 

Label: ใช้เขียนข้อความหรือวางรูปภาพ เราใช้ Label บนหน้าจอ 2 จุดด้วยกันคือ

1. ใช้เขียนข้อความว่า “กรอกชื่อ:”

2. ใช้เขียนข้อความแสดงผลลัพธ์ “Hello! ” ตามด้วยข้อมูลที่ผู้ใช้กรอกเข้ามาคือ World

 

Text Field: เป็นช่องให้ผู้ใช้กรอกข้อมูลเข้ามาในโปรแกรมของเรา

 

Button: เป็นปุ่มที่ใช้ในการควบคุมการทำงานโปรแกรม ซึ่งมี 2 ปุ่มคือ

1. Enter: เมื่อปุ่ม Enter ถูกคลิกจะตรวจสอบว่ามีข้อมูลใน Text Field หรือไม่

    - ถ้ามี ก็จะแสดงผลลัพธ์ที่ Label ที่ใช้แสดงผลลัพธ์

    - ถ้าไม่มี จะแสดงกล่องข้อความแจ้งให้ผู้ใช้กรอกข้อมูลเข้ามา

2. Clear: เมื่อปุ่ม Clear ถูกคลิก ข้อมูลใน Text Field และ Label แสดงผลลัพธ์จะถูกลบไป

 

 

ขั้นตอนการใช้งาน Label

1. ลาก Label มาวางบนหน้าจอ

th-java-java-gui-mvc-20-1

ภาพที่ 20-2 แสดงการลาก Label วางบนหน้าจอ

 

2. หลังจากปล่อยเมาส์ Label จะอยู่ด้านหลังของพื้นหลัง

th-java-java-gui-mvc-20-3

ภาพที่ 20-3 แสดง Label อยู่ด้านหลังของหน้าจอ

 

3. ที่มุมล่างด้านซ้ายมือของโปรแกรม NetBeans จะมี Navigator อยู่ (ถ้าไม่มีสามารถเปิดได้ที่เมนู Window -> Navigator หรือกด Ctrl+7)

th-java-java-gui-mvc-20-4

ภาพที่ 20-4 แสดงลำดับการแสดงผล

 

4. ลาก jLabel2 ขึ้นไปอยู่บน jLabel1

th-java-java-gui-mvc-20-5

ภาพที่ 20-5 แสดงการเลือก Label2 ขึ้นไปด้านบน Label1

 

5. ไปที่หน้าจอ View จากนั้นจัดรูปแบบและขนาดของ Label ตามต้องการ

th-java-java-gui-mvc-20-6

ภาพที่ 20-6 แสดง Label2 บนหน้าจอ

 

6. ลาก Label มาวางเพิ่มอีก 1 อัน เพื่อทำเป็นส่วนของการแสดงผลลัพธ์ โดยทำตามขั้นตอนที่ 1 ถึงขั้นตอนที่ 5 ใหม่อีกครั้ง แล้วจะได้หน้าจอดัง ภาพที่ 20-7

th-java-java-gui-mvc-20-7

ภาพที่ 20-7 แสดง Label 2 ชิ้นบนหน้าจอ

 

7. ที่ Navigator จะแสดงรายการส่วนต่างๆ ที่อยู่บนหน้า

th-java-java-gui-mvc-20-8

ภาพที่ 20-8 แสดงชื่อและลำดับของ Label บนหน้าจอ

 

 

ขั้นตอนการใช้งาน Text Field

1. ลาก Text Field มาวางบนหน้าจอ

th-java-java-gui-mvc-20-9

ภาพที่ 20-9 แสดงการลาก Text Field มาวางบนหน้าจอ

 

2. หลังจากปล่อยเมาส์ Text Field จะอยู่ด้านหลังของพื้นหลัง

th-java-java-gui-mvc-20-10

ภาพที่ 20-10 แสดง Text Field อยู่ด้านหลังของพื้นหลัง

 

3. ที่ Navigator ลาก Text Field ขึ้นไปอยู่บน jLabel1 หรืออยู่บนพื้นหลัง

th-java-java-gui-mvc-20-11

ภาพที่ 20-11 แสดงการลาก Text Field ขึ้นไปอยู่บนพื้นหลัง

 

4. ที่หน้าจอ View จัดตำแหน่งและขนาด Text Field ตามต้องการ

th-java-java-gui-mvc-20-12

ภาพที่ 20-12 แสดงการตกแต่งขนาด Text Field ตามต้องการ

 

 

ขั้นตอนการใช้งาน Button

1. ลาก Button มาวางบนหน้าจอ

th-java-java-gui-mvc-20-13

ภาพที่ 20-13 แสดงการลาก Button มาวางบนหน้าจอ

 

2. หลังจากปล่อยเมาส์ Button จะอยู่ด้านหลังของพื้นหลัง

th-java-java-gui-mvc-20-14

ภาพที่ 20-14 แสดง Button อยู่ใต้พื้นหลัง

 

3. ที่ Navigator ลาก Button ขึ้นไปอยู่บน jLabel1 หรือบนพื้นหลัง

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

ภาพที่ 20-15 แสดงการเลื่อน Button ขึ้นมาอยู่บนพื้นหลัง

 

4. ที่หน้าจอ View จัดตำแหน่งและขนาดให้ Button ตามต้องการ และลาก Button มาวางเพิ่มอีก 1 อัน จะได้ดังนี้

th-java-java-gui-mvc-20-16

ภาพที่ 20-16 แสดงการจัดตกแต่งขนาดและตำแหน่งตามต้องการ

 

5. ที่ Navigator จะแสดงรายการส่วนต่างๆ ทั้งหมดของหน้าจอ

th-java-java-gui-mvc-20-17

ภาพที่ 20-17 แสดงรายชื่อและลำดับส่วนต่างๆ บนหน้าจอ

 

หลังจากวางองค์ประกอบบนหน้าจอเสร็จแล้ว เราจะตกแต่งหน้าจอให้สวยงาม และน่าใช้งานมากขึ้นในตอนต่อไปค่ะ  😎 

 

Comments

comments

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

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