Ilkka Koivistoinen 13.02.2002

Edellinen

Seuraava

10.6.2 Komponenttien asettelu piirtopinnalle

Huomasit varmasti edellisessä kappaleessa, että komponentit asettuvat appletin piirtopinnalle vähän miten sattuvat riippuen ikkunan koosta. Javan ns. Layout -manager hoitaa itse komponenttien sijoittelun riippuen tulostuslaitteen koosta. Kannattaa muistaa, että asiakas voi  katsella applettia suurelta TV -monitorilla tai toisessa äärimmäisyydessä kännykän pienellä näytöllä. Layoutmanageriin voi vaikuttaa pakottamalla sen sijoittamaan komponentit haluttuun paikkaan Component -luokan metodilla setLocation(int, int) tai sitten käyttämällä tietyntyyppistä asettelumallia. Asettelumalli antaa Layout -managerille vihjeen siitä, miten komponentit pitäisi sijoittaa näytölle, mikäli se on mahdollista. Erillaisia asettelumallit on listattu alla olevaan taulukkoon ja niistä käsitellään seuraavassa kappaleessa ainoastaan GridLayout.

FlowLayout Latoo komponentit vasemmalta oikealle ja aloittaa uuden rivin, kun rivin tila loppuu
GridLayout Latoo koponentit taulukkoon, jossa taulukon kokoa voi muuttaa halutulla tavalla
BorderLayout Jakaa ikkunan viiteen alkioon, north, south, east, west ja center, jolloin komponentteja voidaan asetella ikkunaan samalla tavalla kuin www -sivulla käytetään kehyksiä
CardLayout Piirtää yhden komponentin kerrallaan piirtopinnalle piilottaen aina muut hetkeksi. Vrt kortisto, jossa yksi kortti on kerrallaan näkyvissä
GridBagLayout GridLayoutin yleistys, jossa kukin taulukon alkio voi olla mielivaltaisen kokoinen. Tämä yleisimmin käytetty asettelumalli on samalla kertaa myös kaikkein hankalin käyttää. Tällä kurssilla jätämme sen lukijan oman innostuneisuuden varaan.

Piirtoalueen muodostaa abstrakti luokka nimeltä Container. Siitä periytyy luokka Panel. Käytännössä appletti-ikkuna koostuu yhdestä Panel -luokan oliosta, johon ilman eri mainintaa tapahtuu piirtäminen ja komponenttien  yms. asettelu. Asettelumallin alkio voi myös koostua paneelista (vrt. taulukon alkio sisältää taulukon), jolloin sitä kutsutaan alipaneeliksi. Alipaneeliin voidaan määritellä erillinen Layout, johon voidaan asetella taas uusia komponentteja ja alipaneeleja halutulla tavalla. Tällä tavoin voidaan toteuttaa hyvinkin monimutkainen komponenttien (mukaan lukien kanvaasi piirtämistä varten) asettelu. Nyt tutustutaan kuitenkin kunnolla vain GridLayout -asettelumalliin, jonka yhteydessä opetellaan kaikki asettelumallien perusominaisuudet.

10.6.3.1 GridLayout

GridLayout (josta jossakin puhutaan nimellä verkkoLayout tai hilaLayout) eli taulukkoLayout jakaa paneelin pinnan samankokoisiin taulukon soluihin eli alkioihin. Alkiot muodostavat rivejä vaakasuorassa ja toisaalta sarakkeita pystysuorassa. GridLayout muodostuu GridLayout -luokan oliosta ja se tehdään muodostimella

GridLayout taulukko = new Gridlayout(4,3);

Tällä muodostimella saadaan taulukko, jossa on 4 riviä ja 3 saraketta.

Jos halutaan määrätä alkioiden väliin jäävä tyhjä tila, käytetään muodostinta

GridLayout taulukko = new GridLayout(4,3,10,15);

Tässä jokaisen rivin väliin jätetään 10 pikselin tyhjä tila ja jokaisen sarakkeen väliin 15 pikselin tyhjä tila. Oletuksena sarakkeiden ja rivien väliin ei jätetä laisinkaan tyhjää.

Muodostettu Layout -olio otetaan käyttöön asettamalla

setLayout(taulukko);

(Ihmetteletkö, miksi metodiin ei laiteta laisinkaan olion nimeä. Jos olion nimi ei eksplisiittisesti ole näkyvissä, viitataan appletin piirtopinnan muodostavaan paneeliin. Sama koskee add() -metodia. Asiasta lisää myöhemmin)

Seuraavaksi luodaan oliot, jotka asetellaan taulukon alkioihin ja lopuksi add() -metodilla lisätään ne taulukkoon. seuraavasti (esimerkissä lisättävät komponentit ovat painikkeita Button).

Button tammikuu = new Button("Tammikuu");
Button helmikuu = new Button("Helmikuu");
Button maaliskuu = new Button("Maaliskuu");
Button huhtikuu = new Button("Huhtikuu");
Button toukokuu = new Button("Toukokuu");
Button kesäkuu = new Button("Kesäkuu");
Button heinäkuu = new Button("Heinäkuu");
Button elokuu = new Button("Elokuu");
Button syyskuu = new Button("Syyskuu");
Button lokakuu = new Button("Lokakuu");
Button marraskuu = new Button("Marraskuu");
Button joulukuu = new Button("Joulukuu");

add(tammikuu);
add(helmikuu);
add(maaliskuu);
add(huhtikuu);
add(toukokuu);
add(kesäkuu);
add(heinäkuu);
add(elokuu);
add(syyskuu);
add(lokakuu);
add(marraskuu);
add(joulukuu);

Lisääminen tehdään järjestyksessä vasemmalta oikealle ja riveittäin ylhäältä alas. Metodi add(joulukuu) kohdistuu oletuspaneeliin eli appletin piirtopintaan. Mikäli se halutaan kohdistuvan johonkin alipaneeliin luodaan esimerkiksi Panel -luokasta periytyvä alipaneeli talvikuu, lisätään se oletuspaneeliin GridLayoutin alkioon komennolla add(talvikuu) ja sitten talvikuu.add(joulukuu).

Nyt kuitenkin kokoamme yhteen edellisen esimerkissä 76 ja saamme seuraavanlaisen appletin. Appletin listauksen saat tästä.

Esimerkki 75

Komponentti voidaan piilottaa setVisible(boolean) -metodilla ja sen editoitavuutta voidaan muuttaa setEditable(boolean) -metodilla riipuen komponentin ominaisuudesta kuten edellä on opittu.

Mikäli halutaan poistaa komponentti kokonaan taulukosta, voidaan se tehdä remove() -metodilla. Esimerkiksi remove(heinäkuu) aiheuttaa seuraavanlaisen tilanteen.

Esimerkki E75a

Kokonaisia  rivejä tai sarakkeita voidaan poistaa tai lisätä taulukoon metodilla setRows() ja setColumns(). Mikäli taulukkoon yritetään lisätä add() -metodilla enemmän alkioita mitä taulukossa on tilaa, layoutmanager laittaa ylimääräiset alkiot minne parhaaksi katsoo aika erikoisin seurauksian (kokeile).

Seuraavaksi demonstroimme, mitä tapahtuu muutettaessa piirtopinnan kokoa. E75 on laitettu seuraavassa kolmeen erikoikoiseen ikkunaan

 

Esimerkki 75 Esimerkki 75 Esimerkki 75

Kuten nähdään, tilan loppuessa painikkeiden nimet eivät enää mahdu käytetyllä fontilla painikkeeseen. Jokaisessa kohdassa painikkeiden väli on, kuten muodostimessa määrättiin.

Alipaneelien avulla voidaan layouttia vielä muotoilla lisää. Tehdään esimerkin 75 pohjalta seuraavanlainen ladonta

edellinen vuosi alkuvuosi 1999 loppuvuosi 1999 seuraava vuosi

Alipaneeli luodaan periyttämällä Panel -luokasta itsetehty olio. Alipaneelit joudutaan tekemään alkioihin alkuvuosi1999 ja loppuvuosi1999. Ne ovat seuraavanlaiset

import java.awt.*;
public class alkuvuosi1999 extends Panel {
  GridLayout taulukko = new GridLayout(6,1,10,3);
  Button tammikuu = new Button("Tammikuu");
  Button helmikuu = new Button("Helmikuu");
  Button maaliskuu = new Button("Maaliskuu");
  Button huhtikuu = new Button("Huhtikuu");
  Button toukokuu = new Button("Toukokuu");
  Button kesäkuu = new Button("Kesäkuu");
// muodostin
  public alkuvuosi1999(){
    setLayout(taulukko);
    add(tammikuu);
    add(helmikuu);
    add(maaliskuu);
    add(huhtikuu);
    add(toukokuu);
    add(kesäkuu);
  }
}
import java.awt.*;
public class loppuvuosi1999 extends Panel {
  GridLayout taulukko = new GridLayout(6,1,10,3);
  Button heinäkuu = new Button("Heinäkuu");
  Button elokuu = new Button("Elokuu");
  Button syyskuu = new Button("Syyskuu");
  Button lokakuu = new Button("Lokakuu");
  Button marraskuu = new Button("Marraskuu");
  Button joulukuu = new Button("Joulukuu");
// muodostin
  public  loppuvuosi1999(){  
    setLayout(taulukko);
    add(heinäkuu);
    add(elokuu);
    add(syyskuu);
    add(lokakuu);
    add(marraskuu);
    add(joulukuu);
  }
}

Sen jälkeen luodaan varsinainen appletti seuraavasti

import java.awt.*;
public class E76 extends java.applet.Applet {
  GridLayout taulukko = new GridLayout(1,4,30,10);
  Button edellinenVuosi = new Button("Edellinen vuosi");
  Button seuraavaVuosi = new Button("Seuraava vuosi");
  alkuvuosi1999 alku;
  loppuvuosi1999 loppu;
  public void init(){
    alku = new alkuvuosi1999();
    loppu = new loppuvuosi1999();

    setLayout(taulukko);
    add(edellinenVuosi);
    add(alku);
    add(loppu);
    add(seuraavaVuosi);
  }
}

Tuloksena saadaat esimerkki E76, jonka listaus löytyy tästä. (Jälleen on luotu jar-tiedosto, joka tuodaan selaimelle)

Esimerkki E76

Ilkka Koivistoinen 13.02.2002

Edellinen

Seuraava