Komponenttien asettelu

Sovelluksemme on toiminnallisesti valmis, mutta sen ulkoasussa on vielä muutama puute:

• Ikkunan oletuskoko on liian suuri.
• Ikkunan koon kasvattaminen jättää tyhjää tilaa väärään paikkaan.
• Komponenttien asettelu kaipaa hienosäätöä: valintaruudut ovat liian lähekkäin, nimiöt on keskitetty oudosti ja painikkeet ovat kaukana syöttökentistä.

Parannetaan sovelluksen ulkoasua ja tutustutaan VBox-säiliön lähisukulaiseen HBox.

Avaa sovelluksen main.fxml-tiedosto SceneBuilderissa. Valitse heti yläpalkista View Show Outlines tai paina Ctrl+E (macOS: Cmd+E). Toiminto muuttaa komponentit näyttämään laatikoilta, mikä helpottaa koon ja paikan hahmottamista:

Tämän osan jälkeen voit palata takaisin perusnäkymään valitsemalla View Hide Outlines.

Ikkunan ja komponenttien koko

Korjataan aluksi ikkunan koko. Valitse vasemman puolen Hierarchy-paneelista koko sovelluksen sisältävä VBox-elementti ja avaa oikealta Layout-paneeli:

Layout-paneeli sisältää komponentin kokoon liittyvät asetukset. JavaFX:ssä jokaisella komponentilla on kolmenlaista korkeutta ja leveyttä:

• Oletuskoko (Pref Width ja Pref Height): komponentin oletuskoko, kun sovellusnäkymä ladataan. Koko voi kuitenkin muuttua riippuen komponentin luonteesta ja sitä ympäröivistä tai sisältämistä komponenteista.
• Pienin koko (Min Width ja Min Height): Pienin sallittu koko, johon komponentti voi kutistua.
• Suurin koko (Max Width ja Max Height): Suurin sallittu koko, johon komponentti voi kasvaa.

Voit antaa ominaisuuksille arvoksi desimaaliluvun tai käyttää seuraavia erikoisarvoja:

• USE_COMPUTED_SIZE: JavaFX laskee komponentille parhaan koon sen sisällön perusteella.
• USE_PREF_SIZE: JavaFX käyttää oletuskokoa (Pref). Hyödyllinen koon rajoittamiseen.

Näitä huomioon ottaen asetetaan koko näkymän VBox:lle seuraavat arvot:

• Min Width: USE_PREF_SIZE
• Min Height: USE_PREF_SIZE
• Pref Width: 400
• Pref Height: 400
• Max Width: USE_COMPUTED_SIZE
• Max Height: USE_COMPUTED_SIZE

Toisin sanoen: alusta näkymä kokoon 400x400, äläkä salli sen pienentämistä tästä, mutta anna sen kasvaa vapaasti. Huomaat muutoksen heti SceneBuilderissa:

Tallenna FXML-tiedosto ja käynnistä sovellus. Ikkunan oletuskoko on nyt 400x400:

Ikkunaa voi kuitenkin edelleen pienentää alle 400x400, koska muokkasimme vain näkymän rajoja, emme koko ikkunan (Stage). Korjataan tämä asettamalla ikkunan minimikoko App-luokan start()-metodissa. Samalla muokataan sovelluksen otsikko siistimmäksi:

public void start(Stage stage) throws IOException {
    FXMLLoader loader = new FXMLLoader(getClass().getResource("main.fxml"));
    Scene scene = new Scene(loader.load());

    stage.setScene(scene);
    // HIGHLIGHT_GREEN_BEGIN
    stage.setMinHeight(400);
    stage.setMinWidth(400);
    // HIGHLIGHT_GREEN_END
    // HIGHLIGHT_YELLOW_BEGIN
    stage.setTitle("Todo-sovellus");
    // HIGHLIGHT_YELLOW_END
    stage.show();
}

Nyt kun käynnistät sovelluksen, huomaat, että ikkunan kokoa ei voi pienentää alle 400x400:

VBox-säiliön komponenttien väli

VBox-komponentti sisältää Spacing-asetuksen, joka määrittää komponentin sisällä olevien komponenttien välisen tyhjän tilan.

Huomaamme, että näkymän VBox-säiliössä välistys on 20, joka on hiukan liian suuri. Korjataan tämä vaihtamalla asetuksen arvoksi 10:

Korjataan samalla se, että tehtävien VBox-säiliöissä CheckBox-valintaruutujen välissä ei ole yhtään tyhjää tilaa. Aseta tehtyjen ja tekemättömien tehtävien VBox-komponenteille Spacing-arvoksi 5. Tallenna FXML-tiedosto ja aja sovellus. Huomaat, että nyt valintaruutujen välissä on hieman tyhjää tilaa:

Komponenttien kasvaminen VBox-säiliön kasvaessa

Ikkunan koon muuttaminen paljastaa uuden ongelman: tehtyjen ja tekemättömien listat eivät kasva ikkunan mukana. Alla oleva video havainnollistaa tilanteen:

Oletuksena VBox pitää sisällään olevien komponenttien korkeuden muuttumattomana. Voimme kuitenkin määrittää erikseen, miten kunkin komponentin tulisi käyttäytyä, kun säiliöön syntyy tyhjää tilaa. Tässä tapauksessa haluamme, että listat täyttävät vapaan tilan, mutta muut komponentit (nimiöt, kentät, painikkeet) pysyvät samankokoisina.

Valitse SceneBuilderissa tekemättömien tehtävien VBox ja avaa Layout-paneeli:

Kun komponentti on jonkin VBox-säiliön sisällä, komponentille on mahdollista asettaa ns. Vgrow-asetus. Asetus määrittää, miten komponentin korkeuden tulee käyttäytyä, jos komponenttia sisältävän VBox korkeus kasvaa. Mahdolliset asetukset ovat:

• NEVER: Korkeus pysyy samana.
• ALWAYS: Täyttää aina tyhjän tilan. Jos usealla komponentilla on tämä asetus, ne jakavat tilan keskenään.
• SOMETIMES: Kasvaa vain, jos mitään muuta komponenttia ei voi kasvattaa.

Aseta tekemättömien tehtävien säiliölle Vgrow-asetuksen arvoksi ALWAYS. Tee sama myös tehtyjen tehtävien säiliölle, jolloin kummatkin säiliöt kasvavat samassa suhteessa.

Tallenna ja kokeile: nyt listat täyttävät ikkunan pystysuunnassa, ja muut komponentit säilyttävät kokonsa.

Painikkeen asettaminen syöttökentän tasolle

Tällä hetkellä syöttökenttä näyttää olevan hieman irrallinen painikkeesta. Sovelluksissa on yleisempää, että suoraan kenttään liittyvät painikkeet laitetaan syöttökentän kanssa samalle riville.

Koska VBox asettaa komponentit aina allekkain, tarvitsemme sen vaakasuoraa vastinetta: HBox (Horizontal Box). Nimensä mukaisesti HBox on säiliökomponentti, jonka sisällä olevat alkiot sijoitetaan vaakasuorassa suunnassa vasemmalta oikealle.

Lisää HBox-komponentti tehtyjen tehtävien alle ja raahaa syöttökenttä ja painike sen sisään:

Aseta HBox-komponentille seuraavat asetukset:

• Spacing: 10 (syöttökentän ja painikkeen välille lisätään tyhjää tilaa)
• Pref Width ja Pref Height: USE_COMPUTED_SIZE (säiliön koko mukautuu syöttökentään ja painikkeeseen)
• Vgrow: NEVER (säiliön korkeus ei ikinä muutu vaikka sitä sisältävä VBox kasvaisi)

Valitse lopuksi TextField-syöttökenttä ja aseta sen Hgrow-asetukseksi ALWAYS. Tämä vastaa VBox:n Vgrow-asetusta, mutta toimii vaakasuunnassa: syöttökenttä täyttää nyt kaiken vapaan tilan leveyssuunnassa.

Nimiöiden tasaaminen vasemmalle

Tehdään aivan viimeinen loppusilaus: sovelluksissa on yleistä, että nimiöt ovat tasattu vasempaan reunaan. Korjataan vielä tasaus, jotta sovelluksen ulkoasu on käyttäjälle "tutumpi".

Valitse koko näkymän päällimmäinen VBox ja aseta Properties-paneelissa Alignment-asetukseksi CENTER_LEFT:

Tallenna ja käynnistä sovellus. Varmista, että kaikki toimii ja komponentit mukautuvat hyvin ikkunan kokoon.