Home / Spacial GUI

Spacial GUI

Graphical User Interface (GUIs)

                                    ... เอ๊ะ! เอ๊ะ! GUIs นี่คืออะไรน๊า

                GUI คืออะไร

                ในการใช้งานโปรแกรมทั่วไป เรามักจะเห็นหน้าตาของโปรแกรมที่พยายามแสดงจอภาพต่างๆ

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

เกินความยาวที่มีให้ และถ้าใส่ข้อมูลที่ไม่ตรงกับที่กำหนด (เช่น ให้ป้อนตัวเลข แต่ใส่เป็นตัวอักษรมา) ก็จะ

แสดงจอภาพ (dialox box) มาแจ้งแก่ผู้ใช้ว่า ป้อนข้อมูลผิดพลาด ให้ป้อนใหม่จนกว่าจะถูกต้อง เมื่อป้อนเสร็จ

ก็อาจจะคลิกปุ่มๆ หนึ่งเพื่อใช้ทำงานยังขั้นตอนต่อไป ลักษณะจอภาพที่เห็นนี้เรียกว่า "User Interface"

คือ User สามารถติดต่อกับโปรแกรมได้โดยผ่านทางจอภาพ

แต่ในปัจจุบันเทคโนโลยีได้ก้าวไกลไปมาก การพัฒนาด้าน User Interface ก็มีมากขึ้นจนเรา

สามารถนำเอา graphic มาช่วยในการออกแบบจอภาพให้สวยงามและสื่อสารกับ user ได้อย่างมีประสิทธิภาพ

มากขึ้น (เข้าใจได้ง่ายยิ่งขึ้น) เช่น การแสดงด้วย Icon รูปภาพ หรืออื่นๆ ที่เหมือนจริงมากยิ่งขึ้น ลักษณะเช่น

นี้ เรียกว่า "Graphical User Interface" หรือ GUI

ดังนั้นการเขียนโปรแกรมแบบ GUI (GUI programming) จึงเป็นการเขียนโปรแกรมที่

พยายามให้มนุษย์ (ผู้ใช้) สื่อสารและทำงานกับโปรแกรมได้อย่างมีประสิทธิภาพมากยิ่งขึ้นด้วยการเข้าใจ

   interface หน้าที่ ขั้นตอนการทำงานและข้อความต่างๆ ของ interface ได้ง่ายขึ้น

                  GUI  มี package ที่เกี่ยวข้องคือ

                  - Abstract Window Toolkit (AWT)

                      - Swing(Graphical User Interface Toolkits)

                     - Java 2D(2D Graphics ,Text and Images)


          AWT คืออะไร

                  AWT หรือ Abstract Windowing Toolkit เป็นเครื่องมือพื้นฐานในการเขียนโปรแกรมด้วย

GUI ใน Java โดยในการเขียนโปรแกรมด้วย GUI นั้น จะต้องประกอบไปด้วย Components,

    Containers และ Layout Managers

                  AWT Components

                   AWT Components เป็น Class ที่ java ได้สร้างมาให้ซึ่งสามารถใช้งานได้เลย (building

block) ประกอบด้วย class ต่อไปนี้

Component, Container, Button, Canvas, CheckBox, Choice, Dialog, Frame, Label, List,

Menu, MenuBar, Manultem, Panel, Scrollbar, TextArea, TextComponent, และ TextField ซึ่ง

     Class ต่างๆ นี้ จัดเก็บอยู่ใน Package "java.awt"

                 AWT Containers

                  Containers จัดเป็น Component อย่างหนึ่งที่สามารถนำ Component อื่นๆ มาใส่เอาไว้ได้

(ใช้จัดเก็บ Components) ประกอบด้วย class ต่อไปนี้ Applet, Container, Dialox, File Dialog,

     Freame, Panel, ScrollPane และ Window

                Layout Managers

                  ใช้สำหรับจัดแสดง Container ออกทางจอภาพ (ใช้จัดเรียง Containers) ประกอบไปด้วย class

       ต่อไปนี้ BorderLayout, FlowLayout, CardLayout, GridLayout และGridBagLayout


         Swing คืออะไร

                เนื่องจาก AWT เมื่อนำมาใช้ในการเขียน GUI program นั้น จะมีปัญหาบางอย่างเกิดขึ้น เช่น

สิ้นเปลืองหน่วยความจำของคอมพิวเตอร์ เป็นต้น ทำให้มีการพัฒนา package ชื่อ "swing" ขึ้นมาเพื่อ

ช่วยสนับสนุนการทำงานให้ดีขึ้น แต่ไม่ได้นำมาใช้งานแทน AWT เพราะยังคงใช้ AWT อยู่ และ

Swing เองก็ยังคงต้อง extends บาง class จาก AWT มาใช้งานด้วย

Swing เป็น API (Application Programming Interface) ตัวหนึ่งใน Java Foundation class

(JFC) ซึ่งเป็นส่วนหนึ่งของ JDK โดย API ใน JFC ประกอบไปด้วย Accessibility, Drag-and-Drop,

          Java2D, Swing และ Input Method Framework

                   ดังนั้น AWT และ Swing จะใช้งานร่วมกัน โดยนำสิ่งที่ดีของทั้ง 2 packages มาใช้|

                สำหรับ Component ของ AWT เมื่อเทียบเท่ากับ Swing แสดงได้ดังตารางต่อไปนี้

AWT Component

Swing JFC

Applet

JApplet

Component

JComponent

Container

ไม่มี

Button

JButton

Canvas

ไม่มี

CheckBox

JCheckbox

Dialog

JDialog

Frame

JFrame

Label

JLabel

List

JList

Menu

JMenu

MenuBar

JMenuBar

MenuItem

JMenuItem

Panel

JPanel

Scrollbar

Jscrollbar

TextArea

JTextArea

TextComponent

JTextComponent

TextField

JTextField

และ Swing JFC (Components และ Containers) ที่ไม่มีใน AWT ได้แก่ Box,

JColorChooser, JCombobox, JDeskTopPane, JEditorPane, JInternalFrame, JLayeredPane,

          JRadioButton, JSeparator, JSlider, JSplitPane, JTable,

       JTextPane, JToggleButton, JToolTip, JTree และ JviewPort

                     การเขียนโปรแกรมแบบกราฟิกด้วย Swing

               โปรแกรม Java ที่เราได้ศึกษาผ่านมานั้นได้กล่าวถึง Java Application ที่สร้างขึ้นโดยคำสั่งต่างๆ

ที่ไม่ได้อยู่ในรูปของกราฟิก หรือมีจอภาพที่สวยงาม แต่จะอยู่ในรูปของ Text คือ แสดงได้เฉพาะแต่ตัว

อักษรต่างๆ การรับข้อมูลหรือการแสดงผลก็ทำได้ยากและได้ผลลัพธ์ที่ไม่สวยงามนัก ซึ่งทั้งหมดจะต้อง

ทำงานที่ Command Line เท่านั้น ด้วยเหตุนี้ Java จึงได้พัฒนา package ขึ้นมาใหม่เพื่อให้ทำงานได้ง่าย

ขึ้น สามารถแสดงจอภาพในรูปแบบของ GUI (Graphical User Interface) ซึ่งทำงานในแบบ

ของกราฟิกที่ใช้ง่ายและสวยงามอีกทั้งยังมีเครื่องมือให้เลือกใช้งานได้อย่างมีประสิทธิภาพมากยิ่งขึ้น

package นี้ก็คือ "swing" ซึ่งภายใน package ดังกล่าวประกอบด้วย class ต่างๆ ที่ใช้สำหรับสร้างหน้า

จอแบบ GUI (Graphical User Interface) การเรียกใช้ Class ใน package "swing" สามารถเรียกใช้ได้

เช่นเดียวกับ Class ของ Package อื่นๆ คือเรียกใช้ผ่านคำสั่ง "import" ไว้ตอนต้นของโปรแกรม (Class)

ที่ต้องการ ใช้ Class ดังกล่าว หรืออาจจะอ้างถึง Class ดังกล่าวผ่านชื่อ Package โดยตรงก็ได้เช่นกัน

ตัวอย่างโปรแกรม แสดงการสร้างจอภาพแบบกราฟิกด้วย Package "swing"

                          ผลการรันโปรแกรม



           จะได้หน้าจอที่สามารถติดต่อกับผู้ใช้งานได้ เป็นตัวอย่างการสร้างจอภาพแบบกราฟิกด้วย Class

       "JFrame" ซึ่ง Class นี้จัดเก็บอยู่ใน Package "swing"

                            Java 2D(2D Graphics ,Text and Images)

            เป็นคุณสมบัติเพิ่มเติมสำหรับการสร้างกราฟิกที่ซับซ้อนขึ้น เมื่อเราใช้ Java 2D เราก็จะได้

งานกราฟิกที่สวยและสมบูรณ์แบบมากขึ้น

อ้างอิงจาก

กิตติ ภักดีวัฒนะกุล. 2546. คัมภีร์ JAVA เล่ม 1. หจก. ไทยเจริญการพิมพ์,กรุงเทพฯ