chapter 4 thiết kế gioa diện người dùng lập trình java

Giao diện◂Giao diện nghĩa là điểm giao tiếp giữa hai đối tượng.◂Giao diện là tất cả những gì xuất hiện trên phần mềm bao gồm hình ảnh, thông tin, video, các điều hướng người dùng trên we

GIỚI THIỆU

Giao diện

◂ Giao diện nghĩa là điểm giao tiếp giữa hai đối tượng.

◂ Giao diện là tất cả những gì xuất hiện trên phần mềm bao gồm hình ảnh, thông tin, video, các điều hướng

người dùng trên website, liên kết trên web hay đơn giản là tất cả những gì người dùng nhìn thấy, tương tác khi vào trong ứng dụng.

Giao diện

quan Người dùng tương tác với đối tượng này thông qua con trỏ chuột hay bàn phím Các thành phần như là button, label v.v… có thể được nhìn thấy trên màn hình.

Interface (GUI)

5

TỔNG QUAN GUI

➢ Swing Components thường có tên bắt đầu với 'J'

Tổng quan GUI

➢ Thư viện hỗ trợ lập trình giao diện trong Java: tập hợp các lớp java cung cấp hỗ trợ thiết kế, xây dựng GUI

◂ AWT (Abstract Windows Toolkits)

import java awt.*;

◂ Swing (Java Foundation Classes Package)

import javax swing.*;

import java.awt.*;

import java.awt.event.*;

Swing API

➢ Java Foundation Classes (JFC) cung cấp một tập các

chức năng giúp xây dựng các ứng dụng GUI.

o Cung cấp thêm các đối tượng mới để xây dựng giao diện đồ họa

o look-and-feel: tùy biến để các thành phần giao diện của

Swing nhìn giống như các thành phần giao diện của HĐH

o Hỗ trợ các thao tác sử dụng bàn phím thay chuột

o Sử dụng tài nguyên hiệu quả hơn

9

Java GUI hierarchy

FontMetrics Graphics

AbstractButton

JButton JComboBox

Swing Components

o frame, còn gọi main window (JFrame)

o panel, hoặc pane (JPanel)

o button (JButton)

o label (JLabel)

dụng GUI kết hợp với nhau.

Khái niệm container

vẽ và tô màu.

o Frame/JFrame, Panel/JPanel, Dialog/JDialog,

ScrollPane/JScrollPane, …

o containerObj add (compObj);

o objectName get …( );

o objectName set …( );

13

Nguyên tắc xây dựng GUI

Dialog/JDialog, …

➢ Tạo các điều khiển(control) : (buttons, text areas, list,

choice, checkbox )

15 Containment

Hierarchy

Frame: Top-level container: J Frame , JDialog, JApplet

Containment Hierarchy

Containment Hierarchy

Top Level Container

Intermediate Container

Atomic Component N Atomic Component N Atomic Component N

17

Containment Hierarchy

➢ Top Level Containers

▪ JFrame: sử dụng cho các cửa sổ chính của chương trình

▪ JDialog: cửa sổ thông báo

▪ JApplet: sử dụng trên trình duyệt

19

Containment Hierarchy (tt)

➢ Top Level Containers: JFrame

o Là cửa sổ chính, dùng để chứa các thành phần giao diện khác Đóng vai trò là một container

Ví Dụ JFrame

import javax.swing.* ;

class Frame1 extends JFrame {

/* Construction of the frame */

public class AppFrame1 {

public static void main(String[ ] args) {

Frame1 frame =new Frame1();

Containment Hierarchy (tt)

➢ Intermediate Containers

Containment Hierarchy (tt)

➢ Intermediate Containers: JPanel

o Là container trung gian để chứa các Atomic

Containment Hierarchy (tt)

➢ Atomic Components

JFrame frame = new JFrame( );

JPanel pane = new JPanel();

frame.getContentPane().add(pane);

25

LAYOUT

MANAGER

Layout Manager

➢ Khái niệm: được dùng điều khiển cách trình bày vật lý

của các phần tử GUI như là button, textbox, option button

➢ Các loại layout khác nhau:

Layout Manager: FlowLayout

➢ Là trình quản lý layout mặc định cho các panel

trái trên đến góc phải dưới của màn hình.

➢ Các hàm khởi tạo - constructor:

⚫ align: có các giá trị FlowLayout.LEFT , FlowLayout.CENTER ,

FlowLayout (tt)

Flow Layout – Left and Right Aligned

29

Layout Manager: BorderLayout

Dialog

container

EAST, SOUTH, WEST và CENTER của container

container

JButton b1= new JButton(“North Button”);

setLayout(new BorderLayout( ));

add(b1, BorderLayout.NORTH);

BorderLayout (tt)

public void showBorderLayout(){

JFrame frame = new JFrame("Border Layout Demo");

frame.setSize(400,400);

JPanel panel = new JPanel(new BorderLayout());

panel.add( new JButton("North Button"),BorderLayout.NORTH);

panel.add( new JButton("South Button"),BorderLayout.SOUTH);

panel.add( new JButton("West Button"),BorderLayout.WEST);

panel.add( new JButton("East Button"),BorderLayout.EAST);

panel.add( new JButton("Center Button"),BorderLayout.CENTER);

BorderLayout (tt)

Layout Manager: GridLayout

33

➢ Hỗ trợ việc chia container thành một lưới

có cùng kích thước

GridLayout layout = new GridLayout(no of rows, no of columns);

containerObj setLayout(layout);

public void showGridLayout(){

JFrame frame = new JFrame("Border Layout Demo");

frame.setSize(400,400);

JPanel panel = new JPanel();

GridLayout gridLayout = new GridLayout(2,2);

panel.setLayout(gridLayout);

panel.add( new JButton("Button 1"));

panel.add( new JButton("Button 2"));

panel.add( new JButton("Button 3"));

panel.add( new JButton("Button 4"));

//frame.getContentPane().add(panel);

Layout Manager: GridBagLayout

GridBagLayout gb = new GridBagLayout( );

➢ Lớp GridBagLayoutConstraints lưu trữ tất cả các thông tin mà lớp GridLayout yêu cầu: Vị trí và kích thuớc mỗi thành phần

GridBagLayout

Layout Manager: NullLayout

COMPONENTS

Swing Components

được gọi là component.

Choice, List, Scrollbars,…

39

Swing Components

S ử Dụng Swing Component

41

➢ Có các phương thức add, set, get

43

➢ Label dùng để hiển thị một chuỗi văn bản, hình ảnh

nhằm mô tả thêm thông tin cho các đối tượng khác.

JLabel()

JLabel(String text)

JLabel(String text,int hAlignment)

JLabel(Icon icon)

JLabel(Icon icon, int hAlignment)

JLabel(String text,Icon icon,int hAlignment)

hAlignment : có các giá trị LEFT , CENTER , RIGHT , LEADING , hoặc

TRAILING

Ví Dụ

45

Đây là lớp cha của tất cả các lớp hiển thị văn bản trong Swing

JTextComponent

47

➢ Textfield là ô nhập dữ liệu dạng văn bản trên 1 dòng.

o Tạo một text field với văn bản có sẵn và số cột xác định.

JTextField(String text, int columns)

JTextArea(int rows, int columns)

JTextArea(String s, int rows, int columns)

Swing Button Classes

➢ Button là một thành phần gây ra một sự kiện hành động

khi được kích chuột.

JButton()

JButton(String text)

JButton(String text, Icon icon)

JButton(Icon icon)

➢ Các nút lệnh thay đổi trạng thái

o Nhận các giá trị on/off hoặc true/false

o Swing hỗ trợ các kiểu:

• JCheckBox

• JRadioButton

o Object getItem(): trả về mục được chọn

o int getStateChange():trả về trạng thái trạng thái của mục chọn (DESELECTED/SELECTED)

o void itemStateChanged(ItemEvent e):được gọi thi hành khi người dùng chọn hoặc bỏ chọn 1 mục.

Item Listener

JCheckBox(String text, boolean selected)

JCheckBox(String text, Icon icon)

JCheckBox(String text, Icon icon, boolean

selected) JCheckBox(Action a)

JCheckBox (tt)

// set up GUI

public CheckBoxTest()

{

super ( "JCheckBox Test" );

// get content pane and set its layout

Container container = getContentPane();

// set up JTextField and set its font

field =

); container.add( field );

// create checkbox objects

11 public class CheckBoxTest extends JFrame {

12 private JTextField field;

13 private JCheckBox bold, italic;

Declare two JCheckBox instances

Set JTextField font

to Serif, 14-point plain

Instantiate JCheckBoxs for bolding and italicizing JTextField text, respectively

61

// register listeners for JCheckBoxes

// private inner class for ItemListener event handling

private class CheckBoxHandler implements ItemListener

{

private int valBold = Font PLAIN ;

private int valItalic = Font PLAIN ;

// respond to checkbox events

public void itemStateChanged( ItemEvent event )

// process italic checkbox events

else

// set text field font

JRadioButton (tt)

65

private Font plainFont, boldFont, italicFont,

boldButton, italicButton,

boldItalicButton;

private ButtonGroup radioGroup;

// create GUI and fonts

public RadioButtonTest()

{

super ( "RadioButton Test" );

// get content pane and set its layout

Container container = getContentPane();

11 public class RadioButtonTest extends JFrame {

12 private JTextField field;

boldButton = new JRadioButton( "Bold" ,

false ); container.add( boldButton );

); container.add( italicButton );

"Bold/Italic" , false );

container.add( boldItalicButton );

// register events for JRadioButtons

RadioButtonHandler(); plainButton.addItemListener(

handler ); boldButton.addItemListener( handler );

italicButton.addItemListener( handler );

boldItalicButton.addItemListener( handler );

// create logical relationship between

JRadioButtons radioGroup = new ButtonGroup();

// create font objects

67

// private inner class to handle radio button events

private class RadioButtonHandler implements ItemListener

{

// handle radio button events

public void itemStateChanged( ItemEvent event )

{

// user clicked plainButton

field.setFont( plainFont );

// user clicked boldButton

else if (event.getItem() == boldButton

) field.setFont( boldFont );

// user clicked italicButton

else if (event.getItem() == italicButton

) field.setFont( italicFont );

// user clicked boldItalicButton

else if (event.getItem() == boldItalicButton

o Dùng để liệt kê danh sách các mục mà người dùng có thể

chọn

o Còn được gọi là drop-down list

o Phát sinh sự kiện ItemEvent khi người sử dụng chọn 1 mục trong danh sách

JComboBox (tt)

private String names[] =

{ "bug1.gif" , "bug2.gif" , "travelbug.gif" , "buganim.gif" };

private Icon icons[] = { new ImageIcon( names[ 0 ] ),

// set up GUI

public ComboBoxTest()

{

super ( "Testing JComboBox" );

// get content pane and set its layout

Container container = getContentPane();

// set up JComboBox and register its event

handler imagesComboBox = new JComboBox( names );

11 public class ComboBoxTest extends JFrame {

12 private JComboBox imagesComboBox;

13 private JLabel label;

names array at a time

2002 Prentice Hall, Inc All rights reserved 71

// anonymous inner class to handle JComboBox

events new ItemListener() {

ItemEvent event )

// handle JComboBox event

public void itemStateChanged(

{ // determine whether check box selected

) label.setIcon( icons[

imagesComboBox.getSelectedIndex() ] );

} } // end anonymous inner class

); // end call to addItemListener

container.add( imagesComboBox );

// set up JLabel to display ImageIcons

When user selects item in JComboBox,

ItemListener invokes method itemStateChanged of all registered listeners

Set appropriate Icon

depending on user selection

➢ Jlist

o Danh sách các mục chọn

o Có thể chọn 1 hoặc nhiều mục

o Cho phép sắp xếp dữ liệu hiển thị, phân nhóm

o Có thể hiển thị chuỗi và icon

o Không hỗ trợ doublclik chuột

o Phát sinh ListSelectionEvent khi người dùng chọn

➢ ListSelectionListener

Jlist Demo

75

private String colorNames[] = { "Black" , "Blue" , "Cyan" ,

"Dark Gray" , "Gray" , "Green" , "Light Gray" ,

"Magenta" ,

"Orange" , "Pink" , "Red" , "White" , "Yellow" };

private Color colors[] = { Color black , Color blue ,

// set up GUI

public ListTest()

{

super ( "List Test" );

// get content pane and set its layout

11 public class ListTest extends JFrame {

12 private JList colorList;

13 private Container container;

// do not allow multiple selections

colorList.setSelectionMode(

ListSelectionModel.SINGLE_SELECTION );

// add a JScrollPane containing JList to content

pane container.add( new JScrollPane( colorList ) );

// set up event handler

// handle list selection events

public void valueChanged( ListSelectionEvent {

container.setBackground(

colors[ colorList.getSelectedIndex() ] );

} } // end anonymous inner class

); // end call to addListSelectionListener

JList allows single selections

Register JList to receive events from anonymous ListSelectionListener

When user selects item in JList,

Multiple-Selection Lists

➢ Multiple-selection list

o Chọn nhiều mục trên Jlist

79

private String colorNames[] = { "Black" , "Blue" ,

"Cyan" , "Dark Gray" , "Gray" , "Green" , "Light Gray" ,

"Magenta" , "Orange" , "Pink" , "Red" , "White" , "Yellow"

};

// set up GUI

public MultipleSelection()

{

super ( "Multiple Selection Lists" );

// get content pane and set its layout

Container container = getContentPane();

// set up JList colorList

11 public class MultipleSelection extends JFrame {

12 private JList colorList, copyList;

13 private JButton copyButton;

Line 29

Lines 32-33

Use colorNames array to populate JList

// create copy button and register its

listener copyButton = new JButton( "Copy >>>"

);

copyButton.addActionListener(

// anonymous inner class for button

event new ActionListener() {

ActionEvent event )

// handle button event

public void actionPerformed(

{ // place selected values in copyList copyList.setListData(

colorList.getSelectedValues() );

} } // end anonymous inner class

); // end call to addActionListener

container.add( copyButton );

// set up JList copyList

Lines 48-49

Lines 63-64

When user presses JButton, JList

copyList adds items that user selected

from JList colorList

đó có gắn các pull-down menu Các menu chứa các menu

item để người dùng lựa chọn (hoặc bật/tắt) Menu bar có

thể được xem như một cấu trúc để hỗ trợ các menu.

Menus (tt)

L ớp JMenuBar

85

➢ Menu bar chứa các menu; menu bar chỉ có thể được thêm

vào 1 frame Đoạn code sau tạo và thêm một JMenuBar vào 1 frame:

JFrame f = new JFrame();

f.setSize(300, 200);

f.setVisible(true);

JMenuBar mb = new JMenuBar();

f.setJMenuBar(mb);

Lớp JMenu

menu File và Help, và thêm chúng vào JMenuBar mb:

JMenu fileMenu = new JMenu("File");

JMenu helpMenu = new JMenu("Help");

mb.add(fileMenu);

mb.add(helpMenu);

L ớp JMenuItem

87

separator trong menu fileMenu :

Menu Demo

89

thêm các submenu “Unix”, “NT”, và “Win95” vào trong mục chọn “Software”.

JMenu softwareHelpSubMenu = new JMenu("Software");

JMenu hardwareHelpSubMenu = new JMenu("Hardware");

helpMenu.add(softwareHelpSubMenu);

helpMenu.add(hardwareHelpSubMenu);

softwareHelpSubMenu.add(new JMenuItem("Unix"));

softwareHelpSubMenu.add(new JMenuItem(“Windows"));

Submenu Demo

SWING Dialog Boxes

Static method call

JOptionPane.showInputDialog ( “Enter your home directory”);

o showInputDialog Prompt for some input.

o showMessageDialog Tell the user about

something that has happened.

o showOptionDialog The Grand Unification of the above three.

S ử Dụng JOptionPane

// static method call

JOptionPane

95

JOptionPane.showInputDialog(“Enter your home directory”);

JOptionPane

JFileChooser (tt)

JFileChooser (tt)

99

JFileChooser.APPROVE_OPTION

JFileChooser (tt)

JFileChooser (tt)

if (returnValue == JFileChooser.APPROVE_OPTION)

filename = fc.getName();

101

Dùng JFileChooser

a File object

a String

105

L ọc Tập Tin Hiển Thị

➢ FileNameExtensionFilter(String dispc, String filter)

o FileNameExtensionFilter filter = new

FileNameExtensionFilter( "JPG & GIF Images", "jpg",

"gif");

o setFileFilter(FileNameExtensionFilter filter)

107

JTabbedPane (tt)

JTabbedPane (tt)

o Tạo mới đối tượng JTabbedPane

JTabbedPane tabbedPane = new JTabbedPane();

o Gắn thêm 1 Tab mới vào đối tượng JTabbedPane

tabbedPane.addTab(“Tab name”, icon, component, “Tooltip”);

109

JTabbedPane (tt)

http://java.sun.com/docs/books/tutorial/uiswing/examples/components/

111

JSplitPane (tt)

JSplitPane, JScrollPane, JList

113

JSplitPane, JScrollPane, Jlist (tt)