ทำความรู้จักกับ Combo Box

Combo Box คือรายการตัวเลือกต่าง ๆ ที่มีไว้ให้ผู้ใช้เลือก โดยสามารถเลือกข้อมูลได้เพียงอย่างเดียว วันนี้เราจะลองมาเขียนโปรแกรมเพื่อเรียนรู้  Combo Box กันค่ะ

Java-Basic-ง่ายนิดเดียว-Combo-Box-1

หมายเหตุ

ก่อนหน้านี้เราได้เรียนรู้เรื่อง GUI กันไปบ้างแล้ว มีทั้งหมด 3 หัวข้อดังต่อไปนี้

  1. JFrame
  2. Label และ TextField
  3. Button

เนื้อหา 3 เรื่องนี้เราพยายามจะปูพื้นฐานที่สำคัญ ๆ ทั้งหมดให้แล้ว ซึ่งเราคิดว่ามันจะทำให้ผู้อ่านสามารถก้าวไปเรียนรู้เรื่องอื่น ๆ ได้อย่างง่ายดายมากขึ้น หากคุณยังไม่ได้อ่านบทความเหล่านี้ หรืออ่านศัพท์ต่าง ๆ แล้วยังไม่รู้ว่าทั้ง 3 ข้อคืออะไร กรุณาคลิกเข้าไปอ่านก่อนนะคะ เพราะเรื่องต่อ ๆ ไปเราจะประยุกต์ใช้สิ่งเหล่านี้ร่วมกับการเรียนรู้ GUI ตัวอื่น ๆ ของ Java ไปเรื่อย ๆ ค่ะ ^^

 

เราจะทำอะไรกัน ?

มาดูหน้าตาโปรแกรมของเรากันค่ะ

Java-Basic-ง่ายนิดเดียว-Combo-Box-2

เราจะเขียนโปรแกรมให้สามารถเลือกรายการวิชาได้ โดยเมื่อคลิกเลือกวิชาใด ๆ ข้อมูลที่เลือกจะไปปรากฏในกล่อง TextField ข้างล่างตรงที่เขียนว่า “วิชาที่คุณชอบคือ

เวลาคลิกเลือกรายชื่อวิชาจะแสดงผลแบบนี้

Java-Basic-ง่ายนิดเดียว-Combo-Box-3

 

สมมติว่าเลือก “ภาษาอังกฤษ” จะได้ผลลัพธ์ดังนี้

Java-Basic-ง่ายนิดเดียว-Combo-Box-4

 

ลงมือเขียนโปรแกรม

ไม่มีนักพัฒนาโปรแกรมคนใดเก่งขึ้นมาได้โดยไม่ลงมือเขียนโปรแกรม! คุณอาจจะอ่านคร่าว ๆ ก่อนก็ได้ แต่อย่าพึ่งปักใจเชื่อในสิ่งใด จนกว่าคุณจะลงมือเขียนมันให้ได้ผลลัพธ์ออกมาเหมือนกัน เริ่มกันเลยค่ะ

 

เราจะเริ่มต้นด้วยการสร้างคลาส Subjects.java ขึ้นมา เพื่อใช้ในการจำลองเป็นออบเจ็กต์เก็บข้อมูลรายวิชาต่าง ๆ โดยมีรายละเอียดโค้ดภายในดังต่อไปนี้

 

จากนั้น สร้าง JFrame ชื่อ ComboBox.java ขึ้นมา แล้วออกแบบหน้าตา และกำหนดชื่อต่าง ๆ ดังต่อไปนี้

Java-Basic-ง่ายนิดเดียว-Combo-Box-5

 

การกำหนดชือให้ Combo Box

ก็คล้าย ๆ ตัวอื่น ๆ ค่ะ คลิกขวาที่ ComboBox และเลือก “Change Variable Name…” จากนั้นจะปรากฏกล่องข้อความให้กำหนดชื่อลงไป

Java-Basic-ง่ายนิดเดียว-Combo-Box-6

 

การกำหนดรายชื่อแรก (model)

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

Java-Basic-ง่ายนิดเดียว-Combo-Box-7

 

ต่อมา คลิกที่เมนู Source เพื่อเข้าไปเพิ่มโค้ดให้กับ ComboBox.java แล้วสร้างเมธอด getSubjects() มีหน้าที่คือใช้ในการสร้างออบเจ็กต์ของ Subjects.java ซึ้งก็คือรายชื่อวิชาต่าง ๆ นั่นเอง (เพียงแต่ว่าในการทำงานจริงเราจะดึงข้อมูลมาจากตารางในฐานข้อมูล) จากนั้นทำการกำหนดค่า และก็เก็บแต่ละออบเจ็กต์เอาไว้ใน ArrayList เพื่อความง่ายในการขนส่งรายการออบเจ็กต์ของเรา ArrayList ก็เหมือนกับกล่องเก็บของนั่นแหล่ะค่ะ เพียงแต่ว่าเราใช้เก็บออบเจ็กต์แค่นั้นเอง

 

ถ้ามีใครเรียกใช้เมธอด getSubjects() สิ่งที่เค้าจะได้กลับไปคือข้อมูลรายชื่อวิชาต่าง ๆ ซึ่งถูกแพ็กไปในกล่องที่ชื่อว่า ArrayList  1 กล่อง ส่งทีเดียวได้ครบทุกออบเจ็กต์เลยค่ะ 🙂 โดยโด้ดในเมธอดมีดังต่อไปนี้

 

ต่อมาเพิ่มเมธอด setComboBox() ทำหน้าที่กำหนดค่าให้ ComboBox ของเรา โดยดึงข้อมูลมาจากเมธอดที่เราสร้างเอาไว้ก่อนหน้านี้ ลองอ่านโค้ดดูนะคะ

 

ตอนนี้ข้อมูลของเราพร้อมแล้ว แต่ยังไม่มีใครเรียกใช้เมธอด setComboBox() นะคะ หลักการเขียนโปรแกรมแบบ OOP คือ ออบเจ็กต์ควรจะเตรียมข้อมูลให้พร้อมสำหรับการใช้งาน ดังนั้น เราจะเรียนใช้งานเมธอด setComboBox() ที่ Constructor ค่ะ โดยเขียนโค้ดเพิ่มลงไป 1 บรรทัด ดังนี้

 

ลอง Run โปรแกรมดูเราและคลิกที่ “รายชื่อวิชา” จะได้ผลลัพธ์ดังนี้

Java-Basic-ง่ายนิดเดียว-Combo-Box-3

 

การดึงค่า ComboBox มาแสดงผลที่ TextField

กลับมาที่หน้า Design และดับเบิลคลิกที่ ComboBox เข้าไป ระบบจะสร้างเมธอดเปล่า ๆ ให้เราอัตโนมัติ ที่เหลือคือ เขียนโค้ดขึ้นมาควบคุมการทำงานของมัน ซึ่งก็คือคำถามว่า ถ้ามีคนคลิกเลือกรายชื่อวิชาต่าง ๆ จะเกิดเหตุการณ์อะไรขึ้นบ้าง?

 

สิ่งที่เราจะทำก็คือ ถ้ามีคนเลือกรายชื่อวิชาใด ๆ รายชื่อนั้น ๆ จะไปปรากฏที่ TextField ไม่ต้องกังวลค่ะ ขั้นตอนนี้ง่ายมาก โค้ดมีบรรทัดเดียวดังต่อไปนี้

 

แค่นี้ก็เรียบร้อยแล้วค่ะ ลอง Run ดูนะคะ แล้วทดสอบเลือกรายวิชาต่าง ๆ ดูว่าได้ผลลัพธ์เหมือนที่เราต้องการในตอนแรกหรือเปล่า ถ้าทำสำเร็จ! ก็ดีใจด้วยค่ะ แต่ถ้ายังทำไม่ได้! ก็ดีใจด้วยเช่นกัน อย่างน้อยคุณก็ลงมือทำแล้ว ดีกว่าคนที่ยังไม่ได้ทำอะไรเลยตั้งเยอะค่ะ 🙂  รู้มั้ยคะว่า เวลาเราทำอะไรเป็นครั้งแรก มันก็มักจะล้มเหลวเสมอ!!! แต่เรามาถึงจุดนี้ได้ เพราะเราไม่เคยยอมแพ้ค่ะ ขอเป็นกำลังใจให้นะคะ ^^

 

สรุป

วันนี้เราได้ทำความรู้จักกับ Combo Box ไปแล้ว ถ้าสังเกตุให้ดี เราเขียนคำนี้ 2 แบบคือ

  1. Combo Box: แบบนี้เราพูดถึงตัว Combo Box ทั่ว ๆ ไป
  2. ComboBox: ถ้าเขียนติดกันแบบนี้เราสื่อถึงตัวโค้ดที่กำลังเขียนอยู่

ก็ขอให้เข้าใจตรงกันนะคะ เพราะ ยังไง ๆ เวลาเขียนโค้ดเราก็เว้นวรรคไม่ได้อยู่แล้ว บทความนี้คงทำให้ผู้อ่านเข้าใจวิธีการใช้งาน Combo Box เรียบร้อยแล้ว  เดี๋ยวตอนต่อไปเราจะมาทำความรู้จักกับ Table หรือ jTable กันบ้างนะคะ แล้วพบกันค่ะ 🙂

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

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

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