1. diel - Programovanie jednoduchých Java GUI hier - IDE, Okno, Panel

Tutoriál pre tých, ktorí majú základy programovacieho jazyka Java, a ktorí sa chcú naučiť, ako písať jednoduché grafické hry v tomto jazyku.

V prvom diele tohto tutoriálu sa zoznámime s komponentmi JFrame a JPanel z balíčka javax.swing. Najskôr si ale povieme niečo o vývojovom prostredí.

Ide

Vývojové prostredie (Integrated Development Environment) je program, ktorý uľahčuje programátorovi vývoj aplikácií. Vzhľadom, že tento tutoriál požaduje určité znalosti programovacieho jazyka Java, predpokladám, že väčšina z vás, sa už s týmto termínom stretla, a že nejaké vývojové prostredie vie používať. Ak ste však doposiaľ všetky zdrojové kódy písali v textovom editore, je teraz ideálny čas, sa s nejakým IDE zoznámiť.

Nikoho samozrejme nenútim. Môžete pokojne zostať u svojho obľúbeného textového editora a túto kapitolu preskočiť. Len chcem podotknúť, že u väčších aplikácií IDE obrovsky uľahčí a urýchli prácu.

Pre Javu existuje rad vývojových prostredí. Zo svojej skúsenosti vám pre začiatok môžem odporučiť IDE NetBeans. Pracovať s ním sa dá rýchlo naučiť, je intuitívne a prehľadný. Záleží ale čisto na vás.

Magické slovko this

Počas celého tutoriálu sa budete stretávať s výrazmi ako:

this.nazevMetody();
this.nazevPromenne();

Je to to isté, akoby som napísal:

nazevMetody();
nazevPromenne();

Prečo to teda robím a pridávam si prácu? Práve kvôli IDE. Ak budete používať IDE a budete volať metódu nejakého objektu napr.

mujObjekt.metodaObjektu()

Po napísaní bodky vám IDE napovie, aké metódy a premenné môžete použiť. Slovo this sa dá preložiť ako tentoObjekt. Ak teda napíšem

this.

IDE mi napovie metódy a premenné použiteľné pre tento objekt. Pozrite sa na nasledujúci triedu a obrázok.

public class Ide {
    /**
     * Proměnná, ve které je uloženo heslo.
     */
    int heslo = 1234;

    /**
     * Proměnná, ve které je uložen uvítací pozdrav.
     */
    String pozdrav = "Ahoj";

    String nejakyText;

    public void vytiskniPozdrav() {
        System.out.println(this.pozdrav);
    }
}

IDE navyše zobrazilo aj dokumentačné komentár. To sa hodí najmä v prípade, keď ste danú metódu nepísali vy, ale niekto iný. Pokiaľ má dokumentačné komentár, IDE vám ho zobrazí.

Skratky

Každé IDE ponúka rôzne skratky pre najpoužívanejšie činnosti a príkazy. Ak používate NetBeans, tak vás upozorním na dve najpoužívanejšie, aby ste nemuseli toľko písať.

Ak napíšete sout a stlačíte tabulátor, Netbeas za vás napíšu

System.out.println("");

A ak napíšete psvm a stlačíte tabulátor

public static void main(String[] args) {

}

Okno

Pre programovanie grafických programov budeme používať javovské knižnice AWT a hlavne Swing. Základom grafického programu je hlavné okno.

import javax.swing.JFrame;

public class OknoProgramu extends JFrame {

    public OknoProgramu() {
        this.setTitle("Hlavní Okno Programu");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setSize(400, 300);
    }

    public static void main(String[] args) {
        OknoProgramu okno = new OknoProgramu();
        okno.setVisible(true);
    }
}

Aby sme mohli nejakú komponent z knižnice použiť, musíme ju najskôr naimportovať:

import javax.swing.JFrame;

Knižnica Swing nám dáva k dispozícii veľké množstvo pripravených tried pre vytváranie grafických objektov. Ak teda chceme vytvoriť grafickú komponent, stačí nám len vytvoriť inštanciu daného objektu pomocou new. Ak nám ale nebude úplne vyhovovať daný grafický objekt (čo väčšinou nebude) a budeme ho chcieť pozmeniť, musíme vytvoriť vlastnú triedu, ktorá bude dediť z knižničný triedy a vo svojej triede vykonať potrebné zmeny.

public class OknoProgramu extends JFrame
{
}

Dedíme z triedy JFrame, čo je trieda predstavujúca hlavné okno. JFrame je kontajner, do ktorého budeme vkladať ďalšie komponenty.

V konstruktoru nastavíme titulok okna

this.setTitle("Hlavní Okno Programu");

, Čo sa má vykonať pri stlačení krížika (zatvorenie okna)

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

a predvolenú veľkosť okna.

this.setSize(400, 300);

Hlavným vstupným bodom programu je metóda main (), v ktorej vytvoríme inštanciu našej triedy. Aby bolo okno viditeľné musíme ho nastaviť na visible.

public static void main(String[] args) {
        OknoProgramu okno = new OknoProgramu();
        okno.setVisible(true);
    }

Teraz môžeme program spustiť.

Panel

JFrame, poťažmo naše odvodená trieda, predstavuje len rám, obal, do ktorého zabalíme ďalšie komponenty užívateľského prostredia. Kým JFrame nám umožňuje takéto činnosti, ako je zatvorenie okna, nastavenie titulku a pod., Tak JPanel nám poskytuje plochu, na ktorú môžeme kresliť, umiestňovať ďalšie komponenty, nastavovať farbu apod .. Kým JFrame je rám, tak JPanel budeme používať ako kresliace plátno.

import java.awt.Color;
import javax.swing.JPanel;

public class MujPanel extends JPanel {

    public MujPanel() {
        this.setBackground(Color.red);
    }
}

Importujeme triedu Color a triedu JPanel, ktorú zdedíme a upravíme k obrazu svojmu.

public MujPanel() {
    this.setBackground(Color.red);
}

V kostruktoru sme nastavili farbu pozadia na novú farbu.

Teraz vytvoríme hlavné okno a náš panel do neho umiestnime.

import javax.swing.JFrame;

public class MujProgram extends JFrame {

    MujProgram() {
        this.setTitle("Můj Program");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        MujPanel panel = new MujPanel();
        this.add(panel);

        this.setSize(400, 300);
    }

    public static void main(String[] args) {
        MujProgram program = new MujProgram();
        program.setVisible(true);
    }
}

A takto to vyzerá.

Pridali sme iba dva riadky kódu.

MujPanel panel = new MujPanel();

Vytvorí inštanciu (objekt) nášho panelu a

this.add(panel);

vloží náš panel do hlavného okna programu.

Veľkosť hlavného okna nemusíme definovať priamo, ako sme to doteraz robili, ale môžeme nastaviť veľkosť panelu (čo je logickejšie, pretože na ňom budeme pracovať) a hlavné okno nechať prispôsobiť veľkosti pracovnej plochy - panela.

import java.awt.Color;
import java.awt.Dimension;
import javax.swing.JPanel;

public class MujPanel extends JPanel {

    public MujPanel() {
        this.setBackground(Color.green);
        this.setPreferredSize(new Dimension(400, 300));
    }
}

V konstruktoru nastavíme farbu pozadia na zelenú a požadovanú veľkosť panelu na šírku 400px a výšku 300px. Objekt typu Dimension má dve vlastnosti a to width a height a niekoľko metód na získanie a nastavenie týchto vlastností.

Teraz ešte vytvoríme triedu pre hlavné okno.

import javax.swing.JFrame;

public class MujProgram extends JFrame {

    MujProgram() {
        this.setTitle("Můj Program");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        MujPanel panel = new MujPanel();
        this.add(panel);

        this.pack();
    }

    public static void main(String[] args) {
        MujProgram program = new MujProgram();
        program.setVisible(true);
    }
}

Všimnite si, že veľkosť okna už nezadávame priamo, ale voláme metódu pack (), ktorá okno zabalí okolo panelu. Tiež si všimnite, že okno je väčšia, ako v predchádzajúcom prípade. Je to preto, že sme zadali veľkosť panelu a okno má ešte ďalšie náležitosti ako sú okraje a titulok.

 

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š.