javaFX制作helloWorld的几种方式
//起因:因为即便是使用了JavaFX Scene Builder来直接图形化排版,但是仍然对应javaAPI,了解整体结构还是很有必要的,这是有清晰逻辑的基础。
environment:{
Spring Tool Suite
Version: 3.8.4.RELEASE
Build Id: 201703310825
Platform: Eclipse Neon.3 (4.6.3)
}
- way1:File->New->Project->JavaFX->JavaFX Project->(输入你的工程名)->finish
- 运行一下->得到一个空窗口->打开src/application/Main.java:{继承了Application,重写了start(Stage)方法{说下结构-}}
- primaryStage为主窗体-----类似swing里的JFrame
- Scene为场景-------需要添加一个布局面板,像一张铺平在桌面上的布,但不能直接放东西,需要布局来规范东西放置方式
- root-------------为布局--layout---绑定在场景上,
- 添加子空间,在fx里是以节点的方式添加的,如果你学过树结构,就是那样的,所以得使用root.getChildren得到列表。
- 还有就是添加控件必须在使用布局面板生成场景前
- 场景绑定在舞台上---显示舞台就出来效果了
- 怎么启动?main方法里的launch方法是Application的静态方法,来继承实现了Application的类
- 默认写的layout是BorderPane但是刚学不会加,改成了FlowPane...
-
1 package application; 2 3 import javax.swing.JOptionPane; 4 import javafx.application.Application; 5 //import javafx.event.ActionEvent; 6 import javafx.stage.Stage; 7 import javafx.scene.Scene; 8 //import javafx.scene.control.Alert; 9 //import javafx.scene.control.Alert.AlertType; 10 import javafx.scene.control.Button; 11 //import javafx.scene.control.Dialog; 12 //import javafx.scene.layout.BorderPane; 13 import javafx.scene.layout.FlowPane; 14 public class Main extends Application { 15 @Override 16 public void start(Stage primaryStage) { 17 try { 18 FlowPane root = new FlowPane(); 19 //-----------------test-----------------add----------( 20 Button button = new Button("hello JavaFX"); 21 root.getChildren().add(button); 22 button.setOnAction((event)->{//lambda表达式 23 //不会用FX的弹出对话框 24 JOptionPane.showMessageDialog(null, "Hello JavaFX"); 25 }); 26 //-----------------test-----------------add----------) 27 Scene scene = new Scene(root,400,400); 28 scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm()); 29 primaryStage.setScene(scene); 30 primaryStage.show(); 31 } catch(Exception e) { 32 e.printStackTrace(); 33 } 34 } 35 36 public static void main(String[] args) { 37 launch(args); 38 39 } 40 }
2.way2:way1不要直接Finish,next到最后,Declarative UI->language:FXML
- 从Main.java的start(Stage)中可以看出,布局面板是通过加载Sample.fxml得到,就可以通过修改.fxml来更改布局
- Main.java:
1 package application; 2 3 import javafx.application.Application; 4 import javafx.stage.Stage; 5 import javafx.scene.Scene; 6 import javafx.scene.layout.FlowPane; 7 import javafx.fxml.FXMLLoader; 8 9 10 public class Main extends Application { 11 @Override 12 public void start(Stage primaryStage) { 13 try { 14 FlowPane root = (FlowPane)FXMLLoader.load(getClass().getResource("Sample.fxml")); 15 Scene scene = new Scene(root,400,400); 16 scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm()); 17 primaryStage.setScene(scene); 18 primaryStage.show(); 19 } catch(Exception e) { 20 e.printStackTrace(); 21 } 22 } 23 24 public static void main(String[] args) { 25 launch(args); 26 } 27 }
- 文件介绍下,SampleControllerjava用编辑事件响应的,在.fxml中注册了
- Sample.fxml布局文件----
- application.css---样式文件,,学过html就知道了
- 用JavaFX Scene Builder打开.fxml文件,方法:在文件上右键->Open With SceneBuilder---
- 没有的参考--百度安装并配置-----
- 选中左侧:hierarchy(分层)->FlowPane(新建工程可以自己选),中间视图就会出现标识--拖动得到基本白板,这就是框图,左边控件库查找--Label--拖动到白板上
- 右侧出现该控件的设置项,在控件过多,层数繁杂时,在白板上就不好选了,在左侧hierarchy里选就行
- 说下右侧基本设置项分类:properties(属性),layout(布局),code:设置各个事件响应函数,
- 实现SampleController.java和.fxml文件融合吧,.java文件需要实现Initializable接口,initialize重写(只是显示出来,不要添加东西),对.fxml中的外层标签添加fx:contoller=""这个参数,字符串为.java名的可行的路径,这样他们知道对方的存在
- 在SampleController.java如何定位.fxml定义的控件,需要对要定位的控件的fx:id=""赋值,不是id,然后在.java文件直接声明相应类型,名字与fx:id相同,就定位到了.fxml中控件,直接使用,因为.fxml文件已经帮你做好初始化操作了。
- 定义响应方法,在SampleController.java中直接定义合乎规范的事件处理方法(不知道可以参照直接用java代码写的那个),使方法与控件绑定,方法一,在.fxml里直接添加事件名=“”,字符串中定位需要使用#在前,方法二,在JavaFX Scene Builder可以选。
- Main.java:
1 package application; 2 3 import javafx.application.Application; 4 import javafx.stage.Stage; 5 import javafx.scene.Scene; 6 import javafx.scene.layout.FlowPane; 7 import javafx.fxml.FXMLLoader; 8 9 10 public class Main extends Application { 11 @Override 12 public void start(Stage primaryStage) { 13 try { 14 FlowPane root = (FlowPane)FXMLLoader.load(getClass().getResource("Sample.fxml")); 15 Scene scene = new Scene(root,400,400); 16 scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm()); 17 primaryStage.setScene(scene); 18 primaryStage.show(); 19 } catch(Exception e) { 20 e.printStackTrace(); 21 } 22 } 23 24 public static void main(String[] args) { 25 launch(args); 26 } 27 }
SampleController.java:
1 package application; 2 3 import java.net.URL; 4 import java.util.ResourceBundle; 5 6 import javafx.event.ActionEvent; 7 import javafx.fxml.FXML; 8 import javafx.fxml.Initializable; 9 //import javafx.scene.control.Button; 10 import javafx.scene.control.Label; 11 12 public class SampleController implements Initializable { 13 @FXML 14 private Label show_text; 15 @Override 16 public void initialize(URL location, ResourceBundle resources) { 17 // TODO Auto-generated method stub 18 19 } 20 public void showText(ActionEvent actionEvent){ 21 show_text.setText("你点了按钮"); 22 System.out.println("console"); 23 } 24 }
Sample.fxml:
-
1 <?xml version="1.0" encoding="UTF-8"?> 2 3 <?import javafx.scene.control.*?> 4 <?import java.lang.*?> 5 <?import javafx.scene.layout.*?> 6 <?import javafx.scene.layout.FlowPane?> 7 8 <FlowPane prefHeight="497.0" prefWidth="564.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" 9 fx:controller="application.SampleController"> 10 <children> 11 <Label fx:id="show_text" text="我是一个标签" /> 12 <Button id="btn1" mnemonicParsing="false" onAction="#showText" text="如何设置设置事件处理" /> 13 </children> 14 </FlowPane>
还有一种.fxgraph的,,,,待定--------