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 );
	}
}

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);
	}
}

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 300×300 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();

1	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);

//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);

//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);
	}
}

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

}

message

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

Comments are closed for this page

Gros

06/01/2008

Doufam ze bude pokracovani a nezkonci to timto jedinym dilem. 🙂

elly

06/01/2008

thx za článek…pomáhá

zaachi

06/01/2008

tak to jsem rad, ze aspon nekomu 🙂

trubi

06/01/2008

podle me je to spis pekne debilni clanek a to mi stacilo si precist jen prvnich par vet. doporucuji http://www.linuxsoft.cz

Tommy

06/01/2008

Moc díky za skvelej clanek, fakt mi pomohl objasnit zaklady. Uvital bych dalsi clanky o jave. Jen tak dal

Scaur

06/01/2008

Skvelej clanek, neco takovyho jsem hledal. Diky

Jay

06/01/2008

Taky diky za clanek, dobra prace 🙂

danko

06/01/2008

presne takyto clanok som hladal:) avsak mam problem, prepisem si priklad do eclipse alebo do netbeans, dam run, uspesne sa skompiluje a dalej nic… ziadne okno sa nezobrazi. vie mi niekto pomoct? dakujem

finch

06/01/2008

trochu pozdě, ale přece 🙂 nechybí ti tam main? mě to taky dělalo blbiny, tak jsem to tam jen přidal (dávám tady celý kód je už upravovaný)

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

class Window extends JFrame implements ActionListener{
/**
* příklad s gui
* @author breta
*/
private static final long serialVersionUID = 1L;

public static void main(String[] args) {
Window window = new Window();
}

public Window() {
// v konstruktoru JFrame nastavíme titulek okna
super("Příklad 1.");
// nastavíme rozměry okna
setSize(400, 300);
//zjistíme jaká je velikost obrazovky
Dimension obrazovka = Toolkit.getDefaultToolkit().getScreenSize();
//nastavení souřadnic, aby se okno zobrazovalo jinde, než na okraji
setLocation(obrazovka.width/6, obrazovka.height/6);
// 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);

//popisek
cont.add(new JLabel("klikni na mě 😉 =>"));
//vytvoření tlačítka
JButton but1 = new JButton("Klik");
//přidání do kontejneru
cont.add(but1);
//událost
but1.addActionListener(this);

setContentPane(cont);
}
public void actionPerformed(ActionEvent arg0) {
//po odkliknutí se stane něco zajímavého
getContentPane().setBackground(new java.awt.Color(63, 127, 255));
//zobrazí se okno s textem
JOptionPane.showMessageDialog(null, "Kliknul jsi! Huráá 🙂 ", "Gratulace", JOptionPane.PLAIN_MESSAGE);

}
}

Jakub

06/01/2008

S jakou příponou to mám uložit,a v jakém programu to mam psát??

funny gifs

15/06/2015