...
Code Block |
---|
<Group layoutY="50">
<Circle layoutX="100" layoutY="20" radius="20" stroke="black" fill="white"/>
<Circle layoutX="112" layoutY="20" radius="2" stroke="black" fill="blue"/>
<Line layoutX="120" layoutY="20" startX="0" startY="-4" endX="3" endY="0" stroke="black"/>
<Line layoutX="120" layoutY="20" startX="3" startY="0" endX="0" endY="1" stroke="black"/>
<Line layoutX="100" layoutY="40" endX="0" endY="30" stroke="black"/>
<Group layoutX="100" layoutY="50">
<Line layoutY="0" endX="-10" endY="10" stroke="black"/>
<Line layoutY="0" endX= "10" endY="10" stroke="black"/>
<Line layoutY="20" endX="-10" endY="15" stroke="black"/>
<Line layoutY="20" endX= "10" endY="15" stroke="black"/>
</Group>
</Group> |
| Image Added
Denne figuren er laget med FXML-koden til venstre. |
Merk at for at denne koden skal virke, så trengs det litt mer FXML-kode over/rundt og litt Java-kode for å laste inn og vise figuren. FXML- og Java-koden er vist under.
Code Block |
---|
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.Text?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.Group?>
<?import javafx.scene.shape.Circle?>
<?import javafx.scene.shape.Line?>
<Pane xmlns:fx="http://javafx.com/fxml"
minWidth="400" minHeight="600">
<Group layoutY="50">
<Circle layoutX="100" layoutY="20" radius="20" stroke="black" fill="white"/>
<Circle layoutX="112" layoutY="20" radius="2" stroke="black" fill="blue"/>
<Line layoutX="120" layoutY="20" startX="0" startY="-4" endX="3" endY="0" stroke="black"/>
<Line layoutX="120" layoutY="20" startX="3" startY="0" endX="0" endY="1" stroke="black"/>
<Line layoutX="100" layoutY="40" endX="0" endY="30" stroke="black"/>
<Group layoutX="100" layoutY="50" visible="true">
<Line layoutY="0" endX="-10" endY="10" stroke="black"/>
<Line layoutY="0" endX= "10" endY="10" stroke="black"/>
<Line layoutY="20" endX="-10" endY="15" stroke="black"/>
<Line layoutY="20" endX= "10" endY="15" stroke="black"/>
</Group>
</Group> |
| Image Removed
Denne figuren er laget med FXML-koden til venstre. | | Code Block |
---|
package trinn2;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class StickMan1 extends Application {
@Override
public void start(Stage primaryStage) throws IOException {
FXMLLoader fxmlLoader = new FXMLLoader();
fxmlLoader.setController(this);
Parent root = (Parent) fxmlLoader.load(this.getClass().getResourceAsStream("StickMan1.fxml"));
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
} |
Den komplette FXML-koden er vist til venstre. Import-linjene øverst trengs for å kunne bruke navn tilsvarende Java-klasser lenger ned i fila. F.eks. vil Circle egentlig referere til java-klassen javafx.scene.shape.Circle. Java-koden antar her at FXML-fila ligger i samme mappe som java-fila. |
Ved å se på figur-typen og koordinatene skal det være nokså lett å se hvilke kode-linjer som tilsvarer hodet, øyet, nesa, kropp, armer og bein. Posisjonen (koordinatene) styres på tre måter:
...
Legg altså merke til hvordan koordinat-verdiene legges sammen, slik at den faktiske plasseringen bestemmes av verdier mange steder i koden. Gruppering med Group kan nettopp være lurt for å gjøre det enklere å plasserer figure-elementer riktig.
Visuelle effekter angis med ullike attributter, f.eks. brukes fill for å angi fargen som en (del)figur fylles med og stroke angir strek-fargen. Muligheten er bestemt av typen figur-element og egenskapene til den tilsvarende Java-klassen. F.eks. kan både Line og Circle ha et stroke-attributt, fordi begge arver en setStroke-metode fra deres felles superklasse Shape.
Bevegelige figurer
Figurene i FXML-filer er i utgangspunktet statiske, så for å lage dynamisk grafikk, altså bevegelige figurer, så trenger en å koble sammen FXML-kode og Java-kode. For å få det til, så må koden kunne to ting: 1) referere til figur-elementer og 2) reagere på input fra brukeren.
Referanser
Til hver node kan det knyttes en id, altså et unikt navn (må sikres av utvikleren) tilsvarende id-tag'en i HTML. En nyttig funksjon er lookup(String id) som kan brukes til å finne en node med en unik id i en del av hierarkiet. Ellers kan også id'en brukes til å identifisere noder når man bruker css-stiler (mer om css lenger ned).