#25 การตกแต่ง Text Field

"Text field" เป็นช่องที่ใช้รับข้อมูลจากผู้ใช้งานโปรแกรม เราจะกำหนดให้ข้อความใน Text Field อยู่ตรงกลาง และเอาขอบสีฟ้าออกไป ซึ่งมีขั้นตอนดังนี้

 

th-java-java-gui-mvc-25-1

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

 

 

ขั้นตอนการตกแต่ง Text Field

1. คลิกขวาที่ Text Field เลือก Properties จะปรากฏหน้าจอให้จัดการคุณสมบัติต่างๆ ของ Text Field

th-java-java-gui-mvc-25-2

ภาพที่ 25-2 แสดงหน้า Properties ของ Text Field

 

2. ที่หลังรายการ horizontalAlignment ให้เลือกเป็น CENTER

th-java-java-gui-mvc-25-3

ภาพที่ 25-3 แสดงการกำหนดการแสดงผลข้อความในแนวนอนให้อยู่ตรงกลาง

 

3. ต่อมาเอากรอบสีฟ้าออก โดยการคลิก “...” หลังรายการ border

th-java-java-gui-mvc-25-4

ภาพที่ 25-4 แสดงการกำหนดค่าเส้นขอบ

 

4. จะปรากฏหน้าจอให้เลือกเส้นขอบ เลือกเป็น No Border หรือ ไม่มีเส้นขอบ

th-java-java-gui-mvc-25-5

ภาพที่ 25-5 แสดงการเลือก ไม่มีเส้นขอบ

 

5. คลิกที่ปุ่ม “OK” จากนั้นคลิกที่ปุ่ม “Close” จะเห็นว่าตอนนี้ข้อความใน Text Field แสดงตรงกลางแล้ว

th-java-java-gui-mvc-25-6

ภาพที่ 25-6 แสดงตัวอักษรใน Text Field

 

6. คลิกขวาที่ไฟล์ View.java และสั่ง Run File จะได้ผลลัพธ์คือ Text Field ไม่มีขอบสีฟ้าแล้ว

th-java-java-gui-mvc-25-7

ภาพที่ 25-7 แสดง Text Field ไม่มีเส้นขอบ

 

7. หากลองคลิกที่ปุ่ม Enter หรือปุ่ม Clear จะเห็นขอบสีฟ้าขึ้นมา

th-java-java-gui-mvc-25-8

ภาพที่ 25-8 แสดงเส้นขอบของ Button

 

เราจะเอาสีขอบนี้ออกจาก Button ในตอนต่อไปค่ะ  😉 

 

Comments

comments

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

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