zoukankan      html  css  js  c++  java
  • FXML Stuffs (include and define)

    FXML Stuffs (include and define)
    Hello folks,
    Today I would like to blog about the FXML define and include tag which can be very useful for those who are very keen to use FXML in their application. The FXML is an XML file which is loaded by javafx using FXMLLoader . It’s all loaded at the runtime and it’s really fast to load and easy to learn too. The previous blog about the FXML as Flexible XML is just a basic about FXML . Today in this blog here you will learn about how to include FXML files in your main FXML file.
    I’m talking about the <fx:include> tag of the FXML.
    Let’s see the basic flow of how the <fx:include> are loaded. Let’s assume there are two FXML Main.fxml and Child.fxml

                                                        
     

                                                                                                                                                                                                                                                                                       

    01 <?xml version="1.0" encoding="UTF-8"?>
    02  
    03 <?import java.lang.*?>
    04 <?import javafx.scene.*?>
    05 <?import javafx.scene.control.*?>
    06 <?import javafx.scene.layout.*?>
    07 <?import javafx.scene.shape.*?>
    08 <?import javafx.scene.effect.*?>
    09 <?import fxmlstuff.Main?>
    10  
    11 <Main xmlns:fx="http://javafx.com/fxml" fx:controller="fxmlstuff.Main" >
    12     <fx:define>
    13         <fx:include source="Home.fxml" fx:id="homeContent" />
    14         <fx:include source="About.fxml" fx:id="aboutContent" />
    15  
    16    </fx:define>
    17     <center>
    18         <TabPane fx:id="tabpane" translateY="5" translateX="5"  >
    19             <tabs>
    20                 <Tab text="HOME" fx:id="homeTab" content="$homeContent" closable="false" />
    21                 <Tab text="ABOUT" fx:id="aboutTab" content="$aboutContent" closable="false"/>
    22             </tabs>
    23         </TabPane>
    24     </center>
    25 </Main>

    You can see the highlighted lines of which helps to load the content of Home.fxml and About.fxml in the Main.fxml . Also we ‘ve added fx:id property for making instances            available of Home and About class. Now let’s see the FXController class of Main.fxml                                                                                  

    01 package fxmlstuff;
    02  
    03 import java.net.URL;
    04 import java.util.ResourceBundle;
    05 import javafx.fxml.FXML;
    06 import javafx.fxml.Initializable;
    07 import javafx.scene.layout.BorderPane;
    08  
    09 /**
    10  * @author Narayan
    11  */
    12  
    13 public class Main extends BorderPane implements Initializable{
    14  
    15     @FXML
    16     private Home homeContent;
    17     @FXML
    18     private About aboutContent;
    19  
    20     @Override
    21     public void initialize(URL url, ResourceBundle rb) {
    22     }
    23 }

                                                                                                                                                                                                                                                                                       

    Here in the above image you can see the Child.fxml is called inside Main.fxml embeded by <fx:define> Now you need to know that the <fx:define> are used for defining any variables or any instances inside FXML.
    Let’s see things in real . We are going to make one simple Tab based application which simply get’s it’s tab content from different FXML files. Firstly we’ll make Main.fxml which contains the TabPane.
    Main.fxml

    <?xml version="1.0" encoding="UTF-8"?>
    
    <?import java.lang.*?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.layout.*?>
    <?import javafx.scene.shape.*?>
    <?import javafx.scene.effect.*?>
    <?import fxmlstuff.Main?>
    
    <Main xmlns:fx="http://javafx.com/fxml" fx:controller="fxmlstuff.Main" >
        <fx:define>
            <fx:include source="Home.fxml" fx:id="homeContent" />
            <fx:include source="About.fxml" fx:id="aboutContent" />
    
       </fx:define>
        <center>
            <TabPane fx:id="tabpane" translateY="5" translateX="5"  >
                <tabs>
                    <Tab text="HOME" fx:id="homeTab" content="$homeContent" closable="false" />
                    <Tab text="ABOUT" fx:id="aboutTab" content="$aboutContent" closable="false"/>
                </tabs>
            </TabPane>
        </center>
    </Main>
    


    You can see the highlighted lines of which helps to load the content of Home.fxml and About.fxml in the Main.fxml . Also we ‘ve added fx:id property for making instances available of Home and About class. Now let’s see the FXController class of Main.fxml

    package fxmlstuff;
    
    import java.net.URL;
    import java.util.ResourceBundle;
    import javafx.fxml.FXML;
    import javafx.fxml.Initializable;
    import javafx.scene.layout.BorderPane;
    
    /**
     * @author Narayan
     */
    
    public class Main extends BorderPane implements Initializable{
    
        @FXML
        private Home homeContent;
        @FXML
        private About aboutContent;
    
        @Override
        public void initialize(URL url, ResourceBundle rb) {
        }
    }


    Here in the controller we have just made the instance of Home and About class with respective to their fx:id
    Home.fxml

    <?xml version="1.0" encoding="UTF-8"?>
    
    <?import java.lang.*?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.layout.*?>
    <?import fxmlstuff.Home?>
    <Home id="homeContent" xmlns:fx="http://javafx.com/fxml"
            spacing="10" translateY="40" translateX="20" fx:controller="fxmlstuff.Home" >
        <children>
            <Label text="Add New Dock of Home" />
            <Button text="Add !" onAction="#handleAction" />
        </children>
    </Home>


     
     
    Home.java

    package fxmlstuff;
    
    import java.net.URL;
    import java.util.ResourceBundle;
    import javafx.event.ActionEvent;
    import javafx.fxml.FXML;
    import javafx.fxml.Initializable;
    import javafx.scene.layout.VBox;
    
    /**
     * @author Narayan
     */
    public class Home extends VBox implements Initializable{
    
        @FXML
        private void handleAction(ActionEvent event) {
        }
    
        @Override
        public void initialize(URL url, ResourceBundle rb) {
        }
    
    }
    


     
    About.fxml

    <?xml version="1.0" encoding="UTF-8"?>
    
    <?import java.lang.*?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.layout.*?>
    <?import fxmlstuff.About?>
    <About id="aboutContent" xmlns:fx="http://javafx.com/fxml"
        spacing="10" translateY="40" translateX="20" fx:controller="fxmlstuff.About">
        <children>
            <Label text="Add New Dock of About" />
            <Button text="Add !" onAction="#handleButtonAction"  />
        </children>
    </About>


     
    About.java

    package fxmlstuff;
    
    import java.net.URL;
    import java.util.ResourceBundle;
    import javafx.event.ActionEvent;
    import javafx.fxml.FXML;
    import javafx.fxml.Initializable;
    import javafx.scene.layout.VBox;
    
    /**
     * @author Narayan
     */
    public class About extends VBox implements Initializable {
    
        @FXML
        private void handleButtonAction(ActionEvent event) {
        }    
    
        @Override
        public void initialize(URL url, ResourceBundle rb) {
        }    
    
    }


    Now you have finally finished the FXML stuffs of adding components inside the FXML. You can now just create one FXML Executor class which helps to execute and load your FXML using FXMLLoader.load() . I’m going to use the FXMLTest class as the executor of the FXML files in Stage.
     
    FXMLTest.java

    package fxmlstuff;
    
    import javafx.application.Application;
    import javafx.fxml.FXMLLoader;
    import javafx.scene.Parent;
    import javafx.scene.Scene;
    import javafx.stage.Stage;
    
    /**
     *
     * @author Narayan
     */
    public class FXMLTest extends Application{
    
       public static void main(String[] args) {
            Application.launch(args);
        }
    
        @Override
        public void start(Stage stage) throws Exception {
            Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));
            Scene scene = new Scene(root,800,600);
            stage.setTitle("FXML Test");
            stage.setScene(scene);
            stage.show();
        }
    }

    The preview of this javafx class will be something like this.

       

    The continue of this blog will be posted in coming week. The next blog post will contain the extended part of this application where you can take control over the event triggered from About.fxml and Home.fxml FXML component to the Main fxml.
    That’s it for today. You can now easily include the fxml file inside the FXML file using things like this.
    Have a :)   good day and fell free on commenting your views about this post.
    Thanks

  • 相关阅读:
    WIN32程序挂钩SetLastError,输出错误描述到控制台
    设置c#windows服务描述及允许服务与桌面交互的几种方法(作者博客还有一大堆C#创建服务的文章)
    VC内存溢出一例 –- 调用约定不一致 (_CRT_DEBUGGER_HOOK(_CRT_DEBUGGER_GSFAILURE)
    QtWaitingSpinner
    美国独立战争真相:英法全球争霸战之北美战场
    asp.net的ajax以及json
    HashTable和HashSet中的类型陷阱
    C语言的一些常见细节
    堆排序详解
    Core Animation编程指南
  • 原文地址:https://www.cnblogs.com/xiaoliu66007/p/3287320.html
Copyright © 2011-2022 走看看