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

Úvod do Swing GUI toolkitÚ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.

PrerekvizityPrerekvizity Java SE Development Kit (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, …

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.

Ukázky možností swing GUI

• <JAVA_JDK_HOME>\demo\jfc\SwingSet2\

• https://swingset3.dev.java.net/ (online verze – Java WebStart)

Nejpoužívanější komponentyNejpouží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()).

Title barMin, max,

zavřít

ContentPane

Další komponentyDalší 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.

Postup při použití obecné Postup při použití obecné komponentykomponenty

1. Instanciace. JButton btn = new JButton(“tlačítko“);

2. Konfigurace. //většinou není třeba

btn.setPrefferedSize(new Dimension(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);

• 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í

Události (1)

Události (2)

Zdroj událostí

Registrovaní posluchači

PosluchačPosluchač

PosluchačaddEventListener

registrace

Informace o události

EventObject e

vznik události

nastala událost (e)

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

Zpracování událostí

Události: Model Event – Listener Zpracování událostí

Source

MyListener

MyListener

addFooListeneraddFooListener

AddFooListenerAddFooListener

fireSomethingHappend

fireSomethingHappend somethingHappend

somethingHappend

somethingHappendsomethingHappend

FooEvent

• 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 void add<ListenerType>(<ListenerType> listener)

throws java.util.TooManyListenersException;

public void remove<ListenerType>(<ListenerType> listener)

Události - Shrnutí

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, addMouseListener

addMouseMotionListener, 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

Ukázka použití AdaptérutxtOut = new JTextField();txtOut.addMouseListener(new java.awt.event.MouseAdapter() {@Overridepublic void mouseClicked(java.awt.event.MouseEvent e) {//udělej něco

}});

Bez použití adaptérutxtOut.addMouseListener(new java.awt.event.MouseListener() {

public void mouseClicked(java.awt.event.MouseEvent e) {//udělej něco

}@Overridepublic void mouseEntered(MouseEvent paramMouseEvent) {}@Overridepublic void mouseExited(MouseEvent paramMouseEvent) {}@Overridepublic void mousePressed(MouseEvent paramMouseEvent) {}@Overridepublic void mouseReleased(MouseEvent paramMouseEvent) {}

});

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.

BoxLayout FlowLayout GridLayout

BorderLayout GridBagLayout “Null” Layout

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

FlowLayoutFlowLayout

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.

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

BoxLayoutBoxLayout

Řadí komponenty za sebe do řádku (LINE_AXIS) nebo podsebe do sloupce (PAGE_AXIS).

Obdoba FlowLayout, ale s více možnostmi.

GridLayoutGridLayout

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.

GridBagLayoutGridBagLayout

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

Implicitní správce rozvržení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í.

JPanel FlowLayout

JFrame BorderLayout

JDialog BorderLayout

JApplet BorderLayout

Box BoxLayout

Specifikace APISpecifikace 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

Specifikace APISpecifikace 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)

Praktická úlohaPraktická ú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í.

Praktická úlohaPraktická úloha

Použití třídy JFramePoužití třídy JFrame

public class TempConv extends JFrame implements ActionListener {JTextField txtIn;…

}

Ovládací prvky, se kterými budeme pracovat (číst jejich stav), deklarujeme zde jako atributy třídy TempConv.

Základní třída okna aplikace.

Slouží k registraci posluchačů, viz. dále.

Základní operace v konstruktoruZákladní operace v konstruktoru

public TempConv() {super(“Převod teplot”);//setMinimumSize(new Dimension(420, 300));setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);Container content = getContentPane();…

}

Získáme kontejner pro ovládací prvky.

Nastavení titulku přes konstruktor třídy JFrame.

Bez tohoto řádku by nedošlo po zavření okna k ukončení aplikace.

Zpracování událostí – varianta 1Zpracování událostí – varianta 1

public class TempConv extends JFrame implements ActionListener {…JButton btn = new JButton(“Převod”);btn.addActionListener(this);…public void actionPerformed(ActionEvent evt) {// provedení konverze hodnot…}…

}

Registrace posluchače událostí vyvolaných tlačítkem.

Reakce na událost.

Zpracování událostí – varianta 2Zpracování událostí – varianta 2

JButton btn = new JButton(“Převod”);btn.addActionListener(new ActionListener()

public void actionPerformed(ActionEvent evt) {// provedení konverze hodnot…

});

Registrace posluchač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í!

ObrázekObrá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;

}

RadioButtonRadioButton

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

BordersBordersNajdete 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?

Dopracovat výpočet a vzhled.Dopracovat výpočet a vzhled.

Děkuji za pozornost.Děkuji za pozornost.