Page History

...

Det er få om ingen begrensninger på hva som kan være inni hva, og sammen så forteller denne strukturen akkurat hva som skal vises på skjermen for brukeren. Dersom en underveis i kjøringen endrer på noen av objektene, f.eks. endrer posisjoner, farger, fonter eller legger til og/eller fjerner elementer, så oppdateres skjermen tilsvarende. Man slipper altså å forholde seg til primitive tegnemetoder, men manipulerer istedet på objektstruktere objektstrukturer og lar systemet ta seg av detaljer omkring hvordan disse tegnes (såkalt rendering).

...

Code Block language java @Override public void start(Stage stage) throws Exception { BorderPane root = new BorderPane(); // Root of the scene graph // Add one Text node in each surrounding region root.setTop(new Text("top")); root.setBottom(new Text("bottom")); root.setLeft(new Text("left")); root.setRight(new Text("right")); Pane shapesPane = new Pane(); shapesPane.setPrefSize(300, 300); Line line = new Line(10, 10, 100, 100); // x1, y1, x2, y2 line.getStrokeDashArray().setAll(10.0d, 10.0d); // dashes Rectangle rect = new Rectangle(150, 10, 30, 40); // x, y, w, h rect.setFill(Color.BLUE); Ellipse ell = new Ellipse(40, 180, 40, 30); // cx, cy, rx, ry ell.setStroke(Color.RED); ell.setStrokeWidth(5); ell.setFill(Color.GREEN); Text text = new Text(180, 180, "center"); List<String> fonts = Font.getFamilies(); text.setFont(new Font(fonts.get((int) (Math.random() * fonts.size())), 32)); shapesPane.getChildren().addAll(line, rect, ell, text); root.setCenter(shapesPane); Scene scene = new Scene(root, 500, 500); stage.setScene(scene); stage.setTitle("BorderPaneApplication"); stage.show(); }

Les mer om enkel 2d-grafikk her: Enkel 2D-grafikk med JavaFX og FXML

Grafisk stil med CSS (Cascading Style Sheets)

...

Det viktigste å vite om FXML er at det bygger direkte på klassene, metodene og attributtene som finnes i JavaFX-rammeverket og at disse brukes som navn på XML-elementer og attributter. Hvis et element heter javafx.scene.layout.Pane, så er det en direkte referanse til JavaFX-klassen Pane-klassen, og som i Java-kode så er det støtte for å importere navn, så en kan bruke kortformen Pane. Tilsvarende så kan en sette teksten i et Text-objekt med XML-attributtet text i (Text-elementet) fordi Text-klassen har en setText-metode. Sammenhengen mellom hva som er gyldig XML og hvilke klasser, metoder og attributter som finnes i JavaFX-rammeverket er sammenfattet i en del relativt enkle regler, så hvis en kjenner JavaFX-API'et, så er det ikke så vanskelig å bli vant med FXML-formatet.

I midten under Under ser vi det siste eksemplet kodet som FXML, med koden for å laste den inn og knytte lyttere til textfeltet øverst til venstre.

...

    @Override
    public void start(Stage stage) throws Exception {
        URL resource = getClass().getResource(this.getClass().getSimpleName() + ".fxml");
        Parent root = FXMLLoader.load(resource);

		textField = (TextField) root.lookup("#textField");
        centerText = (Text) root.lookup("#centerText");

		textField.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent arg0) {
                centerText.setText(textField.getText().toUpperCase());
            }
        });
        textField.textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> arg0, String arg1, String arg2) {
                centerText.setText(textField.getText());
            }
        });
        Scene scene = new Scene(root);
    
        stage.setScene(scene);
        stage.setTitle("BorderPaneApplication");
        stage.show();
    }

Innlasting av FXML med FXMLLoader.load-metoden

<?xml version="1.0" encoding="UTF-8"?>
 
<?import java.lang.*?>
<?import javafx.

...

...

scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.textfield.*?>
<?import javafx.scene.shape.*?>
<?import java.lang.Double?>
 
<BorderPane xmlns:fx="http://javafx.com/fxml"
    prefHeight="500" prefWidth="500">
     <top>
         <TextField id="textField" text="center"/>
     </top>
     <center>
         <Pane>
             <Line startX="10" startY="10" endX="100" endY="100">
                 <strokeDashArray>
                     <Double fx:value="10"/>
                     <Double fx:value="10"/>
                 </strokeDashArray>
             </Line>
             <Rectangle x="150" y="10" width="30" height="40" fill="blue"/>
             <Ellipse centerX="40" centerY="180" radiusX="40" radiusY="30" strokeWidth="5" fill="green" stroke="red"/>
            <Text id="centerText" x="180" y="180" text="center">
                <font>
                    <Font name="Times" size="32"/>
                </font>
            </Text>
         </Pane>
     </center>
     
     <left>
         <Text text="left"/>
     </left>
     
     <right>
         <Text text="right"/>
     </right>
     
     <bottom>
         <Text text="bottom"/>
     </bottom>
     
</BorderPane>

...

...