Java felhasználói felület

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.


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.


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


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)


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)


Komponens fa

JFrame

JPanel

Jlabel, JTextField

JButton

Jlabel, JTextField

Jbutton

JPanel

Jbutton

Jbutton


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.


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.


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)


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.


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.


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


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.


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


„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


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


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


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ő


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.


Grafikus Helló világ GUI szerkesztővel Netbeans-ben Eclipse-ben


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


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


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.


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.


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.


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


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.


Komponens eltüntetése vagy Láthatatlanná btnValami.setVisible(false);

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


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

Java felhasználói felület

Recommend Documents