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 (swing része) - 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
JButton
Jlabel, JTextField
Jbutton
JPanel
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 (többnyire felhasználói akciók), 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
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
Komponens használata 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 (lásd események) 4. Beillesztés a komponensfába
Swing grafikus komponensei
Komponens elhelyezése - NetBeans-ben - 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).