2. diel - Java GUI - Základné komponenty

V minulom dieli sme si vytvorili naše prvé okno v Jave. Nakoniec som sa rozhodol, že budem pridávať jednoduché prográmky, na ktorých si vždy niečo ukážeme. V nasledujúcich dvoch dieloch si vytvoríme jednoduchú kalkulačku. Dnes si pridáme nejaké komponenty a v budúcom tutoriálu sa vrhneme na udalosť. Kalkulačka bude mať jednu funkciu a to sčítanie. Bude obsahovať dve textové polia, do ktorých budeme zapisovať, tlačidlo a label ( "štítok"), ktorý bude vypisovať výsledok. Poďme na to.

Všetko, čo sme vytvorili v minulom diele, budeme potrebovať. Otvoríme si triedu Gui. Deklarujeme v nej tieto objekty, ku ktorým pridáme kľúčové slovo private (budú teda prístupné iba vnútri triedy). V konstruktoru triedy Gui je vytvoríme takto:

public class Gui extends JFrame{
    private JLabel vysledekLab;
    private JButton sectiBut;
    private JTextField cislo1Field;
    private JTextField cislo2Field;
    public Gui()
    {
       super("Kalkulačka");
       cislo1Field = new JTextField("1. číslo", 5);
       cislo2Field = new JTextField("2. číslo", 5);
       sectiBut = new JButton("Sečti");
       vysledekLab = new JLabel("Výsledek je: ");
    }

Všetky komponenty sú objekty, to znamená, že majú svoje metódy a pri vytvorení sa zavolá konštruktor.

Prvý komponenty

JLabel je obyčajný štítok, do ktorého môžeme umiestniť text - vysledekLab je meno nášho labelu. Ako parameter preberá nejaký reťazec (text).

JLabel nazevLabelu = new JLabel("Text na Labelu")

JTextField je pole pre zápis. My sme si ho pomenovali cislo1Field (pole pre prvé číslo). Prvou jeho parameter je text, ktorý sa v ňom objavia. Číslo za ním vyjadruje veľkosť poľa. Hovorí, že bude veľké na 5 znakov.

JTextField nazevTextFieldu = new JTextField("Text v TextFieldu", 5)

JButton je obyčajné tlačidlo. My sme ho pomenovali sectiBut. Parametrom je text, ktorý má byť na tlačidle.

JButton nazevTlacitka = new JButton("Text na tlačítku")

Ak by sme teraz spustili program, stále by mal podobu prázdneho okna. Zabudli sme na dve dôležité veci.

• Prvá je tzv. Layout čiže rozmiestnenie komponentov v okne. Java má osem layoutov. Podrobne sa na ne pozrieme inokedy. Nám teraz bude stačiť FlowLayout. FlowLayout všetko center a umiestňuje od zhora.

FlowLayout layout = new FlowLayout();
setLayout(layout);

• Druhou vecou je tá, že musíme tieto komponenty do okna pridať. To robí metóda add (), ktorá berie ako parameter komponent. Náš kód bude teraz vyzerať takto.

public class Gui extends JFrame{

    private JLabel vysledekLab;
    private JButton sectiBut;
    private JTextField cislo1Field;
    private JTextField cislo2Field;

    public Gui()
    {
       super("Kalkulačka");
       FlowLayout layout = new FlowLayout();
       setLayout(layout);

       cislo1Field = new JTextField("1. číslo", 5);
       add(cislo1Field);

       cislo2Field = new JTextField("2. číslo", 5);
       add(cislo2Field);

       sectiBut = new JButton("Sečti");
       add(sectiBut);

       vysledekLab = new JLabel("Výsledek je: ");
       add(vysledekLab);
    }

Keďže nie je dobré pridávať komponenty priamo do okna, vytvoríme tzv. JPanel. Jedná sa o panel, do ktorého sa umiestňujú ďalšie komponenty. Drží nám je v podstate pohromade. Pre ukážku vytvoríme dva, pomenujeme treba panel1 a panel2. Panel tvoríme takto:

JPanel nazevPanelu = new JPanel()

Panely majú metódu add (), ktorá ako parameter preberá komponentov, ktorý v nej majú byť umiestnené. Kód teda vyzerá takto:

public class Gui extends JFrame{

    private JLabel vysledekLab;
    private JButton sectiBut;
    private JTextField cislo1Field;
    private JTextField cislo2Field;
    private JPanel panel1;
    private JPanel panel2;

    public Gui()
    {
        super("Kalkulačka");
        FlowLayout layout = new FlowLayout();
        setLayout(layout);

        panel1 = new JPanel();
        add(panel1);

        panel2 = new JPanel();
        add(panel2);

        cislo1Field = new JTextField("1. číslo", 5);
        panel1.add(cislo1Field);

        cislo2Field = new JTextField("2. číslo", 5);
        panel1.add(cislo2Field);

        sectiBut = new JButton("Sečti");
        panel1.add(sectiBut);

        vysledekLab = new JLabel("Výsledek je ");
        panel2.add(vysledekLab);
    }

Vidíme, že ak okno zmenšujeme, drží komponenty v tom istom paneli pohromade.

Ukážeme si ešte posledná vec a to ako pridať paneli farbu. Ide o metódu setBackground () s parametrom farby. Napríklad "Color.red" - teda červenej. Môžeme si tiež pomocou RGB nadefinovať vlastnú farbu. Vytvoríme teda inštanciu triedy Color (našu farbu), ktorá ako parametre berie hodnoty RGB:

Color nazevBarvy = new Color(150, 75, 130)

Výsledný kód teraz vyzerá takto:

public class Gui extends JFrame{

    private JLabel vysledekLab;
    private JButton sectiBut;
    private JTextField cislo1Field;
    private JTextField cislo2Field;
    private JPanel panel1;
    private JPanel panel2;

    public Gui()
    {
        super("Kalkulačka");
        FlowLayout layout = new FlowLayout();
        setLayout(layout);

        Color barva = new Color(150, 75, 130);

        panel1 = new JPanel();
        panel1.setBackground(Color.red);
        add(panel1);

        panel2 = new JPanel();
        panel2.setBackground(barva);
        add(panel2);

        cislo1Field = new JTextField("1. číslo", 5);
        panel1.add(cislo1Field);

        cislo2Field = new JTextField("2. číslo", 5);
        panel1.add(cislo2Field);

        sectiBut = new JButton("Sečti");
        panel1.add(sectiBut);

        vysledekLab = new JLabel("Výsledek je ");
        panel2.add(vysledekLab);
    }

Obsah metódy main necháme rovnaký. Ukážem ešte jednu zaujímavú metódu. Keď chceme mať veľkosť okna presne na komponenty, ktoré v nej máme, môžeme použiť metódu pack () na našom objekte okno. Takto teda bude vyzerať metóda main:

public static void main(String[] args) {
    Gui okno = new Gui();
    okno.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    okno.setVisible(true);
    okno.pack();
    okno.setLocationRelativeTo(null);

}

Výsledok vyzerá nejako takto:

To je pre dnešok všetko. Nabudúce si povieme niečo o udalostiach v Jave a "prinútime" našu kalkulačku, aby sčítavali.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.