Introduce Graphic User Interface

Ni dung

Gii thiu AWT v Swing Xy dng Java GUI c bn C ch kim sot s kin ngi dng

Gii thiu v AWT

AWT (Abstract Window Toolkit) (java.awt.*) cung cp mt tp hp cc lp dng vit giao din ngi dng dng ha B khung (framework) GUI c cho Java (Java 1.1)

Gii thiu v AWT

c im:

Bao gm tp hp cc lp ngang hng, tc l giao din lp trnh ng dng cho cc tnh nng ca s hin c c cung cp bi h iu hnh. AWT cung cp hai m hnh x l bin c:

M hnh tha hng (m hnh phn cp) M hnh y quyn

AWT cung cp cc lp cha (container) v cc thnh phn (component) n gin ha vic xy dng cc chng trnh. AWT qun l b cc theo cc s t chc khc nhau.

Gii thiu v AWT

Hn ch:

Chim nhiu ti nguyn h thng (heavyweight object) Kh m rng (khng c cc cng ngh h tr) Mt s da vo cc bn sao m bn ng (native code) Gp cc vn c lp h nn

Ph thuc vo cc thnh phn GUI ca h iu hnh

JFC (Java Foundation Classes)

Gm 5 phn chnh:

Swing AWT (Abstract Windows Toolkit): l thnh phn cng c thit k v lp trnh giao din c bn nht trong Java Accessibility API: L b cng c gip ngi dng kt ni vi cc thit b nh bn phm ni, b c ch t ngcho php truy xut trc tip ti cc thnh phn Swing 2D API: cha cc lp hin thc nhiu kiu v, cc hnh phc tp, fonts, colors. 2D API khng phi l 1 phn ca Swing Drag and Drop: cho php ngi dng chn gi mt i tng GUI ri di chuyn qua cc ca s hoc frame khc

Gii thiu v SWING

Swing (javax.swing.*)

B khung GUI mi c gii thiu u tin trong Java 1.2 Bao gm tt c nhng c tnh ca AWT cng vi nhiu c tnh tin tin khc Thun Java, cc thnh phn nh (lightweight) (khng da vo m bn ng) Kin trc cm quan (look and feel)

Gii thiu v SWING

Cc u im ca Swing:

Cc thnh phn ca Swing chim t ti nguyn h thng hn v chng khng ngang hng ring trong h iu hnh. H tr khi nim pluggable look-and-feel, cung cp thm nhiu din mo ngi dng la chn H tr cc cng ngh nhp xut mi: ting ni v thao tc khng mouse D dng m rng:

Button h tr c vn bn v ha S dng HTML trong Label

Kin trc MVC ca Swing

Swing s dng kin trc MVC xy dng cc thnh phn, chng trnh ca mnh, MVC chia mi thnh phn giao din thnh 3 phn;

Model

Phn cha ni dung trng thi ca cc thnh phn GUI Mi kiu thnh phn GUI c 1 model khc nhau Th hin trc quan thnh phn GUI Qun l cch thc tng tc gia cc thnh phn GUI vi cc s kin ngi dng: click chut, nhp phm

View

Controller

Kin trc MVC ca Swing

Kin trc MVC thng thng

The MODEL passes its data to the VIEW for rendering

Model

View

The COTROLLER updates the MODEL based on events receiced

The VIEW determines which events passed to the CONTROLLER

Controller

MVC trong Swing

Swing hin thc 1 m hnh MVC kh n gin cn c gi l model-delegate M hnh ny ni View v Controller thnh 1 i tng duy nht gi l UI-delegate

UI-delegate lm 2 nhim v:

Hin th thnh phn Swing ln mn hnh Qun l cc s kin

MVC trong Swing

Mi thnh phn GUI gm 2 phn:

Model UI-delegate

Gii thiu Java GUI

AWT v Swing cung cp tp hp cc lp Java cho php to cc giao din ha (GUI) Cung cp cc thnh phn to hot ng v hiu ng GUI nh:

Container (b cha) Component (thnh phn GUI) Layout manager (b qun l b cc) Graphic v drawing capabilitie (v ha) Font (phng ch) Event (s kin)

GUI Class Hierarchy (AWT)

AWTEvent Font FontMetrics Object Color Graphics Component Container Button Label
TextComponent

Panel Window

Applet Frame Dialog FileDialog

TextField

List Choice CheckBox

TextArea

LayoutManager

CheckBoxGroup Canvas
MenuComponent

MenuItem MenuBar

Menu

Scrollbar

GUI Class Hierarchy (Swing)

.
JMenuItem JCheckBoxMenuItem JMenu JRadioButtonMenuItem JCheckBox JRadioButton

AbstractButton

JButton
JToggleButton

JComponent
JTextComponent

JEditorPane JTextField JTextArea JPasswordField

JLabel

JList

JComboBox JFileChooser

JMenuBar

JPanel

JOptionPane

JScrollBar

JScrollPane

JTabbedPane

JPopupMenu JProgressBar JInternalFrame

JSeparator JToolBar JToolTip

JSlider JSplitPane JLayeredPane

JRootPane JTable JTableHeader

JPane JTree JColorChooser

V d: To ca s vi Swing

ngng dng HelloWorld c bn To mt Ca s vi HelloWorldString trong thanh tiu v hin th label Hello World

C bn v thit k GUI

Khi nim xy dng GUI rt n gin. Nhng thnh phn (component) c b tr trong mt b cha (container) theo cch thc c t chc no . Nhng component c th l cc i tng (nh Button, Menu, Label, Textbox, Slider, Checkbox, Radio button,) hoc c th cc b cha lng nhau, Nhng thnh phn c t chc trong nhng b cha s dng b qun l b cc (Layout Manager)

Component

L cc i tng c biu din ha c hin th ln mn hnh m ngi dng tng tc c V d: nt nhn, checkbox, scrollbar

Container

i tng vt cha hay nhng i tng c kh nng qun l v nhm cc i tng khc li Mt s i tng container trong java:

Panel

i tng khung cha n gin nht dng nhm cc i tng, thnh phn con li vi nhau Mt Panel c th cha 1 Panel khc Tng t Panel nhng c thm 2 thanh trt gip ta t chc v xem cc i tng ln L mt ca s dng hp thoi Dng a ra cc thng bo, ly d liu nhp t ngi dng

ScrollPanes

Dialogs

Container

Cc i tng container trong Java:

Frame, JFrame

L mt ca s Windows mc trn cng gm tiu v ng bin nh cc ng dng Windows thng thng khc Thng c dng to ra ca s chnh cho cc ng dng khc

Applet: Web Applet JWindow: Khng c thanh tiu hay cc nt iu khin.

Container

Top-level component: l thnh phn trn cng ca bt k Swing containment hierarchy no.

Dialog

Frame

Applet

Container

Intermediate containers: l thnh phn n thun dng cha cc component khc

Panel

Scroll pane

Container

Special-Purpose Containers l cc thnh phn cha trung gian c bit

Internal Frame

Layered pane

Cu trc JFrame

Khung cha a tng Hu ht mi th t vo trong khung ni dung (content panel)

getContentPane()

S dng glassPane cho Popup menus, mt s hat cnh, Cc phng thc

getRootPane() getLayeredPane() getContentPane() getGlassPane()

LayeredPane cha contentPane

Cc thnh phn iu khin c bn

Dng nhn d liu t ngi dng

Buttons

Combo Box

List

Cc thnh phn iu khin c bn

Menu

Text fields

Slider

Cc thnh phn thun hin th thng tin

Dng hin th thng tin cho ngi s dung Khng th sa i ni dung thng tin

Label

Tool tip

Progress Bar

Cc thnh phn sa cha nh dng

Dng hin th cc thng tin nh dng Cho php ngi dng la chn nh dng

Color Chooser

File Chooser

Cc thnh phn hin th thng tin nh dng

Cho php ngi s dng sa i thng tin

Table

Text

Tree

Qun l b cc (Layout manager)

Dng xc nh kch thc v v tr ca cc thnh phn GUI Mi thnh phn s c 1 Layout manager mc nh Cc Layout manager Java h tr:

BorderLayout BoxLayout CardLayout FlowLayout GridBagLayout GridLayout OverlayLayout

BorderLayout

Chia thnh 5 phn: NORTH, WEST, CENTER, EAST, SOUTH

BoxLayout

a cc thnh phn vo thnh tng dng hoc tng ct

CardLayout

Cho php hin th nhiu component khc nhau ti nhiu thi im khc nhai

FlowLayout

Thm cc i tng tun t t tri sang phi

GridLayout

Thm cc i tng tun t tri sang phi, t trn xung di vo cc nh sn

GridBagLayout

Thm cc i tng vo cc li nh sn, nhng cho php ngi dng m rng ch cha cho cc component (khng ch 1 )

B x l s kin (Event Handler)

GUI l h thng hng s kin (event-driven)

Chut nhn v chuyn ng, nt nhn v vn bn nhp thng qua bn phm, nhn vo cc mc menu, Thao tc mong mun sinh ra mt hnh ng trn mi cc s kin ny

Gi java.awt.event.*, java.swing.event.*

Gi java.awt.event.*
Object EventObject AWTEvent TextEvent ComponentEvent ActionEvent AdjustmentEvent ItemEvent ContainerEvent FocusEvent PaintEvent WindowEvent InputEvent

KeyEvent

MouseEvent

Cc i tng trong x l s kin

Ngun s kin

Cc lp thnh phn GUI m ngi s dng tng tc. Bn c th ng k Listener p ng vi nhng s kin nht nh Nhn i tng s kin khi c thng bo v thc hin p ng thch hp. Nhiu kiu ca b lng nghe tn ti cho cc s kin c th nh MouseListener, ActionListener, KeyListener, Cc giao tip c hin thc v ci t cc hnh ng ng gi thng tin v s kin xut hin Cc i tng s kin c gi ti b lng nghe khi s kin xut hin trn thnh phn GUI

B lng nghe (Listener)

i tng s kin (Event)

M hnh x l s kin

Lp hin thc giao tip b lng nghe s kin (b x l s kin).

V d: class Circle extends JFrame implements ActionListener {} V d: btCancel.addActionListener(handler);

ng k b lng nghe s kin cho ngun s kin

Ci t phng thc x l s kin (cc phng thc ca giao tip b lng nghe s kin)

V d: vi b lng nghe s kin ActionListener cn ci t phng thc: public void actionPerformed(ActionEvent ev) { }

Mt s b lng nghe s kin

V d

Mt ActionListener c hin thc v i tng lng nghe c ng k vi mt thnh phn JButton. Khi nt c nhn, mt s kin t ng c pht sinh v phng thc tng ng ci t trong ActionListener c gi (actionPerformed)

V d

V d

Painting

Cc component c th cn hin th li mnh trn giao din v cc l do sau:

Thit lp cc trng thi khc vi mc nh Phn ng vi cc tng tc khc

Cc repaint: bt u repaint vi thnh phn cao nht cn repaint i xung cho ti ht cy phn cp thnh phn. Cc thnh phn thng s repaint mi khi cn thit

VD: khi bn gi setText()

V d

V d

JFrame s repaint u tin Content pane s repaint background ca n ri bo cho JPanel v li JPanel repaint background ca n sau v li ng bin bo cho cc thnh phn con v li JButton s v li background ca n ri sa li on text m n cha JLabel s repaint on text ca n.

Tun t triu gi ca repaint

1. Background 2. Custom 3. Border 4. Children

Mt s tnh nng c bit

Tr top-level containers, cc thnh phn bt u bng ch J u c 1 s tnh nng c bit sau:

Tooltips Border Look and feel

JComponent: tool tips

Bng cch dng phng thc setToolTipText, bn c th cung cp cc gi tr gip cho ngi s dng Khi con tr lt qua vng ca component tooltip s hin th

JComponent: border

Phng thc setBorder cho php ngi s dng ch nh ng bin xung quanh component Bn c th s dng lp BorderFactory to ra 1 s border thng gp

JPanel pane = new JPanel(); pane.setBorder(BorderFactory.createLineBorder(Color.black));

JComponent: look and feel

Vic hin th ca cc component ph thuc vo ComponentUI bn di Bn c th dng phng thc UIManager.setLookAndFeel thay i cch hin th ca cc thnh phn.
public

static void main(String[] args) { try { UIManager.setLookAndFeel( UIManager.getCrossPlatformLookAndFeelClassName()); } catch (Exception e) { } new SwingApplication(); //Create and show the GUI.

JComponent: look and feel

Bn cng c th dng cc look and feel ca cc h nn khc s dng c php sau

UIManager.setLookAndFeel( "com.sun.java.swing.plaf.windows.WindowsLookAndFeel");

Nu bn thit lp look and feel trc khi bt c thnh phn UI no c to ra th chng trnh s c gng thit lp look and feel theo thng s bn truyn vo

Nu khng c s ly gi tr mc nh trong file

swing.properties

JComponent: look and feel

Nu bn thit lp li look and feel sau khi c thnh phn UI to ra th bn s lm nh sau cp nht look and feel cho cc thnh phn nay:
UIManager.setLookAndFeel(lnfName); SwingUtilities.updateComponentTreeUI(frame);

Summary