มีตัวอย่างโปรแกรมให้ลองรันดูก่อน
โหลดไฟล์สองไฟล์ต่อไปนี้ ไปไว้ใน folder อะไรก็ได้

• Welcome.class  (ตัวไฟล์ที่ผ่านการคอมไฟล์จาก .java แล้ว)
• bug.png   (รูป ที่จะให้ปรากฎบนวินโดว์)

ลองเอามารันดู  รันจากคอมมานด์ไลน์ก็ได้

---

Tips
วิธีรันจากคอมมานด์ไลน์ คือ ตรง start menu -> Run ให้พิมพ์ cmd้

---

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

---

เอาละ หลังจากรู้เรือ่ง Eclipse กันแล้ว คราวนี้เราจะมาทำแล็บกันต่อ

แล็บนี้มีโครงของโค้ดมาให้แล้ว ดังนั้น ก่อนอื่น ดาว์นโหลดโครงโค้ด (เก็บไฟล์ Welcome.class ไว้คนละที่นะ เพราะไม่งั้นตอนคอมไพล์มันจะทับกัน เดี๋ยวไฟล์ Welcome.class ที่เป็นของที่ทำงานได้จะโดนเขียนทับ)

• Welcome.java

จัดให้ไฟล์นี้และไฟล์รูปที่โหลดมาก่อนหน้านี้อยู่ในโฟลเดอร์เดียวกัน ตอนนี้เราพร้อมที่จะอิมพอร์ตโครงนี้และรูป ลงโปรเจ็คของ Eclipse แล้ว

1. สร้างโปรเจ็คใน Eclipse ให้เรียบร้อย แล้วอิมพอร์ต Welcome.java กับ bug.png เข้ามาใน Eclipse (ใช้ Import File System)
2. ย้าย Welcome.java เข้าไปใน src ของโปรเจ็ค
3. ลองรันดู (จะสังเกตว่า Eclipse ไม่ต้องคอมไพล์ สั่งรันได้เลย ซึ่งจริงๆแล้ว Eclipse นั้นคอมไพล์อยู่อย่างต่อเนื่องและส่งผล error ระหว่างการคอมไพล์ให้เราเห็นอยู่ในหน้าจอเขียนโค้ด นี่จึงเปรียบเสมือนการ auto compile ตลอดเวลา)  ผลการรันจะพบว่า ได้หน้าต่างว่างๆ
4. .......... ก็เขียนโค้ดให้มันเวิร์ค ซะสิ พอเวิร์ค ก็จบแล็บ

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

หลังจากเสร็จแล้ว ให้สร้างโปรแกรมนี้ให้เป็น executable jar file นะ ส่งเมล์โปรแกรมที่ทำเสร็จแล้วมาที่ progmethcp@gmail.com ภายในเที่ยงคืนวันที่ทำแล็บนี้  โดยในเมล์ subject ต้องเขียนเป็น studentID_lab01_secNumber studentID คือเลขประจำตัวนิสิต secNumber คือเบอร์ตอนเรียน มีการบ้านให้ทำอีกนะ ดูหน้าการบ้าน

วิธีทำจาร์ก็คือ

• ขึ้นแรก Right Click ตัวโปรเจ็ค แล้วเลือก export ตาม pop up menu ที่โผล่ขึ้นมา 
• จากนั้น เลือก jar ดังรูป

• กด Next ไป 
• วินโดว์จะเปลี่ยนเป็นอีกหน้า 
• ให้เลือกติ๊กถูกไฟล์ที่จะ export ทั้งหมด แล้วก็เลือก  Export generated class files and resources ซึ่งนี่คือคำสั่งในการเอาคลาสไฟล์ใส่จาร์ เพื่อให้รันได้ 
• สำหรับการส่งงาน จะต้องเลือกติ๊ก Export java source files and resources ด้วย เพราะจะได้มีโค้ดติดมาให้อาจารย์ตรวจ
• เลือกที่ที่จะให้ jar ไฟล์ไปอยู่ 
• เลือก compress ไฟล์ได้ด้วย

• จากนั้นกด Next 
• ถึงตรงนี้จะมีหน้าให้เลือก export files with compile warnings  ก็เลือกซะ 
• ตรง build project if not built automatically ก็ติ๊กไว้ด้วย 
• จากนั้นกด Next 
• ตอนนี้เราจะอยู่ในหน้า JArR Manifest Specification นี่คือการกำหนด Manifest file ซึ่งเป็นไฟล์ที่ตัวจาร์จะอ่านเวลาเราดับเบิ้ลคลิ๊ก โดยไฟล์นี้จะบอกจาร์ว่า ต้องไปรันคลาสเมนของโปรแกรมที่ไหน  
• เลือก Generate the manifest file 
• จะ seal ก็ได้ แต่อันนี้ไม่เกี่ยวกับบทเรียน ไปหาข้อมูลเกี่ยวกับการ seal ได้ที่ http://java.sun.com/docs/books/tutorial/jar/manifest/sealman.html
• ด้านล่าง เราเลือกคลาสที่มีเมธอด main ได้จากการ Browse

• พอเลือก main class แล้วก็กด Finish
• เสร็จแล้วววววว

ซะเมื่อไหร่ล่ะ   ลอง double click จาร์ไฟล์ที่ทำออกมาซะก่อน  จะเห็นว่า มัน ไม่มีรูป
ใช่แล้ว ถ้าจะเอารูปลงจาร์ไฟล์แล้วให้ตัว executable jar อ่านรูปได้ จะต้องเปลี่ยนโปรแกรมซะหน่อย

เอาไฟล์รูปอยู่ในโฟลเดอร์เดียวกับคลาสเมน หรือโฟลเดอร์อื่นที่เข้าต่อลงไปจากคลาสเมนได้ แล้วใช้คำสั่งนี้

pictureJLabel.setIcon(new ImageIcon(getClass().getResource("bug.png")));    แทนการเซ็ตไอคอนแบบเดิม  (ในที่นี้ผมใส่ไฟล์รูปไว้ในโฟลเดอร์เดียวกับคลาสเมนในโปรเจ็ค)

โดยที่ path ของไฟล์จะ relative กับตำแหน่งของโปรเจ็ค เท่านี้จาร์ไฟล์ก็จะอ่านรูปของเราได้แล้ว ลอง export ออกมา แล้วตรวจให้เรียบร้อย แล้วจึงส่งนะ

---

ไกด์
สำหรับคนที่อยากได้ไกด์ไลน์ว่าควรเขียนยังไง เผื่่อเซคที่ยังไม่ได้เรียน เรามาดูโค้ดกัน ผมจะอธิบายหลักๆก่อนเลย
public class Welcome extends JFrame    -> คลาสอะไร extends JFrame คลาสนั้นคือ วินโดว์ของเรา
{
   private JLabel textJLabel;     -> JLabel นั้นเอาไว้สำหรับโชว์ text หรือ รูป โดยเมื่อโปรแกรมรันแล้ว คนรันโปรแกรมเปลี่ยน text หรือรูปไม่ได้
   private JLabel pictureJLabel;  -> คลาส JLabel กับ JFrame มีอยู่ในจาวาอยู่แล้วนะ เมธอดมีมากมาย เราต้องไปอ่าน javadoc ของมันให้ดี                                                                          อ่านได้ใน www.java.sun.com แล้วไปหาตรงที่เขียนว่า API

เอาล่ะ เรามาดูว่าไอ้วินโดว์เปล่าๆที่เปิดมาได้นี่ มีอะไรต่างจากโปรแกรมต้นแบบบ้าง
อย่างแรกที่ต่างคือ ไตเติ้ลบาร์ด้านบน ของจริงต้องมีคำว่า Welcome  เฮ้ย แล้วทำไงนี่
คำตอบคือ ใช้คำสั่ง setTitle("Welcome); แค่นี้ก็ได้แล้ว เราลองทำไปใส่ก่อนคำสั่ง setSize ซะ
แล้วรันดู จะเห็นว่ามีคำว่า Welcome ขึ้นมาแล้.....
อ้าว ทำไมเล็กกระจิ๋วหลิวแบบน้าน วินโดว์มันเล็กเกินไป
ต้องเปลี่ยน setSize(กว้าง, สูง) ซะใหม่  เปลี่ยความกว้างเป็น 608 ความสูงเป็น 413 ซะ

---

Coding Standard
จะเห็นว่า ชื่อเมธอด setSize นั้น คำแรกเขียนตัวเล็กหมด พยางค์ต่อไปขึ้นตัวใหญ่ตรงตัวอักษรแรก ถ้าชื่อยาวกว่านี้ ก็จะขึ้นตัวใหญ่ทุกตัวอักษรแรกของคำใหม่ นี่เป็นกฎการตั้งชื่อตัวแปร รวมถึงชื่อเมธอด

---

คราวนี้ได้วินโดว์ใหญ่ละ  แต่สีมันยังไม่เป็นสีเหลือง
สีบนจอคอมเกิดจากการผสมของ red green และ blue โดยทั้งสามค่านี้เป็นจำนวนเต็มตั้งแต่ 0 - 255  ค่าผสมของสีเหล่านี้เรียกว่าค่า RGB ในจาวานั้นมีการตั้งชื่อสีแล้วเอาไปคู่กับค่า RGB ของสีนั้นไว้บ้างแล้ว เดี๋ยวเราจะมาเซ็ตกัน แต่ก่อนอื่นต้องมาดูกันก่อนว่าสีจะถูกระบายไปที่ไหน

JFrame ทุกอัน จะประกอบด้วยส่วน content pane ซึ่งครอบคลุมบริเวณที่มองเห็นได้ทั้งหมดของวินโดว์ ยกเว้นไตเติ้ลบาร์
เติม contentPane.setBackground(Color.YELLOW); แทรกไปที่บรรทัดที่ 22

นี่คือการเรียกเมธอด setBackground ที่นิยามไว้ในคลาส Container ของจาวาไลบรารี่อยู่แล้ว โดยเป็นการใช้ออบเจ็กต์ของคลาส Container (ซึ่งเราตั้งชื่อว่า contentPane) เรียกเมธอดนี้ ผลการรันโค้ดของเมธอดจะส่งผลต่อตัว contentPane เอง โดยสีจะเปลี่ยนเป็นสีเหลือง (สีเหลืองถูกนิยามเป็นค่าคงที่ในจาวาอยู่แล้ว)  ลองรันดู

ตอนนี้เหลือ text กับรูป ซึ่งแต่ละอย่างก็ถูกยัดไว้ใน label คนละอัน
เรามาเริ่มทำ text   Welcome to Java Programming กันก่อนดีกว่า
ใช้  
textJLabel.setText("Welcome to Java Programming!"); เป็นการเรียกเมธอดของออบเจ็กต์ textJLabel   ลองเติมประโยคนี้เข้าไปหลังการสร้าง textJLabel และก่อนการเติม textJLabel เข้าไปใน content pane

ก็ยังไม่เห็นอะไรอยู่ดี ทั้งนี้อาจเป็นเพราะ เอาตัว text ไว้ไม่ถูกที่
แต่จาวาก็สามารถให้เราเลือกเซ็ตที่อยู่ของ text ได้ตลอดเวลา โดยเรากำหนดตำแหน่งซ้ายบนของ สิ่งของต่างๆ ได้ด้วยเมธอด setLocation
ลองใส่นี่ไปดู หลังคำสั่ง setText

textJLabel.setLocation(35,0);  โดยตำแหน่ง 0,0 คือ ซ้ายบนของ content pane ดังนั้นค่า y ที่เป็นบวกจะหมายถึง ลงข้างล่างมา ในตัวอย่างโค้ดนี้มีค่า y เป็น 0

อย่าตกใจถ้ารันแล้วยังไม่เห็นอะไร ทั้งนี้เพราะขนาดของ text ยังไม่ได้ถูกเซ็ต เราก็เซ็ตได้ด้วยการเรียกเมธอด  setSize

textJLabel.setSize(550,88);

เราเติมลงไปบรรทัดต่อไปเลย ตอนนี้น่าจะเห็นอะไรบ้างแล้ว ถ้าเราไม่ถูกใจขนาดก็เปลี่ยนเอาตามใจนะ   เอาล่ะ ทีนี้ก็มาถึงเรื่องฟอนต์กันบ้าง เราสามารถเซ็ตฟอนต์ได้ด้วยเมธอด setFont  ลองพิมพ์เรียกใช้ดู ดังนี้

textJLabel.setFont(new Font("SansSerif", Font.PLAIN, 36));

จะสังเกตเห็นว่า จะเซ็ตฟอนต์ ต้องสร้างออบเจ็กต์ ฟอนต์ ขึ้นมา โดยกำหนด ชื่อฟอนต์ สไตล์ของฟอนต์ และขนาด

คราวนี้ลองรันดูใหม่สิ
โอ้ ได้แล้..................

ใครบอก ถ้าเราสังเกตดีๆ จะเห็นว่า ยังมีความไม่เนียนในการทำอยู่ เพราะตัว text ไม่ได้อยู่กลางหน้าจอจริงๆ ที่เป็นแบบนี้เพราะว่า ตัว text ไม่ได้อยู่ตรงกลางของ textJLabel   ดังนั้นต้องทำให้มันอยู่ตรงกลาง โดยเรียกเมธอด setHorizontalAlignment

textJLabel.setHorizontalAlignment(JLabel.CENTER);

สามารถ set alignment ได้ทั้ง CENTER, LEFT, RIGHT

ตอนนี้เราจะได้วินโดว์ออกมาตอนรันแบบนี้


เหลือแต่รูปแล้ว JLabel แต่ละอันนั้น เก็บสิ่งที่เรียกว่า Icon ได้ ซึ่งเราใช้ตรงนี้เป็นรูปนั่นเอง การจะให้มีรูปอะไร เราใช้คำสั่ง setIcon ตามนี้

pictureJLabel.setIcon(new ImageIcon("bug.png"));

ซึ่งตัวชื่อไฟล์ ต้องเป็น full path หรือ เป็นไฟล์ที่อยู่ในโฟลเดอร์ที่เราเขียนคลาสนี้เท่านั้น จาวานั้นรับไฟล์ประเภท png, gif, jpeg, bmp ได้

แต่ว่าทำเท่านี้ยังเป็นแค่การกำหนดว่าจะใช้รูปอะไรเท่านั้น ต้องกำหนดด้วยว่าจะให้ ตัว pictureJLabel ของเราใหญ่เท่าไหร่ อยู่ตรงไหนด้วย ใช้คำสั้งนี้เลย

pictureJLabel.setBounds(54, 120, 500,250);

54, 120 คือ ค่า x, y นับลงมาจากตำแหน่ง 0,0 ที่ด้ายซ้ายบนของ content pane ส่วน 500 และ 250 คือความสูงและความกว้างที่เราต้องการ

ตอนนี้ก็แทบไม่มีอะไรเหลือให้ทำแล้ว รูปออกแล้ว ลองรันดู แต่จะเห็นว่า รูปจะยังเบี้ยวซ้ายอยู่ เราก็สามารถทำให้รูปอยู่ตรงกลางซะ โดยให้ JLabel ที่รูปมันอยู่ ไปอยู่ตรงกลางไง เรารู้วิธีแล้วล่ะนะ ทำสิ แค่นี้ก็เกือบเสร็จแล้ว เหลือทำ exeutable จากโปรแกรมนี้อย่างเดียว ดูด้านบนๆเน้อ

(อย่าลืมจัดโค้ดให้ดูเป็นหมวดหมู่ อ่านง่าย นะ)

ทำการบ้านด้วยยยย