fxml入门 2018.05.15

JavaFX之FXML入门

---

IDE：Mac下的Eclipse

笔者是在有JavaFX开发小游戏的经验，以及对于HTML有一定了解的基础上学习的FXML。
在笔者最开始学习FXML的时候确实是一头雾水。
FXML，它是一种基于XML的语言，它提供了构建与代码应用程序逻辑分离的用户界面的结构。

下面是我自己的理解：

也就是说，原来在用JavaFX开发小游戏或者小动画的时候，我们需要使用各种各样的Pane啊以及可被其包括的结点（比如button）类。而FXML这种标记语言，可以单独书写并控制界面的结构。
这一点有点类似HTML，用它大概写出网页的结构，然后用CSS来修饰。
FXML也可以用CSS来修饰！！

---

1.第一步，导入jar包

当然了，首先你得导入关于FXML的包，否则你就无法使用FXML。

打开你的eclipse，在Help中选择“Install new SoftWare”
-->
在Work With中选择网址，选择带你所用的版本号的网址（例如笔者使用的是Neon，则选择的网址是“Neon-XXXXXXXXXXXXXXXXXXXX”）
-->
然后在底下的搜索栏中输入“e(fx)clipse”，之后就选择下载了。
当然了，你可以参考JavaFX安装e(fx)clipse。

首先明确思路：fxml文件确定布局，.java文件来作为loader，同时需要一个conroller类来处理fxml中结点的行为。
注：本文的三个代码样例没有直接关系

2.创建一个.java的loader

例如：
public void start(Stage stage) throws Exception {
       //这里就是链接fxml文件的地方
       Parent root = FXMLLoader.load(getClass().getResource("fxml_example.fxml"));
    
        Scene scene = new Scene(root, 300, 275);
    
        stage.setTitle("FXML Welcome");
        stage.setScene(scene);
        stage.show();
    }

3.创建一个fxml文件

//例子：一个fxml文件大概长下面这个样子，非常像html文件。一个pane套着其它的结点
  
  
  
  
  
  
  
  
  
     
        
        
           
              
                
                    
                
              
           
       
     
  

4.创建一个Controller

Controller 是用来处理fxml文件中的一些结点的行为，比如按钮被按下啊之类的。@FXML注释用于标记非公开控制器成员字段和处理程序方法以供FXML标记使用，所以不能丢。

例如：
public class FXMLExampleController {
    @FXML private Text actiontarget;
    
    @FXML protected void handleSubmitButtonAction(ActionEvent event) {
        actiontarget.setText("Sign in button pressed");
    }

}

5.完整例子参考

用JavaFX创建一个用户登录框

PS：若不用fxml来创建界面，直接使用Pane等类在.java文件中创建界面的话，也可以用CSS来修饰界面。

public void start(Stage primaryStage) {
        Scene scene = new Scene(getPane(),900,556);
        
        //这段代码将.css文件链接到了这个场景里面，以此来对场景的布局进行改变
        scene.getStylesheets().add(getClass().getResource("Main UI.css").toExternalForm());
        
        //这一段代码是从谷歌字体库中获得特殊的字体，在html+css中也有相应的获取本地没有的字体的方法
        scene.getStylesheets().add("http://fonts.font.im/css?family=Shadows+Into+Light");
        primaryStage.setTitle("星座配对");
        primaryStage.setScene(scene);
        primaryStage.show();
    }