สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com

ฟรี TUTORIAL JAVA

ฟรีtutorial JAVA 01 install Eclipse ฟรีtutorial JAVA 02 intro to programming Eclipse ฟรีtutorial JAVA 03 condiotion ฟรีtutorial JAVA 04.loop ฟรีtutorial JAVA 05.array ฟรีtutorial JAVA 05 2 array cont ฟรีtutorial JAVA 06 01 function ฟรีtutorial JAVA 06 02 function cont ฟรีtutorial JAVA 07 object ฟรีtutorial JAVA 08 string ฟรีtutorial JAVA 09 constructor ฟรีtutorial JAVA 10 01 oop ฟรีtutorial JAVA 10 02 oop2 ฟรีtutorial JAVA 11 exception ฟรีtutorial JAVA 12 reading file ฟรีtutorial JAVA 13 thread ฟรีtutorial JAVA 14 generic ฟรีtutorial JAVA 15 01 GUI ฟรีtutorial JAVA 15 02 GUI2 ฟรีtutorial JAVA 15 03.GUI3 ฟรีtutorial JAVA 16 using WindowBuilder ฟรีtutorial JAVA 17 event ฟรีtutorial JAVA 18 database management system ฟรีtutorial JAVA 19 ER diagram ฟรีtutorial JAVA 20 Relational ฟรีtutorial JAVA 21 Xampp ฟรีtutorial JAVA 22 JDBC ฟรีtutorial JAVA 23 MVC ฟรีtutorial JAVA 24 SQL ฟรีtutorial JAVA
ขอย้ำอีกครั้งว่าเนื้อหาที่เห็นอยู่นี้ไม่ใช่เนื้อหาตามปกติที่เราสอนในห้องเรียนเป็นแค่ tutorial ไว้อ่านประกอบเฉยๆ แทบไม่เกี่ยวกันเลย และไม่เกี่ยวกับการบ้านที่ทำครับ ในห้องเรียนเนื้อหาจะเยอะกว่านี้ค่อนข้างมากครับ
ขอบคุณน้องตี้ อย่างสูงสำหรับ Tutorial ดีๆ

ฟรี TUTORIAL DATA STRUCTURE

DATA STRUCTURE

ฟรีtutorial : DATA STRUCTURE : 01 1การเรียงลำดับ(Sorting) ฟรีtutorial : DATA STRUCTURE : 01 2 การเรียงลำดับ2 ฟรีtutorial : DATA STRUCTURE : 02 อาร์เรย์ลิสต์ (Array List) ฟรีtutorial : DATA STRUCTURE : 03 ลิงค์ลิสต์ (Linked List) ฟรีtutorial : DATA STRUCTURE : 04 สแต๊ค ฟรีtutorial : DATA STRUCTURE : 05 1 คิวและไพออริตี้คิว ฟรีtutorial : DATA STRUCTURE : 05 2 คิวและไพออริตี้คิว ฟรีtutorial : DATA STRUCTURE : 06 1 ไบนารีทรี ฟรีtutorial : DATA STRUCTURE : 06 2 ไบนารีเสิร์ชทรี ฟรีtutorial : DATA STRUCTURE : 06 3 ไบนารีเสิร์ชทรี ฟรีtutorial : DATA STRUCTURE : 08 แฮช ฟรีtutorial : DATA STRUCTURE : 09 กราฟ ฟรีtutorial : DATA STRUCTURE :
ขอย้ำอีกครั้งว่าเนื้อหาที่เห็นอยู่นี้ไม่ใช่เนื้อหาตามปกติที่เราสอนในห้องเรียนเป็นแค่ tutorial ไว้อ่านประกอบเฉยๆ แทบไม่เกี่ยวกันเลย และไม่เกี่ยวกับการบ้านที่ทำครับ ในห้องเรียนเนื้อหาจะเยอะกว่านี้ค่อนข้างมากครับ
ขอบคุณน้องตี้ อย่างสูงสำหรับ Tutorial ดีๆ

Graphic User Interface (GUI)

            GUI คือส่วนที่เป็นกราฟฟิคของโปรแกรมเอาไว้ใช้ติดต่อกับผู้ใช้งานจริงๆ ในตอนแรกๆที่เขียนโปรแกรมจะเป็นทำงานและทดสอบผ่าน console แต่การสร้าง GUI จะทำให้โปรแกรมสมบูรณ์และพร้อมสำหรับการใช้งานจริงๆ สำหรับการสร้าง GUI ในจาวามีสิ่งที่เรียกว่า Abstract Window Toolkit (AWT) และ Swing มาช่วยในการทำงาน

ส่วนประกองของ GUI

            ประกอบด้วย 3 ส่วนหลักๆที่จำเป็นสำหรับโปรแกรม

- Layout Managers : คือส่วนของการจัดวาง Layout ต่าง โดย Layout ก็คือรูปแบบการวางสิ่งต่างๆหน้าต่างของโปรแกรม

- Containers : คือพวก Component ที่สามารถนำมาสร้างเป็น Window Form หลักได้ เช่น Frame หรือวินโดว์, Dialog กล่องสำหรับแสดงข้อความ และPanel เป็นเหมือนกระดาษที่แปะอยู่บนวินโดว์

- Graphical Components : คือพวกของต่าง ๆ ที่เราจะนำมาใส่ใน Windows Form เพื่อให้โปรแกรมใช้งานได้ จำนวนปุ่มต่างๆ เช่น พวก Label, Textbox , Button , Menu, MenuBar และอื่น ๆ

การใช้งานของข้างบนนี้จะทำผ่านคลาส ที่อยู่ในกลุ่มของ Swing (javax.swing) และ AWT (java.awt) คือต้องทำงานการอิมพอร์ตเข้ามาจาก java.awt.*; หรือ javax.swing.*; โดยทั้ง Swing และ AWT ล้วนทำงานได้เหมือนกันคือสร้าง  window form กับพวกปุ่มต่างๆและการจัดวางหน้า โดยที่ AWT นั้นสืบคุณสมบัติมาจากComponent ส่วน Swing สืบคุณสมบัติมาจาก JComponent ชื่อต่างๆก็จะขึ้นต้นด้วย J เช่น JLabel, JTextbox , JButton

แล้วจะใช้อันไหน – Swing จะได้ใช้มากกว่าเพราะเอาไปรันในระบบปฏิบัติการที่ต่างกันก็ไม่เพี้ยน ทำงานได้เร็วกว่าและมีลูกเล่นต่างๆมากว่าด้วย ดังนั้นต่อไปก็จะพูดถึงและใช้ Swing

 


รูป15-1

การสร้าง GUI ก็เพียงแค่สร้างคลาสขึ้นมาคลาสหนึ่งจากนั้นก็ทำการ extends JFrame(บรรทัดที่ 6)

บรรทัดที่ 1-3 :  สามารถเขียนได้แบบ import javax.swing.*; จะเห็นว่าคอมโพเนนท์ต่างๆที่อิมพอร์ทมาจะมีตัว

J อยู่ข้างหน้า

บรรทัดที่ 14 : สร้างคอนสตรัคเตอร์ขึ้นมา ด้วยคำสั่งต่างๆดังนี้

บรรทัดที่ 16 : setSize(x,y); ตั้งขนาดของกรอบวินโดว์

บรรทัดที่ 17 : setLocation(x,y); เวลาที่เปิดโปรแกรมจะให้มันรันอยู่ส่วนไหนของหน้าจอ ในบรรทัดนี้เซ็ทเป็น

(500,280) ก็จะรันอยู่ตรงกลางหน้าจอ

บรรทัดที่ 18 : setDefaultCloseOperation ตรงนี้ให้เป็น EXIT_ON_CLOSE คือเวลากดกากบาทสีแดง

โปรแกรมก็จะปิดการทำงาน

บรรทัดที่ 19 : setVisible(true); คือทำให้หน้าจอวินโดว์มันมองเห็นใช้ได้

บรรทัดที่ 21-22 : สร้างLabel สำหรับแปะตัวหนังสือ

บรรทัดที่ 24-27 : สร้าง Panel เอาตัวหนังสือไปแปะ

            จากนั้นในเมท็อด main ให้เรียกตัวเองขึ้นมาทำงาน

ผลลัพธ์

 


รูป15-2

แต่เนื่องจากคำสั่งสำหรับปุ่ม textfield textarea อะต่างๆมากมายนั้นมีเยอะมาก ถ้าจะเขียนเองก็จะยาวและเยอะมากๆเพราะต้องนึกถึงความจริงทำโปรแกรมคงไม่ได้มีแค่ปุ่มเดียวจบแต่มันจะหลายปุ่มหลายช่องสำหรับกรอกข้อมูล eclipse จึงมีสิ่งที่เรียกว่า WindowBuilder Designer มาช่วยในการสร้าง GUI ซึ่งทำให้การสร้าง GUI ง่ายมากๆแค่ลากวาง ลากวาง แต่ทั้งนี้ทั้งนั้นก็ต้องโหลด WindowBuilder มาก่อน(อ่านได้จาก การดาวน์โหลดและใช้งานWindowBuilder)

ทีนี้มาลองสร้าง JFrame อีกวิธีหนึ่งกัน

 


รูป15-3

            ขั้นแรกคลิกขวาเลือกที่ New เหมือนเวลาจะสร้างคลาส แต่เลือกตรง other…

 


รูป15-4

ได้หน้าต่างนี้ขึ้นมาเลือกตรงคำว่า WindowBuilder จะปรากฏ Swing Designer จากนั้นเลือกJFrame กด Next เพื่อสร้าง JFrame

 


รูป15-5

จากนั้นก็ใส่ชื่อและกด finish

 


รูป15-6

ได้ JFrame มา 2 ส่วนโดยไม่ต้องพิมพ์ โดยส่วนแรกคือเมท็อด main สำหรับเรียงตัวเองพร้อมดักจับ exception ให้ด้วย และส่วนที่สองคือคอนสตรัคเตอร์สำหรับกำหนดรูปร่างหน้าและการทำงานของวินโดว์ โดยในคอนสตรัคเตอร์จะกำหนดค่าพื้นฐานให้กับวินโดว์ด้วย นอกจากนี้ยังทำการอิมพอร์ทให้ทั้ง java.awt และ javax.Swing

 


รูป15-7

การใช้เครื่องมือต่างๆของ WindowBuilder

            ก็อย่างที่บอกไปแล้วว่า WindowBuilder ช่วยให้การสร้าง from ต่างๆง่ายมากเพราะเราไม่จำเป็นต้องเขียนโค๊ดเอง eclipse จะเขียนให้อัตโนมัติจากการลากวางๆใน WindowBuilder ดังนั้นเราต้องรู้ว่ามีเครื่องมืออะไรให้ใช้บ้าง

            ก่อนอื่นให้กดปุ่ม Design ซึ่งจะอยู่บริเวณเหนือ console

 


รูป15-8

จะปรากฏหน้าต่างดังข้างล่าง

 


รูป 15-9

มาดูว่าในหน้าต่างนี้ประกอบไปด้วยอะไรบ้าง

 


รูป 15-10

หมายเลข 1 : จะบอกว่าเราใช้คอมโพเนนท์อะไรและชื่ออะไรบ้าง

หมายเลข 2 : ถ้าไปคลิกที่คอมโพเนนท์ใดๆจะปรากฏรายละเอียดของคอมโพเนนท์นั้นๆ เช่น ชื่อ ตัวหนังสือที่ใช้ สีตัวหนังสือ ชื่อตัวแปร และอื่นๆ

หมายเลข 3 : ที่สำหรับกดคอมโพเนนท์ต่างๆลากไปใส่หมายเลข 4 ที่เป็นวินโดว์

หมายเลข 4 : วินโดว์สำหรับลากคอมโพเนนท์ต่างๆมาใส่

หมายเลข 5 : ตัวอย่างของปุ่มที่ถูกลากเอามาใส่แล้ว

            ในรูปเอา JBotton ใกล้ๆเลข3 ลากขึ้นไปแปะในJframe โค๊ดก็จะไปปรากฏเมื่อเราคลิกที่ source ปุ่มติดกับ design

 


รูป15-11

            บรรทัดที่ 42 ปรากฏโค๊ดของปุ่มโดย new ขึ้นมา JBotton ซึ่งง่ายดายไปไม่ต้องเขียนเอง

 



แผนผังการเรียนเขียนโปรแกรม