...
En Hello World-app er ment å være den enkleste app-en en kan tenke seg som viser Hello World på skjermen. F.eks. slik som dette:
En slik app må inneholde følgende elementer:
...
Code Block | ||
---|---|---|
| ||
// klassen ligger i pakken helloworld, og // det må stemme med package-deklarasjonen package hello world; // med en import-setning, så slipper en å skrive hele navnet på klassene vi bruker // vi har like godt en import-setning for hver av klassene vi bruker import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.scene.text.Font; import javafx.scene.text.Text; import javafx.stage.Stage; // bygg på Application-klassen med extends // det er det som gjør at vår klasse kan fungere som en JavaFX-app public class HelloWorldApp extends Application { // her er metoden som kalles med app-vinduet // den tar inn app-vinduet som argument public void start(Stage primaryStage) { // vi lager oss det grafiske tekst-objektet, av typen Text Text helloWorldText = new Text("Hello world"); // så sier vi hvor i vindet den skal plasseres, x- og y-posisjon helloWorldText.setLayoutX(10); helloWorldText.setLayoutY(50); // vi lager oss et font-objekt, av typen Font Font font = Font.font("Arial", 36); // og setter den som teksten font helloWorldText.setFont(font); // vi mnå også lage et panel, av typen Pane Pane root = new Pane(); // vi setter ønsket størrelse, bredde og høyde root.setPrefWidth(300); root.setPrefHeight(200); // og putter teksten inni root.getChildren().add(helloWorldText); // til slutt legges panelet inn i app-vinduet primaryStage.setScene(new Scene(root)); // og vises frem primaryStage.show(); } // dette er den egentlig oppstartsmetoden public static void main(String[] args) { // kall den innebygde funksjonen launch, med app-klassen vår som argument launch(HelloWorldApp.class, args); } } |
Skriv inn koden over, ved å kopiere og lime inn linjene i din egen HelloWorldApp.java-fil. Legg merke til at ulike ord får ulik farge. Innebygde Java-nøkkelord som package, class, extends og new blir lilla, variabler er brune, tekst-verdier er blå osv. Dette hjelper oss å skjønne hvordan Eclipse har forstått koden. Hvis mye av koden plutselig blir blå, så har vi kanskje glemt en " som avslutter en tekst-verdi. | |
Kjør koden ved å høyreklikke på fila eller i editoren og velge Run as > Java Application. Du skal da få opp følgende vindu: | |
Lek litt med koden over. Prøv f.eks. å endre verdiene som styrer teksten (new Text(...)), plassering (setLayoutX(...) og setLayoutY(...)), skriftstypen (Font.font(...)), og vindusstørrelsen (setPrefWidth(...) og setPrefHeight(...)):
| |
Legg merke til at det er ulike måter å sette ulike verdier på:
|
Steg 3: Bruke kode-kompletteringsfunksjonen i Eclipse
Eclipse inneholder mange nyttige funksjoner for å gjøre koding mer effektivt. Eclipse kjenner til alt Java har av muligheter, og kan både foreslå kode du kan skrive og rette enkle feil i koden.
Eclipse holder rede på hvilke navn (på variabler, klasser og pakker) som gjelder hvor og kan foreslå alternativer basert på hva du har skrevet inn. Lag en ny linje under der skriftstypen settes med setFont(...). Skriv inn begynnelsen på variablen for Text-objektet f.eks. hello. Så holder du nede <ctrl>-tasten og trykker mellomrom. Eclipse vil da vise en liste over alle navn som begynner med hello (se figur til høyre). Her ser du at Eclipse foreslår et variabelnavn (helloWorldText), et pakkenavn (helloworld) og et klassenavn (HelloWorldApp). Hvis du velger helloWorldText, så legges denne teksten inn. Denne funksjonen kalles kode-komplettering (eng: code completion) og gjør det bl.a. greit å bruke lange navn på variabler, klasser og pakker. | Komplettering av navn |
Eclipse vet hvilke verdier du kan sette for ulike typer grafiske objekter og kan hjelpe deg å skrive (og lære) dem. Skriv et punktum (`.`) etter helloWorldText-navnet. Eclipse vil automatisk aktivere kode-kompletteringsfunksjonen og vise en liste over alle metodene til Text-objektet. Hvis du skriver inn setF så vil Eclipse begrense lista til metodene som begynner med nettopp setF (se figur til høyre). Der finner du bl.a. setFill og setFont. fill og font kalles egenskaper (eng: properties) og i Java setter du slike egenskaper med metoder som har set foran egenskapsnavnet. Argument-typen viser hva slags verdi du må gi inn. F.eks. tar setFill et argument av typen Paint (egentlig javafx.scene.paint.Paint). Velg setFill fra lista og skriv inn Color.BLUE. Igjen ser du at Eclipse foreslår navn tilsvarende det du har skrevet. | Komplettering av metodenavn |
Kjør app-en din igjen, så ser du effekten av kallet til setFill-metoden. |
Hva har du lært?
- lage nye Java-prosjekter med New > Java Project
- lage nye Java-pakker med New > Package
- lage nye Java-klasser med New > Class
- hva en klasse må ha av kode for å bli en app-klasse
- kjøre app-klassen som en Java-applikasjone
- hvordan plassere en tekst i et vindu
- hvordan endre verdier for plassering, skriftstype, farge og vindusstørrelse
- hvordan bruke kode-kompletteringsfunksjonen
I leksjonen FXML-logo vil du lære hvordan lage skjerminnhold med FXML og tegne med JavaFX Scene Builder.