Java a základy GUI

Tento článek by se měl věnovat základům GUI neboli Graphical user interface. Většina programátorů, kteří začínají s programovacím jazykem Java nejsou schopni vytvořit pro své programy grafické rozhraní, a přitom je právě tohle v Javě tak jednoduché.

V dnešní době téměř neexistují programy bez grafického rozhraní. Toto rozhraní tvoří většinou základ celého programu, umožňuje načítat vstupy od uživatele a zase naopak tisknout uživateli výstupy programu.

Uživatelský Interface je většinou to, s čím přijde uživatel první do styku a proto je důležité, aby bylo správně navrženo. (někde jsem četl že 75 procent kódu aplikací je GUI a myslím že je to pravda).

V Javě máme možnost využívat více knihoven pro práci s GUI, my se ovšem zaměříme na Java Foundation Class (JFC) Swing, kterou najdete v javax.swing a s ní využijeme Abstract Windows Toolkit (AWT), který JFC doplňuje.

Základem každého GUI jsou komponenty, které se zobrazují. Jsou to různé tlačítka, textová pole a podobné ovládací prvky. Všechny tyto komponenty budeme používat z knihovny javax.swing, která jich obsahuje víc než dost.

Dále jsou to kontejnery. Všechny kompomenty jsou umístěny v kontejnerech. Budeme používat dva typy kontejnerů: jPanel a jFrame, se kterými si na začátku vystačíme.

Důležitou součástí GUI jsou správci rozmístění (Layout Managers), kteří určují, jak se budou seskupovat komponenty v kontejnerech.

To bylo jenom stručně k tomu co potřebujeme a nyní se vrhneme do programování.

První program

Jako první si zkusme vytvořit jednoduché uživatelské okno, které se běžně používá pro vypsání informací:

 
import javax.swing.*;
class Window extends JFrame {
	public Window() {
		JOptionPane.showMessageDialog(null,"First window",
	             "Informační okno", JOptionPane.INFORMATION_MESSAGE );
	}
}

Tento nejzákladnější program vypíše informační okno, ve kterém program dialog. Stejně jako showMessageDialog můžete použít další metody a to: showConfirmDialog, showInputDialog, showInternelConfirmDialog, …, jejichž použití je snad všem jasné.

Dále můžeme dialog ovlivnit pomocí JOptionPane, kde může být použita metoda INFORMATION_MESSAGE, jako v příkladu, a nebo například: PLAIN_MESSAGE, OK_MESSAGE, WARNING_MESSAGE, a podobně. Zajímavá je například QUESTION_MESSAGE, která nás vyzve k zadání vstupu. Všechny možnosti si můžete prozkoušet, je jich opravdu hodně.

Vznikne nám jednouché okno:

Vytvoření okna

Vidíte že doposud jsme si vystačili pouze s java.swing, ovšem pro zobrazení okna budeme potřebovat navíc ještě java.awt

Vytvoření okna je taky velmi jednoduché. Nejprve si to ukážeme na příkladu:

 
import javax.swing.*;
import java.awt.*;
class Window extends JFrame {
	public Window() {
		//v konstruktoru JFrame nastavíme titulek okna
		super("Zaachi's window");
		//nastavíme rozměry okna
		setSize(300, 300);
		//po zavření okna zkončíme
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		//zobrazíme okno
		setVisible(true);
	}
}

Po vytvoření instance třídy Window nám vznikne prázdné okno s rozměry 300x300 a titulkem „Zaachi’s window“.

Do okna se nyní pokusíme umístit ovládací prvky.

Jak jsme si již řekli, prvky musí být umístěny v kontejneru. To je tedy náš první úkol, vytvořit kontejner.

Pro vytvoření použijeme jediný příkaz:

 
Container cont = getContentPane();

Tím nám vznikla proměnná cont typu Container a máme vytvořený kontejner, ke kterému budeme přes tuto proměnnou přistupovat.

Layout Managers

Pro umístění ovládacích prvků si "musíme" ještě nejprve vytvořit správce pro rozložení.
V Javě máme několik správců, které můžeme použít.

• FlowLayout – třída rozmístí ovládací prvky zprava doleva a shora dolů.
• BorderLayout – třída rozmístí po okraji
• ...

Layout managerů existuje samozřejmě víc, ale pro naše účely si vystačíme s těmito dvěma.
Vytvoříme si tedy novou instanci třídy FlowLayout a přidáme ji do našeho kontejneru:

 
//vytvoření nové instance
FlowLayout layout = new FlowLayout();
//nastavení do kontejneru
cont.setLayout(layout);

Na závěr tohoto dílu si do kontejneru přidáme dvě tlačítka typu JButton:

 
//Vytvoření tlačítka JButton s nápisem Run
JButton but1 = new JButton("Run");
//přidání do kontejneru
cont.add(but1);
//Vytvoření tlačítka JButton s nápisem Stop
JButton but2 = new JButton("Stop");
//a přidání do kontejneru
cont.add(but2);

Celý náš dnešní program potom bude vypadat takto:

 
package default_package;

import javax.swing.*;
import java.awt.*;
class Window extends JFrame 
	
	public Window() {
		//v konstruktoru JFrame nastavíme titulek okna
		super("Zaachi's window");
		//nastavíme rozměry okna
		setSize(300, 300);
		//po zavření okna zkončíme
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		//zobrazíme okno
		setVisible(true);
		
		Container cont = getContentPane();
	    
		//vytvoření nové instance
	    FlowLayout layout = new FlowLayout();
	    //nastavení do kontejneru
	    cont.setLayout(layout);
	    
	    //Vytvoření tlačítka JButton s nápisem Run
	    JButton but1 = new JButton("Run");
	    //přidání do kontejneru
	    cont.add(but1);
	    //Vytvoření tlačítka JButton s nápisem Stop
	    JButton but2 = new JButton("Stop");
	    //a přidání do kontejneru
	    cont.add(but2);
	    
	    setContentPane(cont);
	}
}

V příští části se podíváme podrobněji na ovládací prvky a obsluhu událostí.

Mohlo by vás zajímat:

Java a základy GUI#2
Java a základy GUI#3
Java a základy GUI#4