Java felhasználói felület

Átírás

1 Java felhasználói felület Alapfogalmak Komponens alapok Elek Tibor

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

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

4 GUI-val kapcsolatos fogalmak Grafikus komponensek, Csoportosítás 1: 1. egyszerű komponens (pl. JList, JPanel) 2. összetett komponens (pl. JFileChooser)

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

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

7 GUI-val kapcsolatos fogalmak Komponens fa JFrame JPanel JButton JPanel Jlabel, JTextField Jlabel, JTextField Jbutton Jbutton Jbutton

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

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

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

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

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

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

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

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

16 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

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

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

19 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

20 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

21 Swing grafikus komponensei Komponensek használata GUI szerkesztővel Fontos panelek: - komponens paletta - tulajdonság panel - komponens fa megjelenítő

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

23 Swing grafikus komponensei Grafikus Helló világ GUI szerkesztővel Netbeans-ben Eclipse-ben

24 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

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

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

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

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

29 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

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

31 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);

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

33 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

34 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);

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

36 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

37 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(); } }); } }

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