Nädal 7

Graafika. Graafiline kasutajaliides.

Sissejuhatus ja JavaFX paigaldamine

Seni on sellel kursusel põhiliselt käsitletud programme, kus tulemused ilmuvad tekstilisel kujul ja suhtlemine kasutajaga on olnud suhteliselt askeetlik. Sellel ja järgmisel nädalal käsitletakse erinevaid graafilisi võimalusi, mille abil saab programme oluliselt värvilisemaks ja interaktiivsemaks teha. Põhimõtteliselt on selles vallas muidugi väga palju ja erinevaid võimalusi, siin piirdutakse paljus vaid sissejuhatusega, mille abil aga siiski midagi on võimalik juba ära teha.

Javas graafiliste liideste loomiseks on aegade jooksul kasutatud erinevaid lahendusi. Siin aines kasutame neist kõige kaasaegsemat teeki nimega JavaFX. Viimase IntelliJ-ga tuleb JavaFX plugin automaatselt kaasa (kontrolli, et see oleks sisse lülitatud: Settings -> Plugins). Lisaks kasutame arendusvahendit nimega Gradle. Gradle seadistuses määratakse programmi poolt kasutatavad teegid ja peaklassi nimi. Seejärel laeb Gradle vajalikud teegid alla ja oskab programmi niimoodi käivitada, et Java need ka üles leiab.

IntelliJ-s JavaFX projekti loomiseks hakka tavalist uut projekti looma (New -> Project), aga vali avanenud dialoogis vasakul servas loetelust Java asemel JavaFX. Build system-iks vali Gradle, ülejäänud võib muutmata jätta. Uue JavaFX peaklassi loomiseks saab menüüst valida File -> New -> JavaFXApplication.

Esimesed graafilised programmid

Ilmunud klassi alge on üldise loogika ja struktuuri mõttes küllaltki kõnekas.

public class HelloApplication extends Application {

    @Override
    public void start(Stage primaryStage) {
	//siin meetodis on juba päris palju asju, aga praegu neid ei vaata
    }

    public static void main(String[] args) {
        launch();
    }

}

Programmi täitmine algab (nagu ikka on alanud) meetodist main. Selles käivitatud meetod launch algatabki rakenduse töö, milles on väga olulisel kohal meetod start, millest nö. kogu tegevus stardibki. See meetod on abstraktsena klassis Application, mille alamklass iga JavaFX rakendus ongi. Igal konkreetsel juhul tuleb meetod start üle katta. Meetodi argumendiks on Stage-tüüpi objekt. Käesolevas materjalis nimetatakse Stage-tüüpi objekti "lavaks", kuna teatriteemalise terminoloogia kasutamine tundub küllaltki tabav. Edasi on vastavalt muudetud ka meetodi parameetri nime. Asenda ka meetod start

public void start(Stage peaLava) {
    Group juur = new Group(); // luuakse juur
    Rectangle ristkulik1 = new Rectangle(50, 50, 435, 435);
    juur.getChildren().add(ristkulik1);  // ristkülik lisatakse juure alluvaks
    Scene stseen1 = new Scene(juur, 535, 535, Color.SNOW);  // luuakse stseen	
    peaLava.setTitle("Must ruut");  // lava tiitelribale pannakse tekst
    peaLava.setScene(stseen1);  // lavale lisatakse stseen
    peaLava.show();  // lava tehakse nähtavaks
}

Meetodi start sees luuakse üks Group-tüüpi isend, mis toimib juurena. Loodav ristkülik (Rectangle-tüüpi isend) on see, mida tegelikult näha tahetakse. Ristkülik lisatakse juure alluvaks. Seejärel luuakse Scene-tüüpi isend (stseen). Lava tiitelribale pannakse tekst (meetodiga setTitle), stseen paigutatakse lavale (meetodiga setScene) ning lõpuks tehakse lava nähtavaks (meetodiga show).

JavaFX programmide tegemisel tuleb üsna tihti klasse importida. Seejuures võib IDE anda võimaluse valida mitme sama nimega klassi vahel. Tõenäoliselt on õige see valik, mille juures on paketi nimes javafx mainitud, näiteks ristküliku puhul import javafx.scene.shape.Rectangle;.

Stseenigraaf ja elementide struktuur

Käeolevas materjalis nimetatakse Scene-tüüpi objekti "stseeniks". (Siin võiks ka variandid "lavapilt" või "kuliss" kõne alla tulla, aga tõenäoliselt on "stseen" sobivam.) Stseen ongi konteineriks, kuhu siis erinevad nähtavad (ja nähtamatud) elemendid paigutatakse. Stseen ise aga pannakse lavale (meetodi setScene abil) ja sellega üldse ongi võimalik, et midagi rakenduse sees paistma hakkaks. Stseeni sisemine loogika määratakse stseenigraafi (scene graph) abil. Kasutusel ongi graafide (just puude) terminoloogia: tipp (node), juurtipp e. juur (root node), vahetipp (branch node), lehttipp e. leht (leaf node), ülemus (parent), alluv (child). Üldine skeem võib olla näiteks selline.

Stseeni loomisel antakse argumendina juur, mis on Parent-tüüpi (või tegelikult Group-, Region- või WebView-tüüpi või mingi nende alamklassi) isend. Hiljem lisatakse sellele alluvaid. Näiteks oli eelnevas näites juurele lisatud alluvaks ristkülik. Konkreetsele tipule alluvate tippude loendi saab meetodi getChildren abil. Sellesse saab elemente lisada meetodi add abil. (Nii oli ka klassi ArrayList puhul ja on üldse listide puhul, on ju ObservableList liidese List alamliides.)

Stseenigraaf on sel juhul väga lakooniline. Enam väiksem ei saakski olla, kuna klassi Rectangle isend ise juureks ei sobi, sest see klass pole klassi Parent alamklass.

Kui tulla tagasi ermitaaži ja maalimise juurde, siis aastaid tagasi ja praegugi maalivad kunstnikud maale lõuendile. Lõuend (canvas) on olemas ka JavaFX-s - klassina Canvas.

Näiteks musta ruudu joonistamine lõuendile:

public void start(Stage peaLava) {

    Group juur = new Group(); // luuakse juur

    Canvas lõuend = new Canvas(535, 535); // luuakse lõuend

    GraphicsContext gc = lõuend.getGraphicsContext2D(); // graafiline sisu

    gc.fillRect(50, 50, 435, 435); // ruut

    juur.getChildren().add(lõuend);  // lõuend lisatakse juure alluvaks

    Scene stseen1 = new Scene(juur);  // luuakse stseen   

    peaLava.setTitle("Must ruut");  // lava tiitelribale pannakse tekst

    peaLava.setScene(stseen1);  // lavale lisatakse stseen

    peaLava.show();  // lava tehakse nähtavaks
}

Järgnevad täiendused on mõeldud musta ruudu programmi muutmiseks. Muidugi saab ekraanile lisada mitmesuguseid teisi elemente. Näiteks nupu saab lisada start-meetodit vastavalt täiendades.

Button nupp1 = new Button("Olen nõus"); // luuakse nupp

nupp1.setLayoutX(100); // nupu paigutamine x-koordinaadi mõttes

nupp1.setLayoutY(60); // nupu paigutamine y-koordinaadi mõttes

juur.getChildren().add(nupp1); // nupp lisatakse juure alluvaks

Enesekontroll

Efektid ja animatsioon

JavaFX pakub suure hulga meetodeid, mis erinevate graafikaelementidega manipuleerida aitavad. Päris palju neist on juba klassis Node toodud, aga spetsiifilisemad meetodid on alamklassides. Edasi on proovitud meetodit setEffect, mis võimaldab erinevaid efekte esile tuua. Antud juhul on nupule pandud roheline vari.

DropShadow vari = new DropShadow(20, Color.GREEN);

vari.setOffsetX(20);

nupp1.setEffect(vari);

Tulles tagasi stseenigraafi juurde, siis on praegu meetodeid rakendatud pigem lehttippude puhul. Juure korral on seni rakendatud ainult alluvate lisamist. Järgmistes näidetes püütakse just juurega manipuleerida. Näiteks juur.setVisible(false) muudab nähtamatuks juure koos alluvatega, antud juhul siis ristküliku ja nupu. Edasi on üks animatsiooni näide.

FadeTransition ft = new FadeTransition(Duration.millis(10000), juur);  // luuakse uus haihtumine

ft.setFromValue(1.0);  // määratakse algväärtus (1.0 - täiesti selge)

ft.setToValue(0.0); // määratakse lõppväärtus (0 - täiesti haihtunud)

ft.setCycleCount(Timeline.INDEFINITE); // lõpmatu tsüklite arv 

ft.setAutoReverse(true); // lõppu jõudes tagasi, algusest jälle edasi

ft.play(); // animatsioon mängima

Elementide paigutamine

Graafilise kasutajaliidese puhul on oluline elementide paigutus. Kui eespool kasutati stseenigraafi juurena klassi Group isendit, siis paigutuse korraldamiseks on mõistlik juure või vahetipuna kasutada klassi Region (või selle mingi alamklassi) isendit. Näiteks klassi BorderPane abil saame määrata, kas konkreetne element lehttipuna (või vahetipuga määratud elementide rühm) asub ülaservas, alaservas, vasakul, paremal või keskel. Järgnevas näites on salasõnaväli, liugur ja silt paigutatud vastavalt ülaserva, keskele ja alaserva.

public void start(Stage peaLava) {

    BorderPane piiriPaan = new BorderPane(); 

    PasswordField salasõnaVäli = new PasswordField();
    Slider liugur = new Slider(0, 4, 0.5);
    Label silt = new Label("Silt");

    piiriPaan.setTop(salasõnaVäli); // ülaserva
    piiriPaan.setCenter(liugur); // keskele
    piiriPaan.setBottom(silt);	 // alaserva

    Scene stseen1 = new Scene(piiriPaan, 400, 400, Color.SNOW);

    peaLava.setTitle("Paigutus");
    peaLava.setScene(stseen1);
    peaLava.show();

}

Veel üks paigutamiste näide:

public void start(Stage peaLava) {
    FlowPane flow = new FlowPane();

    TextField tekst = new TextField("mingi tekst");
    flow.getChildren().add(tekst);

    ListView<String> list = new ListView<String>();
    ObservableList<String> items =FXCollections.observableArrayList (
	        "Esimene", "Teine", "Kolmas", "Neljas");
    list.setMaxHeight(100);
    list.setItems(items);
    flow.getChildren().add(list);

    BorderPane border = new BorderPane();
    border.setMinWidth(250);

    Button nupp1 = new Button("1");
    border.setLeft(nupp1);    
    Button nupp2 = new Button("2");
    border.setRight(nupp2);

    HBox hbox = new HBox();
    Label silt1 = new Label("silt1");
    Label silt2 = new Label("silt2");
    hbox.getChildren().addAll(silt1, silt2);
    border.setCenter(hbox);

    flow.getChildren().add(border);

    Scene stseen1 = new Scene(flow, 250, 150, Color.SNOW);
    peaLava.setScene(stseen1);
    peaLava.show();
}

Sellele aknale vastav stseenigraaf on järgmine: