สมาชิก นางสาวชลธิชา อวยพร เลขที่ 19 นางสาวณัฐชา เพียสังกะ เลขที่ 20 นางสาวปรารถนา ขำขุด เลขที่ 21 นางสาววรรณิสา ยืนยง เลขที่ 23 นางสาวสริดา บัวทอง เลขที่ 24 นางสาวอนัญญา อิทธานุรักษ์ เลขที่ 25 นางสาวอินทิรา สุขกรม เลขที่ 26 ชั้นมัธยมศึกษาปีที่ 6/1 เสนอ ครูทรงศักดิ์ โพธิ์เอี่ยม โรงเรียนเฉลิมพระเกียรติสมเด็จพระศรีนครินทร์ กาญจนบุรี

1. บทที่ 12
การเขียนโปรแกรมโดยใช้
NetBeans

2. โปรแกรม NetBeans เป็นโปรแกรม IDE สำหรับเขียนโปรแกรมภำษำจำวำในลักษณะต่ำงๆ เป็นโปรแกรมที่เพียงแต่เติม และจัด
ระเบียบโค้ดโปรแกรม ก็สำมำรถสร้ำงโปรแกรมประยุกต์ได้ง่ำย และเป็นโปรแกรมที่หำใช้ได้ฟรี
กำรเขียนโปรแกรมด้วย NetBeans นัน้จะไม่ต้องพิมพ์คำสงั่เพื่อรันโปรแกรม เนื่องจำกมีเมนูคำสงั่ต่ำงๆ กำรเขียน
โปรแกรมเมื่อพิมพ์คำสงั่ลงไป โปรแกรมจะประมวลผลเพื่อพิจำรณำว่ำเป็นคำสงั่หรือเมธอดใด จำกนัน้จะแสดงคำสงั่ที่น่ำจะเป็น
ออกมำให้เลือกใช้ ซงึ่เหมำะกับผู้ที่ เขียนโปรแกรมไม่คล่อง และผู้ที่ไม่ชอบจำเมธอดต่ำงๆ
เริ่มต้นการสร้าง Project บน
Netbeans
เลือกเมนู File -> New Project

3. เลือก Java -> Java Application

4. กาหนดชื่อ Project ในส่วนของ Create Main Class ให้ติ๊กออก จากนนั้เลือก Finish

5. ตอนนี้ได้โปรเจคเปล่า ๆ ยังไม่มีไฟล์
.java
สร้าง Package โดยการคลิกขวา Project -> New -> Java Package...

6. ใส่ชื่อ Package เช่น com.java.myapp
ได้ Package เช่น com.java.myapp เรียบร้อยแล้ว

7. สร้างไฟล์ Class ของ Java
คลิกขวาที่ Package เลือก New -> Others...

8. การสร้าง GUI ในการสร้างไฟล์ .java แบบ GUI สามารถเลือก Class ได้หลายตัวมาก เช่น
Swing GUI Forms และภายใน Swing ก็มี Class แยกย่อยอีกหลายตัว เช่นเดียวกัน

9. หรือจะเลือกใช้AWT GUI Forms ซึ่งจะแยกย่อย Class ได้อีก 4-5 ตัว
หลายคนจะยังสงสัยว่าจะเลือกตัวไหนดี ซึ่งปกติแล้วพวกการเลือกพวก GUI ต่าง ๆ เป็นเพียงค่า Default เริ่มต้นตอนที่
สร้างไฟล์Classเท่านั้น แต่หลังจากที่สร้างแล้ว เราสามารถทา การแก้ไข Code ต่าง ๆ และเรียกใช้งาน Class ต่าง ๆ เพิ่ม
ได้ทีหลัง และสามารถใช้ได้ทงั้Swing และ AWT หรืออื่น ๆ ในการออกแบบและสร้าง Form ได้
ในขนั้ตอนนี้ให้เลือก Swing GUI Forms -> JFrame Form

10. กาหนดชื่อ Class

11. ตอนนี้ได้เราได้ Class ที่มี .java เรียบร้อยแล้ว พร้อมทงั้ Form เปล่า ๆ ที่โปรแกรมสร้างมาให้

12. จะเห็นว่ามี Toolbox ที่ประกอบด้วย Controls และ Object ต่าง ๆ มากมาย ที่ไว้ออกแบบ Form

13. ก่อนอื่นให้เราเข้าใจเกี่ยวกับ Layout ของ Form ซะก่อน ซึ่งปกติแล้วเวลาเราเขียนบน VB.Net หรือ Visual Studio จะมีการ
จัดพวกControl ต่าง ๆ ตามตาแหน่ง X , Y ของ Form แต่ในภาษา Java เราสามารถเลือกที่จะจัดรูปแบบของ Control และ
Object ต่าง ๆ ได้ เช่น จะเป็นแบบ GridLayout (ให้นึกถึง HTML แบบ Table) และอื่น ๆ อีกหลายรูปแบบ แต่ในค่า
พื้นฐานแนะนาให้ปรับเป็น Null layout คือจัดวางตาแหน่งแบบ X , Y เหมือนกับ VB.Net ที่เราคุ้นเคย

14. ตอนนี้ได้เราได้ Class ที่มีทดสอบการสร้าง Label , TextField และ Button ด้วย (JLabel, jTextField และ jButton) อาศัย
การลากวาง ๆ .java เรียบร้อยแล้ว พร้อมทงั้ Form เปล่า ๆ ที่โปรแกรมสร้างมาให้

15. ปรับแต่Properties ของ Form ซะหน่อยด้วยการคลิกที่Form แล้วไปที่

16. หรือจะปรับแต่งพวก Size ได้ตามขนาดที่ต้องการ
ทดสอบการรันโปรแกรม
เลือก Class ที่เราได้สร้างไว้เพื่อทา การ Run

17. ได้ผลลัพธ์ดัง
รูป
สรุป จากผลลัพธ์จะเห็นว่า Netbeans ช่วยให้เราสร้าง Form GUI ด้วย Java แบบง่ายมาก ๆ โดยที่เรายังไม่ได้เขียน Code
เลยซะบรรทัด ก็สามารถสร้าง GUI ได้แล้ว และขนั้ตอนถัดไป หลังจากได้ GUI แล้ว เราจะต้องสร้าง Event เหตุการณ์ต่าง
ๆ กับ User เช่นการรับค่าผ่าน Input และแสดง Dialog โต้ตอบแบบง่าย ๆ
Tip&Trick
ในการ code คาสัง่ต่างๆ เราสามารถกด CTRL+SpaceBar เพื่อเรียกดูได้ว่าสามารถใช้method หรือเรียก Attribute ใดมา
ใช้ได้บ้าง หรือบางทีNetBeans ก็จะขึ้นส่วนนี้มาให้เอง

18. เมื่อทา การแก้ไข Code เสร็จเรียบร้อย เราจะลองทา การ Run โปรแกรมนี้ดู โดยการกดปุ่มสีเขียวที่อยู่ด้านล่างแถบ
เมนู

19. โดย NetBeans จะทา การ Save ให้อัตโนมัติทุกครั้งที่จะทา การ Run ถ้า NetBeans ทา การ compile แล้วไม่พบ error
โปรแกรมจะแสดงผลที่ส่วนด้านล่างดังภาพ

20. การสร้าง app android
เริ่มต้นสร้างแอปพลิเคชันแอนดรอยด์บน Eclipse
เริ่มต้นสร้างโปรเจค
เริ่มแรกให้เลือกไปที่ File > New > Android Application Project

21. ถ้าไม่มีให้เลือกก็ให้ไปที่ File > New > Other.. แทน จะมีให้เลือก Android > Android Application Project
(แปลว่าไม่ได้ติดตงั้ ADT Bundle แต่ไปใช้ Eclipse แบบธรรมดาแทนแน่ๆ แนะนาให้เปลี่ยนไปลง ADT Bundle แทน)

22. จะมีหน้าต่างให้กา หนดค่าต่างสาหรับโปรแกรม โดยหน้าแรกสุดจะประกอบไป
ด้วย
Application Name : ชื่อแอปพลิเคชันที่จะแสดงบนเครื่องของผู้ใช้
Project Name : ชื่อโปรเจคของแอปพลิเคชันที่จะแสดงใน Eclipse
Package Name : ชื่อแพคเกจของแอปพลิเคชันนี้
Minimum Required SDK : เวอร์ชันของแอนดรอยด์ขั้นต่าที่รองรับ
Target SDK : เวอร์ชันของแอนดรอยด์ที่จะใช้ในโปรเจคนี้
Compile With : เวอร์ชันของแอนดรอยด์ที่จะใช้ Compile โปรเจคนี้
Theme : ธีมหรือรูปแบบของแอปพลิเคชัน

23. สาหรับ Application Name กับ Project Name สามารถตั้งชื่อแตกต่างกันได้ แต่ Project Nameไม่แนะนาให้มีเว้นวรรค
ในขณะที่ Application Name สามารถกา หนดได้ตามปกติ
ส่วน Package Name เป็นเสมือนชื่อที่เอาไว้ระบุแอปพลิเคชันนนั้ๆ สามารถดูเพิ่มเติมได้ที่Package Name บน
Android Application คืออะไร?
สาหรับ Theme เอาไว้กา หนดรปูแบบของ UI เบื้องต้นว่าให้มีลักษณะยังไง โดยจะมีให้เลือกระหว่าง None, Holo Dark,
Holo Light และ Holo Dark with Action Bar

24. ในเบื้องต้นเจ้าของบล็อกกา หนดค่าต่างๆไว้
ดังนี้

25. จากนนั้ก็กดป่มุ Next > มายังหน้ากา หนดว่าจะตั้งค่าอะไรบ้าง ซึ่งไม่ต้องยุ่งอะไร ให้กดปุ่ม Next > ต่อไปได้
เลย

26. หน้าถัดมาจะเป็นหน้ากา หนดไอคอนของแอปพลิเคชัน ซึ่งจะมีภาพไอคอนอยู่ในระดับหนึ่งและสามารถปรับได้
เล็กๆน้อยๆ (ลองกดเล่นๆดูได้) ถ้าจะให้ดี แนะนาให้เตรียมภาพไอคอนมากา หนดไว้ในหน้านี้เลยดีกว่า เพราะโปรแกรมจะ
ทา การปรับขนาดของภาพไอคอนให้เหมาะสมกับแต่ละหน้าจอให้เลย ถ้าใส่ภาพไอคอนเองทีหลังจะต้องมานั่งปรับขนาดภาพ
เองนะเออ เมื่อกา หนดเสร็จแล้วก็กดปุ่ม Next > ได้เลย

27. ต่อมาจะเป็นรูปแบบของ Activity ที่จะสร้าง ให้เลือกเป็น Empty Activity แล้วกดป่มุ Next

28. ต่อมาจะเป็นการกาหนดชื่อของคลาส Activity ที่จะสร้าง ชื่อ Layout และชื่อ Fragment รวมไปถึงรูปแบบของการ
เปลี่ยนไปยังหน้าต่างๆ (Navigator Type) เนื่องจากบทความนี้สาหรับเริ่มต้นอย่างง่าย ดังนั้นจึงกา หนดค่าตามเจ้าของ
บล็อกไปก่อนนะ กดป่มุ Finish เพื่อทา การสร้างได้เลย

29. รอซักพักจนโปรแกรมสร้างโปรเจคเริ่มต้นเสร็จ ก็จะได้หน้าตาประมาณแบบ
นี้

30. การจัดการเล็กน้อยสาหรับโปรเจค
สาหรับหน้าแรกที่แสดงให้เห็นนี้เรียกว่า Graphical Layout คือหน้าออกแบบแอปพลิเคชันแบบซึ่งจะเป็นการจา ลอง
หน้าจอให้เห็นว่าที่ออกแบบไว้มีหน้าตาคร่าวๆยังไง สามารถลากอุปกรณ์ต่างๆที่อยู่ใน Palette มาวางบนหน้าจอได้ทันที
ส่วน activity_main.xml จะขึ้นอยู่กับชื่อของไฟล์นั้นๆ
โดยที่หน้านี้สามารถดูได้อีกแบบคือ XML ซึ่งเป็นในรูปแบบโค๊ด XML โดยเจ้าของบล็อกจะนิยมทา งานในหน้า XML
มากกว่า เพราะการจัดเลย์เอาท์ในนี้มันทา ได้ยืดหยุ่นกว่า ถ้าเป็นมือใหม่ก็แนะนาให้ฝึกจากหน้า Graphical Layout ก่อน
โดยใช้หน้าต่างที่อยู่ตรงขวามือที่ชื่อว่า Outline ช่วย
สาหรับการสลับไปมาระหว่างสองรูปแบบดังกล่าวนี้สามารถกดได้ที่แถบข้างล่างดังภาพ

32. สังเกตที่แถบข้างบนจะเห็นว่ามี MainActivity.java เปิดไว้อยู่ด้วย สามารถกดสลับไปมา
ระหว่างแต่ละหน้าได้ โดยที่หน้านี้จะเป็นหน้าสาหรับเขียนโค๊ดคาสัง่ภาษา Java ที่จะ
เอาไว้ใช้ควบคมุการทา งานของแอปพลิเคชัน

33. และจะเห็นว่ามีสองบรรทัดที่มีขัดเส้นใต้สีเหลือง ซึ่งอย่าเข้าใจผิดว่าโค๊ดคาสัง่มีเออเรอร์นะ แต่หมายถึง "การเตือน"
หรือ Warning ซึ่งมีสาเหตุมาจากการประกาศคลาสทั้งสองตัวนี้ไว้แต่ทว่าไม่มีการเรียกใช้ในโค๊ดคาสัง่ โปรแกรมจึงแจ้ง
ประมาณว่า "ประกาศคลาสนี้ไว้แล้วทา ไมไม่ใช้ มันเปลืองนะ" ซึ่งจะปล่อยไว้อย่างงนั้ก็ได้ หรือจะลบทิ้งก็ได้เช่นกัน
เพิ่มเติม - สาหรับสาเหตุของ Warning จะมีแตกต่างกันไป ให้เอาเม้าส์วางบนคาสัง่นั้นแล้วดูสาเหตุได้ เพราะไม่ได้
หมายความว่ามีขีดเส้นใต้สีเหลืองแล้วจะลบทิ้งได้เลยนะ
ทางที่ดีก็ลบทิ้งละกัน โดยเจ้าของบล็อกลบส่วนที่ไม่จา เป็นออกเหลือดังนี้

34. สาหรับคาสัง่ @Override บนแอนดรอยด์จะไม่มีผล สามารถลบออกได้เลย หรือจะปล่อยไว้อย่างนนั้ก็ได้
เช่นกัน
เท่านี้ก็สร้างโปรเจคใหม่เสร็จเรียบร้อยแล้ว
อ้างอิง
- http://www.thainetbeans.com/articles/dbnetbeans/dbnetbeans.php
- http://itd.htc.ac.th/st_it50/it5012/P_2/Object%20Oriented%20Programming %201/index.htm
- http://www.thaicreate.com/java/java-gui-netbeans.html
- http://www.akexorcist.com/2014/03/android-code-eclipse.html

35. สมาชิก
นางสาวชลธิชา อวยพร เลขที่ 19
นางสาวณัฐชา เพียสังกะ เลขที่ 20
นางสาวปรารถนา ขาขุด เลขที่ 21
นางสาววรรณิสา ยืนยง เลขที่23
นางสาวสริดา บัวทอง เลขที่ 24
นางสาวอนัญญา อิทธานุรักษ์ เลขที่ 25
นางสาวอินทิรา สุขกรม เลขที่ 26
ชั้นมัธยมศึกษาปีที่ 6/1
เสนอ
ครูทรงศักดิ์ โพธิ์เอี่ยม