Java (Swing) - práca s vizuálnymi komponentami

Základy informatiky - jazyk Java

---

---

Platforma Java - prehľad

Úvod do programovania v jazyku Java

Java - objektovo orientovaný prístup

Vzorové príklady:

Prvé programy v Jave

Vzorové triedy v Jave

Java applety

Java - desktopové aplikácie

>Java - práca s triedami knižnice Swing
>Java (Swing) - práca s vizuálnymi komponentami

Java - implementácia numerických algoritmov

Java - triedy geometrických tvarov

Pokročilé témy:

Základy práce s NetBeans IDE a vývoj modulov

V tejto časti bude návod ako vytvoriť vizuálnu java aplikáciu pomocou knižnice Swing. Vytvoríme aplikáciu, ktorá bude pozostávať s jedného okna v ktorom budú vizuálne komponenty ako napríklad: panel, tlačidlo, posuvník, zašktávacie políčka a výber z viacerých možností.

Vytvorenie SWING aplikácie

Vytvorenie novej aplikácie

• V protredí NetBeans vytvoríme nový, prázdny java projekt. Názov projektu sme zvolili 'kiwikiApp'. Pri vytváraní projektu zrušíme možnosť vytvorenie hlavnej triedy (Create main Class).
• V novom (prázdnom) projekte vytvoríme v časti zdrojové balíčky (source packages) nový balíček kiwiki.
• V novo vytvorenom balíčku vytvoríme nový súbor:

Vytvorenie nového súboru v projekte

Vyberieme kategóriu Swing GUI forms a v tejto kategórii súbor typu JFrame Form. Názov vytváranej triedy zvolíme kiwikiDemo.

Po ukončení sprievodcu pridaním nového súboru nám prostredie NetBeans ponúkne možnosť navrhnnúť rozloženie ovládacích prvkov aplikácie pomocou vizuálnych komponentov.

Vytvorenie nového súboru v projekte

Návrh vizuálnej podoby aplikácie

Teraz bude nasledovať návrh vizálnej stránky aplikácie:

• Do okna pridáme komponent Panel z kategórie Swing containers.
• Aby bol tento vložený panel aj viditeľný (panel má rovnakú farbu pozadia ako okno, preto s oknom splýva), nastavíme mu orámovanie (vlastnosť Border).

Vloženie panelu do aplikácie a nastavenie okraja panela

• Plochu panelu rozšírime tak, aby bola roztiatnutý na celú šírku okna a prilepený na spodnú časť okna:

Nastavenie vizuálnej stránky okna

Nastavenie názvom použitých komponentov

Po umiestnení vizuálnych komponentov na formulár je vhodné ich pomenovať tak, aby boli jednoducho rozlíšiteľné. Prostredie NetBeans pomenuváva kompoennty pomocou kombinácie názvu komponentu a porodového čísla kompomentu, napr jLabel1, jLabel2, ... . Názov komponentu môžeme zmeniť v okne vlastností, v záložke Code, v riadku Variable Name.

Zmena názvu kompomentu

V našej aplikácii pomenujeme komponent Panel (ktorý má názov jPanel1) na panel.

Tlačidlo (jButton) a nadpis (jLabel)

Do aplikácie pridajme 2 tlačidlá a 2 nadpisy (tak ako je na nasledujúcom obrázku).

Prvé tlačidlo:

• Text, ktorý bude na tlačidle: "Kruh"
  • text tlačidla zmeníme v okne vlastností v záložke Properties, vlastnosť text.
• Názov komponentu: "tlcKruh"
  • názov tlačidla zmeníme v okne vlastností v záložke Code, vlastnosť Variable name.

Druhé tlačidlo:

• Text, ktorý bude na tlačidle: "Štvorec"
• Názov komponentu: "tlcStvorec"

Prvý nadpis:

• Názov komponentu: "info1"

Druhý nadpis:

• Názov komponentu: "info2"

Zmena názvu kompomentu

Pridanie funkcionlaity

Úloha: Po stlačení tlačidla 'Kruh' sa na panel vykreslí kruh. Po stalčení tlačidla 'Štvorec' sa vykrelí štvorec.

Riešenie:

Nastavenie obsluhy udalostí

Spôsob ako vyrišiť úlohu je ten, že sa pokúsime zachytiť udalosť kliknutia na tlačidlo. Po zachytení udalosti už nebude problém vykresliť požadovaný geomatrický tvar.

• Označme si tlačidlo 'Kruh' a v okne vlastností vyberme záložku Events
• Na tejto záložke stačí kliknúť do 2-ho stĺpca tabuľky pre udalosť ActioPerformed.
  • Udalosť ActioPerformed je obsluhované ako prvá pri zachytení udalosti kliknutia.
• V tabuľke udalostí sa vypíše názov metódy (tlcKruhActionPerformed), ktorá bude obsluhovať danú udalosť.

Priradenie udalosti tlačidlu tlcKruh

• Teraz sa môžeme prepnúť do zrojového kódu (tlačidlo Source). Prostredie NetBeans vygenerovalo kostru novej metódy:

   private void tlcKruhActionPerformed(java.awt.event.ActionEvent evt) {
        // TODO add your handling code here:
    }

Na to, aby sme na komponent panel mohli kresliť, potrebujeme objekt typu Graphics. Preto si v triede kiwikiDemo vytvoríme objekt typu Graphics.

package kiwiki;

import java.awt.Graphics;

public class kiwikiDemo extends javax.swing.JFrame {
    private Graphics g;
    private int R;

    /** Creates new form kiwikiDemo */
    public kiwikiDemo() {
        initComponents();
        R=50;
    }
   .....
}

Samotné vykresľovanie bude prebiehať v metóde tlcKruhActionPerformed. Najskôr si však treba z komponentu panel 'vytiahnuť' objekt typu Graphics, na ktorý sa môže kresliť. V nasledujúcom kóde bude aj vykreslenie kruhu s polomerom R.

Nech sa v aplikácii zobrazí slovný opis vykresleného geometrikého útvaru. V tomto prípade bude obsahovať nadpis info1 text 'Kruh'

    private void tlcKruhActionPerformed(java.awt.event.ActionEvent evt) {
        info1.setText("Kruh");
        g=panel.getGraphics();
        int sirka,vyska;
        sirka=panel.getWidth();
        vyska=panel.getHeight();
        g.clearRect(1, 1, sirka-2, vyska-2);
        g.drawOval(sirka/2-R, vyska/2-R, 2*R, 2*R);
    }

Rovnaký postup opakujme aj pre tlačidlo tlcStvorec, pre vykreslenie štvorca so stranou R.

Na nasledujúcom obrázku je situácia po stlačení tlačidla 'Štvorec'.

Vykreslenie štvorca - po stalčení tlačidla Štvorec