Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘(...

30
Kasetsart University Graphical User Interface (GUI) Java GUI using NetBeans

Transcript of Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘(...

Page 1: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

Graphical User Interface (GUI)

Java GUI using NetBeans

Page 2: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

������������ �����������

���������� ��� ������������������� ��������������� ����

��� �� Microsoft Word, Microsoft Internet Explorer, ���

Windows Live Messenger �� ���� �!���"� �!�#!�� ��$%������� ��&'

Graphical User Interface ��(� GUI ���� ����)�, �����%, +�+Graphical User Interface ��(� GUI ���� ����)�, �����%, +�+

��� ����� GUI ��,��#�-(�������.#�����, ��- ��" ���� ������ ���.��!�������/-0�"���

����������"/-�� 1"����2�0����.#�

07/11/57 Java GUI using NetBeans 2

Page 3: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��������������������

07/11/57 Java GUI using NetBeans 3

Page 4: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�������������� (Tool)

NetBeans IDE

���"����2������ �� Notepad ��(� text editor !� �(����(���,���!��8������ ����(�9��/"-�# (source code) .#�

NetBeans IDE ������ ��

NetBeans IDE �����-�(����(�"0����� ���,������ ��#��8��� �-�(����(�#�� ��� ��;���� �� Integrated Development Environment (IDE)

07/11/57 Java GUI using NetBeans 4

Page 5: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

NetBeans ������� !��"#����$����%�&'(�

���.��!�������/-0�"������ command prompt ��(��-��.��/��(������� �� �-� #��)����

toolbar 1"����2-��.��/��������� ��.#�

���,������ �������"� �!�#!�� ��$%������� ��&' (graphical user interface -

GUI) ����-� ���� �� $%����.��!����,���-�#��(��"���� GUI

���"����2����/-0���� ��� ��� ����,���-0������� �����"0�����$%��������/#�#.��-�������"����2����/-0���� ��� ��� ����,���-0������� �����"0�����$%��������/#�#.��-����

�������/-�#���"� � ��� ��� NetBeans �� ��!��-�#������(���� (code completion)

�����"0�����$%��������/#�#.��-���� ��(�$%����.������0��(����<�#

NetBeans "����2��#�������-�# ����� ����(;���������������� �0������� ����������,=;�

#� �/��#.#���� https://netbeans.org/downloads

07/11/57 Java GUI using NetBeans 5

Page 6: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�&)��"#���� Hello World

"�����&������

07/11/57 Java GUI using NetBeans 6

Page 7: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�������

07/11/57 Java GUI using NetBeans 7

Page 8: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�%� � ��*�)�+,�)���-* (Property and Event)

��"����"� �!�#!�� ��$%������� ��&' (GUI) #� � NetBeans ������ ������-��� -�������/ (component) �� "� � Palette �� �������&��

1��.#���� �����������!����������!��� ��

!� �����,��-�������/.#�� � ��)�, ������, ����"0����� �� ,��- ��

�!������.��"����2�0����!��������!��� ��.#��!������.��"����2�0����!��������!��� ��.#�

���,������ ����� GUI ���� - ��-�#���!����0�- ���,������%� 2 �����

property

event

07/11/57 Java GUI using NetBeans 8

Page 9: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�%� � ��*�) (property)

-�?"���!�,��-�������/���$%���������1�

,��- ������"#� (text)

"@������������� (enabled)

,��# (preferredSize)

&��!/ (font)&��!/ (font)

"� (foreground)

"��(;� (background)

+�+

07/11/57 Java GUI using NetBeans 9

Page 10: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��/���������� �%� � ��*�) (property)

���� ��<�#���,=;�!��#� �-0� �� set

2��!��� �� 0���#���-�������/�"#�,��- �� �� OK

���� ��<�# setText("OK")

2��!��� ������������-�������/2��!��� ������������-�������/

���� ��<�# setEnabled(false)

07/11/57 Java GUI using NetBeans 10

Page 11: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��������� �%� � ��*�) (property)

���� ��<�#���,=;�!��#� �-0� �� get

2��!��� ������,��- ����-�������/ 1������� ��<�# getText()

"0�������1������/!���������#���� boolean ��������<�#���,=;�!��#� �-0� �� is

isEnabled()isEnabled()

07/11/57 Java GUI using NetBeans 11

Page 12: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�)���-* (event)

��!� ��?/��� �#,=;���(��$%�����0���.��������� ��-�������/

#��)� (action)

#��(���(�������"/(mouse)

#-��/����A�����/(key) ����!��

��� ��/�B�#/����/(event handler)

-�#���2% ���� ,=;����0������(������!� ��?/� �#,=;�

07/11/57 Java GUI using NetBeans 12

Page 13: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

$��,+%�&������ (Message Dialog)

���"#�.#���1� ,��- �� ������� ��<�# showMessageDialog() ,��-��"

JOptionPane

��<�#��;����������!��/ 2 !�

-�������/������� .#���1� ,��- ��

,��- ��������"#� ,��- ��������"#�

���� 2��!��� ���"#�-0� �� Hello ����,���-0�"���!��.���;��.������� ��/�B�#/����/ (��<�#

jButton1ActionPerformed())

JOptionPane.showMessageDialog(this, "Hello");

07/11/57 Java GUI using NetBeans 13

Page 14: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�������������

07/11/57 Java GUI using NetBeans 14

Page 15: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�)���-*�0��*�+��*&��#12�

��<�# jButton1ActionPerformed(...))

!� �����

String name = jTextField1.getText();

JOptionPane.showMessageDialog(this, "Hello khun " + JOptionPane.showMessageDialog(this, "Hello khun " + name);

07/11/57 Java GUI using NetBeans 15

Page 16: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�/�&�������%������#�

-0�"��� String name = jTextField1.getText();

���0�,��- �������%��� ����,��- �� (jTextField1) .�� 1�. ���!� ��� name

�������� String name = jTextField1.getText();

� jTextField1 String name = jTextField1.getText();

������������ name String name = jTextField1.getText();������������ name String name = jTextField1.getText();

�� ��;� 1�0�,��- ���� name .�!������"!��� "Hello khun "

���� ��<�# showMessageDialog() ,��-��" JOptionPane

JOptionPane.showMessageDialog(this, "Hello khun " + name);

07/11/57 Java GUI using NetBeans 16

Page 17: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�#+���3� C �#4� F

��������� �� ����,��- ������(�� jTextfield1

String input = jTextfield1.getText();

���� String ������� double ���#� ���<�# parseDouble()

double celsius = Double.parseDouble(input);

���� �$� ����0���?�@%������� ��9��9��"���� 1���!� ��� celsius .�-0�� ?��(���������������?�@%������� �&����.B!/

double fahrenheit = ((celsius / 5) * 9) + 32;

07/11/57 Java GUI using NetBeans 17

Page 18: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

�#+���3� C �#4� F

�"#�$� ���!��� ���0�!� ��� fahrenheit .��"#�$�

���� double ������� String #������<�# valueOf(...) ,��-��" String

String output = String.valueOf(fahrenheit);

�0�-����!� ��� output .��"#�����������0�-����!� ��� output .��"#����������

jLabel1.setText(output);

07/11/57 Java GUI using NetBeans 18

Page 19: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��������#12���%� (check box)

�,���-�#!� �"�� ��2% !�D check box ����<�#cmdCountActionPerformed()

if (chkUp.isSelected()) {

……

}

07/11/57 Java GUI using NetBeans 19

Page 20: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��������#12���-�1 (Radio Button)

0���#�����)� ������;���#������.#���(� ��%��� �����#�� ��

.����"� � Properties

!�;�-����1������/!� buttonGroup ������� buttonGroup1 (��������(���#�� ��)

�,���-�#����� ��/�B�#/����/�,���-�#����� ��/�B�#/����/

if (jRadioButton2.isSelected()){

}

07/11/57 Java GUI using NetBeans 20

Page 21: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��������+������"� (combo box)

���� �� �����.#� �� drop down list

�� 0���#-��-�� ��� ����-���

.����"� �Properties

��(�������1������/!� model ���-�� �����)� ... (ellipsis)��(�������1������/!� model ���-�� �����)� ... (ellipsis)

�,���-�#����<�# jButton1ActionPerformed()

int n = jComboBox1.getSelectedIndex();

JOptionPane.showMessageDialog(this, String.valueOf(n));

07/11/57 Java GUI using NetBeans 21

Page 22: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��������+��- *(list)

0���#-��

.������1������/!� model ,�� ����-��� -�� �����)�... (ellipsis)

����/-�#������ ��/�B�#/����/

Object[] names = jList1.getSelectedValues();

String msg = ""; String msg = "";

for (Object o : names)

msg += o;

JOptionPane.showMessageDialog(this, msg);

07/11/57 Java GUI using NetBeans 22

Page 23: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��������-/����

07/11/57 Java GUI using NetBeans 23

Page 24: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

������������� (JTable)

-���� �� ����������"!/ ���������(��#-����!�������0������#�

��#�,��!��������-��"�������������/ �������/�&9 TableModel

������-��" DefaultTableModel

���,���-�#

"������������ �/����&�� DefaultTableModel model;"������������ �/����&�� DefaultTableModel model;

"���� �!2� DefaultTableModel ��-��"!��-�!��/,���&��

String[] columnNames = { "�(��", "���" ��" };

model= new DefaultTableModel(columnNames, 0);

tblFullName.setModel(model);

07/11/57 Java GUI using NetBeans 24

Page 25: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

������������� (JTable) (���)

�,���-�#����<�# cmdAddActionPerformed()

String[] rowData = { txtFirstName.getText(),

txtLastName.getText() };

model.addRow(rowData);

����,��- ���� ����,��- ��#����-0�"���

txtFirstName.setText("");

txtLastName.setText("");

"0����� ����,���%��� ��#� ��������<�# removeRow()

07/11/57 Java GUI using NetBeans 25

Page 26: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��������������

07/11/57 Java GUI using NetBeans 26

Page 27: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

���������� ������

�,���-�#

int option = JOptionPane.showConfirmDialog(this, "Do you want to exit?");

if (option == JOptionPane.YES_OPTION)

System.exit(0);

������(���&��

int option = JOptionPane.showConfirmDialog(this, "Do you want to exit?",

"My Program", JOptionPane.YES_NO_OPTION);

if (option == JOptionPane.YES_OPTION)

System.exit(0);

07/11/57 Java GUI using NetBeans 27

Page 28: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

$��,+%��+��$�+* (File Chooser Dialog)

�,���-�#��;������� ��/�B�#/����/,�����% File>Save

JFileChooserchooser = new JFileChooser();

int returnVal = chooser.showSaveDialog(this);

if (returnVal == JFileChooser.APPROVE_OPTION) {

try { try {

FileWriter fw;

fw = new FileWriter(chooser.getSelectedFile());

fw.write("Hello");

fw.close();

} catch (IOException ex) {

ex.printStackTrace();

}

}

07/11/57 Java GUI using NetBeans 28

Page 29: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

$��,+%��+��$�+* (File Chooser Dialog)

�,���-�#��;������� ��/�B�#/����/,�����% File>Open

JFileChooser chooser = new JFileChooser();

int returnVal = chooser.showOpenDialog(this);

if (returnVal == JFileChooser.APPROVE_OPTION) {

try {

FileReader fr = new FileReader fr = new

FileReader(chooser.getSelectedFile());

BufferedReader br = new BufferedReader(fr);

String s = br.readLine();

JOptionPane.showMessageDialog(this, s);

br.close();

} catch (IOException ex) {

ex.printStackTrace();

}

}

07/11/57 Java GUI using NetBeans 29

Page 30: Graphical User Interface (GUI) GUI.pdf · NetBeans IDE ˆ"ˆ ˆ 2 Notepad ˛ (˘ text editor ! ˘( ˝( ˘ , ! 8 ˛ (˘9˘ /"- # (source code) .# NetBeans IDE ˜ ˙ˇˆ ˇˆ NetBeans

Kasetsart University

��������������

07/11/57 Java GUI using NetBeans 30