Java felhasználói

felület

Alapfogalmak

Komponens alapok

Elek Tibor

GUI-val kapcsolatos fogalmak

Eseményvezérelt program Program futás: - induló állapot (induló UI) megjelenítése, - eseménykezelő végtelen ciklus elindítása. Programozás: - felhasználói felületek összepakolása (többnyire előre megírt) komponensekből (létezik kényelmes grafikus fejlesztő környezet rá), - eseménykezelések megírása, az események hatására többnyire a felhasználói felületen módosítunk.

GUI-val kapcsolatos fogalmak

Grafikus komponensek - Építő elemek, amelyekből felépítünk egy UI-t. (pl.

nyomógomb, menü, lista, stb.)

Beszerzése:

- Léteznek előre megírtak (része egy felhasznált

API-nak, swing, swt, stb.)

- Készen beszerzett

- Lehetséges új komponensek gyártása a meglévők

módosítgatásával (leszármaztatás).

- Lehetséges új komponensek gyártása a meglevők

összepakolásával.

- Lehetséges teljesen új komponens létrehozása.

GUI-val kapcsolatos fogalmak

Grafikus komponensek, Csoportosítás 1: 1. egyszerű komponens (pl. JList, JPanel) 2. összetett komponens (pl. JFileChooser)

GUI-val kapcsolatos fogalmak

Grafikus komponensek, Csoportosítás 2: 1. Konténer komponensek: beletehetők más komponensek, akár konténerek is. Tovább csoportosítható: A) csúcs konténer: az ablakozó rendszer ablakot biztosít neki (pl. Jframe, JDialog) (egy alkalmazás főablaka vagy felbukkanó párbeszéd ablaka), B) nem csúcs konténer: nincs saját ablaka (pl. JPanel), szerepe a belerakott komponensek csoportosítása. 2. Elemi komponensek: Nem tehetők bele más komponensek. (pl. JButton, JLabel)

GUI-val kapcsolatos fogalmak

Komponens fa - A komponensek egymásba tehetők -> szülő-

gyermek reláció

- Szülő komponens: az a konténer, amelybe

beleraktunk egy másik komponenst

- Gyermek komponens: az a komponens (lehet

konténer), amelyet beleraktunk a konténerbe.

- A gyermekeknek lehetnek gyermekei. Tehát

fastruktúra alakul ki, amelynek a csúcsa egy csúcs

konténer lehet.

- Szülő felelős a gyermekei megjelenéséért (de nem

ő jeleníti meg, később részletesen)

GUI-val kapcsolatos fogalmak

Komponens fa

JFrame

JPanel

Jlabel, JTextField

Jlabel, JTextField

JButton JPanel

Jbutton Jbutton Jbutton

GUI-val kapcsolatos fogalmak

Komponens tulajdonságai A tulajdonságainak beállításával testre szabhatjuk a

komponenst.

A tulajdonságok komponensenként mások, de

vannak minden komponensre jellemzőek, pl.

megjelenéssel kapcsolatosak: méret, pozíció, stb.

A közös tulajdonságok célszerűen a közös ősben

definiáltak.

GUI-val kapcsolatos fogalmak

Komponensek eseményei A komponenseken események történhetnek,

amelyekre reagálhatunk, azaz írhatunk kódot, ami

meghívódik az esemény hatására.

GUI-val kapcsolatos fogalmak

Események - Többnyire felhasználói akciók (pl. egér mozgatása,

billentyű leütés), de lehetnek komponens

események is (pl. ablak eltakaródása, scrollbar

scrollozódása)

- Az eseménynek van forrása: az a komponens,

amelyen keletkezett az esemény (pl. egér kattintás

esetén, amely felett állt az egér, billentyű leütésnél

amelyik a billentyű fókusz)

GUI-val kapcsolatos fogalmak

Esemény kezelés - A keletkezett események egy várakozó sorba

kerülnek, ahonnan az eseménykezelő végtelen

ciklus kiveszi és feldolgozza.

Azaz leegyszerűsítve: meghívja a programozó

által ehhez az eseményhez írt eseménykezelő

kódokat. Amelyik eseményhez nem írunk

eseménykezelő kódot, arra nem történik semmi.

GUI-val kapcsolatos fogalmak

Program szerkezete Egy GUI program esetén szokás, hogy minden csúcs konténer (ablak) külön osztályban van definiálva. Ebben található az ebből a csúcsból induló komponensfa összepakolása, valamint az ezekhez tartozó eseménykezelő kódok. Természetesen kell egy main metódus valahol, amelynek feladata megjeleníteni az alkalmazás fő ablakát. Egy minimum program, tehát egy osztály, amelyben a főablakot pakoljuk össze és írjuk meg az ezeken előfordulható eseményekre reagálást.

GUI-val kapcsolatos fogalmak

Program futása

- Egy GUI-s java program futtatása ugyanúgy, mint

bármely más programé.

- Fontos tudni viszont, hogy az első grafikus

komponens megjelenítéskor a JVM elindít egy

eseménykezelő szálat, ebben fut majd az összes

eseménykezelő kód.

A programozó feladata gondoskodni arról, hogy ne

lépjen fel konkurencia probléma.

Erről a témáról később részletesen lesz szó.

GUI-val kapcsolatos fogalmak

Elrendezés szervezők - A konténerbe betett gyermek komponensek pozíciója, mérete függhet a körülményektől (pl a képernyő felbontás, hány gyermek komponens van), ezért nem célszerű a programozónak ezeket fixen megadni. - Az elrendezés szervező olyan objektum, amely valamilyen szabályrendszer alapján automatikusan beállítja a gyermek komponensek pozícióját, méretét. - Többféle elrendezés szervező létezik, amelyek a szabályrendszerükben különböznek egymástól. - A programozó kiválasztja, beállítja paramétereit, majd hozzárendeli a konténerhez.

GUI-val kapcsolatos fogalmak

„Grafikus fejlesztőeszköz” (GUI designer, visual designer) Olyan grafikus programozási eszköz, amely lehetővé teszi - a komponensek összepakolgatását grafikus felületen a komponensek húzásával, - a komponensek tulajdonságainak megnézését, beállítását grafikus felületen - a kód legenerálását - stb. Használata jelentősen megkönnyíti a fejlesztést.

GUI-val kapcsolatos fogalmak

„Grafikus fejlesztőeszköz”

Fajtái:

- Tiszta java kódot adó: a designer java kódot

generál és java kódot olvas fel, más file-t nem

használ, plusz meta adatot nem tárol.

- Meta adat is keletkezik fejlesztés közben: java

kódot + meta adatot tárol és olvas fel, de a

végére java osztály keletkezik

- Meta adatot használ: java kódot és meta

adatot is generál és használ

GUI-val kapcsolatos fogalmak

„Grafikus fejlesztőeszköz”

Eszközök: több ingyenes és fizetős is van.

A NetBeans beépítve tartalmazza (2. fajtájú)

Az Eclipse-nél külön telepíteni kell. Lehet az

eclipse saját designer-t (Eclipse VE (Visual

Editor) 1. fajtájú) vagy sok más által készítettet.

A Java GUI eszközei

AWT (Abstract Window Toolkit) - a korábbi megvalósítás - cél: hardverfüggetlenség, platform függetlenség - cél megvalósítása: nehéz súlyú komponensekkel, azaz a gép ablakozó rendszerétől kéri a komponens létrehozását, megjelenítését. Ennek hátrányai: 1. eltérő ablakozó rendszerben, eltérő megjelenés 2. a komponensek kinézete nem változtatható 3. csak olyan komponensek lehetnek, amelyek minden ablakozó rendszerben léteznek, tehát csak a legalapvetőbb komponensek - Ma már a grafikus komponenseit nem használjuk, a többi részét (pl. eseménykezelés, egyéb komponensek) igen.

A Java GUI eszközei

Swing - újabb megoldás

- a cél a ua. mint AWT, de annak hibái nélkül

- megoldás: pehelysúlyú komponensek, azaz teljesen

java-ban megvalósított komponensek, amelyek csak az

alapvető rajzolási funkciókat kéri az ablakozó

rendszertől.

- előnyei:

1. a kinézet is programozható

2. sok grafikus komponens

3. könnyen létrehozható új grafikus komponens

- egyéb jellemzők:

1. több más újdonság is,

2. átgondoltabb, teljesebb lett

A Java GUI eszközei

Swt (Standard Widget Toolkit) - nem része az alap csomagoknak, nem a Sun

terméke, az eclipse-hez fejlesztették ki.

- a swing alternatívája

- platform függő native könyvtárat használ, így

nem létezik minden platformra, viszont egy kicsit

gyorsabb

Swing grafikus komponensei

Komponensek használata GUI szerkesztővel

Fontos panelek:

- komponens paletta

- tulajdonság panel

- komponens fa megjelenítő

Swing grafikus komponensei

Komponensek használata GUI szerkesztővel 1. Komponens elhelyezése a konténeren

(komponens létrehozása + beillesztés a

komponensfába)

2. Testre szabás (tulajdonságainak (pl. méret,

pozíció, stb.) beállítása): A komponensre kattintva

a tulajdonság panelen kikeresni és beállítani a

szükséges tulajdonságot.

3. Viselkedésének megadása (események): Az

esemény panelen a megfelelő eseményhez

megadni (és legeneráltatni) a lekezelőt.

Swing grafikus komponensei

Grafikus Helló világ GUI szerkesztővel

Netbeans-ben

Eclipse-ben

Swing grafikus komponensei

Leszármazási hierarchia A csúcs konténerek kivételével minden

komponens közös őstől származik:

- Az összes komponens őse:

java.awt.Component

- Ennek leszármazottja a konténerek őse:

java.awt.Container

- Ennek leszármazottja a swing komponensek

őse:

javax.swing.JComponent

Swing grafikus komponensei

Leszármazási hierarchia Az összes komponens őse: java.awt.Component Alapvető műveletei: +méret (get(set)Size(), get(set)Bounds(), get(set)PreferredSize(), get(set)MaximumSize(), get(set)MinimumSize()), +pozíció (get(set)Location(), get(set)Bounds()), +színei (get(set)Background(), get(set)Foreground()), +betűtípus (get(set)Font(), getFontMetrics()), +Locale (get(set)Locale()), +engedélyezettség (get(set)Enabled()), +láthatóság (get(set)Visible()), +néhány eseménykezelő hozzáadás, levétel (pl. add(remove)MouseListener()), +kirajzolás, újrakirajzolás (paint(), repaint())

Swing grafikus komponensei

Leszármazási hierarchia - java.awt.Container: Az , az awt-s konténerek

szülője, az összes swing-es komponens szülője:

tartalmazza a konténer műveleteket: +gyermek hozzáadása (add()),

+gyermek levétele (remove(), removeAll()),

+elrendezés szervező (get(set)Layout()),

+gyermek infok (getComponentCount(),

getComponentAt(), findComponentAt(),

getComponents(),

get(set)ComponentsZOrder())

+stb.

Swing grafikus komponensei

Leszármazási hierarchia

- javax.swing.JComponent: a csúcs konténerek

kivételével a többi swing-es komponens szülője.

Tartalmazza a Component osztályban definiált

alapvető műveletek felüldefiniálásait, valamint a

swing új szolgáltatásainak műveleteit pl. :

+Look&Feel, +keret (get(set)Border()),

+tooltip (get(set)TooltipText()),

+gyorsbillentyűk, akciók, +átlátszóság (setOpaque()),

+stb.

Swing grafikus komponensei

Komponensek elnevezése A név ne csak a tartalomra utaljon, hanem a

komponens fajtájára.

Szokás 1: első 2-3 betű a fajta, a többi a tartalom,

pl: btnModositas, txtNev, stb.

Swing grafikus komponensei

Komponensek használata kódból

1. Komponens létrehozása (példányosítás)

2. Testreszabás (tulajdonságainak (pl. méret,

pozíció, stb.) beállítása)

3. Viselkedésének megadása

4. Beillesztés a komponensfába

Swing grafikus komponensei

Komponens elhelyezése - Kódban: példa program részlet

Létrehozás: JButton btnValami = new JButton(”Valami”);

Testreszabás és eseménykezelők bejegyzése: btnValami.setBounds(10, 10, 300, 50);

btnValami.setFont(new java.awt.Font(”Arial”, 0, 12));

Beillesztés a komponensfába: pnlKont.add(btnValami);

Ha a konténernek van beállítva elrendezés-szervező,

akkor a méret és pozíció beállításoknak nincs hatása.

Swing grafikus komponensei

Komponens eltüntetése

vagy Láthatatlanná btnValami.setVisible(false);

vagy Eltávolítás a komponensfából: pnlKont.remove(btnValami);

Swing grafikus komponensei

Csúcs konténerek - Az awt-s csúcs konténerekből származnak, nem a JComponent-ből, tehát nehézsúlyú komponensnek számítanak (ablakot az ablakozó rendszertől lehet csak kérni). A swing-es csúcs konténerek: +JFrame: egy alkalmazás fő ablaka, +JDialog: egy alkalmazás feldobódó ablaka, +JApplet: a weboldalba beágyazható java alkalmazások főablaka.

JFrame

Összetett komponens, már eleve tartalmaz néhány komponenst.

Fontosabb metódusok: -JFrame(), JFrame(String): létrehozás,

alapértelmezésben láthatatlan -get(set)ContentPane(): a tartalom

panel lekérdezése beállítása -get(set)JMenuBar(): a menüsor

lekérdezése, beállítása -get(set)DefaultCloseOperation():

az ablak bezárásra hogyan reagáljon a

program -pack(): az ablak és összes

komponensének átméretezése a preferált

méretek alapján

JFrame

Létrehozása JFrame frmForm = new JFrame();

Testreszabás: Pl. frmForm.setBounds(0,0,400,300);

frmForm.setDefaultCloseOperation(JFrame.EXIT

_ON_CLOSE);

Komponensek belepakolása Nem közvetlenül a frame-re, hanem a tartalompanelre.

Megjelenítés frmForm.setVisible(true);

Grafikus „Helló világ” import javax.swing.*;

public class HelloGr {

public static void main(String[] args) {

JFrame frmFoablak = new JFrame("Grafikus Hello");

frmFoablak.setBounds(0,0,400,300);

frmFoablak.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frmFoablak.getContentPane().setLayout(null);

JLabel lblFelirat = new JLabel("Helló világ");

lblFelirat.setBounds(10, 10, 200, 200);

frmFoablak.getContentPane().add(lblFelirat);

frmFoablak.setVisible(true);

}

}

- A setDefaultCloseOperation nélkül a program nem állna le az ablak

bezárásakor (fejléc x gomb)

- A frame tartalom paneljének ki kapcsoljuk az elrendezés szervezőjét

(alapértelmezés szerint van neki beállítva egy.

Grafikus „Helló világ” 2

Ugyanez még egyszer egy kicsit helyesebben: - elrendezés szervezőre bízva a méret és pozíciókat - Az eseménykezelő szálban létrehozva a GUI-t, bár erre mivel most nem kezelünk eseményt (így nem fordulhat elő konkurencia probléma) nincs szükség. - Újdonság ennél a megoldásnál a pack(), amely átszámoltatja az elrendezés szervezőkkel a méreteket, pozíciókat, valamint a SwingUtilities.invokeLater, amely az eseménykezelő szálban futtatja a kódot

Grafikus „Helló világ” 2 import javax.swing.*;

public class HelloGr2 {

private static void createAndShowGui() {

JFrame frmFoablak = new JFrame("Grafikus Hello");

frmFoablak.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JLabel lblFelirat = new JLabel("Helló világ");

frmFoablak.getContentPane().add(lblFelirat);

frmFoablak.pack();

frmFoablak.setVisible(true);

}

public static void main(String[] args) {

javax.swing.SwingUtilities.invokeLater(new Runnable() {

public void run() {

createAndShowGui();

}

});

}

}

Gyakorlat

Példa 1.

Egy JButton, egy JPanel, és a panelbe két

újabb JButton elhelyezése (kétféle módon

elkészítve: GUI Szerkesztővel és szerkesztő

nélkül).