javaFx 教程 二

简介: javaFx 教程

上一篇讲了 javafx的入门,使用SceneBuilder 快速创建一个gui。

这一次讲下一些组件的功能,如画板,按钮,文本框之类的。

javafx的组件很多,本人也只学习了常用的组件,会陆续写几篇教程 用来学习工具开发。

涉及到一些组件 下面的文章都是采用代码来编写,所以需要有基础的功底。

布局类型

打开SceneBuilder  Containers 会看到有很多的单词 每个单词代表一种布局样式

每个单词前面都有个图形,那个图像就是他的布局样式

BorderPane布局

这种布局呢 会分为五个区域 上下左右中 在代码里分别对应五个方法

640.png640.png

Hbox 布局

他是一直水平布局 把多个组件 水平放在一起 对应的就是垂直布局

它有两种添加组件的方法

hBox.getChildren().add();     // 添加一个组件 
hBox.getChildren().addall();  // 添加全部组件

标签

// 注意别导错包   
import javafx.scene.control.Label;
Label label = new Label();

使用所有的组件 前提条件就是要创建一个布局,布局就像是一个桌子,组件就像是桌子上的物品,现有前者,后有后者。

示例代码

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class demo1 extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane root = new BorderPane();
        // 创建一个标签
        Label label = new Label("我是标签");
        // 把标签 放到bp布局的中间位置
        root.setCenter(label);
        primaryStage.setTitle("demo");
        primaryStage.setScene(new Scene(root,400,300));
        primaryStage.show();
    }
}

640.png

按钮

import javafx.scene.control.Button;
Button button = new Button();

示例代码

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class demo1 extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane root = new BorderPane();
        // 创建一个按钮
        Button button = new Button("别碰我");
        root.setCenter(button);
        primaryStage.setTitle("demo");
        primaryStage.setScene(new Scene(root,400,300));
        primaryStage.show();
    }
}

创建了按钮,该如何使用。比如 我打开微信要发个语言,我的步骤就是 点击语音,然后录取我的声音,松开发送给对方。

此时 在java中也可以进行。只需要给按钮设置一个监听器,当你点击我,我就去执行某个动作。

所有的组件 添加监听器都是下面的那个方法。

setOnAction();
这是一个添加的功能 在方法体里,设置一个匿名内部类,对里面的方法进行重写
button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
               // code
               // 这里就是写执行动作的代码
            }
        });

设置需求,当我点击按钮,给我弹出一个信息。

示例代码

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class demo1 extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane root = new BorderPane();
        // 创建一个按钮
        Button button = new Button("别碰我");
        button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                button.setText("你是大傻叉");
            }
        });
        root.setCenter(button);
        primaryStage.setTitle("demo");
        primaryStage.setScene(new Scene(root,400,300));
        primaryStage.show();
    }
}

点击前

点击后

640.png

单行文本

import javafx.scene.control.TextField;
TextField textField = new TextField();

示例代码

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class demo1 extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane root = new BorderPane();
        TextField textField = new TextField();
        root.setCenter(textField);
        primaryStage.setTitle("demo");
        primaryStage.setScene(new Scene(root,400,300));
        primaryStage.show();
    }
}

多行文本

import javafx.scene.control.TextArea;
TextArea textArea = new TextArea();

示例代码

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class demo1 extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane root = new BorderPane();
        TextArea textArea = new TextArea();
        root.setCenter(textArea);
        primaryStage.setTitle("demo");
        primaryStage.setScene(new Scene(root,400,300));
        primaryStage.show();
    }
}

上面两种文本都可以添加监听器,后面文章会有案例

图片

针对图片,可以加载本地的,资源文件,远程文件

图片主要有两个方法来显示

Image       加载图片
ImageView   显示图片
Image image = new Image("http://xxx.xxx.xxx.xxx/1.jpeg");
ImageView imv = new ImageView(image);

示例代码

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class Test extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        // 面板
        BorderPane bp = new BorderPane();
        // 加载图片 资源/本地/网络皆可
        Image image = new Image("http://xxx.xxx.xxx.xxx/1.jpeg");
        // 本地图片
        // Image image = new Image("file:c:/1.jpg");
        // 资源图片
        // Image image = new Image("sample/1.jpg");
        // 展示图片
        ImageView imageView = new ImageView(image);
        // 图片添加到画板
        bp.setCenter(imageView);
        // 获取图片大小 自适应画板
        double h = image.getHeight();
        double w = image.getWidth();
        primaryStage.setTitle("demo");
        primaryStage.setScene(new Scene(bp,w,h));
        primaryStage.show();
    }
}

上面的演示都是以BorderPane ,下面有个案例使用hbox来展示。

案例1

package sample;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
public class demo1 extends Application{
    @Override
    public void start(Stage primaryStage) throws Exception {
        HBox hb = new HBox();
        // 水平居中
        hb.setAlignment(Pos.CENTER);
        // 内边距
        hb.setPadding(new Insets(20));
        TextField tf = new TextField();
        Button select = new Button("浏览文件");
        Button upload = new Button("上传文件");
        // 自动占满 水平方向
        HBox.setHgrow(tf, Priority.ALWAYS);
        // 全部添加布局
        hb.getChildren().addAll(tf,select,upload);
        primaryStage.setTitle("Hbox布局");
        primaryStage.setScene(new Scene(hb,500,50));
        primaryStage.show();
    }
}

控件的尺寸

setPrefWidth(); 水平方向设置宽度
setMaxHeight(); 垂直方向设置高度
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
public class demo1 extends Application{
    @Override
    public void start(Stage primaryStage) throws Exception {
        HBox hb = new HBox();
        Button b1 = new Button("aaa");
        Button b2 = new Button("aaabbb");
        Button b3 = new Button("aaabbbccc");
        // 控件大小 
        b1.setPrefWidth(100);
        b2.setMaxHeight(50);
        hb.getChildren().addAll(b1,b2,b3);
        primaryStage.setTitle("Hbox布局");
        primaryStage.setScene(new Scene(hb,500,50));
        primaryStage.show();
    }
}

这是默认大小的按钮

640.png

这是上面代码调整的

640.png

布局嵌套

使用多个布局类型 进行嵌套

需求:

使用hbox布局和BorderPane布局

hbox布局 里存在文本行,一个按钮 添加监听 添加我写的数据到文本区

BorderPane布局 存在文本区

    package sample;
    import javafx.application.Application;
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.control.TextArea;
    import javafx.scene.control.TextField;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.HBox;
    import javafx.scene.layout.Priority;
    import javafx.stage.Stage;
    public class Demo extends Application {
        @Override
        public void start(Stage primaryStage) throws Exception {
            // 创建盒子
            HBox hBox = new HBox();
            // 盒子里存放两个控件 文本行和按钮
            TextField textField = new TextField();
            Button button = new Button("添加");
            TextArea textArea = new TextArea();
            // 添加组件
            hBox.getChildren().addAll(textField,button);
            // 让文本框占满水平方向的长度
            HBox.setHgrow(textField, Priority.ALWAYS);
            // 在bp添加hbox盒子
            BorderPane bp = new BorderPane();
            bp.setTop(hBox);
            bp.setCenter(textArea);
            // 按钮添加监听
            button.setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent event) {
                    // 获取文本行的内容发送给文本区里
                    String text = textField.getText();
                    textArea.appendText(text+"\n");
                }
            });
            primaryStage.setScene(new Scene(bp,400,300));
            primaryStage.show();
        }
    }

    640.png

    案例2:命令执行

      package sample;
      import javafx.application.Application;
      import javafx.event.ActionEvent;
      import javafx.event.EventHandler;
      import javafx.scene.Scene;
      import javafx.scene.control.Button;
      import javafx.scene.control.TextArea;
      import javafx.scene.control.TextField;
      import javafx.scene.layout.BorderPane;
      import javafx.scene.layout.HBox;
      import javafx.scene.layout.Priority;
      import javafx.stage.Stage;
      import java.io.BufferedReader;
      import java.io.InputStreamReader;
      public class DemoCmd extends Application {
          @Override
          public void start(Stage primaryStage) throws Exception {
              // 在hbox里添加上按钮 文本行 
              HBox hBox = new HBox();
              TextField textField = new TextField();
              Button b1 = new Button("执行");
              Button b2 = new Button("清空");
              // 文本区
              TextArea textArea = new TextArea();
              hBox.getChildren().addAll(textField,b1,b2);
              HBox.setHgrow(textField, Priority.ALWAYS);
              // 按钮监听
              b1.setOnAction(new EventHandler<ActionEvent>() {
                  @Override
                  public void handle(ActionEvent event) {
                      // 获取文本行里的命令
                      String text = textField.getText();
                      // 创建字符缓冲流 在内存里读写数据 然后发送数据到文本区
                      StringBuilder stringBuilder = new StringBuilder();
                      Process process = null;
                      try {
                          process = Runtime.getRuntime().exec(text);
                          BufferedReader bufferedReader = new BufferedReader(
                                  new InputStreamReader(process.getInputStream(), "GBK"));
                          String line = null;
                          while((line=bufferedReader.readLine()) != null) {
                              stringBuilder.append(line+"\n");
                          }
                          textArea.setText(stringBuilder.toString());
                      } catch (Exception e) {
                          e.printStackTrace();
                      }
                  }
              });
              b2.setOnAction(new EventHandler<ActionEvent>() {
                  @Override
                  public void handle(ActionEvent event) {
                      // 清空数据的动作
                      textField.clear();
                      textArea.clear();
                  }
              });
              // 添加布局
              BorderPane root =new BorderPane();
              root.setTop(hBox);
              root.setCenter(textArea);
              primaryStage.setTitle("命令执行");
              primaryStage.setScene(new Scene(root,500,400));
              primaryStage.show();
          }


      相关文章
      |
      3月前
      |
      XML IDE Java
      JavaFX 教程
      JavaFX 教程
      104 1
      QGS
      |
      4月前
      |
      容器
      JavaFX场景入门(下)
      JavaFX场景入门
      QGS
      55 0
      QGS
      |
      4月前
      |
      Android开发
      JavaFX场景入门(上)
      JavaFX场景入门
      QGS
      76 0
      |
      安全 Java
      javaFx 安全开发 三
      javaFx 安全开发
      |
      IDE Java 开发工具
      QGS
      |
      Java
      JAVAFX+SceneBuilder基础入门
      环境:JDK1.8+IDEA fxml载入项目 通过SceneBuilder编写好布局,生成fxml文件。
      QGS
      172 0
      QGS
      JAVAFX+SceneBuilder基础
      记JAVAFX+SceneBuilder基础
      QGS
      116 0
      JAVAFX+SceneBuilder基础
      |
      Java Maven 图形学
      JavaFx教程(一) 基本概念
      JavaFx教程(一) 基本概念
      JavaFx教程(一) 基本概念
      |
      Web App开发 前端开发 JavaScript
      JavaFX——(第一篇:介绍篇)
      什么是JavaFX JavaFx平台是一个富客户端平台解决方案,它能够使用应用程序开发人员轻松的创建跨平台的富客户端应用程序。它构建在Java技术的基础之上,JavaFX平台提供了一组丰富的图形和媒体API与高性能硬件加速图形和媒体引擎,简化开发数据驱动的企业客户端应用程序。
      1779 0