Graphical User Interface (GUI)

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
โครงสร้างโปรแกรมภาษา JAVA
Advertisements

QC: CPN Vendor System Oct 28, 2010 Nakarin P..
Suphot Sawattiwong Function ใน C# Suphot Sawattiwong
Component องค์ประกอบของ GUI.
Swing Component Basic Component.
Introduction to Java Graphic 2D
Microsoft Office Excel 2010
FORM อ.กันทิมา อ่อนละออ
MS Excel Excel เป็นโปรแกรมประเภท สเปรยชีต (Speadsheet) หรือโปรแกรมตาราง งาน ซึ่งจะเก็บข้อมูลต่าง ๆ ลงบน แผ่นตารางงาน คล้ายกับการเขียน ข้อมูลลงไปในสมุดที่มีการตีช่องตาราง.
Visual Basic 6 By Samaporn Yendee VB6.
องค์ประกอบพื้นฐาน ของโปรแกรม Visual Basic
Lecturer: Kanjana Thongsanit
การสร้างตาราง Click mouse ที่ปุ่ม จะปรากฏช่องสี่เหลี่ยมแสดง
ครั้งที่ 7 Composition.
Selected Topics in IT (Java)
การใช้งานโปรแกรม Microsoft Word
ขั้นตอนวิธี (Algorithm)
การเขียนโปรแกรมเชิงวัตถุ ด้วยภาษาจาวา
โปรแกรม Microsoft Access
1 String bookList[] = {" Doraemon ", " A-Ra-Re ", " DragonBall ", " BirdLand ", " Pung-Pong "}; JList scrollingList = new JList(bookList); scrollingList.setVisibleRowCount(4);
ทบทวนเรื่อง GUI - กลุ่มคำสั่ง AWT Set (Abstract Windowing Toolkit) และ
บทที่ 4 Method (1).
ความหมายของ GUI Graphic User Interface (GUI) คือ ส่วนของการติดต่อกับผู้ใช้ด้วยรูปภาพ ที่มีสร้างขึ้นโดยใช้โปรแกรม อยู่ในชุดแพคเกจ java.awt และ javax.swing.
OOP (Object-Oriented Programming)
CSS.
การสร้างส่วนติดต่อกับผู้ใช้ (5) การสร้างเมนู
การสร้างช่องรับข้อมูล
Page: 1 การโปรแกรมเชิงวัตถุด้วยภาษา JAVA บุรินทร์ รุจจนพันธุ์.. ปรับปรุง 7 มิถุนายน 2556 Text File Processing มหาวิทยาลัยเนชั่น.
การใช้งานโปรแกรมสำเร็จรูป
รายงาน เรื่อง จัดรูปแบบข้อมูล จัดทำโดย ด. ญ. ธิกานดา วัลยาภรณ์ ชั้นม.2/1 เลขที่ 19 เสนอ อาจารย์ ภานุมาศ ชาติมองแดง โรงเรียนวชิรธรรมสาธิต.
คำสั่งควบคุมการ ทำงาน การเขียนโปรแกรมโดยปกติ มีทั้งให้ทำงาน เป็นลำดับ ที่ละคำสั่ง บางครั้งมีการให้เปลี่ยน ลำดับในการทำคำสั่ง เพื่อให้การเขียน โปรแกรมมีประสิทธิภาพสูงสุด.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved JTextArea Constructors 
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved Swing GUI Components.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved Java Programming Language.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All rights reserved Java Programming Language.
Method of Class อ.สุพจน์ สิงหัษฐิต
Java Desktop Application #4
การเขียนโปรแกรมภาษาคอมพิวเตอร์ 1
Java Desktop Application #5
การเขียนโปรแกรมภาษาคอมพิวเตอร์ขั้นสูง
เรื่อง jOptionPane Nattapong Songneam
การจัดวางคอมโพเนนต์กราฟิก
บทที่ 3 การทำงานกับฟอร์ม (Form)
โปรแกรม Microsoft Access
บทที่ 3 การทำงานกับฟอร์ม (Form)
บทที่ 4 การทำงานกับรายงาน (Report)
การใช้งานโปรแกรม Microsoft Excel ชุดที่ 3 การสร้างกราฟ
Advanced Class Design in Java Java Packages Week #6 Jarungjit Parnjai
Burapha University, 2001 Object-Oriented Analysis and Design Design Patterns Iterator Week #11 Jarungjit Parnjai.
การสร้างตาราง,ฟอร์มและการส่งค่า Get and Post คอลโทรลต่าง ๆ
บทที่ 3 การสร้าง Appication แบบ Windows Form
SML Report Designer การออกแบบรายงาน.
HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
Java collection framework
Java Programming Java Structure and Datatype,Variable
การจัดวางคอมโพเนนต์กราฟิก
การสร้างฟอร์ม(Form) ด้วยภาษา HTML
Java Network Programming 1
chapter5 - คลาสนามธรรม - อินเตอร์เฟสคลาส
รู้จักและใช้งาน Applet
เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML (2) ตอน... การใช้ FORM โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ
ให้ทำการเขียนโปรแกรมเพื่อแสดงรูปภาพ ดังนี้
เครื่องมือที่ใช้ JUnit4.8.1 on Eclipse SDK3.5.2 ขึ้นไป
บทที่ 2 การเข้าสู่โปรแกรม Microsoft Office Word 2003
การจัดรูปแบบเอกสาร Microsoft Word 2007.
อ.วิวัฒน์ ชินนาทศิริกุล
chapter 2 - Construction and destruction - Overloading method
โดย ส.อ.ประกาศิต วรนุช วิททยาลัยเฉลิมกาณจนา
Timed Math Quiz. โปรแกรมสุ่มคำนวณเลขแข่งกับ เวลา.
Graphic User Interface (GUI)
ใบสำเนางานนำเสนอ:

Graphical User Interface (GUI)

AWT (Abstract Windowing Toolkit)  AWT (Abstract Windowing Toolkit) เป็นเครื่องมือสร้าง Graphic User Interface (GUI) และกำหนดส่วนประกอบ(Component) ต่างๆให้กับ GUI โดยภาษา Java ซึ่งจะประกอบไปด้วย 3 ส่วนคือ Components เช่น ปุ่ม(button), กล่องรับข้อความ (textfield) ,ข้อความป้าย (label) เป็นต้น Containers เป็น Component ใหญ่ที่จะจัดเก็บ Component ย่อยอื่นๆ ตัวอย่าง Containersเช่น Applet , Container, Dialog ,Frame, Panel ,Scrollane เป็นต้น Layout Managers เป็นการจัดเรียง Component ที่อยู่ใน Containers เช่น FlowLayout , BorderLayout , GridLayout, CardLayout และ GridBagLayout

Swing Overview แต่ Component ต่างๆ ใน AWT มีข้อจำกัดบางอย่างดังนั้นจึงมีการพัฒนา Package ใหม่ชื่อ Swing ขึ้นมาสนับสนุนของเดิมให้ดีขึ้น ซึ่งในวิชานี้เราจะใช้ Component ต่างๆใน Swing ซึ่งเป็น Class ที่ถูกจัดเก็บไว้ใน Package “javax.swing”

Swing Component class Component javax.swing.JButton Button javax.swing.JCheckbox Checkbox javax.swing.JDialog Dialog javax.swing.JFrame Frame javax.swing.JLabel Label javax.swing.JMenu Menu javax.swing.JPanel Panel javax.swing.JScrollbar Scrollbar javax.swing.JScrollPane Scroll pane javax.swing.JTextArea Text Area javax.swing.JTextField Text Field javax.swing.JComboBox Combo Box javax.swing.JList List

ขั้นตอนการสร้าง GUI สร้าง Object ของ Jframe JFrame Object = new JFrame(); JFrame Object = new JFrame ( object_string_title_bar )

ขั้นตอนการสร้าง GUI import javax.swing.*; public class GUI { public static void main(String[] args) { JFrame f = new JFrame(); f.setDefaultCloseOperation(3); f.setSize(400,400); f.setVisible(true); }

ขั้นตอนการสร้าง GUI สร้าง Object ของ Class Component ใน Swing รูปแบบ JComponent Object2 = new JComponent() ; *Component เขียนแทน button, label ,list เป็นต้น เพิ่ม Component ลงใน Container โดยใช้ method add() รูปแบบ add(Object2, LayoutManager) ;

ขั้นตอนการสร้าง GUI สร้าง Object ของ Class Containers และกำหนดพื้นที่ในการแสดงผล ด้วย method getContentPane() รูปแบบ Containers Object1 = getContentPane() ; สร้าง Object ของ Class Component ใน Swing รูปแบบ JComponent Object2 = new JComponent() ; *Component เขียนแทน button, label ,list เป็นต้น

ขั้นตอนการสร้าง GUI เพิ่ม Component ลงใน Container โดยใช้ method add() รูปแบบ Object1.add(Object2) ; กำหนดการจัดเรียง Component ใน Container รูปแบบ Object1.setLayout (new LayoutManager) ; * LayoutManager เป็น Object ของ Class LayoutManager เช่น FlowLayout , BorderLayout , GridLayout, CardLayout และ GridBagLayout

JAVA-SWING :: JPanel Class method: new JPanel (); return type:Jpanel content:ใช้สร้าง Object Jpanel example: JPanel panel = new JPanel ();

JAVA-SWING :: JLabel Class method:new JLabel (); return type: Jlabel content:ใช้สร้าง object jlabel example: JLabel label = new JLabel (); JLabel label = new JLabel ( icon, SwingContants.RIGHT ); String text_label = new String ( "Name :" ); JLabel label = new JLabel ( text_label ); ImageIcon icon = new ImageIcon ( "C:/bamboo.gif" ); JLabel label = new JLabel ( "Name :", icon, SwingContants.RIGHT );

ขั้นตอนการสร้าง GUI String text; Icon image; int alignment; // JLabel.LEFT, JLabel.Center, or JLabel.RIGHT. รูปแบบ JLabel yourLabel = new JLabel(text); JLabel yourLabel = new JLabel(text, alignment); JLabel yourLabel = new JLabel(image); JLabel yourLabel = new JLabel(image, alignment); JLabel yourLabel = new JLabel(text, image, alignment);

AVA-SWING :: JTextField Class method:new JTextField (); return type:JTextField content:ใช้สร้าง object JTextField example: JTextField text_field = new JTextField (); JTextField text_field = new JTextField ( 12 ); //มีการกำหนด ขนาดความกว้าง

AVA-SWING :: JTextArea Class method:new JTextArea (); return type:JTextArea content:ใช้สร้าง object JTextArea example: JTextArea text_area = new JTextArea (); JTextArea text_area = new JTextArea ( 12, 60 ); extArea text_area = new JTextArea ( "บ้านเลขที่ หมู่ที่ ตำบล อำเภอ จังหวัด ประเทศ", 12, 60 ); text_area.setText ( "บ้านเลขที่ หมู่ที่ ตำบล อำเภอ จังหวัด ประเทศ" ); JTextArea text_area = new JTextArea ( "บ้านเลขที่ หมู่ที่ ตำบล อำเภอ จังหวัด ประเทศ", 12, 60 ); String selected_text = text_area.getSelectedText ();

AVA-SWING :: JButtonClass String text; Icon image; => ImageIcon icon = new ImageIcon ( "C:/bamboo.gif" ); รูปแบบ JButton btn = new JButton(text);  JButton btn = new JButton(text, image);  JButton btn = new JButton(image); JButton button = new JButton (); JButton button = new JButton ( "cancel" ); --------------------------------------------------------------- ImageIcon icon = new ImageIcon ( "C:/bamboo.gif" ); JButton button = new JButton ( icon ); JButton button = new JButton ( "cancel", icon );

ตัวอย่าง public void create(){ JPanel panel = new JPanel(); panel.add(new JButton("Button")); add(panel,BorderLayout.SOUTH); setTitle("Simple example"); setSize(400, 400); setDefaultCloseOperation(EXIT_ON_CLOSE); setVisible(true); }

ขั้นตอนการสร้าง GUI JCheckBox รูปแบบการสร้าง Object ใน class JCheckBox JCheckbox namecheckbox = new JCheckbox("Label",Group,Checkedstatus ); JCheckBox ignoreCase = new JCheckBox("Ignore Case", true); **Group คือการจัดกลุ่มของ checkbox ถ้าไม่มีกลุ่มให้เป็น nul **CheckedStatus เป็นการบอกสถานะว่ามีการเช็คที่ช่องหรือป่าว ถ้าเป็น true ก็จะเช็ค ถ้า เป็น false ก็จะไม่เช็ค

ตัวอย่าง JPanel p1 = new JPanel(); p1.setPreferredSize(new Dimension(110, 110)); p1.setBorder(LineBorder.createGrayLineBorder()); p1.setBackground(Color.gray); p1.add(new JCheckBox("check 1")); p1.add(new JCheckBox("check 2",true)); add(p1,BorderLayout.WEST);

ขั้นตอนการสร้าง GUI ButtonGroup รูปแบบการสร้าง Object ใน class ButtonGroup รูปแบบ ButtonGroup nameButtonGroup= new ButtonGroup(); JRadioButton รูปแบบการสร้าง Object ใน class JRadioButton รูปแบบ JRadioButton namebutton = new JRadioButton("Label",status);

ตัวอย่าง JPanel p = new JPanel(); p.setLayout(new BoxLayout(p,BoxLayout.X_AXIS)); ButtonGroup g = new ButtonGroup(); JRadioButton r1= new JRadioButton("radio 1"); JRadioButton r2= new JRadioButton("radio 2"); JRadioButton r3= new JRadioButton("radio 3"); g.add(r1); g.add(r2); g.add(r3); p.add(r1); p.add(r2); p.add(r3); add(p); setSize(400, 400); setVisible(true);

ขั้นตอนการสร้าง GUI JMenuBar รูปแบบการสร้าง Object ใน class JMenuBar JMenuBar namemenubar = new JMenuBar(); JMenu รูปแบบการสร้าง Object ใน class JMenu รูปแบบ JMenu nameMenu = new JMenu ();

JMenuItem nameMenuItem = new JMenuItem (); ขั้นตอนการสร้าง GUI JMenuItem รูปแบบการสร้าง Object ใน class JMenuItem รูปแบบ JMenuItem nameMenuItem = new JMenuItem ();

JToolBar name JToolBar = new JToolBar(); ขั้นตอนการสร้าง GUI JToolBar รูปแบบการสร้าง Object ใน class JToolBar รูปแบบ JToolBar name JToolBar = new JToolBar();

ขั้นตอนการสร้าง GUI JComboBox รูปแบบการสร้าง Object ใน class JComboBox JComboBox nameCombo = new JComboBox(ListData[]); JList รูปแบบการสร้าง Object ใน class JList รูปแบบ JList namelist = new JList(ListData[] );

ตัวอย่าง JPanel p3 = new JPanel(); JComboBox cb = new JComboBox(); cb.addItem("data 1"); cb.addItem("data 2"); p3.add(cb);

ขั้นตอนการสร้าง GUI JTextField รูปแบบการสร้าง Object ใน class JTextField รูปแบบ JTextField nameTextField = new JTextField(“Label”,size ); JTabbedPane รูปแบบการสร้าง Object ใน class JTabbedPane รูปแบบ JTabbedPane nameTabbedPane = new JTabbedPane();

ขั้นตอนการสร้าง GUI JScrollBar รูปแบบการสร้าง Object ใน class JScrollBar รูปแบบ JScrollBar scroll_bar = new JScrollBar (); ScrollBar scroll_bar = new JScrollBar ( JScrollBar.VERTICAL ); JScrollBar scroll_bar = new JScrollBar ( JScrollBar.HORIZONTAL);

ขั้นตอนการสร้าง GUI รูปแบบ Container container = getContentPane (); JScrollPane ใช้สร้าง Object JScrollPane โดยจะมี scrollbar ขึ้นมาทั้งแนวตั้งและแนวนอน เมื่อจำเป็น รูปแบบการสร้าง Object ใน class JScrollBar รูปแบบ Container container = getContentPane (); JScrollPane scroll_pane = new JScrollPane (); container.add ( scroll_pane );

ขั้นตอนการสร้าง GUI JScrollPane ใช้สร้าง object JTabbedPane รูปแบบการสร้าง Object ใน class JTabbedPane รูปแบบ JTabbedPane tab = new JTabbedPane (); JTabbedPane tab = new JTabbedPane ( JTabbedPane.RIGHT ); TabbedPane tab = new JTabbedPane ( JTabbedPane.RIGHT ); tab.addTab ( "DataEmployee", new JButton ( "TestTab" ) ); ImageIcon icon = new ImageIcon ( "c:/bamboo.gif" ); tab.addTab ( "DataEmployee", icon, new JButton ( "TestTab" ) );

ขั้นตอนการสร้าง GUI JScrollPane ใช้สร้าง object JTable รูปแบบการสร้าง Object ใน class JTable รูปแบบ JTable table = new JTable (); DefaultTableModel table_model = new DefaultTableModel (); String [] value = { "bamboo", "lab", "code" }; table_model.addColumn ( "website", value ); JTable table = new JTable ( table_model ); JTable table = new JTable ( 5, 3 );

FlowLayout(align, int HorizontalSpacing,int VerticalSpacing); Layout Manager FlowLayout เป็นการเรียง Component แบบง่าย โดยจะเรียงจากซ้ายมือไป ขวามือตามแนวนอน พอหมดบรรทัดก็จะขึ้นใหม่ ปกติถ้าไม่กำหนดอะไร (defaults) Layout แบบ FlowLayout จะกำหนดระยะห่างระหว่าง Component เป็นระยะห่าง 5 พิกเซล และจะกำหนดให้ Component ทั้งหมด อยู่ตรงกลาง แต่สามารถปรับระยะห่าง หรือตำแหน่งของ Component FlowLayout(align, int HorizontalSpacing,int VerticalSpacing); *align คือตำแหน่งที่จะวาง component เช่น right ,left ,center * HorizontalSpacing คือค่าระยะห่างระหว่าง Component แนวนอน * VerticalSpacing คือค่าระยะห่างระหว่าง Component แนวตั้ง

Layout Manager ตัวอย่าง FlowLayout( FlowLayout.LEFT, 5, 10 );

Layout Manager GridLayout เป็นการเรียง Component ในรูปแบบตาราง โดยจะจัดเรียง component ในลักษณะ row กับ column โดยจะแบ่งเท่าๆกันหมดทุก cell และจะเรียง component จากซ้ายมือไปขวามือตามแนวนอน พอหมด บรรทัดก็จะขึ้นใหม่ ในการจัดเรียงแบบนี้จะต้องกำหนด row และ column ก่อน(ถ้าไม่กำหนด default จะให้เป็น 1 component ต่อ 1column) อีกทั้งยัง สามารถปรับระยะห่าง หรือตำแหน่งของ Component ได้ GridLayout(int row,int column,int HorizontalSpacing,int VerticalSpacing);

Layout Manager ตัวอย่าง GridLayout( 4,3,5,5);

Layout Manager BorderLayout เป็นการเรียง Component บน Container ที่ถูกแบ่งเป็น 5 ส่วน ตามทิศต่างๆ เช่น North , South , West , East ,Center เมื่อต้องการจะ นำ Component ไปลงบน Container จะต้องกำหนด ทิศทางด้วย(จะทำต้อง Add Component นั้นเอง) วิธีใช้ container.add(Component,Borderlayout.position) *Position คือ North , South , West , East ,Center BorderLayout(int HorizontalSpacing,int VerticalSpacing);

Layout Manager ตัวอย่าง container.add(Northbutton,Borderlayout.North); container.add(Centerbutton,Borderlayout.Center); .

JAVA-SWING :: JComponent Class Method : setMaximumSize ( object_dimension ); return type: void content: ใช้กำหนด maximum size ให้กับ jcomponent ในรูปแบบของ dimension example: JButton button = new JButton ( "cancel" ); Dimension dimension = new Dimension ( 120, 30 ); button.setMaximumSize ( dimension );

JAVA-SWING :: JComponent Class method:getMaximumSize (); return type:Dimension content:ใช้คืนค่า maximum size ของ jcomponent ในรูปแบบของ dimension example: JButton button = new JButton ( "cancel" ); button.setBounds ( 0, 0 150, 30 ); Dimension maximum_size = button.getMaximumSize ();