NetBeans: ทำความรู้จักกับ Button

Button ถือว่าเป็นพระเอกในการกำหนดการทำงานของโปรแกรมเลยก็ว่าได้ มันคือ “ปุ่ม” ที่เมื่อผู้ใช้งานกดแล้วต้องเกิดเหตุการณ์อะไรสักอย่างตามมาJava-Basic-Button-1

ก่อนหน้านี้เราได้รู้จักกับ  JFrame, Label และ TextField ไปแล้ว และสร้างหน้าตาโปรแกรมออกมาได้ดังนี้

Java-Basic-Label-and-TextField-5

คราวนี้ลาก Button มาวางบน JFrame และ Edit Text เป็น “ตรวจคะแนนสอบ

Java-Basic-Button-2

ลองคลิกขวาที่ไฟล์ แล้วเลือก Run File เพื่อดูผลลัพธ์ค่ะ

Java-Basic-Button-3

หากกดปุ่ม “ตรวจคะแนนสอบ” ตอนนี้ก็ยังไม่มีอะไรเกิดขึ้นนะคะ ก่อนจะพูดถึงการควบคุมการทำงานของ Texfield และ Button เราต้องทำความเข้าใจในเรื่องของ “ชื่อตัวแปร” กันก่อนค่ะ

 

การเปลี่ยนชื่อตัวแปร

ในการเขียนโปรแกรมเราต้องสร้างตัวแปรเพื่อใช้ในการเก็บค่าข้อมูลต่าง ๆ ในการประมวลผล เราเรียกใช้งานตัวแปรต่าง ๆ ผ่านชื่อของตัวแปรนั้น ๆ หลักการเดียวกับการใช้งาน TextField และ Button เลยค่ะ ก่อนที่เราจะเรียกใช้งานอะไรก็ตามควรจะตั้งชื่อให้มันก่อน และที่สำคัญกว่านั้นคือ ต้องตั้งให้สื่อความหมายด้วย!

 

การตั้งชื่อให้ Label

คลิกขวาที่ Label  และเลือก “Chang Variable Name…” เปลี่ยนชื่อเป็น textScore

Java-Basic-Button-4

text คือสิ่งที่บอกว่าเป็นชนิดของ TextField (ซึ่งก็คือ String)

Score คือค่าของข้อความที่เราดึงมา

 

การตั้งชื่อให้ Button

เช่นเดียวกัน คลิกขวาที่ Button  และเลือก “Chang Variable Name…” เปลี่ยนชื่อเป็น btnCheckScore

btn คือ ย่อมาจาก Button

CheckScore คือสิ่งที่จะเกิดขึ้นเมื่อปุ่มถูกคลิก (ตรวจคะแนน)

 

มุมมองการทำงานของ NetBeans

ในการเขียนโปรแกรมแบบ GUI จะมี 2 มุมมองที่เราต้องใช้ประจำคือ

1. Design ซึ่งก็คือมุมที่เราใช้งานการออกแบบหน้าตา JFrame ของเรานี่แหละค่ะ

Java-Basic-Button-5

2. มุมมองของโค้ด ลองคลิกที่ Source ดูเราจะเห็นโค้ดภายในที่ทำให้เกิดหน้าตาโปรแกรมที่เรามองเห็นในมุม Design

Java-Basic-Button-6

การเขียนคำสั่งให้ Button ทำงาน

ในการเขียนคำสั่งให้ Button ทำงานง่ายมากเลยค่ะ แค่คัดลอกโค้ดที่เราเคยเขียนมาใส่ไว้ในเมธอดของปุ่มมันก็จะทำงานตามที่เราต้องการแล้ว แต่อาจจะมีวิธีการแสดงผลลัพธ์ที่แตกต่างออกไป ลงมือเขียนโค้ดกันเลยดีกว่าค่ะจะได้มองภาพออก แต่ต้องแน่ใจนะคะว่า คุณได้อ่านเรื่อง “การใช้คำสั่ง if…else” มาแล้ว

 

ในมุมมองของ Design ให้ดับเบิลคลิกที่ปุ่ม “ตรวจคะแนนสอบ” เราจะเข้ามาในเมธอดของปุ่มโดยอัตมัติ

Java-Basic-Button-7

เขียนโค้ดต่อไปนี้ลงไปในเมธอด

 

การใช้งาน JOptionPane อย่าลืม import javax.swing.JOptionPane;  เข้ามาด้วยนะคะ เราจะใช้ให้มันแสดงกล่องข้อความตามที่เราระบุเอาไว้ค่ะ

 

ลอง Run File กรอก 80 ลงไป และกดปุ่ม “ตรวจคะแนนสอบ” จะได้ผลลัพธ์ดังนี้

Java-Basic-Button-8

กดที่ปุ่ม OK แล้วกรอกเลขต่ำกว่า 70 ลงไป และคลิกที่ปุ่ม “ตรวจคะแนนสอบ” จะได้ผลลัพธ์ดังนี้

Java-Basic-Button-9

มาถึงตอนนี้รู้สึกยังไงบ้างคะ ? ถ้าไม่มีอะไรผิดพลาดและสามารถ Run โปรแกรมได้เราคงจะรู้สึกเหมือนกันว่า “การเขียนโปรแกรมมันไม่ได้ยากเลย ที่เราคิดว่ามันยากเพราะมันถูกนำเสนอในรูปแบบที่ยากต่างหากล่ะ!”

 

สรุป

การใช้งาน Button เราใช้เป็นปุ่มที่จะเขียนคำสั่งต่าง ๆ ให้โปรแกรมทำงานเมื่อปุ่มถูกกด อย่างเช่นในตัวอย่างนี้ เมื่อกดปุ่มเราได้เขียนคำสั่งให้มีการดึงค่าจาก textField มา ซึ่งค่าที่รับเข้ามาเป็นชนิดข้อมูลแบบ String จึงต้องแปลงให้เป็นตัวเลข (intrger) ก่อนที่จะนำไปประมวลผล คือทำการตรวจสอบว่า ค่าที่รับเข้ามามากกว่าหรือเท่ากับ 70 หรือไม่ ? ถ้าเป็นจริงหรือเป็นเท็จ ก็จะแสดงกล่องข้อความบอกผู้ใช้ตามเงื่อนไขที่ได้เขียนเอาไว้ในรูปแบบ if…else

 

การทำความรู้จักกับ JFrame, Label, TextField และ Button เพียง 4 อย่างนี้ก็ทำให้เราเขียนโปรแกรมขึ้นมาใช้งานได้จริง ๆ แล้ว ในบทความต่อไป เราจะจำลองระบบตรวจผลสอบเหมือนที่โรงเรียนหรือมหาวิทยาลัยทำจริง ๆ เลย คือเชื่อมต่อกับฐานข้อมูล ที่มีข้อมูลนักเรียนนักศึกษาและคะแนนสอบ เมื่อผู้ใช้กรอกรหัสนักศึกษาลงไป ระบบจะดึงข้อมูลขึ้นมาประมวลผลผ่านหน้าจอโปรแกรมแบบนี้ และแจ้งผลสอบว่าสอบผ่านหรือไม่ แล้วพบกันค่ะ 🙂

 


เรื่องที่เกี่ยวข้อง

NetBeans: วิธีสร้าง JFrame

NetBeans: ทำความรู้จัก Label กับ TextField

NetBeans: ทำความรู้จักกับ Button

ตัวอย่างโปรเจ็กต์: เช็คผลสอบ

ตอนที่ 1 (ภาพรวมของระบบ)

ตอนที่ 2 (ระบบฐานข้อมูล)

ตอนที่ 3 (เชื่อมต่อ Java กับ Database)

ตอนที่ 4 (สร้างออบเจ็กต์เก็บข้อมูล)

ตอนที่ 5 (ประมวลผลข้อมูล)

ตอนที่ 6 (ดึงข้อมูลจากตาราง)

ตอนที่ 7 (นำข้อมูลไปแสดงผลจริง)


 

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

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

|:- เราเชื่อมั่นว่าการเสียสละและการแบ่งปันจะทำให้โลกใบนี้สวยงามมากขึ้น ทุกๆ จุดเริ่มต้นของการเรียนรู้ นำไปสู่การเรียนรู้ถัดไป เว็บไซต์แห่งนี้ขอเป็นส่วนหนึ่งของการแบ่งปันความรู้ที่ไม่มีที่สิ้นสุด มาร่วมกันผลักดันโลกของเราให้หมุนไปพร้อมกับพลังแห่งความรักด้วยกันนะคะ :) >>> |:- About Me! -:|