Page History

...

    <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>

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:

• layoutX og layoutY i Group-nodene: Disse verdiene legges til koordinatene lenger ned i hierarkiet.
• layoutX og layoutY i Circle og Line: Disse plasserer figurene i forhold til gruppen de er i.
• startX, startY, endX og endY i Line: Disse verdiene angir start- og slutt-posisjonen til streken og er relativt til layout-verdiene.

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.

Merk at for å vise frem strekmann-figurenMerk at for at denne koden skal virke, så trengs det litt mer FXML-kode over/rundt og litt Java-kode for å laste inn FXML-koden og vise frem figuren. Den komplette FXML- og Java-koden er vist under.

<?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>
</Pane>

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);
    }
}

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:

• layoutX og layoutY i Group-nodene: Disse verdiene legges til koordinatene lenger ned i hierarkiet.
• layoutX og layoutY i Circle og Line: Disse plasserer figurene i forhold til gruppen de er i.
• startX, startY, endX og endY i Line: Disse verdiene angir start- og slutt-posisjonen til streken og er relativt til layout-verdiene.

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

1. Referere til figur-elementer

...

1. : Uten denne muligheten går det ikke an å få endre på figur-instansene, f.eks. Circle- og Line-objekter, som ble laget da FXML-fila ble lastet inn og vist.
2. Reagere på input fra brukeren: Uten denne muligheten kan ikke brukeren påvirke eller styre hva som skjer.

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).

Reagere på input fra brukeren