Alkalmazásfejlesztés gyakorlat Java GUI, MVC modell

Java Swing Konténerek (Containers) Komponensek (Components) Keretek, amelyek felületet biztosítanak a GUI elemeknek Komponensek (Components) Belső elemek, konténerekbe helyezhetőek Elrendezések (Layout managers) A komponensek milyen stratégia szerint kerülnek elhelyezésre a konténerben Eseménykezelés (Listeners) Felhasználói vagy egyéb beavatkozás esetén lefutó kód

Konténerek Keret a GUI elemeknek Különböző komponenseket lehet hozzáadni JFrame, JDialog, JApplet, JWindow, JPanel, JTabbedPane, JSplitPane, JScrollPane Néhány beállítási lehetőség Az ablak címe: setTitle(String) Az ablak mérete: setSize(int, int) Pozíció, hol jelenjen meg: setLocation(int, int) Viselkedés bezár:setDefaultCloseOperation(int) setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) Modális, azaz hogy blokkolja-e a szülő ablakot vagy sem

Konténerek (feladat) Példa: 06-Java-GUI-1 Átméretezhetjük, más címet adhatunk, … Feladat: írjuk át a példát úgy, hogy az ablak egy külön osztályban szerepeljen A JDialog osztályból kell származnia Hasonlóan lehet másikból is (JFrame, …) A JDialog megvalósítja a Serializable interfészt Generálni kell serialVersionUID-t Sárga ikon: Add generated serial version ID A main-ben példányosítsuk és jelenítsük meg

Komponensek Ablakon megjelenő (belső) elemek További elemek JButton JLabel JTextField JSpinner JCheckBox JRadioButton JComboBox JMenuBar További elemek JTextArea, JList, JTree, JTable, JPasswordField Példa: 06-Java-GUI-2 Próbáljunk ki néhány elemet A menüt bővíthetjük A többi esetben layout nélkül „mellékhatások” lesznek

Elrendezések A komponensek elhelyezése az ablakon Lehetséges elrendezések GridLayout, GridBagLayout, FlowLayout, BorderLayout Ez a 4 szerepel a képeken BoxLayout, CardLayout, SpringLayout, … Bővebb leírás (és a fenti képek forrása) https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html

Elrendezések (példa) Példa: 06-Java-GUI-3 Példákban használt layout-ok GridLayout setLayout(new GridLayout(4,3)); BorderLayout setLayout(new BorderLayout()); add(settingPanel, BorderLayout.CENTER); PAGE_START, LINE_START, LINE_END, CENTER, PAGE_END, NORTH, EAST, WEST, SOUTH FlowLayout setLayout(new FlowLayout(FlowLayout.CENTER)); LEADING, CENTER, TRAILING

Gyakorlás Készítsük el az alábbi ablakot Az ablak felépítése Megoldás JPanel (GridLayout) Felirat, beviteli mező, checkbox JPanel (FlowLayout) 2 gomb JDialog-ra kell rárakni BorderedLayout Megoldás 06-Java-GUI-4 JDialog – BorderLayout Center South JPanel – GridLayout(2,2) JLabel JTextField JLabel JCheckBox JPanel – FlowLayout(Cen.) JButton JButton

Eseménykezelés Felhasználó beavatkozásra lefutó kód ActionListener ActionListener, MouseListener, KeyListener, ItemListener, FocusListener ActionListener Az adott konténernek az ActionListener interfészt kell megvalósítania A void actionPerformed(ActionEvent e) metódust implementálni kell Ebben kezelhetjük le az eseményt Hozzá kell adni, hogy mi az adott elem eseménykezelő osztálya addActionListener(ActionListener)

Eseménykezelés (példa) public class MyDialog extends JDialog implements ActionListener { private JTextField textField = new JTextField(); private JButton okButton = new JButton("OK"); public void showDialog() { … inputPanel.add(new JLabel("Szoveg")); inputPanel.add(textField); buttonPanel.add(okButton); okButton.addActionListener(this); } public void actionPerformed(ActionEvent e) { if (okButton == e.getSource()) { // Az OK gombot nyomták meg adat = textField. getText();

(Model, View, Contoroller) MVC (Model, View, Contoroller)

View Controller Model Interfész Controller Modell Interfész osztályok Memória Fájl (XML, txt, bin, …) DB

MVC modell Model View Control Felhasznált adatok, információk Adatlekérdezés, adatmanipuláció Sokszor adatbázis kezelés is ide tartozik View A megjelenítés a felhasználó felé (GUI) Saját vagy előre definiált grafikus komponensekből Control A vezérlés megvalósítása  adat és GUI közötti interakció Több lehetőség: Eseménykezelés Üzleti logika 13

MVC modell View A View réteg hozzáfér a Model réteghez, DE! A Model két részre osztható: DTO-k: Data Transfer Object, együtt: modell osztályok, domain modell Perzisztencia (adattárolás): adatok rögzítése, olvasása A View felhasználja a modell osztályokat A View a perzisztenciát nem használja, azt a controller használja fel

MVC Tanácsok / szokások Minden rétegnek legyen interfésze, mert: Helyettesíthető a szabványos interfészt implementáló más komponenssel. Pl. átállunk MS SQL Serverről Oracle-re, lecseréljük az adatelérési réteget Tesztelhető Minden réteg önmagában tesztelhető. Interfészek: Model interfész (Model <-> Controller interakció) Controller interfész (Controller <-> View interakció)

Java Beans http://en.wikipedia.org/wiki/JavaBeans Felhasználása 3 követelmény: Van public default (parameterless) constructor Minden propertyhez van get/set boolean értékű esetében get helyett is Szérializálható Wikipédián az indokok, pl.: Egy keretrendszer példányosítani tudja Állapotát lementheti perzisztens tárolóba (ORM) Állapotát visszaállíthatja perzisztens tárolóból (ORM) Felhasználása Modell osztályok

MVC alkalmazás: Book Shop Könyvesbolt asztali alkalmazás Ügyfelek felvétele, listázása, stb. Könyvek beszerzése, listázása, stb. Könyvek eladása, eladások listázása, stb. Példa: 06-java-GUI Már tartalmaz Kontrollert Modellt Interface, memóriában tárolja, bean osztályok Olvassuk át a forráskódot, megjegyzéseket is!

Parancssorból (emlékeztető) Parancssorból ant-tal fordítva és futtatva cmd env.bat cd feladat\06-Java-GUI ant cd dist run.bat

Program felépítése bookshop.Main Az app belépési pontja Feladata: A parancssori argumentumok feldolgozása Az alkalmazás indítása bookshop.controller.BookShopController Az app vezérlője bookshop.view.BookShopGui A view réteget reprezentálja (nem UI komponens) bookshop.view.BookShopMenuBar Az app főablakának menüje

Program felépítése (folyt.) bookshop.model Customer tárolás, hozzadás, listázás BookShopDAO interfész BookShopDAOImpl megvalósítás Memóriában tárolja bookshop.model.bean Bean osztályok Book, Customer, Purchase

Program felépítése (folyt.) hu.alkfejl.bookshop.view.dialogs Dialógus ablakok Jelenleg csak az AddCustomerDialog van kész A többit majd implementáljuk hu.alkfejl.bookshop.view.tablemodels TableModel-ek A keresési eredmények megjelenítése Csak a CustomerTableModel van implementálva bookshop.view.Labels A felhasználói felületek üzenetei Nem a kódban szétszórva kell megvalósítani Lokalizáció miatt

Program felépítése (folyt.) AddCustomerDialog this - JDialog dialogPanel - JPanel (BorderLayout) settingPanel - JPanel (GridLayout) JLabel JTextField JLabel JSpinner JLabel genderP. - JPanel (FlowLayout) JRadioButton JRadioButton JLabel JCheckBox JLabel JComboBox buttonPanel - JPanel (FlowLayout) JButton JButton

Feladat „Buy book” kifejlesztése BookShopDAO tárolja memóriában Következő attribútumokat lehet megadni: Author (TextField) Title (TextField) Year (Spinner) Category (ComboBox) Price (Spinner) Piece (Spinner) Ancient (Boolean): Automatikusan állítsuk be, üzleti logika alapján (BookShopControl) 1900 előtt kiadott könyvekre igaz.

Házi feladat (debug) Debug-olás és/vagy program megértés Rakjunk töréspontot AddCustomerDialog::actionPerformed első sor Indítsuk el debug módban Válasszuk ki a BookShopController osztályt Nyomjuk meg a debug gombot! Kövessük végig a futást egészen a BookShopDAO-ig Próbáljunk meg már létező ügyfelet felvenni Kövessük futás közben

Házi feladat (fejlesztés) Sell Book menupont kifejlesztése Memóriában lévő ügyfeleknek tudunk eladni Memóriában lévő könyveket tudjuk eladni Comboboxban listázzuk ki a memóriában lévő könyvek címeit/ügyfelek neveit Használjunk SplitLayout-ot, bal oldalt a kiválasztott ügyfél adatai, jobb oldalt a kiválasztott könyv adatai jelenjenek meg nem szerkeszthető módon (az egyes oldalak elrendezéséhez vegyük alapul az AddCustomer dialogust!) Alul OK és Cancel gombok 25

Linkek Swing felépítéséről Swing Tutorial http://java.sun.com/products/jfc/tsc/articles/architecture/index.html Swing Tutorial http://java.sun.com/docs/books/tutorial/uiswing/index.html