Page History

...

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>

...

...