本章内容为javafx gui教程的第一节,会陆续更新文章。
序言
先大致说下 java gui的历史发展吧
在jdk 1.0的时候 sun公司提供了gui类,也就是awt 到现在有十多年的历史了,也是很老的技术,随后又出了 swing 技术,awt 和 swing 的方法 都可以混合使用。
使用两个技术开发一个图形化的工具 也不是很难,主要是拼接 一些组件,如按钮,文本,下拉框等等。但如果开发一款比较美观的界面,需要设置一些数值,如大小,x,y 距离,组件都是方形,稍微圆角处理就不支持,或者自己写一个方法。难度稍微大。
前后走了坑,先学的 awt 学到了一般有了解了swing,又学到了一半,又发现了javafx技术。学了半个月 (好气啊) 技术比较老了,在学也用不到,毕竟学学gui ,开发个小工具也能提升技能,找工作也会加分。
javafx 就比较牛逼了,组件自带圆角,感觉界面瞬间提升了一个档次。
javafx 不需要写很多的代码,会有一个特定的文件 直接拖组件 就可以完成框架,自己再写点逻辑代码就可以了。
javafx 在jdk8里默认自带了,如果是高版本的 需要去官网额外下载依赖。
在开发工具之前,需要有一些环境
jdk 1.8 编辑器(IDEA) SceneBuilder https://www.oracle.com/java/technologies/javafxscenebuilder-1x-archive-downloads.html
安装后,IDE创建一个javafx项目
file -> new -> project
存放位置 然后完成后 就会创建三个文件
Controller 控制器 存在代码用的 如按钮 监听事件 文本处理等等 (可删) Main 主程序 启动项目的代码 sample.fxml 使用SceneBuilder配置的文件 等会会用到 控制器代码是空的 package sample; public class Controller { } Main方法 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 { // 继承Application 需要重写方法 @Override // 创建一个 舞台 可以理解为程序的界面 public void start(Stage primaryStage) throws Exception{ // 类加载器 加载当前的fxml文件 Parent root = FXMLLoader.load(getClass().getResource("sample.fxml")); // 设置一个title primaryStage.setTitle("Hello World"); // 设置一个窗口大小 primaryStage.setScene(new Scene(root, 300, 275)); // 展示窗口 primaryStage.show(); } public static void main(String[] args) { // 运行程序 launch(args); } }
配置SceneBuilder
打开设置 setting 搜索框输入 javafx 有个路径 选择安装后的exe 就🆗了
选择fxml文件 就会显示了 有两种方式可以打开
第一个:选择文件 右键 最下面 open in SceneBuilder
第二个:最下面 Text 旁边 有个SceneBuilder
第一种
第二种
第二种方便,后面有些功能很牛逼。
布局
打开SceneBuilder 后 左边都是一些组件,背景布局,按钮,文本框,标签等。
先添加一个背景布局
添加两个按钮 和两个文本域
给按给文本域添加id值
解释下 id值是啥 这个id值 对应 fxml里的属性值 也是一个变量,我在fxml里设置一个id 为test 属性 那么我需要对这个按钮做处理,我就要在控制器里找到这个属性 给这个属性设置代码逻辑 有点绕 没事 往下看
fx:controller 这个就是一个属性 对应的变量是 sample包下的controller这个类 那接下来的操作和代码就要在这个类里进行编写 如果还不懂 再往下看
给按钮设置文字
按钮添加监听,当我点击这个按钮的时候 我希望他能有个动作,比如打印hello,或者执行cmd命令 之类的。
选择鼠标监听事件,当我点击鼠标 就会触发这个事件
给文本添加id值 为什么要给文本添加 因为在文本里输入数据,需要获取文本里的数据进行处理 如 文本.方法();
保存后 咱们就可以测试框架了。
点击上面的 preview show preview in windows 就可以看到界面了
查看我的代码发现 还是空的,这个时候 打开上面的 view 最后一个 show sample controller 他自动把代码写好了
细心发现,刚才写的两个属性 变成了 私有变量,两个监听事件变成了 两个方法
现在 图形好了,代码也好了,我想让他实现个功能,加密解密base数据,怎么办,在对应的方法里,写代码。
网上的base64 网站 左边放进密文,右边出来了明文,右边放进密文,左边出现明文。按照这个逻辑 去写代码。
先把刚才的代码复制到idea里
在encryption 写加密的代码
// 文本1 使用gettext方法 获取输入的数据 String text = text1.getText(); // new 一个加密类 BASE64Encoder encoder = new BASE64Encoder(); // 调用加密的方法 String data = encoder.encode(text.getBytes()); // 加密后的数据 显示在文本2里 text2.setText(new String(data));
另一个写解密的代码
// 获取数据 String text = text2.getText(); // new 一个解密类 BASE64Decoder decoder = new BASE64Decoder(); // 调用解密方法 byte[] bytes = decoder.decodeBuffer(text); // 把数据显示在文本1里 text1.setText(new String(bytes));
打开主类 运行代码