Grafické rozhraní. Grafické rozhraní. Základní pravidla pro návrh GUI. Princip GUI aplikace. Úvod do tvorby GUI aplikací

Grafické rozhraní

Přednáška 2

Grafické rozhraní

GUI (Graphics User Interface) nezávislé na zařízení nezávislé na OS (s ohledem na multiplatformnost progr. j. Java)

Komponenty (vizuální i nevizuální)

2 rozhraní AWT (Abstract Window Toolkit)

Úvod do tvorby GUI aplikací

JFC (Java Foundation Class)

1

Počítačová grafika, PV, UPCE-FEI-KST, [2010/2011]

Princip GUI aplikace

Java Beans (nevizuální komponenty) Swing (vizuální komponenty)

To nás bude zajímat


Přednáška 2

2

Základní pravidla pro návrh GUI

Komponenty Komunikace mezi komponentami Událostmi řízené programování Události Smyčka obsluhující frontu zpráv (událostí, většinou vyvolaných zásahem uživatele) Obslužné kódy událostí (handlery) Problematika vláken a vícevláknových aplikací Asynchronní programování, lze použít i obecně (ne jen pro GUI aplikace)


malá rychlost komponenty závislé na prostředí

Přednáška 2

3

Intuitivní ovládání Dodržování běžných zvyklostí uživatelů dle povahy aplikace dle zkušenosti uživatele dle zvyklostí v jednotlivých OS Prostředí se přizpůsobuje uživateli (ne naopak) Jednotný vzhled aplikací v balíku Použití vhodných rozvržení Jednoduše, přehledně, efektivně, střídmě (barvy, fonty, rozměry) Uživatel musí mít stále přehled, kde se nachází (u více otevřených formulářů) Často je hodnocení aplikace založeno (nesprávně) jen na kvalitě vzhledu


Přednáška 2

4

Základní komponenty

Hierarchie komponent v aplikaci

java.awt.Container javax.swing.JComponent Většina používaných komponent

Top-Level componenty (JFrame, JDialog) Kontejnerové komponenty (JPanel, JScrollPane, JToolbar, JSplitPane, …) Základní komponenty (listy) – Swing Controls (JButton, JLabel, JRadioButton, JCheckBox, JTextArea, JTextField, JScrollBar, JComboBox, JMenu, JList, JProgressBar…) Interaktivní (editovatelné) komponenty Informativní (needitovatelné) komponenty


Přednáška 2

5

Vzhled komponent

Zobrazení okna

statická třída UIManager

import java.awt.FlowLayout; import javax.swing.JButton; import javax.swing.JFrame;

UIManager.setLookAndFeel (UIManager.getSystemLookAndFeelClassName()); UIManager.setLookAndFeel (UIManager.getCrossPlatformLookAndFeelClassName());

Přednáška 2


public class MainFrame extends JFrame { JButton btn1, btn2; MainFrame () { setTitle("Příklad zobrazení okna"); setLayout(new FlowLayout());

Použití před zobrazením formuláře

6

Poznámky: Nastavení zobrazení může být v konstruktoru Aplikace funguje, ale nic nedělá

btn1 = new JButton("Tlačítko 1"); add(btn1);

Na rozmístění tlačítek má vliv použitý Layout

btn2 = new JButton("Tlačítko 2"); add(btn2);

Bez Layoutu bude druhé tlačítko přes celé okno

setSize(300,100);

Komponenty lze přidávat i pomocí

}

getContentPane().add(button1);

public static void main (String[] args) { Možnost přizpůsobení velikosti okna obsahu pomocí pack(); new MainFrame().setVisible(true); } } Počítačová grafika, PV, UPCE-FEI-KST, [2010/2011]

Přednáška 2

7


Přednáška 2

8

Reakce na událost

Princip fungování konceptu událostí

public class MainFrame extends JFrame { JButton btnPocitadlo; JLabel jLabelPocetStisknuti; static int pocitadlo = 0;

MainFrame () { … btnPocitadlo = new JButton("Zvyš stav počítadla"); add(btnPocitadlo);

jLabelPocetStisknuti = new JLabel("Stav počítadla: 0"); btnPocitadlo.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { buttonPocitadloActionPerformed(e); } }); add(jLabelPocetStisknuti);

Události vytváří (vysílá) uživatel (prostřednictvím ovládací komponenty) program systém Z hlediska programování je to objekt Jiný objekt je zachycuje (posluchač, listener) Zachycovat může pouze objekt s implementovaným rozhraním Listener, kterého si vysílající objekt zaregistruje

} private void buttonPocitadloActionPerformed(ActionEvent e) { pocitadlo++; jLabelPocetStisknuti.setText("Stav počítadla: " + pocitadlo); } Počítačová grafika, PV, UPCE-FEI-KST, [2010/2011]

Přednáška 2

9

Jiný způsob – implementace rozhraní

MainFrame () { ... btnPocitadlo = new JButton("Zvyš stav počítadla"); btnPocitadlo.addActionListener(this); add(btnPocitadlo);

Implicitní akce Událost ActionEvent Rozhraní ActionListener actionPerformed()

Změna stavu komponenty Událost ComponentEvent Rozhraní ComponentListener componentHidden() componentMoved() componentResized() componentShown()

jLabelPocetStisknuti = new JLabel("Stav počítadla: 0"); add(jLabelPocetStisknuti); …. }

public void actionPerformed(ActionEvent e) { pocitadlo++; jLabelPocetStisknuti.setText("Stav počítadla: " + pocitadlo); } } Přednáška 2

10

Události, rozhraní a metody (1)

public class MainFrame extends JFrame implements ActionListener{ JButton btnPocitadlo; JLabel jLabelPocetStisknuti; static int pocitadlo = 0;


Přednáška 2


11

Změna zaměření komponenty Událost FocusEvent Rozhraní FocusListener focusGained() focusLost()


Změna stavu okna Událost WindowEvent Rozhraní WindowListener windowActivated() windowClosed() windowClosing() windowDeactivated() windowOpened()

Změna zaměření okna Událost WindowFocusEvent Rozhraní WindowFocusListener windowFocusGained() windowFocusLost()

Přednáška 2

12

Události, rozhraní a metody (2)

Práce s klávesnicí Událost KeyEvent Rozhraní KeyListener keyPressed() keyReleased() keyTyped()

Práce s tlačítky myši Událost MouseEvent Rozhraní MouseListener mouseClicked() mouseEntered() mouseExited() mousePressed() mouseReleased()

Ukončení programu 1

Pohyb myši Událost MouseMotionEvent Rozhraní MouseMotionListener mouseMotionDragged() mouseMotionMoved()

Práce s rolovacím kolečkem myši Událost MouseWheelEvent Rozhraní MouseWheelListener mouseWheelMoved()

btnKonec = new JButton("Konec"); btnKonec.addActionListener(ActionListener(){ public void actionPerformed(ActionEvent e) { buttonKonecActionPerformed(e); } });

private void buttonKonecActionPerformed(ActionEvent e) { if (JOptionPane.showConfirmDialog(this, "Zprava", "Dotaz", 0)==0) dispose(); }

Poznámky: dispose() – skryje okno a uvolní jeho zdroje, funguje pro hlavní a jediné okno aplikace

System.exit(0); //správné řešení Počítačová grafika, PV, UPCE-FEI-KST, [2010/2011]

Přednáška 2

13

Ukončení programu 2

Použití Adaptéru pro zaregistrování posluchače není potřeba implementovat všechny metody rozhraní adaptér je již obsahuje, mají prázdné tělo implementuje se pouze požadovaná metoda

Klasické chování okna zjistí v konstruktoru setDefaultCloseOperation(EXIT_ON_CLOSE);

nebo v návrháři nastavení vlastnosti DefaultCloseOperation.


Přednáška 2

14

Fokus a viditelnost

addWindowListener(new WindowAdapter() { public void windowClosing (WindowEvent e) { System.exit(0); } });


Přednáška 2

15

setVisible (boolean b) po vytvoření okna pro komponenty se o viditelnost stará rodičovská komponenta (kontejner) boolean isVisible () setEnabled (boolean b) boolean isEnabled () Fokus – vlastnost komponenty přijímat vstup od uživatele aktivní komponenta void requestFocus() – chování závisí na prostředí OS boolean requestFocusInWindow() boolean isFocusOwner()


Přednáška 2

16

Metrika komponent

x

Rozložení komponent – layout manager

height

Správce umístění – stará se o rozmístění komponent na rodičovském kontejneru

java.awt.LayoutManager

FloatLayout GridLayout BorderLayout GridBagLayout CardLayout … GroupLayout (Free Design)

[0, 0]

Udávána v pixelech Souřadnice levého horního rohu = [0, 0]

Poloha:

Point (int x, int y)

[width-1, height-1]

y

setLocation(Point p); setLocation(int x, int y);

Velikost:

width

Dimension (int width, int heigh)

setSize (Dimension d); setSize (int width, int height);

Pravoúhlá oblast: Rectangle (int x, int y, int width, int height) SetBounds (Rectangle r); SetBounds (int x, int y, int width, int height);


Přednáška 2

17

Layout manager

Přednáška 2

18

Přednáška 2

20

GroupLayout

Nastavení zvoleného rozložení


z prostředí

Využívání při návrhu z IDE inteligentní zarovnávání přichytávání možnost nastavení škálovatelných komponent

kódem

setLayout(new BorderLayout()); add(new Button ("OK"), BorderLayout.CENTER); add(new Button ("1"), BorderLayout.WEST; add(new Button ("2"), BorderLayout.EAST);

setLayout (new FlowLayout(FlowLayout.CENTER, 5, 5));

setLayout (new FlowLayout());


Přednáška 2

19


Prostředí NetBeans

Přehled společných vlastností komponent


Přednáška 2

21

JLabel

Color background, Color foreground Font font String text float alignmentX, float alignmentY int verticalAlignment, int horizontalAlignment Point location int x, int y Size size int width, int height boolean enabled boolean visible String name ... 22

JButton

Komponenta pro statické zobrazení textu a/nebo obrázku (ikony) Možnost zarovnání: LEFT, RIGHT, CENTER, LEADING, TRAILING Nastavení barvy pozadí (background) a textu (foreground)

Nejpoužívanější komponenta, běžně pro spouštění akcí Označení textem a/nebo obrázku, možnost zarovnání, nastavení barvy, ohraničení (border)

Konstruktory

Vybrené konstruktory

JLabel () JLabel (String text); JLabel (String text, int alignment); JLabel (Icon i); JLabel (Icon i, int alignment); JLabel (String text, Icon i, int alignment);

JButton (String text); JButton (Icon i); JButton (String text, Icon i); Vybrané metody

String getText (); setText (String s); int getVerticalAlignment (); setVerticalAlignment (int alignment);

Metody

String getText (); setText (String s); int getVerticalAlignment (); setVerticalAlignment (int alignment); int getHorizontalAlignment (); setHorizontalAlignment (int alignment); Počítačová grafika, PV, UPCE-FEI-KST, [2010/2011]

Přednáška 2


Vybrené rozhraní a metody

ItemListener

Přednáška 2

23


itemStateChanged()

Přednáška 2

24

JCheckBox

JRadioButton

Zaškrtávací pole, logická vlastnost selected (true/false), Označení textem a/nebo obrázku, možnost zarovnání, nastavení barvy, ohraničení (border)

Přepínač, obdoba checkboxu, logická vlastnost selected (true/false), Může fungovat samostatně nebo ve skupině (pouze jeden přepínač ve skupině může být zaškrtnutý)



JCheckBox (String text); JCheckBox (String text, boolean selected); + varianty s Icon

JRadioButton (String text); JRadioButton (String text, boolean selected); + varianty s Icon

Vybrané metody

Vybrané metody

String getText (); setText (String s);

String getText (); setText (String s);

boolean isSelected (); setSelected (boolean selected)

boolean isSelected (); setSelected (boolean selected);

Vybrené rozhraní a metody (v případě změny stavu se provedou v uvedeném pořadí)


ActionListener ItemListener

ActionListener ItemListener

actionPerformed itemStateChanged


Přednáška 2

25

ButtonGroup

Přednáška 2


26

JTextField

Slouží pro sdružení přepínačů (radiobutton) do skupiny


Jednořádkový textový vstup, ukončení zadávání klávesou ENTER Možnost nastavení pouze pro čtení, barvy pozadí, barvy textu, použitého fontu, ohraničení, vyznačení části textu, … Délka zadávaného textu nesouvisí se šířkou editačního pole


ButtonGroup ();

JTextField (); JTextField (String text);

Vybrané metody

Vybrané metody

remove (AbstractButton button); add (AbstractButton button); ButtonModel getSelection (); setSelected (ButtonModel bm, boolean state); Enumeration getElements (); int getButtonCount ();

String getText (); setText (String s); boolean getEditable(); setEditable (boolean editable) Vybrené rozhraní a metody (v případě změny stavu se provedou v uvedeném pořadí)

boolean isSelected (ButtonModel bm);


actionPerformed itemStateChanged

Přednáška 2

27

ActionListener

actionPerformed

FocusListener

focusGained(), focusLost()

KeyListener

keyPressed(), KeyReleased(), keyTyped()


Přednáška 2

28

JTextArea

JComboBox

Víceřádkové zobrazení editovatelného textu, slouží pro vstup i výstup Obsah uložen jako String Použití posuvníků Formátování obsahu do řádků (vložení znaku ‘\n’ do textu), volitelné zalamování



Přednáška 2


29

JList


addItem (Object obj); insertItemAt (Object obj, int index); removeItemAt (int index); … Object getItemAt (int index); int getItemCount (); int getSelectedIndex (); Object getSlectedItem (); setSelectedIndex (int index), … int getItemCount (); boolean isEditable (); setEditable (boolean editable)

setText (String s); String getText (); append (String str); insert (String strm int pos); setEditable (boolean editable), boolean isEditable (); setColumns (int columns); int getColumns (); setRaws (int raws); int getRaws (); setLineWrap (boolean wrap); boolean getLineWrap (); setWrapStyleWord (boolean word); boolean getWrapStyleWord ();

Kombinace editačního boxu a rozbalovacího seznamu Možnost přidávání položek za běhu programu, možnost modifikace vlastní položky Položky jsou objekty s metodou toString(), přístup přes indexy

Vybrané metody

Vybrané metody

JComboBox (); JComboBox (Object[] items); JComboBox (ComboBoxModel aModel);

JTextArea (); JTextArea (String text); JTextArea (String text, int rows, int columns);

ActionListener

actionPerformed

FocusListener

focusGained(), focusLost() Přednáška 2


JPanel

Víceřádkový seznam s trvalým rozbalením (zobrazení) Dle počtu položek je použit posuvník Možnost výběru pouze jedné položky, souvislého intervalu nebo více položek Práce s položkami (inicializace, přidávání, odebírání, modifikace) pomocí DefaultListModel

Kontejner pro vkládání dalších komponent (dle nastaveného layout manageru) Barva pozadí, okraje, použití DoubleBufferingu Vhodný pro kreslení



JList (); JList (Object[] listData); JList (ListModel dataModel);

JPanel (); JPanel (boolean isDoubleBuffered); JPanel (LayoutManager layout); JPanel (LayoutManager layout, boolean isDoubleBuffered);

Vybrané metody

Vybrané metody

getModel.add (int pos, String str); getModel.set (int pos, String str); getModel.remove (int pos); getModel.clear (); int getModel.getSize (); setSelectedMode (int selsctionMode); ListSectionMode: SINGLE_SELECTION, setSelectedIndex (int index); setSelectedIndices (int indices); SINGLE_INTERVAL_SELECTION, MULTIPLE_INTERVAL_SELECTION int getSelectedIndex (); int [] getSelectedIndices (); boolean isSelectionEmpty (); clearSelection ();

add (Component comp); remove (Component comp); getComponent…


ActionListener Počítačová grafika, PV, UPCE-FEI-KST, [2010/2011]

30

actionPerformed Přednáška 2

31

setBorder (Border border); // NoBorder, BevelBorder, EtchedBorder, LineBorder, TitledBorder, … boolean isDoubleBuffered (); setDoubleBuffered (boolean doublebuff); boolean isFocusable (); … Vybrené rozhraní a metody (v případě změny stavu se provedou v uvedeném pořadí) MouseListener

mouseClicked, mouseEntered, mouseExited, mousePressed,mouseReleased

MouseMotionListener

mouseMotionDragged, mouseMotionMoved


Přednáška 2

32

Grafické rozhraní. Grafické rozhraní. Základní pravidla pro návrh GUI. Princip GUI aplikace. Úvod do tvorby GUI aplikací

Recommend Documents