Toggle Theme Editor
Slate Blueberry Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Charcoal

Fxml Model: Model View Controller With S W I N G And J F X - Part 5 -

Discussion in 'Java Update' started by Joe, 28/11/19.

  1. Joe

    Joe Thành viên VIP

    (Continue of Jfx View: Model View Controller With S W I N G And J F X - Part 4 - )

    I've discussed briefly with you about JFX View which is the "engine" to bring up the FXML model for the presentation to the viewers. FXML as you've already learned in previous lessons is a model description in XML similar language: in FXML -the (J)FX Markup Language or in short: FXML.
    The syntax is XML and the language elements base on the names of javaFX components as well as their methods. A brief "adventure" into FXML syntax and format:
    PHP:
    Case sensitive
    +---------------------------------+-------------------------------------+
    !          
    JavaFX                 !                FXML                 !
    +---------------------------------+-------------------------------------+
    AnchorPane                      ! <AnchorPane ......... </AnchorPane> !
    +---------------------------------+-------------------------------------+
    Button                          ! <Button ........................ /> !
    +---------------------------------+-------------------------------------+
    Label                           ! <Label ......................... /> !
    +---------------------------------+-------------------------------------+
    HBox                            ! <HBox ..................... </HBox> !
    +---------------------------------+-------------------------------------+
    ! ...                             ! ...                                 !
    +---------------------------------+-------------------------------------+
    onAction( )                     ! onAction="implemented MethodName"   !
    +---------------------------------+-------------------------------------+
    onMouseClicked( )               ! onMouseClicked="......"             !
    +---------------------------------+-------------------------------------+
    ! ...                             ! ...                                 !
    +---------------------------------+-------------------------------------+
    Each FXML model must base on a certain "pane" (e.g. AnchorPane) with an ID (id="...") and a JFX-Reference (fx:id="..."). Just look at the term fx: then you know where the prefix FX comes from. Example
    PHP:
    <AnchorPane id="AnchorPane" fx:id="root" ... fx:controller="MyController">
    In a FXML model all referenced JavaFX components must be imported as if it was itself a Java Object class. The "import" is XML-Styled. Example
    PHP:
    <?xml version="1.0" encoding="UTF-8"?>
    <?import java
    .net.*?>
    <?import javafx
    .scene.text.*?>
    <?import javafx
    .scene.layout.*?>
    <?import javafx
    .scene.control.*?>
    For the Controller and the View this AnchorPane is instantiated as the root and the controller is derived from the class MyController.

    JavaFX components (e.g. HBox) that contain other JavaFX components must end with </...> (e.g. </Hbox>) otherwise the closing must be /> (e.g. see Button). GUI components like SWING or JFX are usually driven by actions or events which are "injected" directly (non-MVC) or by the Controller (MVC). The action names (such as "onAction") are directly taken over into FXML and assigned in a string (preceded by a hash '#') to indicate what method would be responsible for the action or processing of the event. Example: a click on a button triggers an action implemented by MyController in the method actionMove.
    PHP:
    <Button fx:id="MOVE" onAction="#actionMove" ... />
    The Button MOVE (id) is triggered by the method actionMove implemented in the Controller MyController.

    JFX components and methods which are "IDed" in FXML must be referred in the Controller with the annotation @FXML (case sensitive). Example
    PHP:
    public class MyController  {
        @
    FXML
        Button But
    ;
        ...
     
        @
    FXML
        
    private void actionMove( ) {
          ...
        }
        ...
    }
    With this brief knowledge let's examine the FrameFXML model
    PHP:
    <?xml version="1.0" encoding="UTF-8"?>
    <?import java
    .net.URL?>
    <?import javafx
    .scene.layout.AnchorPane?>
    <?import javafx
    .scene.control.*?>
    <!-- Joe Nartca (C) -->
    <AnchorPane id="AnchorPane" fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity"
              minHeight="-Infinity" minWidth="-Infinity" prefHeight="670.0" prefWidth="380.0"
              xmlns:fx="https://congdongjava.com/forum/" fx:controller="fxmlFrameController">
      <Label fx:id="Lab1" text = "Please click" prefHeight="50.0" prefWidth="100.0"
             layoutX="10" layoutY="5" />
      <Button fx:id="But1" onAction="#click" text="JFXButton" prefHeight="50.0" prefWidth="100.0"
             layoutX="90" layoutY="5" />
      <Label fx:id="Lab2" text = "Name:" prefHeight="30.0" prefWidth="100.0"
             layoutX="10" layoutY="65" />
      <TextField fx:id="TxtF1" prefWidth="250" prefHeight="30.0" onAction="#read"
             layoutX="90" layoutY="65" />
      <Label text = "This is an IT man in Background" prefHeight="14.0" prefWidth="200.0"
             layoutX="56" layoutY="195" />
      <Label fx:id="Lab4" text = "ReportArea" prefHeight="14.0" prefWidth="100.0"
             layoutX="150" layoutY="460" />
      <TextArea fx:id="TxtA1" prefHeight="165.0" prefWidth="350.0"
             layoutX="15" layoutY="490" />
           
       <stylesheets>
           <URL value="@frame.css" />
       </stylesheets>
     
    </AnchorPane>
    Explanation:
    - import java.net.URL is for the <URL value="@frame.css" />
    - import javafx.scene.layout.AnchorPane is self-explained.
    - import javafx.scene.control.* is for Label, Button, TextField and TextArea
    - the rest is more or less self-explained. Example: maxWidth, prefWidth (pref(erred)Width). More? Read this Introduction to FXML (JFX 12).

    There are many ways to build a FXML model. Either they are built on the "stencils" like VBox, HBox, TabbedPane, etc. The "stencils" allow JavaFX components to be "glued" together in a group. For example: the HBox groups the JFX items horizontally while the VBox does that vertically. The very same FrameFXML model with HBox for Label and Button
    PHP:
    <?xml version="1.0" encoding="UTF-8"?>
    <?import java
    .net.*?>
    <?import javafx
    .scene.layout.*?>
    <?import javafx
    .scene.control.*?>
    <!-- Joe Nartca (C) -->
    <AnchorPane id="AnchorPane" fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity"
              minHeight="-Infinity" minWidth="-Infinity" prefHeight="670.0" prefWidth="380.0"
              xmlns:fx="https://congdongjava.com/forum/" fx:controller="fxmlFrameController">
    <!-- with HBox  -->
      <HBox  layoutX="10" layoutY="5"  prefHeight="200.0" prefWidth="380.0">
        <Label fx:id="Lab1" text = "Please click" prefHeight="50.0" prefWidth="100.0" />
        <Button fx:id="But1" onAction="#click" text="JFXButton" prefHeight="50.0" prefWidth="100.0" />
      </HBox>
    <!-- Commentized
      <Label fx:id="Lab1" text = "Please click" prefHeight="50.0" prefWidth="100.0"
             layoutX="10" layoutY="5" />
      <Button fx:id="But1" onAction="#click" text="JFXButton" prefHeight="50.0" prefWidth="100.0"
             layoutX="90" layoutY="5" />
    -->
      <Label fx:id="Lab2" text = "Name:" prefHeight="30.0" prefWidth="100.0"
             layoutX="10" layoutY="65" />
      <TextField fx:id="TxtF1" prefWidth="250" prefHeight="30.0" onAction="#read"
             layoutX="90" layoutY="65" />
      <Label text = "This is an IT man in Background" prefHeight="14.0" prefWidth="200.0"
             layoutX="56" layoutY="195" />
      <Label fx:id="Lab4" text = "ReportArea" prefHeight="14.0" prefWidth="100.0"
             layoutX="150" layoutY="460" />
      <TextArea fx:id="TxtA1" prefHeight="165.0" prefWidth="350.0"
             layoutX="15" layoutY="490" />
           
       <stylesheets>
           <URL value="@frame.css" />
       </stylesheets>
     
    </AnchorPane>
    I prefer the free style which gives me the freedom to position JFX components exactly where I want. They are the two keywords layoutX="xxx.x" and layoutY="yyy.y" give the relative locations of the components relating to the bearing pane (e.g. AnchorPane). The reason is simple: More "stencils" mean "more" overheads which have to be instantiated and that slowdowns the startup phase. Longer waiting time for the users.

    With the Cascading Style Sheets (CSS) you can decorate your JFX-MVC with fancy things like fantastic Shadowing, 3-dimensional button, etc. It's relatively simple to work with CSS. Example
    [​IMG]
    (Source: Skinning JavaFX Applications with CSS)

    There are some simple rules you need only to know:
    - the prefix -fx- indicates the (J)FX related method or component.
    - CSS block always starts with a dot, then the reference and then with the open curly bracket ({). It ends with the closed curly bracket (})
    - reserved words (e.g. -fx-text-alignment) can be taken from HERE
    Example
    PHP:
    .root {
        -
    fx-background-image:url("file:/C:/links/java/mvc/AIman.jpg");
        -
    fx-background-repeatstretch;
        -
    fx-background-positioncenter center;
    }
    .
    button {
    /*  -fx-background-color: yellow; */
        
    -fx-effectdropshadow(three-pass-boxrgba(0,0,0,0.6), 50.0 );
    }
    .
    text-field {
        -
    fx-background-coloryellow;
        -
    fx-effectdropshadow(three-pass-boxrgba(0,0,0,0.6), 50.0 );
    }
    Explanation
    - .root refers to the main pane (e.g. AnchorPane, VBox, etc.) for the "scene"
    - -fx-background-XYZ refers to the JFX component Background and "XYZ" the methods or the JFX constants (e.g. image, repeat from BackgroundImage, BackgroundRepeat, etc.)
    - the same for .button and .text-field

    And the view is on the right side of this picture
    [​IMG]

    (Next: Last Part: JFX Controller)
     

Chia sẻ trang này

Loading...