Zobrazenie zdroja stránky Java (Swing) - práca s vizuálnymi komponentami

{{Navigacne menu - java}}
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:

[[Súbor:swing application netbeans 1.png|center|thumb|400px|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.

[[Súbor:NetBeans_SWING1.png|center|thumb|400px|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'').

[[Súbor:swing application netbeans 2.png|center|thumb|400px|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:

[[Súbor:swing application netbeans 3.png|center|thumb|400px|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''.

[[Súbor:swing application netbeans 4.png|center|thumb|400px|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'''"

[[Súbor:swing application netbeans 5.png|center|thumb|400px|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ť.

[[Súbor:swing application netbeans 6.png|center|thumb|400px|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:

<source lang="java">
   private void tlcKruhActionPerformed(java.awt.event.ActionEvent evt) {
        // TODO add your handling code here:
    }
</source>

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

<source lang="java">
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;
    }
   .....
}
</source>
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'
<source lang="java">
    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);
    }
</source>

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

[[Súbor:swing application netbeans 7.png|center|thumb|400px|Vykreslenie štvorca - po stalčení tlačidla Štvorec]]

==Posuvník (jSlider)==
Do aplikácie pridáme komponent ''jSlider'', tak ako je na nasledujúcom obrázku.

[[Súbor:swing application netbeans 8.png|center|thumb|400px|Vloženie komponentu jSlider]]

Pre tento kompoment nastavme nasledujúce parametre:
*Záložka ''Code''
**Variable name: posuvnik
*Záložka ''properties''
** minimum: 5
** maximum: 150
** value: 80
** majorTickSpacing: 10
** minorTickSpacing: 5
** paintTicks: true

Pridaný komponent ''posuvnik'' bude slúžiť na zmenu polemeru kruhu, resp. strany vykresľovaného štvorca. Aplikáciu zmodifikujeme nasledovne:
*Hodnota posuvníka udáva polomer kruhu alebo stranu vykresľovaného štvorca
*Po kliknutí na príslušné tlačidlo sa vykreslí požadovaný tvar a do komponentu ''info2'' (jLabel) za zapíše hodnota z posuvníku (teda polomer kruhu alebo strana štvorca).

Zmeny v zdrojovom kóde budú minimálne (sú označené komentárom):
<source lang="java">
    private void tlcKruhActionPerformed(java.awt.event.ActionEvent evt) {                                        
        info1.setText("Kruh");
        this.R=this.posuvnik.getValue();  //pridany riadok
        info2.setText(String.valueOf(R)); //pridany riadok
        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);       
    } 
</source>
Rovnaký kód bude pridaný aj do metódy ''tlcStvorecActionPerformed'', v ktorej sa vykresľuje štvorec.

==Zaškrtávacie boxy (jCheckBox) a výber z viacerých možností (jRadioButton)==
Do aplikácie doplníme možnosť vykresliť plný kruh/štvorec alebo nevyplnený kruh/štvorec. Pri tejto úlohe si pomôžeme komponentami ''jRadioButton'' a ''jButtonGroup''.

Do aplikácie pridáme 2 vizuálne komponenty ''jRadioButton'' a jeden nevizuálny komponent ''buttonGroup'' (po pridaní tohto komponentu nie je okamžite vidieť žiaden vizuálny efekt)

Názvy týchto komponentov zvolíme ''rbPlny'' a ''rbPrazdny''. Zobrazovaný text zvolíme podľa nasledujúceho obrázku.  Pre komponent ''rbPrazdny'' zmeníme vlastnosť Selected na ''true'', čím zabezpečíme, že táto možnosť bude prednastavená.
Obom komponentom zmeníme vlastnosť ''buttonGroup'' na ''buttonGroup1'' , čím dosiahneme, že sa bude dať označiť len jedna možnosť.

[[Súbor:swing application netbeans 9.png|center|thumb|400px|Vloženie komponentu jSlider]]

Zmena v zdrojovom kóde bude opäť jednoduchá:
<source lang="java">
    private void tlcKruhActionPerformed(java.awt.event.ActionEvent evt) {                                        
        info1.setText("Kruh");
        this.R = this.posuvnik.getValue();
        info2.setText(String.valueOf(R));
        g = panel.getGraphics();
        int sirka, vyska;
        sirka = panel.getWidth();
        vyska = panel.getHeight();
        g.clearRect(1, 1, sirka - 2, vyska - 2);
        //doplnenie vykreslenia plneho kruhu
        if (rbPlny.isSelected()) {                  
            g.fillOval(sirka / 2 - R, vyska / 2 - R, 2 * R, 2 * R);
        } else {
            g.drawOval(sirka / 2 - R, vyska / 2 - R, 2 * R, 2 * R);
        }
    } 
</source>
Rovnakým spôsobom bude vykreslený aj štvorec v metódye ''tlcStvorecActionPerformed''.

V našej aplikácii pri vykresľovaní vždy najskôr zmažeme celú oblasť kreslenia a následne vykreslíme požadovaný objekt. Pridajme do aplikácie možnosť vynechania zmania kresliacej plochy.  Na túto funkciu využijeme komponent ''jCheckBox'', čiže zašktávacie políčko.

[[Súbor:swing application netbeans 10.png|center|thumb|400px|Vloženie komponentu jCheckBox]]

Vlasnosti pridaného pomponentu jCheckBox:
*Záložka ''Code''
**Variable name: ''cbPrekresli''
*Záložka ''Properties''
**text: prekresli
**selected: true

V zdrojovom kóde treba len zitiť, stav zašktávacieho tlačítka:
<source lang="java">
    private void tlcKruhActionPerformed(java.awt.event.ActionEvent evt) {                                        
        info1.setText("Kruh");
        this.R = this.posuvnik.getValue();
        info2.setText(String.valueOf(R));
        g = panel.getGraphics();
        int sirka, vyska;
        sirka = panel.getWidth();
        vyska = panel.getHeight();
        if (cbPrekresli.isSelected()) {      //zistenie stavu zaskrtavacieho policka
            g.clearRect(1, 1, sirka - 2, vyska - 2);
        }
        if (rbPlny.isSelected()) {
            g.fillOval(sirka / 2 - R, vyska / 2 - R, 2 * R, 2 * R);
        } else {
            g.drawOval(sirka / 2 - R, vyska / 2 - R, 2 * R, 2 * R);
        }
    } 
</source>

==Práca so záložkami==
Do našej aplikácie vložíme panel so záložkami. Tento komponent je vhodný v prípade ak potrebujeme vizuálne oddeliť časti aplikácie. 

Postup pre pridávanie komponentu "panel so záložkami" je nasledovný:
* do aplikácie pridáme komponentu ''TabbedPane''. Takto pridaný komponent neobsahuje žiadne záložky.
** komponent nazvime ''zalozky''
* do komponentu ''TabbedPane'' pridáme komponent ''jPanel''. 
** tento krok opakujme 3×, čím docielime, že budeme mať 3 záložky.
** pridaným panelom dáme meno ''panel1, panel2'' a ''panel3''.
** Vytvoreným záložkám môžeme definovať text na záložke.

[[Súbor:swing application netbeans 11.png|center|thumb|400px|Vloženie komponentu jTabbedPane]]

'''Úloha:''' Po klinutí na tlačidlo 'Kresli' vypíšte informáciu o tom, ktorý panel je aktívny. Informáciu o aktívnom paneli zobrazte na komponente ''panel''.


''Riešenie:''

Informácia o tom, ktorý panel je aktívny má komponent ''zalozky'' (TabbedPane). Komponent ''zalozky'' má informáciu o tom, ktorý z panelov je aktívny pomocou metódy ''getSelectedComponent()''. Táto metóda vráti odkaz na aktívny komponent. Potom nám stačí porovnať tento komponent s existujúcim komponentom.

Metóda ''tlcKresliActionPerformed'' bude vyzerať nasledovne:

<source lang="java">
    private void tlcKresliActionPerformed(java.awt.event.ActionEvent evt) {                                          
        int sirka, vyska; //sirka a vyska panelu na kreslenie
        sirka = panel.getWidth();
        vyska = panel.getHeight();        
        String text = null;
        g = panel.getGraphics();
        g.fillRect(1, 2, sirka-2, vyska-2);
        if(zalozky.getSelectedComponent().equals(panel1)){
            text="Prva zalozka";
            g.setColor(Color.RED);
        }
        if(zalozky.getSelectedComponent().equals(panel2)){
            text="Druha zalozka";
            g.setColor(Color.GREEN);
        }
        if(zalozky.getSelectedComponent().equals(panel3)){
            text="Tretia zalozka";
            g.setColor(Color.BLUE);
        }
        g.drawString(text, sirka/2-30, vyska/2);
    }  
</source>

Výsledok:

[[Súbor:swing application netbeans 12.png|center|thumb|400px|Zistenie aktuálne otvorenej záložky]]