Alkalmazásfejlesztés gyakorlat

Az előadások a következő témára: "Alkalmazásfejlesztés gyakorlat"— Előadás másolata:

1 Alkalmazásfejlesztés gyakorlat
Java GUI, MVC modell

2 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

3 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

4 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

5 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

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

7 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

8 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

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

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

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

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

13 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

14 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

15 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ó)

16 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

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

18 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

19 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

20 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

21 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

22 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

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

24 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

25 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

26 Linkek Swing felépítéséről Swing Tutorial
Swing Tutorial