Skip to main content
TH JAVA Online Book JAVA GUI MVC 1

#1 หนังสือเล่มนี้มีอะไรบ้าง

การเป็นนักพัฒนาซอฟต์แวร์ คือชีวิตที่เต็มไปด้วยการเขียนโค้ดจริงๆ หรือ?” ยินดีต้อนรับเข้าสู่โลกของการพัฒนาซอฟต์แวร์ยุคใหม่ ในโปรเจ็กต์นี้ เรามีอะไรให้ทำมากกว่าเพียงแค่ “การเขียนโค้ด”

 

โดยปกติแล้ว เราจะมีธรรมเนียมการต้อนรับน้องใหม่ ด้วยการให้เขียนโปรแกรมง่ายๆ เพียงแค่แสดงคำว่า “Hello World” ออกมาที่ส่วนแสดงผลลัพธ์

 

โค้ดคำสั่ง

th-java-java-gui-mvc-1-1

ภาพที่ 1-1 ตัวอย่างโค้ดคำสั่งแสดงผล

 

ผลลัพธ์

th-java-java-gui-mvc-1-2

ภาพที่ 1-2 ส่วนแสดงผลของโปรแกรม NetBeans IDE

 

แต่ในโปรเจ็กต์นี้ เราจะสร้างโปรแกรม Hello World ขึ้นมา ซึ่งเป็นโปรแกรมแบบ GUI หรือ Graphical User Interface หมายถึง โปรแกรมที่มีหน้าจอกราฟิก ใช้ในการติดต่อกับผู้ใช้งาน ซึ่งผู้ใช้จะมองไม่เห็นโค้ดที่อยู่เบื้องหลังของโปรแกรมแม้แต่ตัวเดียว

 

th-java-java-gui-mvc-1-3

ภาพที่ 1-3 แสดงมุมมองของผู้ใช้และนักพัฒนาซอฟต์แวร์

 

หลังจากจบโปรเจ็กต์แล้ว เราจะได้ไฟล์ .exe ซึ่งสามารถนำไปใช้งานที่ไหนก็ได้ บนระบบปฏิบัติการ Windows

th-java-java-gui-mvc-1-4

ภาพที่ 1-4 แสดงรายการไฟล์ต่างๆ ในโปรเจ็กต์

 

 

ขั้นตอนการทำงานของโปรแกรม

1. เมื่อดับเบิลคลิกที่ไฟล์ Hello World.exe

ภาพที่ 1-5 ไฟล์ Hello World.exe

 

2.โปรแกรมจะเริ่มต้นทำงาน และแสดงหน้าจอขึ้นมา

th-java-java-gui-mvc-1-6

ภาพที่ 1-6 แสดงหน้าจอแรกของโปรแกรม

 

3. ผู้ใช้งานสามารถกรอกชื่อลงไปในกล่องรับข้อความได้ (Text Field)

th-java-java-gui-mvc-1-7

ภาพที่ 1-7 แสดงการกรอกชื่อในกล่องรับข้อความ

 

4. เมื่อคลิกที่ปุ่ม Enter จะปรากฏข้อความ “Hello!” ตามด้วยชื่อที่ผู้ใช้กรอกเข้ามา

th-java-java-gui-mvc-1-8

ภาพที่ 1-8 แสดงผลลัพธ์ของโปรแกรม

 

5. เมื่อคลิกที่ปุ่ม “Clear” ข้อความผลลัพธ์จะถูกลบไป

th-java-java-gui-mvc-1-9

ภาพที่ 1-9 แสดงการล้างค่าข้อมูล

 

 

เงื่อนไขการทำงาน

ในกรณีที่ผู้ใช้ไม่กรอกข้อความใดๆ ลงไปในกล่องรับข้อความ และคลิกที่ปุ่ม “Enter” จะปรากฏหน้าจอแจ้งเตือนผู้ใช้ให้กรอกชื่อเข้ามา

ภาพที่ 1-10 แสดงการแจ้งเตือน

 

 

รูปแบบการพัฒนาซอฟต์แวร์

โปรเจ็กต์ที่เราสร้างขึ้นมา จะอยู่ในรูปแบบ MVC หรือ Model, View และ Controller ซึ่งเป็นการเขียนโปรแกรมรูปแบบหนึ่ง ที่แบ่งส่วนต่างๆ ของโปรแกรมออกเป็น 3 ส่วนหลักๆ คือ

th-java-java-gui-mvc-1-10

ภาพที่ 1-11 โมเดล (Model)

 

ส่วนที่ 1) M ย่อมาจาก Model เป็นส่วนที่ทำหน้าที่เป็นออบเจ็กต์ตัวแทนของข้อมูล

ภาพที่ 1-12 วิว (View)

 

ส่วนที่ 2) V ย่อมาจาก View คือหน้าจอโปรแกรม ใช้ในการติดต่อกับผู้ใช้งาน

th-java-java-gui-mvc-1-13

ภาพที่ 1-13 คอนโทรเลอร์ (controller)

 

ส่วนที่ 3) C ย่อมาจาก Controller เป็นส่วนที่ควบคุมลำดับการทำงานของโปรแกรม โดยจะเรียกใช้งานทั้ง Model และ View ให้ทำงานร่วมกันจนได้ผลลัพธ์ตามที่ต้องการ

th-java-java-gui-mvc-1-14-1

ภาพที่ 1-14 แสดงการทำงานร่วมกันของ MVC

 

 

โครงสร้างของโปรเจ็กต์

เราจะสร้างโปรเจ็กต์ชื่อ “Hello World” ขึ้นมา ซึ่งมีโครงสร้างดัง ภาพที่ 1-15

th-java-java-gui-mvc-1-15

ภาพที่ 1-15 โครงสร้างโปรเจ็กต์

 

 

อธิบายรายชื่อไฟล์

th-java-java-gui-mvc-1-16

ภาพที่ 1-16 ตารางอธิบายรายชื่อไฟล์

 

หลังจากมองเห็นภาพรวมทั้งหมดแล้ว ในตอนต่อไปเราจะไปเรียนรู้กันค่ะว่า เทคนิคสำคัญที่จะทำให้การเรียนคอร์สนี้ประสบความสำเร็จนั้น มีอะไรบ้าง ^_^

 

Comments

comments