Java实战之简易计算器（4）——实现主界面

在IDEA中使用SceneBuilder打开fxml文件进行编辑。

 

第一次打开只有一个空的GridPane面板，没有任何其他内容。

 

接下来将拖拉右边的组件构建页面。

 

第一步：拖拉一个垂直容器VBox

 

第二步：设置各种组件的属性

 

第三步：整个界面设计的结构如下：

 

第四步：在Properties面板设置组件的基本属性

 

第五步：设置组件的布局

 

第六步：设置标识id和事件方法

 

如上面的文本框的fx:id为resultTextField。

如按钮的点击事件方法moduleButtonEvent

 

解释说明：

• id是在Controller中属性的组件名，即为实例化的组件对象。

• 而On Action名即为按钮的点击事件方法名，也在Controller中使用。

 

第六步：获取组件的属性和事件方法

 

第七步：覆盖Controller内容。

点击Copy按钮复制面板内容，然后覆盖Controller.java内容即可。

也会发现sample.fxml的内容变了

 

第八步：点击运行程序

运行界面如上所示，但是会发现界面很小，而且内容没有显示完全。

那么就需要修改一些设置了。

打开Main.java将内容改成如下：

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        // 加载界面资源文件
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        // 设置标题
        primaryStage.setTitle("计算器");
        // 设置场景到主舞台，场景的高度和宽度
        primaryStage.setScene(new Scene(root, 600, 630));
        // 展示舞台
        primaryStage.show();
    }


    public static void main(String[] args) {
        // 运行程序
        launch(args);
    }
}

再次运行程序，效果图展示如下：

JavaFX完成的界面比swing要美观得多，而且更容易完成，省了不少时间。

 

可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

注意：在公众号后台回复【20191017】可获取本节源码。