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

Tổng quan GUI

➢AWT:cung cấp các gói cơ bản để lập trình giao diện, được sử dụng trong các phiên bản trước jdk1.2 (java2) ➢Swing: có nhiều chức năng hơn AWT, xây dựng chương

trình dễ dàng mềm dẻo hơn Được đưa vào từ jdk1.2

➢Swing Componentsthườ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) importjava.awt.*;

◂Swing (Java Foundation Classes Package) importjavax.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.

oCung 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

oHỗ trợ các thao tác sử dụng bàn phím thay chuột oSử dụng tài nguyên hiệu quả hơn

9

Java GUI hierarchy

Swing Components

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

opanel, hoặc pane (JPanel)

obutton (JButton)

olabel (JLabel)

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

Kháiniệm container

vẽ và tô màu.

oFrame/JFrame, Panel/JPanel, Dialog/JDialog, ScrollPane/JScrollPane, …

oobjectName.get…( );

oobjectName.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 )

15Containment

Hierarchy

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

Containment Hierarchy

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

oLà 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

oHàm khởi tạo

•JFrame(String title)

oCác thành phần đồ họa được đưa vào content pane, không đưa trực tiếp vào JFrame Ví dụ:

oJFrame cung cấp 2 phương thức:

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

oLà 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

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

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

add(b1, BorderLayout.NORTH);

BorderLayout (tt)

public voidshowBorderLayout(){

JFrame frame =new JFrame("Border Layout Demo"); frame.setSize(400,400);

JPanel panel =new JPanel(newBorderLayout());

panel.add(newJButton("North Button"),BorderLayout.NORTH); panel.add(newJButton("South Button"),BorderLayout.SOUTH); panel.add(newJButton("West Button"),BorderLayout.WEST); panel.add(newJButton("East Button"),BorderLayout.EAST);

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

BorderLayout (tt)

Layout Manager: GridLayout

➢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 =newJFrame("Border Layout Demo"); frame.setSize(400,400);

JPanel panel = newJPanel();

GridLayout gridLayout =newGridLayout(2,2); panel.setLayout(gridLayout);

panel.add(newJButton("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ớpGridBagLayoutConstraintslưu trữ tất cả các thôngtin mà lớp GridLayout yêu cầu: Vị trí và kích thuớc mỗithà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

➢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

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

oTạ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

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

oSwing hỗ trợ các kiểu:

•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

publicCheckBoxTest(){

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

11public classCheckBoxTestextendsJFrame {12private JTextField field;

13privateJCheckBox 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 classCheckBoxHandlerimplements ItemListener{

private int valBold = Font.PLAIN;

private intvalItalic = Font.PLAIN;// respond to checkbox events

public voiditemStateChanged( ItemEvent event )

Register JCheckBoxs to receiveevents from CheckBoxHandler

When user selects JCheckBox,

CheckBoxHandler invokes

method itemStateChanges of all

registered listeners

// process italic checkbox events

// set text field font

Change JTextField font, depending on which JCheckBox was selected

63

JRadioButton (tt)

65

privateFont plainFont, boldFont, italicFont,

boldButton, italicButton,boldItalicButton;

privateButtonGroup radioGroup;// create GUI and fonts

publicRadioButtonTest(){

super("RadioButton Test");

// get content pane and set its layout Container container = getContentPane();

11public classRadioButtonTestextendsJFrame {12privateJTextField field;

boldButton = newJRadioButton("Bold",

false); container.add( boldButton );

); container.add( italicButton );

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 =newButtonGroup();// create font objects

Instantiate JRadioButtons for manipulating JTextField text font

// private inner class to handle radio button events

private classRadioButtonHandlerimplementsItemListener{

// handle radio button events

public voiditemStateChanged( 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

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

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

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

JComboBox (tt)

privateString names[] =

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

privateIcon icons[] = { newImageIcon( names[0] ),

// set up GUI

publicComboBoxTest(){

super("Testing JComboBox");

// get content pane and set its layout Container container = getContentPane();

// set up JComboBox and register its event

handler imagesComboBox = newJComboBox( names );

11public classComboBoxTestextendsJFrame {12privateJComboBox imagesComboBox;13privateJLabel label;

Register JComboBox to receive events from anonymous ItemListener

Instantiate JComboBox to show three Strings from

names array at a time

2002 Prentice Hall, Inc All rights reserved 71

// anonymous inner class to handle JComboBoxevents newItemListener() {

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 addItemListenercontainer.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

oDanh sách các mục chọn

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

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

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

oKhông hỗ trợ doublclik chuột

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

➢ListSelectionListener

Jlist Demo

75

privateString colorNames[] = {"Black","Blue","Cyan",

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

privateColor colors[] = { Color.black, Color.blue,

// set up GUI

publicListTest(){

super("List Test" );

// get content pane and set its layout

11public classListTestextendsJFrame {12private JList colorList;

13private Container container;

// do not allow multiple selections colorList.setSelectionMode(

ListSelectionModel.SINGLE_SELECTION );

// add a JScrollPane containing JList to contentpane container.add(new JScrollPane( colorList ) );// set up event handler // handle list selection events

public voidvalueChanged( ListSelectionEvent{

colors[ colorList.getSelectedIndex() ] );}

}// end anonymous inner class

);// end call to addListSelectionListener

JList allows single selections

Register JList to receive events from

Set appropriate background depending on user selection

2002 Prentice Hall, Inc All rights reserved.

77

Multiple-Selection Lists

➢Multiple-selection list

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

79

privateString colorNames[] = {"Black","Blue",

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

// set up GUI

publicMultipleSelection(){

super("Multiple Selection Lists");// get content pane and set its layout Container container = getContentPane();

// set up JList colorList

11public classMultipleSelectionextendsJFrame {12privateJList colorList, copyList;

13private JButton copyButton;

// create copy button and register its

listener copyButton = newJButton("Copy >>>"

// anonymous inner class for buttonevent newActionListener() {

ActionEvent event )// handle button event

public voidactionPerformed(

}// end anonymous inner class);// end call to addActionListenercontainer.add( copyButton );

// set up JList copyList

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

➢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

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

separator trong menufileMenu:

Menu Demo

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”);

oshowInputDialogPrompt for some input oshowMessageDialogTell the user about

something that has happened.

oshowOptionDialogThe 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)

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)

oFileNameExtensionFilter filter = new

FileNameExtensionFilter( "JPG & GIF Images", "jpg", "gif");

osetFileFilter(FileNameExtensionFilter filter)

107

JTabbedPane (tt)

JTabbedPane (tt)

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

JTabbedPane tabbedPane = new JTabbedPane();

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

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

109

JTabbedPane (tt)

111

JSplitPane (tt)

JSplitPane, JScrollPane, JList

113

JSplitPane, JScrollPane, Jlist (tt)

➢Có 3 yếu tố quan trọng trong mô hình xử lý sự kiện:

oNguồn phát sinh sự kiện (event source)

oSự kiện (event object)

oBộ lắng nghe sự kiện (event listener)

Mô hình xửlý sựkiện (tt)

➢Nguồn phát sinh sự kiện (event source):

oThành phần giao diện tạo ra sự kiện

oVD: Button, mouse, keyboard

➢Sự kiện (event object)

oTạo ra khi sự kiện xảy ra

oChứa tất cả thông tin về sự kiện mà nó xảy ra:

Mô hình xửlý sựkiện (tt)

oMột đối tượng sự kiện được tạo ra

oĐối tượng sự kiện được kích hoạt bằng nguồn đã đăng ký listener

oGiải mã những thông điệp

oXử lý sự kiện mà nó xuất hiện

➢Khai báo lớp xử lý sự kiện

public class MyClass implements<Event>Listener

➢Cài đặt các phương thức trong listener interface.

public void actionPerformed(ActionEvent e) { //code that reacts to the action }