Uživatelská rozhraní 6. cvičení

1. Uživatelská rozhraní 6. cvičení

2. Úvod do Swing GUI toolkit • AWT Abstract Window Toolkit (import java.awt.*) • Od počátku Javy, základní stavební kameny pro vytváření komplexních UI. Intenzivní využívání návrhových vzorů (vychází z Model-View-Controler). • Swing (import javax.swing.*) • Od Javy 2, rozšiřuje a staví na AWT, obsahuje spoustu nových komponent, standardní dialogová okna, Look & Feel, Také využívání návrhových vzorů (vychází z Model-View-Controler) . • Vzhled i chování prvků je implementováno v Javě. • Management rozložení komponent – 8 typů základních layoutů, ale existuje mnoho dalších. • Součást JFC (Java Foundation Classes). • Podpora pro datové přenosy (Cut/Copy/Paste, Drag &Drop). • Obsahuje Undo Framework (podpora Undo a Redo operací). • Internacionalizace, Accesibility (zpřístupnění obsahu zrakově postiženým). • Rovněž multiplatformní, alternativou je např. SWT od IBM.

3. Prerekvizity • Java SE DevelopmentKit (JDK) http://java.sun.com/javase/downloads/index.jsp • Manuály Specifikace API: http://java.sun.com/javase/6/docs/api/ Tutoriály: http://java.sun.com/docs/books/tutorial/index.html • Editory NetBeans, Eclipse, PSPad, …

4. Základní informace o GUI v Javě • Každá komponenta viditelná na obrazovce musí být potomkem java.awt.Component • Jména vizuální komponenty z balíku java.swing začínají písmenkem J (JComponent, JFrame, JFileChooser, …) • Dodržuje se zde téměř všude návrhový vzor MVC, takže i tlačítko má svůj model java.swing.ButtonModel • Existuje technologie JavaBean, která je určeny především (ale ne jenom) pro vytváření grafických komponent.

5. Ukázky možností swing GUI • <JAVA_JDK_HOME>\demo\jfc\SwingSet2\ • https://swingset3.dev.java.net/ (online verze – Java WebStart)

6. Nejpoužívanější komponenty • JFrame (zbylé dvě jsou JDialog a JApplet) • Okno aplikace, obsahuje standardní prvky (lze je vypnout), komunikuje s OS. • Kontejnerem pro další komponenty (např. JButton, JLabel, JPanel) není přímo JFrame, ale automaticky vytvořený ContentPane (getContentPane()). Min, max, zavřít Title bar ContentPane

7. Další komponenty • Kontejnery: JPanel, JTabbedPane, JSplitPane, JScrollPane, … Usnadňují umísťování dalších komponent. • Atomické komponenty: JLabel, JButton, JComboBox, JTextField, JTable,… Umožňují interakci s uživatelem a zobrazují informace.

8. Postup při použití obecné komponenty • 1. Instanciace. • JButtonbtn = new JButton(“tlačítko“); • 2. Konfigurace. • //většinou není třebabtn.setPrefferedSize(newDimension(100, 20)); • btn.setSetText(“TLAČÍTKO”); • 3. Jedná-li se o kontejner, vložení potomků. • 4. Nejedná-li se o JFrame, vložení komponenty do kontejneru (např. JContentPane, JPanel). • panel.add(btn); • 5. Registrace posluchačů. • btn.addXXXListener(listener);

9. Události (1) • Zdroj událostí • Objekt, který generuje události • Spravuje seznam registrovaných posluchačů • Posluchač (listener) • Objekt, který chce být o události informován • Musí být registrován u zdroje událostí • Musí implementovat dohodnuté rozhraní

10. Události (2) Posluchač Registrovaní posluchači Posluchač Zdroj událostí registrace Posluchač addEventListener vznikudálosti nastala událost (e) Informace o události EventObject e

11. Zpracování událostí • Posluchač se zaregistruje u zdroje událostí (např. u tlačítka, na jehož stisknutí čeká) • Uživatel stiskne tlačítko – vznikne událost • Zdroj události (tlačítko) projde seznam registrovaných posluchačů a každému z nich oznámí vznik události: • Zavolá dohodnutou metodu rozhraní posluchače • Metodě předá informace o události (podtřída java.util.EventObject)

12. Události: Model Event – Listener Zpracování událostí MyListener addFooListener fireSomethingHappend somethingHappend Source FooEvent somethingHappend MyListener AddFooListener

13. Události - Shrnutí • Objekt události • musí dědit z java.util.EventObject • Má se jmenovat <něco>Event • Musí mít konstruktor s alespoň jedním parametrem (zdroje událostí) • Rozhraní posluchače (ListenerType) • Musí dědit z java.util.EventListener • Má se jmenovat <něco>Listener • Jednotlivé metody by mněli mít jeden parametr (událost) • Mají vracet void • Zdroj událostí(JavaBean) musí mít metody public voidadd<ListenerType>(<ListenerType> listener) throwsjava.util.TooManyListenersException; public voidremove<ListenerType>(<ListenerType> listener)

14. GUI události • Balík java.awt.event a java.swing.event • Každá komponenta podporuje notifikaci následující posluchačů a mnoha dalších • addComponentListener, addMouseListeneraddMouseMotionListener, addKeyListener • Adaptéry slouží k tomu aby nebylo třeba implementovat všechny metody, když potřebujeme obsloužit jen jednu. • Adaptéry implementují všechny metody jako prázdné. • KeyAdapter, MouseAdapter, MouseMotionAdapter

15. Ukázka použití Adaptéru txtOut = new JTextField(); txtOut.addMouseListener(new java.awt.event.MouseAdapter() { @Override publicvoid mouseClicked(java.awt.event.MouseEvent e) { //udělej něco } }); Bez použití adaptéru txtOut.addMouseListener(new java.awt.event.MouseListener() { publicvoid mouseClicked(java.awt.event.MouseEvent e) { //udělej něco } @Override publicvoid mouseEntered(MouseEvent paramMouseEvent) { } @Override publicvoid mouseExited(MouseEvent paramMouseEvent) { } @Override publicvoid mousePressed(MouseEvent paramMouseEvent) { } @Override publicvoid mouseReleased(MouseEvent paramMouseEvent) { } });

16. Layout Management • LM ovládají rozmístění komponent v rámci kontejneru. • Příkaz pack() nastaví velikost okna tak aby komponenty obsažené v něm mněli pokud možno preferovanou velikost.

17. Layout Management • Rozhraní java.awt.LayoutManager a java.awt.LayoutManager2, který je rozšířením prvního. • Každý si může vytvořit svůj vlastní layout manager stačí implementovat jedno z těchto dvou rozhraní. • Přehled všech tříd které implementují dané rozhraní najdete na: • http://java.sun.com/javase/6/docs/api/java/awt/LayoutManager.html • http://java.sun.com/javase/6/docs/api/java/awt/LayoutManager2.html

18. FlowLayout • Nejjednodušší layout, vkládá komponenty na řádek zleva doprava dokud je na řádku místo, pak pokračuje dalším řádkem. • Každý řádek je vycentrovaný. • Řídí se tzv. preferred size atributem komponenty. • Je to výchozí rozložení pro JPanel.

19. BorderLayout • Rozděluje kontejner do pěti regionů. • Výchozí centrální region je maximalizovaný, ostatní zabírají pouze minimální potřebnou plochu. • Každý region může obsahovat maximálně jednu komponentu. • Je to výchozí rozložení pro ContentPane (JFrame). • Pozor pokud to jde je volné místo přiděleno komponentně ve středu takže, pokud boční komponenty nemají minimální velikost (např. prázdný frame) nebudou vidět. • Konstanty: CENTER, WEST, EAST, SOUTH, NORTH • Pokud použijete BorderLayout v kontejneru CntentPane okna a necháte „okraje“ volné můžete vytvořit toolbar java.swing.JToolBar, který bude moct přesouvat myší na libovolnou stranu okna, bez nutnosti psaní nějakého speciálního kódu.

20. BoxLayout • Řadí komponenty za sebe do řádku (LINE_AXIS) nebo podsebe do sloupce (PAGE_AXIS). • Obdoba FlowLayout, ale s více možnostmi.

21. GridLayout • Umísťuje komponenty do buněk mřížky. • Každá komponenta využije celý prostor buňky. • Všechny buňky mají stejnou velikost.

22. GridBagLayout • Jeden z nejkomplexnějších layoutů. • Umísťuje komponenty do buněk mřížky obdobně jako GridLayout. • Řádky i sloupce mohou mít různou velikost. • Komponenta může zabírat více buněk (rowspan, columnspan).

23. Implicitní správce rozvržení • Při vytvoření jakéhokoliv potomka třídy Container má automaticky předdefinován i správce rozvržení. JPanelFlowLayout JFrameBorderLayout JDialogBorderLayout JAppletBorderLayout BoxBoxLayout

24. Specifikace API Důležitou součástí programování bude vyhledání informací o třídách, metodách, konstruktorech, zděděných vlastnostech apod. Proto se snažte spřátelit na cvičení i s API specifikací (http://java.sun.com/javase/6/docs/api/ ). Příklad na vlastnosti JButton http://java.sun.com/javase/6/docs/api/javax/swing/JButton.html

25. Specifikace API Každý popis třídy nebo rozhraní obsahuje všechny důležité informace o dané třídě rozhraní: • Ve kterém balíku je třída obsažena • Ze kterých tříd dědí • Seznam rozhraní, která implementuje • Podtřídy • Popis • Seznam třídních proměnných, konstruktorů, metod • Podrobné popisy předchozích (argumenty, vyjímky)

26. Praktická úloha • Pro cvičení použijeme šablonu, na které se budeme dále seznamovat s komponentami zahrnutými ve Swing API. • Design si můžete upravit libovolně podle sebe. Pokuste se vyzkoušet základní prvky, včetně nastavení jejich vlastností.

27. Praktická úloha

28. Použití třídy JFrame Základní třída okna aplikace. publicclass TempConv extends JFrame implements ActionListener { JTextField txtIn; … } Slouží k registraci posluchačů, viz. dále. Ovládacíprvky, se kterýmibudemepracovat (čístjejichstav), deklarujemezdejakoatributy třídyTempConv.

29. Základní operace v konstruktoru Nastavení titulku přes konstruktor třídy JFrame. publicTempConv() { super(“Převod teplot”); //setMinimumSize(new Dimension(420, 300)); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Container content = getContentPane(); … } Bez tohoto řádku by nedošlo po zavření okna k ukončení aplikace. Získámekontejner pro ovládacíprvky.

30. Zpracování událostí – varianta 1 publicclassTempConvextendsJFrameimplementsActionListener { … JButtonbtn= newJButton(“Převod”); btn.addActionListener(this); … publicvoidactionPerformed(ActionEventevt) { // provedení konverze hodnot … } … } Registraceposluchače událostí vyvolaných tlačítkem. Reakce na událost.

31. Zpracování událostí – varianta 2 JButtonbtn= newJButton(“Převod”); btn.addActionListener(newActionListener() public voidactionPerformed(ActionEventevt) { // provedení konverze hodnot … }); Registraceposluchače událostí vyvolaných tlačítkem. Reakce na událost. Oproti předchozí variantě není problém obsloužit více jak jedno tlačítko v okně. Doporučovaná metoda obsluhy událostí!

32. Obrázek protected JComponent getImage(){ // ------ cast pro obrazek ------ JPanel panel = new JPanel(); ImageIcon i= new ImageIcon("d:/URO/cv/thermo2.png"); // ImageIcon(this.getClass().getResource("thermo2.png")); // pro nacitani obrazku napr. uvnitr JAR souboru JLabel l=new JLabel(i); panel.add(l); return panel; }

33. RadioButton JRadioButton Doporučuji použít společně se třídou javax.swing.ButtonGroup, která zajistí vytvoření skupiny tlačítek, kde může být vybránu pouze jedno tlačítko. http://java.sun.com/docs/books/tutorial/uiswing/components/button.html

34. Borders Najdete je v balíku javax.swing.border Zajímavostí je vytvoření rámečku s textem, který se tvoří tak že se vytvoří objekt třídy TitledBorder, ten však vykresluje pouze text a musí v sobě obsahovat ještě další rámeček, který se postará o vytvoření samotného rámu kolem komponenty. BorderFactory.createTitledBorder( BorderFactory.createEtchedBorder(EtchedBorder.RAISED), "Směr převodu„,…) ); Lze vytvořit rámeček s více jak jedním textem?

35. Dopracovat výpočet a vzhled. Děkuji za pozornost.