75
Gábor Dénes Főiskola (IAI) 5. A felhasználói interfész felépítése 6. Elrendezésmenedzserek 7. Eseményvezérelt programozás 8. Swing-komponensek 9. Grafika, képek 10. Alacsony szintű események 11. Belső eseménykezelés, komponensgyártás 12. Applet

II. Grafikus felhasználói interfész

  • Upload
    carys

  • View
    23

  • Download
    0

Embed Size (px)

DESCRIPTION

II. Grafikus felhasználói interfész. 5.A felhasználói interfész felépítése 6.Elrendezésmenedzserek 7.Eseményvezérelt programozás 8.Swing-komponensek 9.Grafika, képek 10.Alacsony szintű események Belső eseménykezelés, komponensgyártás Applet. II. Grafikus felhasználói interfész. - PowerPoint PPT Presentation

Citation preview

Page 1: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 1

5. A felhasználói interfész felépítése6. Elrendezésmenedzserek7. Eseményvezérelt programozás8. Swing-komponensek9. Grafika, képek 10. Alacsony szintű események11. Belső eseménykezelés, komponensgyártás12. Applet

Page 2: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 2

5. A felhasználói interfész felépítése1. Komponensek és azok tulajdonosi hierarchiája

2. AWT és Swing osztályhierarchia

3. Swing mintaprogram

4 Jellemzők

5. Pont, méret, téglalap

6. Koordinátarendszer

7. Szín, betű

8. Az absztrakt JComponent

osztály

9. Container osztály

10. java.awt.Window osztály

11. JFrame osztály

Page 3: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 3

Komponensek tulajdonosi hierarchiája :JPanel

:JMenuBar

:JFrame

:JLabel :JButton :JTextField :JTextArea :JCheckBox :JScrollbar:JComboBox :JList

:ButtonGroup

:JRadioButton :JRadioButton

:JWindow

contentPane:JPanel

:JButton:JTextField :JButton

:JDialog

:JLabel

contentPane

Konténerkomponens

Vezérlőkomponens

Page 4: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 4

Tulajdonosi viszony Konténer és komponense: A konténer komponensei

fizikailag sosem kerülhetnek a konténeren kívülre

Ablak és ablaka: A gyerek ablakok elhelyezkedése és mérete független a szülő ablaktól

Tulajdonosi hierarchia

Felépítése a programozó feladata!

Az a komponens, amely nincs rajta a tulajdonosi hierarchián, nem látható és nem képes eseményekre reagálni!

Szülő megszűnése gyerek megszűnése

Page 5: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 5

java.lang.Object+--Component| +--Container | | +--JComponent| | | +--JLabel| | | +--AbstractButton | | | | +--JButton| | | | +--JToggleButton| | | | | +--JCheckBox| | | | | +--JRadioButton| | | | +--JMenuItem| | | | | +--JCheckBoxMenuItem| | | | | +--JRadioButtonMenuItem| | | | | +--JMenu| | | +--JMenuBar| | | +--JComboBox | | | +--JTextComponent | | | | +--JTextField | | | | +--JTextArea| | | +--JList | | | +--JScrollBar| | | +--JScrollPane| | | +--JPanel| | | +--JColorChooser| | | +--JOptionPane+--ButtonGroup+--ImageIcon+--Timer

java.lang.Object+--FlowLayout+--GridLayout+--BorderLayout+--java.util.EventObject| +--AWTEvent| + ... +--Point+--Dimension+--Rectangle+--Polygon+--Font+--Color+--Graphics+--Image+--Component| +--Label | +--Button | +--... | +--Container | | +--Panel | | | +--Applet| | | | +--javax.swing.JApplet| | +--java.awt.Window| | | +-- javax.swing.JWindow| | | +--java.awt.Frame| | | | +-- javax.swing.JFrame| | | +-- java.awt.Dialog| | | | +--javax.swing.JDialog

AWT és Swingjava.awt

javax.swing

Page 6: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 6

java.lang.Object+--FlowLayout+--GridLayout+--BorderLayout+--java.util.EventObject| +--AWTEvent| + ... +--Point+--Dimension+--Rectangle+--Polygon+--Font+--Color+--Graphics+--Image

java.lang.Object+--Component| +--Label | +--Button

| +--... | +--Container

| | +--Panel | | | +--Applet| | +--Window| | | +--Frame| | | +--Dialog

java.awt

Page 7: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 7

JComponent+--JLabel+--AbstractButton | +--JButton| +--JToggleButton| | +--JCheckBox| | +--JRadioButton| +--JMenuItem| | +--JCheckBoxMenuItem| | +--JRadioButtonMenuItem| | +--JMenu+--JMenuBar+--JComboBox +--JTextComponent | +--JTextField | +--JTextArea+--JList +--JScrollBar+--JScrollPane+--JPanel+--JColorChooser+--JOptionPane

Object+--Component| +--Container

| | +--Panel | | | +--Applet| | | | +--JApplet| | +--Window| | | +--JWindow| | | +--Frame| | | | +--JFrame| | | +--Dialog| | | | +--JDialog| | +--JComponent| | | + ... +--ButtonGroup+--ImageIcon+--Timer

javax.swing

Page 8: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 8

Swing mintaprogram

Feladat – Frame tesztKészítsük el az itt látható keretet! A keret bal felső sarka a képernyő (100,50) pozícióján legyen, mérete 300*100, címe: Frame teszt. A kereten legyen egy címke a Döntsd el: szöveggel, továbbá legyen két nyomógomb, OK és Nem OK felirattal! A programnak egyelőre nem kell reagálnia semmilyen eseményre.

lbInfo

fr

btNemOkbtOk

Page 9: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 9

1. megoldás – Keret összerakása kívülrőlJFrame()setTitle("Frame teszt")setBounds(100,50,300,100)setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)cp = getContentPane()setVisible(true)

fr:JFrame

lbInfo:JLabel

:FlowLayout

btOk:JButton btNemOk:JButton

FrameTest1

main

cp:JPanelsetLayout(new FlowLayout())add(lbInfo)add(btOk)

add(btNemOk)

Együttműködési diagram

Page 10: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 10

import java.awt.*;import javax.swing.*;

public class FrameTest1 {public static void main (String args[]) {

JFrame fr; JLabel lbInfo;JButton btOk, btNemOk;

fr = new JFrame();

fr.setTitle("Frame teszt"); fr.setBounds(100,50,300,100);fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Page 11: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 11

Container cp = fr.getContentPane(); cp.setLayout(new FlowLayout());

lbInfo = new JLabel("Döntsd el:"); btOk = new JButton("OK");btNemOk = new JButton("Nem OK");

cp.add(lbInfo); cp.add(btOk);cp.add(btNemOk);

fr.setVisible(true); } // main

} // FrameTest1

Page 12: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 12

2. megoldás – Keret összerakása belülről

SpecFrame()

:SpecFrame

lbInfo:JLabel

:FlowLayout

btOk:JButton btNemOk:JButton

FrameTest2

main

cp:JPanel

setLayout(new FlowLayout())add(lbInfo)add(btOk)

add(btNemOk)

setTitle("Frame teszt")setBounds(100,50,300,100)cp = getContentPane()setVisible(true), setD.CloseOp.(...)

Együttműködési diagram

Page 13: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 13

import java.awt.*;import javax.swing.*;

class SpecFrame extends JFrame {JLabel lbInfo; JButton btOk, btNemOk;

public SpecFrame() {setTitle("Frame teszt");setBounds(100,50,300,100);setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Container cp = getContentPane();cp.setLayout(new FlowLayout());

lbInfo = new JLabel("Döntsd el:");btOk = new JButton("OK");btNemOk = new JButton("Nem OK");

Page 14: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 14

cp.add(lbInfo);cp.add(btOk);cp.add(btNemOk);

setVisible(true);} // konstruktor

} // SpecFrame

public class FrameTest2 {public static void main (String args[]) {

new SpecFrame();} // main

} // FrameTest2

Page 15: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 15

3. megoldás – A konténer komponenseit nem deklaráljuk, pakolunk

class SpecFrame extends JFrame {

public SpecFrame() {

cp.add(new JLabel("Döntsd el:"));

cp.add(new JButton("OK"));

cp.add(new JButton("Nem OK"));

pack();

show();} // konstruktor

} // SpecFrame

Page 16: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 16

Jellemzők

Property: Beállítható és lekérdezhető tulajdonság Deklaráció: PropType propName;

• beállító metódus (set):void setPropName(PropType propName)

• lekérdező metódus (get / is):PropType getPropName()boolean isPropName()

Példák:Jellemző Beállító metódus Lekérdező metódus

int columns void setColumns(int columns) int getColumns()

boolean visible void setVisible(boolean visible) boolean isVisible()

Page 17: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 17

Pont, méret, téglalap

Osztályok a látható komponensek paraméterezéséhez

Dimension osztály: megjegyzi egy téglalap méretét (szélességét és magasságát)

Rectangle osztály: megjegyzi egy téglalap

• helyzetét (location): bal felső sarkának x és y koordinátáit, és

• méretét (dimension): szélességét (width) és magasságát (height)

Point osztály: megjegyzi egy pont x és y koordinátáit

Page 18: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 18

Feladat – Pontok és téglalapokAdva van két téglalap: az egyik téglalap bal felső sarka a (100,100) pont, mérete 50*30; a másik téglalap bal felső sarka a (120,80) pont, mérete 20*60. Határozzuk meg a téglalapok közös részét! Vizsgáljuk meg, hogy a (130,110) pont benne van-e a

közös részben! Határozzuk meg azt a legkisebb téglalapot, amely

tartalmazza a téglalapokat és egy megadott pontsoro-zat összes pontját!

Page 19: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 19

import java.awt.*;

public class PontTegla {

public static void main (String args[]) {

Rectangle r1 = new Rectangle(100,100,50,30);

Rectangle r2 = new Rectangle();

r2.setLocation(120,80);

r2.setSize(20,60);

Rectangle kozos = r1.intersection(r2);

System.out.println("Közös: "+kozos);

Point p = new Point(130,110);

kozosr1

r2

pnagy

Page 20: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 20

if (kozos.contains(p))

System.out.println(p+" benne van");

else

System.out.println(p+" nincs benne");

Point[] pontok = {new Point(50,80),new Point(15,70), new Point(30,95),new Point(120,200)};

Rectangle nagy = r1.union(r2);

for (int i=0; i<pontok.length; i++)

nagy.add(pontok[i]);

System.out.println("Nagy: "+nagy);

System.out.println("Nagy mérete: "+nagy.getSize());}

}

Page 21: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 21

KoordinátarendszerscreenSize.width=1024

y

x(0,0)

screenSize.height=768 A képernyő bal alsó sarka: (1023,767)

Dimension screenSize=Toolkit.getDefaultToolkit().getScreenSize();

Page 22: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 22

Betű, szín

Font osztály Adott tulajdonságú fontot (betűfajtát) tárol Tulajdonságok

• String fontName (név, pl.: Arial, Monospaced)

• int style (stílus, pl.: PLAIN, BOLD, ITALIC)

• int size (betűméret pontokban) Példánya változtathatatlan Minden komponensnek van fontja Logikai fontnevek: SansSerif, Serif, Monospaced,

Dialog, DialogInput

Page 23: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 23

Color osztály RGB színt tárol Minden szín a 3 alapszín (piros,zöld,kék) keveréke Tulajdonságok

• int red (piros összetevő, 0..255)

• int green (zöld összetevő, 0..255)

• int blue (kék összetevő, 0..255) Példánya változtathatatlan Minden komponensnek van egy háttérszíne és egy

előtérszíne (betűszíne) Konstans szín objektumokat definiál:

Color.black, Color.blue, Color.white, ...

Page 24: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 24

Színek, betűk használata

lb = new JLabel("Szöveg:");

lb.setFont(new Font(”Arial",Font.BOLD,24));

lb.setBackground(SystemColor.control);

lb.setForeground(Color.red);

SystemColor osztály Rendszer által használt színeket definiál:

SystemColor.info, SystemColor.infoText, SystemColor.desktop, ...

Page 25: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 25

Az absztrakt JComponent osztály

Absztrakt osztály A képernyőn megjelenő Swing komponensek közös

őse

Mezők

• static final float CENTER_ALIGNMENT, ...

Jellemzők

• Color backgroundColor foreground

• boolean opaque

Page 26: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 26

Jellemzők (folyt.)• Font font

• Cursor cursor

• Border border

• Dimension maximumSizeDimension minimumSizeDimension preferredSize

• float alignmentXfloat alignmentY

• String toolTipText

• boolean visible

• boolean enabled

• boolean requestFocusEnabled

Page 27: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 27

Helyzet, méret• int getX()

int getY()

• int getWidth()int getHeight()

• Rectangle getBounds()

• Point getLocation()Point getLocationOnScreen()

• void setBounds(int x, int y, int width, int height)void setLocation(int x, int y)void setSize(int width, int height)

• boolean contains(int x, int y)boolean contains(Point p)

Page 28: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 28

Láthatóság, érvényesség• boolean isDisplayable()• void validate()

Fókusz, eseményfogadás• boolean hasFocus()• void requestFocus()• void transferFocus()

Szülő, állapot• Container getParent()• String toString()• void list()

Page 29: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 29

java.awt.Container osztály

Konténer-komponensek közös őse

Jellemzők

• LayoutManager layoutMgr

Komponens hozzáadása, kivétele

• Component add(Component comp)Component add(Component comp, int index)

• void remove(Component comp)void remove(int index)void removeAll()

Page 30: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 30

Gyerekkomponensek

• int getComponentCount()

• Component[] getComponents()

• Component getComponent(int n)

• Component getComponentAt(int x, int y)Component getComponentAt(Point p)

• boolean isAncestorOf(Component comp)

Elrendezés

• Dimension getMaximumSize()

• Dimension getMinimumSize()

• Dimension getPreferredSize()

Page 31: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 31

java.awt.Window osztály

Összes AWT és Swing ablak komponens közös őse Utódai: Frame, JFrame, Dialog, JDialog, JWindow Metódusok

• void pack()• void show()

boolean isShowing()void hide()

• void setLocationRelativeTo(Component c)• void toBack()

void toFront()• void dispose()

Page 32: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 32

Aktív ablak

Az operációs rendszerben pontosan egy alkalmazás

aktív, egy alkalmazásban pedig pontosan egy ablak

aktív.

Metódusok (folyt.)

• void addWindowListener(WindowListener l)

• void removeWindowListener(WindowListener l)

• Component getFocusOwner()

• Window getOwner()

• Window[] getOwnedWindows()

Page 33: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 33

JFrame osztály

Közvetlen ős: java.awt.Frame

A Swing egyetlen natív komponense

Keret: legfelső szintű ablak, nincs tulajdonosa

Van szegélye, ikonja, címe és menüsora

Komponenseit a tartalompanelbe (content pane) kell

tenni

Page 34: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 34

Metódusok

• Container getContentPane()

• setDefaultCloseOperation(int operation)

• static Frame[] getFrames()

Jellemzők

• String title

• Image iconImage

• MenuBar menuBar

• boolean resizable

• int state

Page 35: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 35

6. Elrendezésmenedzserek1. Az elrendezésmenedzserek tulajdonságai

2. FlowLayout – sorfolytonos elrendezés

3. GridLayout – rácsos elrendezés

4. BorderLayout – határ menti elrendezés

5. JPanel, az összefogó konténer

Page 36: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 36

Elrendezésmenedzserek

Minden konténernek van elrendezésmenedzsere Az ablak pack utasítására automatikusan elrendezi a

konténer komponenseit, azok helyzetét és méretét Előredefiniált elrendezésmenedzserek:

FlowLayout, GridLayout, BorderLayout, CardLayout, GridBagLayout

konténer:Container

komponens1

layoutManager:LayoutManager

komponens2 komponens3

komponens1

komponens3

komponens2

konténer

Page 37: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 37

LayoutManager interfész

Minden elrendezésmenedzsernek implementálnia kell aLayoutManager interfészt.

Container osztály idetartozó metódusai

• Component add(Component comp)Component add(Component comp, int index)

• void add(Component comp, Object constraints)void add(Component comp, Object constraints, int index)

• LayoutManager getLayout()void setLayout(LayoutManager mgr)

• void validate()

Page 38: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 38

FlowLayout – sorfolytonos elrendezés

Sorfolytonos elhelyezés balról jobbra

Elemek mérete: előnyös méret (preferredSize) alapján, az ablak átméretezésekor nem változik

Sorok igazítása(align): balra, jobbra, középre

Komponensek közötti konstans távolság vízszintesen(hgap) és függőlegesen(vgap)

JPanel és Applet alapértelmezett elrendezés-menedzsere

Page 39: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 39

Feladat – FlowLayoutTestTegyünk az alkalmazás 700*100-as méretű keretébe 10 szövegmező (JTextField) és nyomógomb (JButton) párost, a sorokat középre igazítva! A szövegmezők 5 oszlopnyi helyet foglaljanak; a gombokon a ”Gomb” felirat és a gomb sorszáma szerepeljen!A futó programban interaktív módon méretezzük át a keretet, és közben figyeljük meg, hogyan változik az elemek elrendezése!

vgap=5

hgap=5

Page 40: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 40

public class FlowLayoutTest extends JFrame {private Container cp = getContentPane();

public FlowLayoutTest() {setDefaultCloseOperation(EXIT_ON_CLOSE);setTitle("FlowLayout");LayoutManager lm = new FlowLayout();cp.setLayout(lm);for (int i=1; i<=10; i++) {

cp.add(new JTextField(5));cp.add(new JButton("Gomb "+i));

}setSize(700,150);show();

}...

}

Page 41: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 41

GridLayout – rácsos elrendezés

Megadott sor és oszlopszámú rácson való

elhelyezés

Rács cellái: egyenlő méretű téglalapok, minden

komponens egy téglalapot foglal el (nincs lyuk!)

Elemek mérete: cellaméret, az ablak átméretezése-

kor változik

Komponensek közötti konstans távolság

vízszintesen(hgap) és függőlegesen(vgap)

Page 42: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 42

Feladat – GridLayoutTest

Tegyünk az alkalmazás keretére képzeletben egy 6*2-es rácsot, és tegyünk az első 10 rácshelyre egy-egy sorszámozott nyomógombot! A komponensek közötti vízszintes távolság legyen 20 pont, a függőleges távolság pedig legyen 10 pont! A futó programban interaktív módon méretezzük át a keretet!

hgap=20

vgap=10

Page 43: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 43

public class GridLayoutTest extends JFrame {

public GridLayoutTest() {setDefaultCloseOperation(EXIT_ON_CLOSE);

setTitle("GridLayout");

getContentPane().setLayout(new GridLayout(6,2,20,10));

for (int i=1; i<=10; i++) {

getContentPane().add(new JButton("Gomb "+i));}pack();

show();}public static void main (String args[]) {

new GridLayoutTest();}

}

Page 44: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 44

BorderLayout – határ menti elrendezés

4+1 égtájon való elhelyezés: North (Észak), South

(Dél), West (Nyugat), East (Kelet), Center (Közép)

Azonos égtájon levő elemek takarják egymást

Elemek mérete az ablak átméretezésekor változik

Komponensek közötti konstans távolság

vízszintesen(hgap) és függőlegesen(vgap)

Window és leszármazottainak (JFrame, JDialog),

JFrame tartalompaneljének elrendezésmenedzsere

Page 45: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 45

Feladat – BorderLayoutTest

Tegyünk a 400*200-as méretű keretbe 5 darab nyomó-gombot a képen látható módon! A vízszintes köz 2, függőleges köz 1 legyen! A futó programban interaktív módon méretezzük át a keretet!

Page 46: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 46

class BorderLayoutTest extends JFrame {Container cp = getContentPane();

public BorderLayoutTest() {setDefaultCloseOperation(EXIT_ON_CLOSE);setTitle("BorderLayout");cp.setLayout(new BorderLayout(2,1));cp.add(new JButton("North - Észak - Felső"),"North");cp.add(new JButton("South - Dél"),"South");cp.add(new JButton("West - Nyugat - Bal"),"West");cp.add(new JButton("East - Kelet - Jobb"),"East");cp.add(new JButton("Center - Középső"),"Center");

setSize(400,200); show();}…

}

Page 47: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 47

JPanel, az összefogó konténer

Konténer, mely összefogja a benne levő elemeket

Láthatatlan, vagy látható (szín, keret)

Alapértelmezésben dupla pufferelésű

Saját elrendezésmenedzsere van,

alapértelmezésben FlowLayout

Page 48: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 48

Feladat – Személy bevitel

Készítsük el az ábrán látható keretet! A Név beviteli mező 20 oszlopos, a Születési év mező 6 oszlopos legyen! A két címkézett beviteli mező, és a gombok egy-egy sort alkossanak; a sorok egymás alatt jelenjenek meg!

pnNev

pnSzulev

pnGomb

szemelyPanel(kitölti a keretet)

Page 49: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 49

:FlowLayout:FlowLayout :FlowLayout

:SzemelyPanel

pnNev: JPanel

:GridLayout

pnSzulev: JPanel

:JLabel btOk:JButton

btCancel:JButton

:JLabel tfNev:JTextField

tfSzulev:JTextField

:SzemelyBevitel

contentPane:JPanel

pnGomb: JPanel

Tulajdonosi hierarchia

Page 50: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 50

7. Eseményvezérelt programozás1. Mintaprogram

2. Eseményosztályok

3. Alacsony és magas szintű események

4. Eseménydelegációs modell

5. A felhasználói felület tervezése

6. Eseményadapterek

Page 51: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 51

Mintaprogram

Feladat – Pittyegő keretTegyünk a keretbe egy ”Pittyeg” feliratú gombot. Ha lenyomják a gombot, akkor a számítógép pittyegjen egyet!

:PittyegoKeret az esemény figyelője (ActionListener)

btPittyeg:JButton az esemény forrása (ActionEvent)

Page 52: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 52

Együttműködési diagram

«interfész»ActionListener

+actionPerformed(ev:ActionEvent)

PittyegoKeret

+PittyegoKeret()+actionPerformed(ev:ActionEvent)+main(args:String[])

JButton

+addActionListener(l:ActionListener)

Component

JFrame

PittyegoKeret:ActionListener btPittyeg:JButton

actionPerformed(ev)Figyelőobjektum(keret)

Forrásobjektum(gomb)

addActionListener(this) ev:ActionEvent

Osztálydiagram

Page 53: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 53

import javax.swing.*;import java.awt.*;import java.awt.event.*;

public class PittyegoKeret extends JFrame implements ActionListener {

private JButton btPittyeg = new JButton("Pittyeg");

public PittyegoKeret() {setDefaultCloseOperation(EXIT_ON_CLOSE);getContentPane().add(btPittyeg);btPittyeg.addActionListener(this);pack(); show();

}

Page 54: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 54

public void actionPerformed (ActionEvent ev) {

Toolkit.getDefaultToolkit().beep();

}

public static void main (String args[]) {

new PittyegoKeret();

}

} // PittyegoKeret

Page 55: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 55

Eseményosztályok

Esemény: az alkalmazás által létrehozott objektum, mely a vele összefüggő információkat tartalmazza

Esemény útja• operációs rendszer eseménysora• alkalmazás• forrásobjektum• esemény figyelői

A komponensen a felhasználó csak akkor válthat ki eseményt, ha a komponens• eleme az alkalmazás komponenshierarchiájának• látható

Page 56: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 56

javax::swing::event

Alacsony szintűesemények

java::awt::event

java::lang::Object

java::util::EventObject

Component-Event

Key-Event

Mouse-Event

Magas szintűesemények

Container-Event

Input-Event

Window-Event

Focus-Event

Action-Event

Adjustment-Event

java::awt::AWTEvent

ListSelectionEvent

<<interfész>>DocumentEvent

Eseményosztályok

Page 57: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 57

EventObject osztály• protected Object source• Object getSource()

AWTEvent osztály Mezők

• protected int id (Pl.: MOUSE_CLICKED)• protected boolean consumed• static final int RESERVED_ID_MAX• static final long FOCUS_EVENT_MASK

static final long KEY_EVENT_MASK...

Metódusok• int getID()• protected void consume()

protected boolean isConsumed()

Page 58: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 58

Alacsony és magas szintű események

Operációs rendszer szintjén történő elemi esemény Forrása csak komponens lehet ComponentEvent utódja Alacsony szintű AWT események:

• ComponentEvent: Komponensesemény• ContainerEvent: Konténeresemény• FocusEvent: Fókuszesemény• WindowEvent: Ablakesemény• KeyEvent: Billentyűzetesemény• MouseEvent: Egéresemény

Alacsony szintű esemény

Page 59: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 59

Minden esemény, ami nem alacsony szintű

Általában logikai esemény

Forrása nem feltétlenül komponens

Magas szintű események:

• ActionEvent: Akcióesemény

• AdjustmentEvent: Igazítási esemény

• ListSelectionEvent: Listakiválasztás-esemény

• DocumentEvent: Dokumentumesemény

• …

Magas szintű esemény

Page 60: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 60

Eseménydelegációs modell

Modell elemei:• Eseményobjektum• Eseményforrás (forrásobjektum) és figyelőláncai• Eseményfigyelő

• Az eseményt figyelő és lekezelő objektum• Fel kell fűzni a forrásobjektum megfelelő

figyelőláncára• Osztályának implementálnia kell a figyelő interfészt

Esemény feldolgozása• Forrásobjektum• Figyelő objektumok

Page 61: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 61

...

:KeyListener

:KeyListener

:ActionListener

:ActionListener

...bt:JButton

addActionListener()removeActionListener()

addKeyListener()removeKeyListener()

actionPerformed(ev)

keyTyped(ev)keyPressed(ev)keyReleased(ev)

ev:ActionEventvagy

ev:KeyEvent

A JButton akció- és billentyűzetfigyelő lánca

Page 62: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 62

Page 63: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 63

Page 64: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 64

A felhasználói felület tervezése

Felhasználói felület képének megtervezése: keret és komponensei

Eseményforrások meghatározása: azonosító/osztály + zárójelben esemény osztálya

Eseményfigyelők meghatározása: azonosító/osztály + zárójelben: figyelő interfész, figyelt objektum(ok) azonosítója (azonosítói)

Szükség esetén tulajdonosi hierarchia megtervezése

Page 65: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 65

Feladat – NyomásszámlálóTegyünk két nyomógombot a keretbe, indulásképpen mindkettőnek "0" legyen a felirata! Ha lenyomnak egy gombot, akkor növeljük meg eggyel a rajta levő szám értékét!

btJobb (ActionEvent)btBal (ActionEvent)

:NyomasSzamlalo (ActionListener, btBal,btJobb)

Page 66: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 66

public class NyomasSzamlalo extends JFrameimplements ActionListener {

private JButton btBal, btJobb;private int nBal=0, nJobb=0;public NyomasSzamlalo() {

setDefaultCloseOperation(EXIT_ON_CLOSE);Container cp = getContentPane();cp.setLayout(new GridLayout(1,2)); cp.add(btBal = new JButton(""+nBal)); cp.add(btJobb = new JButton(""+nJobb)); btBal.addActionListener(this); btJobb.addActionListener(this); pack(); show();

}

Page 67: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 67

public void actionPerformed (ActionEvent ev) {

if (ev.getSource()==btBal)

btBal.setText(""+ ++nBal);

else

btJobb.setText(""+ ++nJobb);

}

public static void main (String args[]) {

new NyomasSzamlalo();

}

}

Page 68: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 68

Feladat – Ablak becsukásaKészítsünk egy keretet! Ha a keretet be akarják csukni, akkor csukódjon be úgy, hogy a program rövid hangot hallat és befejezi futását!

:AblakBecsuk(WindowEvent)(WindowListener)

Page 69: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 69

import javax.swing.*;

import java.awt.*;

import java.awt.event.*;

public class AblakBecsuk extends JFrame

implements WindowListener {

public AblakBecsuk () {

setBounds(100,100,200,100);

addWindowListener(this);

show();

}

Page 70: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 70

public void windowOpened(WindowEvent ev) { }public void windowClosing(WindowEvent ev) {

Toolkit.getDefaultToolkit().beep();System.exit(0);

}public void windowClosed(WindowEvent ev) { } public void windowIconified(WindowEvent ev) { }public void windowDeiconified(WindowEvent ev) { } public void windowActivated(WindowEvent ev) { } public void windowDeactivated(WindowEvent ev) { }

public static void main (String args[]) {new AblakBecsuk();

}}

Page 71: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 71

Eseményadapterek

Eseményadapter Absztrakt osztály A figyelő interfészt üres metódusokkal implementálja

Page 72: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 72

Feladat – AdapterekOldjuk meg a Az Ablak becsukása feladatot esemény-adapterrel!

«interfész»WindowListener

WindowAdapter

+windowOpened(ev:WindowEvent)+windowClosing(ev:WindowEvent)+windowClosed(ev:WindowEvent)+windowIconified(ev:WindowEvent)+windowDeiconified(ev:WindowEvent)+windowActivated(ev:WindowEvent)+windowDeactivated(ev:WindowEvent)

Object

Page 73: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 73

1. megoldás: Esemény lekezelése külső eseményadapter osztályban

… class WindowFigyelo extends WindowAdapter {

public void windowClosing(WindowEvent ev) {System.exit(0);

}}

public class Adapter1 extends JFrame { public Adapter1() {

setBounds(300,300,300,200);addWindowListener(new WindowFigyelo());show();

}… // main

}

Page 74: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 74

2. megoldás: Esemény lekezelése belső eseményadapter osztályban

… public class Adapter2 extends JFrame {

class WindowFigyelo extends WindowAdapter {public void windowClosing(WindowEvent ev) {

System.exit(0);}

}public Adapter2() {

setBounds(300,300,300,200);addWindowListener(new WindowFigyelo());

show();

}…

}

Page 75: II. Grafikus felhasználói interfész

Gábor Dénes Főiskola (IAI)

Programozási technológia (Java) - II. / 75

3. megoldás: Esemény lekezelése névtelen eseményadapter osztályban

… public class Adapter3 extends JFrame {

public Adapter3() {setBounds(300,300,300,200);addWindowListener(new WindowAdapter() {

public void windowClosing(WindowEvent e) {System.exit(0);

}});show();

}…

}