GUI v Javě
Z MiS
(Rozdíly mezi verzemi)
(Přidána vyskakovací okna) |
(Přidán kód vytvoření listeneru.) |
||
(Není zobrazeno 15 mezilehlých verzí od 1 uživatele.) | |||
Řádka 1: | Řádka 1: | ||
− | [[Category:VSE]][[Category:Škola]][[Category:Informatika]][[Category:Programování]][[Category:Java]] | + | [[Category:VSE]][[Category:Škola]][[Category:Informatika]][[Category:Programování]][[Category:Java]][[Category:GUI]] |
Následující poznámky jsou jen velmi stručnou osnovou. Možností při vytváření grafického rozhraní je mnohem více. Pokud chcete více než jen minimalistický návod, doporučuji: | Následující poznámky jsou jen velmi stručnou osnovou. Možností při vytváření grafického rozhraní je mnohem více. Pokud chcete více než jen minimalistický návod, doporučuji: | ||
Řádka 7: | Řádka 7: | ||
− | == Vytvoření okna == | + | == Vytvoření okna — třída <tt>JFrame</tt> == |
− | + | * Instance třídy <code>JFrame</code> vytváří okno s titulním pruhem a tlačítky. | |
− | + | * My vytváříme vlastní potomky třídy <tt>JFrame</tt>. | |
+ | * Každý potomek má v sobě vloženy další objekty (komponenty), které jsou v okně obsaženy (tlačítka, textová pole,...). | ||
− | Vlastnosti okna | + | ; Vlastnosti okna |
* <code>setTitle(String ''titulek'')</code> | * <code>setTitle(String ''titulek'')</code> | ||
** nastavuje titulek okna (text v titulním pruhu). | ** nastavuje titulek okna (text v titulním pruhu). | ||
Řádka 18: | Řádka 19: | ||
** říká co se bude dít při stlačení zavíracího tlačítka. | ** říká co se bude dít při stlačení zavíracího tlačítka. | ||
** naše aplikace většinou mají jediné okno, chceme tedy, aby se při zavření okna zavřela celá aplikace. | ** naše aplikace většinou mají jediné okno, chceme tedy, aby se při zavření okna zavřela celá aplikace. | ||
− | *** k tomu slouží konstanta JFrame.EXIT_ON_CLOSE. | + | *** k tomu slouží konstanta <tt>JFrame.EXIT_ON_CLOSE</tt>. |
− | Velikost okna | + | ; Velikost okna |
* <code>pack()</code> | * <code>pack()</code> | ||
** zmenší velikost okna tak, aby se do něj vlezly komponenty, které jsou aktuálně v okně. | ** zmenší velikost okna tak, aby se do něj vlezly komponenty, které jsou aktuálně v okně. | ||
+ | * <code>setSize(sirka, vyska)</code> | ||
+ | ** Nastaví velikost okna na stanovený rozměr. | ||
+ | * <code>setBounds(poziceX, poziceY, sirka, vyska)</code> | ||
+ | ** Umístí okno levým horním rohem na souřadnice <code>poziceX, poziceY</code> a nastaví jeho rozměry. | ||
− | Zobrazení okna | + | ; Zobrazení okna |
* <code>setVisible(boolean maBytViditelne)</code> | * <code>setVisible(boolean maBytViditelne)</code> | ||
** Zobrazí nebo zneviditelní okno. | ** Zobrazí nebo zneviditelní okno. | ||
− | = | + | ; Metoda <tt>initComponents()</tt> |
+ | * Je zvykem v konstruktoru okna zavolat soukromou metodu <tt>initComponents()</tt>. | ||
+ | * V rámci této metody připravíme všechny komponenty, které mají být součástí okna. | ||
+ | |||
+ | <div class="Priklad"> | ||
+ | ; Příklad 1) | ||
* Vytvořte aplikaci s oknem, které půjde přesunovat, minimalizovat a při jehož zavření se aplikace ukončí. | * Vytvořte aplikaci s oknem, které půjde přesunovat, minimalizovat a při jehož zavření se aplikace ukončí. | ||
− | * V titulním pruhu bude zobrazen text „Hello world!“. | + | * V titulním pruhu bude zobrazen text ''„Hello world!“''. |
− | + | ||
− | + | ||
+ | [[#Příklad 1|Řešení viz dále]] | ||
+ | </div> | ||
− | == | + | == Základní komponenty == |
Do okna vkládáme součásti (komponenty). Komponenty jsou potomky třídy <code>JComponent</code>. | Do okna vkládáme součásti (komponenty). Komponenty jsou potomky třídy <code>JComponent</code>. | ||
Řádka 44: | Řádka 54: | ||
* popisky (<code>JLabel</code>). | * popisky (<code>JLabel</code>). | ||
− | Je-li komponent v okně mnoho, můžeme je uspořádat | + | Je-li komponent v okně mnoho, můžeme je [[Layout v Javě|uspořádat]]. K tomu slouží: |
− | * panely (<code>JPanel</code>). | + | * panely (<code>JPanel</code>), |
+ | * „Layout Managery“ (<code>LayoutManager</code>). | ||
=== Třída <code>JButton</code> === | === Třída <code>JButton</code> === | ||
Řádka 52: | Řádka 63: | ||
**: <code>JButton tlStart = new JButton("Start");</code> | **: <code>JButton tlStart = new JButton("Start");</code> | ||
* reakci na stisk tlačítka nastavíme [[#Zpracování událostí, posluchač | přiřazením posluchače viz dále]] | * reakci na stisk tlačítka nastavíme [[#Zpracování událostí, posluchač | přiřazením posluchače viz dále]] | ||
− | * <code>String getText()</code> | + | * <code>String getText()</code>, <code>setText(String novy)</code> |
− | ** vrací popis tlačítka. | + | ** vrací/nastavuje popis tlačítka. |
+ | * <code>setIcon(ImageIcon obr)</code> | ||
+ | ** Nastavení obrázku místo textu. | ||
+ | <div class="Priklad"> | ||
+ | ImageIcon obr; | ||
+ | obr = new ImageIcon("res/krizek.png"); | ||
+ | JButton tlacitko = ... | ||
+ | ... | ||
+ | tlacitko.setIcon(obr); | ||
+ | </div> | ||
=== Třída <code>JLabel</code> === | === Třída <code>JLabel</code> === | ||
Řádka 70: | Řádka 90: | ||
* <code>setEditable(boolean lzeUpravovat)</code> | * <code>setEditable(boolean lzeUpravovat)</code> | ||
** nastaví, zda do textového pole lze psát, nebo zda je šedivé a úpravy jsou zakázány. | ** nastaví, zda do textového pole lze psát, nebo zda je šedivé a úpravy jsou zakázány. | ||
+ | ; Další nastavení | ||
+ | * <code>setFont(new java.awt.Font("Lucida Sans", 0, 24))</code> | ||
+ | ** Nastavení fontu. | ||
+ | * <code>setHorizontalAlignment(javax.swing.JTextField.RIGHT)</code> | ||
+ | ** nastaví zarovnání vpravo. | ||
+ | * Ve vývojovém prostředí je určitě pohodlnější nastavit vše přes grafický nástroj Properties. | ||
Pokud potřebujete z textového pole načíst číslo, můžete použít následující metodu: | Pokud potřebujete z textového pole načíst číslo, můžete použít následující metodu: | ||
Řádka 96: | Řádka 122: | ||
* Abychom komponentu zobrazili, musíme ji umístit do některého okna. | * Abychom komponentu zobrazili, musíme ji umístit do některého okna. | ||
* Seskládání okna obvykle provádíme v soukromé metodě <code>initComponents()</code> okna, kterou pro tento účel vytvoříme. | * Seskládání okna obvykle provádíme v soukromé metodě <code>initComponents()</code> okna, kterou pro tento účel vytvoříme. | ||
− | * Pokud chceme mít komponent v okně více, je třeba je uspořádat pomocí [[ | + | * Pokud chceme mít komponent v okně více, je třeba je uspořádat pomocí [[Layout v Javě | „layout manageru“]]. |
=== Třída <code>JFrame</code> === | === Třída <code>JFrame</code> === | ||
Řádka 129: | Řádka 155: | ||
* <code>public Object getSource()</code> | * <code>public Object getSource()</code> | ||
** vrací objekt, který událost vyvolal. V našem případě instanci třídy <code>JButton</code>, reprezentující tlačítko, které bylo stisknuto. | ** vrací objekt, který událost vyvolal. V našem případě instanci třídy <code>JButton</code>, reprezentující tlačítko, které bylo stisknuto. | ||
− | ** je potřeba provést [[Přetypování | přetypování]] z <code>Object</code> na <code>JButton</code>. | + | ** je potřeba provést [[Java: Abstraktní třídy, dědičnost a rozhraní#Přetypování | přetypování]] z <code>Object</code> na <code>JButton</code>. |
=== <code>interface ActionListener</code> === | === <code>interface ActionListener</code> === | ||
Řádka 135: | Řádka 161: | ||
** v této metodě popíšeme, co se má stát při stisku tlačítka | ** v této metodě popíšeme, co se má stát při stisku tlačítka | ||
− | === | + | === Ukázka kódu === |
− | + | ||
− | + | ||
+ | * V metodě <code>initComponents</code> nebo obdobné: | ||
+ | JButton tlacitko = new JButton("Popis"); | ||
+ | tlacitko.addActionListener(event -> metodaPoStisknuti(event)); | ||
+ | * Dále přidejte metodu: | ||
+ | private void metodaPoStisknuti(ActionEvent event) { | ||
+ | // ... co se má stát po stisku tlačítka | ||
+ | } | ||
− | + | * Parametr <code>event</code> můžete vynechat, pokud nepotřebujete získávat informace o tlačítku, které událost vyvolalo. | |
− | * | + | |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
=== Příklad === | === Příklad === | ||
+ | * Přidejte k tlačítku z příkladu v předchozím odstavci reakci. | ||
+ | * Při stisku tlačítka se do textového výstupu programu opíše text z popisu tlačítka. | ||
+ | |||
+ | <div class="Priklad"> | ||
+ | Příklad | ||
* Přidejte k předchozímu příkladu dvě textová pole s popiskami (label) „Originál“ a „Kopie“. | * Přidejte k předchozímu příkladu dvě textová pole s popiskami (label) „Originál“ a „Kopie“. | ||
* Textové okno s popisem „Kopie“ nebude editovatelné. | * Textové okno s popisem „Kopie“ nebude editovatelné. | ||
Řádka 172: | Řádka 186: | ||
* Při stisknutí tlačítka se text z pole „Originál“ zkopíruje do pole „Kopie“. | * Při stisknutí tlačítka se text z pole „Originál“ zkopíruje do pole „Kopie“. | ||
* Při stisku tlačítka se do textového výstupu programu opíše text z popisu tlačítka. | * Při stisku tlačítka se do textového výstupu programu opíše text z popisu tlačítka. | ||
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | ; | + | == Rozšíření == |
− | + | ||
− | + | === Umístění okna na střed obrazovky === | |
+ | |||
+ | private static void setToTheMiddle(JFrame frame) { | ||
+ | GraphicsConfiguration gc = frame.getGraphicsConfiguration(); | ||
+ | Rectangle bounds = gc.getBounds(); | ||
+ | Insets screenInsets = Toolkit.getDefaultToolkit().getScreenInsets(gc); | ||
+ | Rectangle effectiveScreenArea = new Rectangle(); | ||
+ | |||
+ | effectiveScreenArea.x = bounds.x + screenInsets.left; | ||
+ | effectiveScreenArea.y = bounds.y + screenInsets.top; | ||
+ | effectiveScreenArea.height = bounds.height - screenInsets.top - screenInsets.bottom; | ||
+ | effectiveScreenArea.width = bounds.width - screenInsets.left - screenInsets.right; | ||
+ | |||
+ | // Umístění doprostřed: | ||
+ | int middleX = effectiveScreenArea.x + (effectiveScreenArea.width - frame.getWidth()) / 2; | ||
+ | int middleY = effectiveScreenArea.y + (effectiveScreenArea.height - frame.getHeight()) / 2; | ||
+ | frame.setLocation(middleX, middleY); | ||
+ | } | ||
+ | |||
+ | |||
+ | == Související stránky == | ||
+ | * [[Layout v Javě]], [[Dialogy a vyskakovací okna]], [[Menu v Javě]], [[Tabulky v Javě]] | ||
+ | |||
+ | == Další zdroje == | ||
+ | * [https://www.youtube.com/watch?v=vuQdLKq2LaY Youtube.com > First Java Swing GUI Application with IntelliJ IDEA IDE (2022)] | ||
+ | |||
+ | |||
+ | == Řešení příkladů == | ||
+ | === Příklad 1 === | ||
+ | ; Okno.java | ||
+ | public class Okno extends JFrame { | ||
+ | public Okno() { | ||
+ | this.initComponents(); | ||
+ | } | ||
+ | public void initComponents() { | ||
+ | this.setTitle("Hello world!"); | ||
+ | this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); | ||
+ | this.pack(); | ||
+ | } | ||
+ | } | ||
+ | ; Main.java | ||
+ | public static void main(String[] args) { | ||
+ | Okno okno = new Okno(); | ||
+ | okno.setVisible(true); | ||
} | } |
Aktuální verze z 9. 1. 2024, 11:42
Následující poznámky jsou jen velmi stručnou osnovou. Možností při vytváření grafického rozhraní je mnohem více. Pokud chcete více než jen minimalistický návod, doporučuji:
tutoriál ze stránek Oracle.com
Obsah |
Vytvoření okna — třída JFrame
- Instance třídy
JFrame
vytváří okno s titulním pruhem a tlačítky. - My vytváříme vlastní potomky třídy JFrame.
- Každý potomek má v sobě vloženy další objekty (komponenty), které jsou v okně obsaženy (tlačítka, textová pole,...).
- Vlastnosti okna
-
setTitle(String titulek)
- nastavuje titulek okna (text v titulním pruhu).
-
setDefaultCloseOperation(int akce)
- říká co se bude dít při stlačení zavíracího tlačítka.
- naše aplikace většinou mají jediné okno, chceme tedy, aby se při zavření okna zavřela celá aplikace.
- k tomu slouží konstanta JFrame.EXIT_ON_CLOSE.
- Velikost okna
-
pack()
- zmenší velikost okna tak, aby se do něj vlezly komponenty, které jsou aktuálně v okně.
-
setSize(sirka, vyska)
- Nastaví velikost okna na stanovený rozměr.
-
setBounds(poziceX, poziceY, sirka, vyska)
- Umístí okno levým horním rohem na souřadnice
poziceX, poziceY
a nastaví jeho rozměry.
- Umístí okno levým horním rohem na souřadnice
- Zobrazení okna
-
setVisible(boolean maBytViditelne)
- Zobrazí nebo zneviditelní okno.
- Metoda initComponents()
- Je zvykem v konstruktoru okna zavolat soukromou metodu initComponents().
- V rámci této metody připravíme všechny komponenty, které mají být součástí okna.
- Příklad 1)
- Vytvořte aplikaci s oknem, které půjde přesunovat, minimalizovat a při jehož zavření se aplikace ukončí.
- V titulním pruhu bude zobrazen text „Hello world!“.
Základní komponenty
Do okna vkládáme součásti (komponenty). Komponenty jsou potomky třídy JComponent
.
Nejběžnější komponenty jsou:
- tlačítka (
JButton
), - textová pole (
JTextField
), - popisky (
JLabel
).
Je-li komponent v okně mnoho, můžeme je uspořádat. K tomu slouží:
- panely (
JPanel
), - „Layout Managery“ (
LayoutManager
).
Třída JButton
-
JButton(String popisTlacitka)
- text na tlačítku zadáme jako parametr konstruktoru
-
JButton tlStart = new JButton("Start");
-
- text na tlačítku zadáme jako parametr konstruktoru
- reakci na stisk tlačítka nastavíme přiřazením posluchače viz dále
-
String getText()
,setText(String novy)
- vrací/nastavuje popis tlačítka.
-
setIcon(ImageIcon obr)
- Nastavení obrázku místo textu.
ImageIcon obr; obr = new ImageIcon("res/krizek.png"); JButton tlacitko = ... ... tlacitko.setIcon(obr);
Třída JLabel
-
JLabel(String textPopisu)
- text popisky zadáme jako parametr konstruktoru
-
JLabel lCisloA = new JLabel("Zadejte číslo A:");
-
- text popisky zadáme jako parametr konstruktoru
- reakci na stisk tlačítka nastavíme přiřazením posluchače viz dále
Třída JTextField
-
JTextField(int pocetZnaku)
- volitelným parametrem konstruktoru je délka pole, vyjádřená početem znaků, které do pole vlezou.
-
String getText()
- vrací aktuální text v textovém poli
-
setText(String text)
- nastaví do textového pole zadaný text
-
setEditable(boolean lzeUpravovat)
- nastaví, zda do textového pole lze psát, nebo zda je šedivé a úpravy jsou zakázány.
- Další nastavení
-
setFont(new java.awt.Font("Lucida Sans", 0, 24))
- Nastavení fontu.
-
setHorizontalAlignment(javax.swing.JTextField.RIGHT)
- nastaví zarovnání vpravo.
- Ve vývojovém prostředí je určitě pohodlnější nastavit vše přes grafický nástroj Properties.
Pokud potřebujete z textového pole načíst číslo, můžete použít následující metodu:
/** * Získá číslo z textového pole * * @param textovePole Textové pole, jehož hodnota se má převést na číslo * @return Vrátí hodnotu čísla, zapsaného v textovém poli. * Pokud text v poli nelze převést na číslo (pole je prázdné apod.), * vrátí 0 * a navíc do textového pole zapíše výzvu k vložení čísla. */ private int ziskejCislo(JTextField textovePole) { int vysledek; try { vysledek = Integer.parseInt(textovePole.getText()); } catch (NumberFormatException e) { textovePole.setText("Nastavte platné číslo!"); vysledek = 0; } return vysledek; }
Vkládání komponent do okna
- Abychom komponentu zobrazili, musíme ji umístit do některého okna.
- Seskládání okna obvykle provádíme v soukromé metodě
initComponents()
okna, kterou pro tento účel vytvoříme. - Pokud chceme mít komponent v okně více, je třeba je uspořádat pomocí „layout manageru“.
Třída JFrame
-
getContentPane().add(Component komponentaVOkne)
- vloží do okna komponentu.
Příklad
- Vytvořte okno s jediným tlačítkem.
- Na tlačítku bude text „Superokno!“
Zpracování událostí, posluchač
- Pro zpracování událostí prvků GUI (tlačítek, textových polí,...) používá Java návrhový vzor Pozorovatel (Observer).
Postup zpracování události tlačítka
- uživatel klikne na tlačítko
- objekt reprezentující tlačítko vygeneruje událost (event)
- prakticky vytvoří novou instanci třídy
ActionEvent
), která nese podrobnější informace (které tlačítko myši bylo stisknuto, na jakých souřadnicích,...
- prakticky vytvoří novou instanci třídy
- objekt reprezentující tlačítko událost pošle všem svým „posluchačům“ (posluchači jsou objekty, které splňují rozhraní (interface)
ActionListener
)- prakticky se „poslání události“ realizuje tak, že tlačítko zavolá metodu
actionPerformed(ActionEvent e)
, kterou předepisuje rozhraníActionListener
. Jako parametr metody se předá objekt události
- prakticky se „poslání události“ realizuje tak, že tlačítko zavolá metodu
- posluchač provede akci, která se má provést
- programátor tedy akci popíše v kódu metody
actionPerformed(ActionEvent e)
v posluchači
- programátor tedy akci popíše v kódu metody
Aby bylo možné na stisk tlačítka reagovat, musíme:
- mít třídu posluchače (interface
ActionListener
) - vytvořit instanci třídy posluchače
- zaregistrovat instanci třídy posluchače u tlačítka.
class ActionEvent
-
public Object getSource()
- vrací objekt, který událost vyvolal. V našem případě instanci třídy
JButton
, reprezentující tlačítko, které bylo stisknuto. - je potřeba provést přetypování z
Object
naJButton
.
- vrací objekt, který událost vyvolal. V našem případě instanci třídy
interface ActionListener
-
public void actionPerformed(ActionEvent e)
- v této metodě popíšeme, co se má stát při stisku tlačítka
Ukázka kódu
- V metodě
initComponents
nebo obdobné:
JButton tlacitko = new JButton("Popis"); tlacitko.addActionListener(event -> metodaPoStisknuti(event));
- Dále přidejte metodu:
private void metodaPoStisknuti(ActionEvent event) { // ... co se má stát po stisku tlačítka }
- Parametr
event
můžete vynechat, pokud nepotřebujete získávat informace o tlačítku, které událost vyvolalo.
Příklad
- Přidejte k tlačítku z příkladu v předchozím odstavci reakci.
- Při stisku tlačítka se do textového výstupu programu opíše text z popisu tlačítka.
Příklad
- Přidejte k předchozímu příkladu dvě textová pole s popiskami (label) „Originál“ a „Kopie“.
- Textové okno s popisem „Kopie“ nebude editovatelné.
- Tlačítko upravte tak, že na něm bude popis „Kopíruj“.
- Při stisknutí tlačítka se text z pole „Originál“ zkopíruje do pole „Kopie“.
- Při stisku tlačítka se do textového výstupu programu opíše text z popisu tlačítka.
Rozšíření
Umístění okna na střed obrazovky
private static void setToTheMiddle(JFrame frame) { GraphicsConfiguration gc = frame.getGraphicsConfiguration(); Rectangle bounds = gc.getBounds(); Insets screenInsets = Toolkit.getDefaultToolkit().getScreenInsets(gc); Rectangle effectiveScreenArea = new Rectangle(); effectiveScreenArea.x = bounds.x + screenInsets.left; effectiveScreenArea.y = bounds.y + screenInsets.top; effectiveScreenArea.height = bounds.height - screenInsets.top - screenInsets.bottom; effectiveScreenArea.width = bounds.width - screenInsets.left - screenInsets.right; // Umístění doprostřed: int middleX = effectiveScreenArea.x + (effectiveScreenArea.width - frame.getWidth()) / 2; int middleY = effectiveScreenArea.y + (effectiveScreenArea.height - frame.getHeight()) / 2; frame.setLocation(middleX, middleY); }
Související stránky
Další zdroje
Řešení příkladů
Příklad 1
- Okno.java
public class Okno extends JFrame { public Okno() { this.initComponents(); } public void initComponents() { this.setTitle("Hello world!"); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.pack(); } }
- Main.java
public static void main(String[] args) { Okno okno = new Okno(); okno.setVisible(true); }