Introduksjon

Steg 1: Sette opp Java-prosjekt, og lage app-mappe og app-klasse

Start med å sette opp et Java-prosjekt, kalt figurstyring, som beskrevet i Hello world-leksjonen. Lag også en java-pakke (mappe for Java-kodefiler) med samme navn og en Java-klasse ved navn FigurstyringApp. FigurstyringApp-klassen skal ha følgende innhold:

package figurstyring;

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;


public class FigurstyringApp extends Application {
	public void start(Stage primaryStage) throws IOException {
		FXMLLoader fxmlLoader = new FXMLLoader(FigurstyringApp.class.getResource("FigurstyringApp.fxml"));
		// setter controlleren, som styrer appen
		fxmlLoader.setController(new FigurstyringController());
		Pane pane = fxmlLoader.load();
		Scene scene = new Scene(pane);
		// sender alle tastetrykk som kommer til vinduet videre til panelet
		scene.setOnKeyPressed(keyEvent -> { pane.getOnKeyPressed().handle(keyEvent);});
		primaryStage.setScene(scene);
		primaryStage.show();
	}

	public static void main(String[] args) {
		launch(FigurstyringApp.class, args);
	}
}

Denne koden er omtrent som i FxmlLogoApp fra FXML-logo-leksjonen. Det er tre viktige forskjeller:

1. FXML-fila som lastes inn heter FigurstyringApp.fxml. Det betyr at du må bruke dette navnet i neste trinn.
2. Vi setter en såkalt Controller, som er en Java-klasse som kobles sammen med FXML-fila og har kode for å reagere på museklikk og tastetrykk. Kort sagt: Det er Controller-klassen som gir liv til appen!
3. Vi sørger for at alle tastetrykk sendes til hovedpanelet i appen.

Steg 2: Lage FXML-fil og Controller-klasse

Nå er turen kommet til FXML-fila og den tilhørende Controller-klassen. Lag en FXML-fil med navnet som brukes i koden over (se etter **getResource(...)**). Fremgangsmåte er beskrevet i [FXML-logo](../fxmllogo/fxmllogo.html)-oppgaven. Hint: Bruk **New->Other** og finn **FXML Document**-veiviseren.

Først skal vi lage noen ulike typer figurer, hvor én skal være den du skal styre (tenk på det som spilleren) mens de andre foreløpig skal være i ro. Her er et forslag til hva du kan lage:</br>
<img src="figurer.png" style="height:500px;" />

Etterpå lager du **FigurstyringController**-klassen (høyreklikk på **figurstyring**-pakka og velg **New->Class**. Det er lurt å ha denne klassen fremme, mens du jobber med FXML-fila i JavaFX Scene Builder.

Hvis du har gjort alt riktig så langt, så skal du kunne kjøre appen og få opp figurene i et vindu: Høyre-klikk på **FigurstyringApp**-klassen og velg **Run As->Java Application** og se hva som skjer!

# Steg 3: {.activity}
Nå skal vi få spiller-figuren til å bevege seg når du trykker piltastene. Først må du ordne det slik at **FigurstyringControlleren** får beskjed når tastene trykkes. Dette er greiest å gjøre i Scene Builder, slik: Klikk du på bakgrunnen (altså panelet som inneholder figurene) og velger **Code**-seksjonen til høyre for tegnevinduet. Du finner den nederst i hjørnet, og når den velges så må du rulle litt nedover før du finner seksjonen som heter **Keyboard** med feltet **On Key Pressed**. Der fyller du inn **keyPressed**. Det skal se omtrent slik ut:</br>
<img src="keyPressed-i-scenebuilder.png" style="height:500px;" />

**keyPressed**-navnet må du huske, fordi det skal bli navnet på en funksjon i **FigurstyringControlleren**. Husk å lagre før du går tilbake til Eclipse.

Hvis du åpner FXML-fila, så vil du se at følgende kode er lagt inn i tag-en for panelet (den heter AnchorPane, Pane e.l.): **onKeyPressed="#keyPressed"**. Det kan f.eks. se slik ut:

```xml
<AnchorPane onKeyPressed="#keyPressed" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Circle fill="LIME" layoutX="612.0" layoutY="220.0" radius="85.0" stroke="BLACK" strokeType="INSIDE" />
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="150.0" layoutX="449.0" layoutY="351.0" stroke="BLACK" strokeType="INSIDE" width="78.0" />
<Ellipse fill="RED" layoutX="266.0" layoutY="135.0" radiusX="28.0" radiusY="75.0" stroke="BLACK" strokeType="INSIDE" />
<Group fx:id="player" layoutX="182.0" layoutY="394.0">
<children>
<Arc fill="WHITE" length="270.0" radiusX="45.0" radiusY="45.0" startAngle="45.0" stroke="BLACK" strokeType="INSIDE" type="ROUND" />
</children>
</Group>
</children>
</AnchorPane>
```

Du kan jobbe direkte med FXML-koden i Eclipse, men det kan være litt vanskeligere å finne frem. Hvis du endrer FXML-koden og så går tilbake til Scene Builder, så må du huske å laste koden inn på nytt, for å få inn endringene du gjorde i Eclipse. Velg **File->Revert to Saved** for å gjøre dette.

Koden **onKeyPressed="#keyPressed"** forteller JavaFX at funksjonen **keyPressed** skal kjøre hver gang brukeren trykker ned en tast på tastaturet. Det betyr at du må lage en slik funksjon i **FigurstyringController**-klassen. I første omgang kan du skrive inn følgende kode i **FigurstyringController**:

```java
@FXML
void keyPressed(KeyEvent keyEvent) {
KeyCode keyCode = keyEvent.getCode();
System.out.println("Du trykket " + keyCode);
}
```

Hvis du nå kjører appen og trykker noen taster, så skal du se at det skrives ut en beskjed for hver tast som trykkes.
# Hva har du lært?

I leksjonen [kontinuerligbevegelse](../kontinuerligbevegelse/kontinuerligbevegelse.html) vil du bygge videre på denne leksjonen og legge til kode slik at figurene beveger seg av seg selv!