Java (Swing) - práca s vizuálnymi komponentami
Základy informatiky - jazyk Java
Úvod do programovania v jazyku Java
Java - objektovo orientovaný prístup
Vzorové príklady:
Java - implementácia numerických algoritmov
Java - triedy geometrických tvarov
Pokročilé témy:
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í.
Obsah
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:
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.
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).
- Plochu panelu rozšírime tak, aby bola roztiatnutý na celú šírku okna a prilepený na spodnú časť 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.
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"
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ť.
- 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'.
Posuvník (jSlider)
Do aplikácie pridáme komponent jSlider, tak ako je na nasledujúcom obrázku.
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):
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);
}
Rovnaký kód bude pridaný aj do metódy tlcStvorecActionPerformed, v ktorej sa vykresľuje štvorec.
Zašrtávacie polížka (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ť.
Zmena v zdrojovom kóde bude opäť jednoduchá:
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);
}
}
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.
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:
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);
}
}
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.
Ú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:
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);
}
Výsledok:
