มาทำ GUI แบบง่ายๆใน JAVA กันเถอะ
เจ้า GUI หรือ Graphical User Interface ซึ่งจะให้เข้าใจกันง่ายๆ ก็คือ วิธีการหนึ่งของการใช้งานคอมพิวเตอร์ ซึ่งจะใช้งานผ่านสัญลักษณ์หรือภาพ นอกเหนือจากตัวอักษร หรือ CLI
ส่วนประกอบของ GUI คือ หน้าต่างการใช้งาน รวมไปถึงการใช้เมาส์หรือระบบทัชสกรีนก็เป็น GUI เช่นกัน เพื่อความสะดวกเเก่ผู้ใช้งาน
โดยให้หน้า GUI สื่อสารกับผู้ใช้งานผ่าน ภาพ สัญลักษณ์ เเทนภาษาที่ใช้ในการเขียนโปรเเกรม
โดยในการจะสร้างเจ้าตัว GUI ขึ้นมานั้น เรามี 3 step ง่ายๆในการสร้าง นั่นก็คือ
- declare components ขึ้นมาค่ะ ว่าเราอยากให้มีปุ่มแบบไหน มีข้อความแบบไหน สร้างมันขึ้นมา
2. ใส่เจ้าตัว event handlers ลงไปค่ะ ว่าอยากให้ components ที่เราได้สร้างไว้นั้นทำงานอย่างไร
3. จะเป็นการจัดวางให้สวยงานโดยใช้ layout manager เข้ามาช่วยนั่นเอง
โดยเรามาลองสร้าง GUI แบบง่ายๆ อย่างหน้า Login กันเลยดีกว่าค่ะ
จะเห็นได้ว่า มี components ที่เห็นได้ชัดเจน 5ส่วนด้วยกันนะคะคือ
Frame Label TextField PasswordField Button
เริ่มกันเลย
ขั้นตอนการสร้าง GUI
import เจ้าตัว Library ที่ชื่อว่า swing เข้ามา เพราะ Swing จะมี Feature อยู่มากมาย ที่ใช้สำหรับการออกแบบ Form เพื่อที่เราจะได้ใช้เจ้าตัว libary นี้สร้าง frame lable button ต่างๆได้
ต่อมาจะทำการสร้าง frame ขึ้นมาก่อนนะคะ
🥐โดยจะสร้าง Object JFrameขึ้นมาโดยให้ชื่อว่า frame
🥐 setSize ของมันให้มีขนาดตามที่ต้องการ โดยในโค้ดเราได้ทำการตั้งไว้ที่ 500,300
🥐ใช้คพสั่ง frame.setDefaultCloseOperation ( JFrame.EXIT_ON_CLOSE ); จะเป็นการกำหนด event ของ Object JFrame เมื่อมีการคลิกที่ปุ่ม close บน TitleBar
🥐 ใช้คำสั่ง frame.setVisible(true); เพื่อให้มีการแสดงผลบนหน้าจอ
เราก็จะได้หน้าต่างที่มีรูปร่าง และขนาด 500*300 ขึ้นมาแบบนี้
ต่อมาจะเป็นการปรับแต่ง TitleBar ของจอภาพของ Object JFrame ให้มีหน้าตาแบบนี้
จะเห็นได้ว่าบริเวณ Titlebar จะมีชื่อตามที่เรากำหนด และมีไอค่อนโผล่ขึ้นมา วิธีทำก็ไม่ยาก
import เจ้าตัว Library ที่ชื่อว่า awt เข้ามา
หลังจากที่ได้สร้าง Object JFrame แล้ว สามารถกำหนดข้อความบน TitleBar ของจอภาพ ได้ดังนี้
ใช้คำสั่ง setTitle เพื่อกำหนดข้อความบน titlebar
setIconImage เพื่แเปลี่ยนไอค่อนจากโลโก้ java ให้เป็นของเรา โดยในขั้นตอนนี้จะมีการ ใช้ Toolkit ซึ่งเป็นสาเหตุที่เราต้องimport awt ลงมา
// * ตำแหน่งของ รูปภาพ จะอยู่ที่ folder เดียวกันกับไฟล์นะคะ
ขั้นตอนนี้จะเป็นการทำช่องให้กรอก User name
🥐 ขั้นตอนแรกจะเป็นการสร้าง Object JPanel ขึ้นมาโดยให้ชื่อว่า panel โดยเจ้า panel จะเป็น Container ไว้สำหรับจัดกลุ่มของ Component ให้อยู่ในกลุ่มเดียวกัน เพื่อใช้ง่ายต่อการใช้งาน โดยเราสามารถประกาศ Panel ไว้ และ ทำการสร้าง Controls หลาย ๆ ตัวเข้ามาภายใน Panel นั้น ๆ
🥐 สร้าง Object JLable ขึ้นมา โดยจะให้แสดงข้อความว่า User
🥐จากนั้น set position ของเจ้าตัว lable โดยเลขสี่ชุดนี้จะแสดงถึง (x, y, width, height)
🥐เพิ่มลงไปใน panel เลย
จากนั้นจะสร้าง textfield ขึ้นมา โดยการสร้าง
🥐 โดยเราจะสร้าง Object JTextField ขึ้นมา และกำหนดให้มีขนาด 20 set position และ เพิ่มลงไปใน panel เช่นเดียวกับ lable
จะเห็นได้ว่ามีการย้าย frame.setVisible(true); ลงมาล่างสุด เพื่อแสดงผล เพราะ setvisible จะแสดงผลเฉพาะ obj ที่อยู่ด้านบนเท่านั้น
ก็จะได้หน้าต่างที่มีหน้าตาแบบนี้มา
**ไม่ว่าจะเป็นขนาดหรือ position สามารถปรับได้ตามความเหมาะสม
ต่อมาที่ขั้นตอนนี้จะเป็นการทำช่องให้กรอก Password
การเขียนโค้ดจะคล้ายกันเลย เพียงแต่เราเปลี่ยน postion เล็กน้อย และจะเปลี่ยนจาก textfield เป็น password field
จะเห็นได้ว่าเราสร้าง Object JPasswordField ขึ้นมาแทน และเปลี่ยน position ของข้อความเพียงเท่านั้นเอง
ก็จะได้หน้าต่างแบบนี้ขึ้นมา
ขั้นตอนต่อมาจะเป็นการทำปุ่ม login นะคะ
โดยเราจะใส่ action ให้เจ้าปุ่มกดอีกเล็กน้อย คือถ้ามีการคลิกปุ่มจะเปลี่ยนรูปนั่นเอง
ขั้นตอนการสร้างก็ไม่ได้ซับซ้อนมากนัก
🥐 สร้าง Object JButton ที่ชื่อว่า button ขึ้นมา แล้วกำหนดข้อความข้างในไว้
🥐 กำหนด Icon ให้กับ Object JButton // ใส่รูปไว้ใน folder เดียวกันกับไฟล์นะคะ
🥐 กำหนด Icon ให้กับ Object Button เมื่อ Object Button อยู่ในสถานะ กำลังถูกคลิก
🥐 จากนั้น set positionเหมือนเดิมเลย (x, y, width, height)
🥐 ขั้นตอนนี้จะเป็นการเพิ่ม action ให้กับ obj ที่เราสร้างไว้นะคะ ดังนั้นต้อง import libary เข้ามาก่อน
🥐 จากนั้นจะเป็นการกำหนด Event ให้กับ Object
โดย JButtonaddActionListener ( listener ) เป็นคำสั่งที่ใช้ในการดักเหตุการณ์เมื่อมีการคลิกที่ Component
ซึ่งภายใน Event จะมี
🥐การคืนค่า Component ที่ทำให้เกิดเหตุการณ์ขึ้น หรือก็คือมีการเปลี่ยนไอค่อนของปุ่ม เมื่อเกิดการคลิก
🥐การแสดง Message Dialog ซึ่งได้ให้แสดงข้อความ welcom เมื่อมีการคลิกปุ่ม
โดยจะมีข้อความ pop up เด้งขึ้นมาเมื่อกดปุ่มเรียบร้อยแล้วอีกด้วย
ก็จะได้ข้อความที่มีหน้าตาแบบนี้ ตามที่เราใส่เข้าไปเลย
และนี่ก็เป็นวิธีการสร้าง GUI เบื้องต้นแบบ 3 step ไว้คราวหน้าจะเอามารวมกับ back-end จะออกมาเป็นยังไงก็รอติดตามนะคะ
