通过前面小节的学习,已经了解到使用javafx工具可以实现图形用户界面开发,接下来,就通过一个用户登录的案例来演示javafx的基本使用。
javafx有什么水调歌头明月几时有显著特征?
(1)创建javafx项目。打开eclip,并在eclip中依次选择“file”->“new”->“others..”->“javafx project”选项,创建一个名称为“javafx”的项目,项目创建成功后,如图1所示。
图1 javafx项目默认结构
从图1可以看出,创建成功的javafx项目默认在application包下有两个文件:main.java(程序的入口)和application.css(图形用户界面样式文件)。其中,main.java文件中使用javafx工具初始化了一个图形界面,直接运行该文件,会得到一个空白窗口。
(2)编辑main.java文件。在自动生成的main.java文件中编写javafx项目主程序代码,如文件2所示。
文件1 main.java
import javafx.application.*; import javafx.fxml.*; import javafx.stage.*; import javafx.scene.*; public class main extends application { public void start(stage stage) throws exception { // 使用fxmlloader加载器,加载名为“fxml_example.fxml”的fxml文件 parent root = fxmlloader.load( getclass().getresource("fxml_example.fxml")); // 创建一个场景 scene scene = new scene(root, 300, 275); // 为图形界面窗口设置标题 stage.ttitle("fxml welcome"); // 为图形界面窗口设置场景 stage.tscene(scene); // 将图形界面窗口设置为可见 stage.show(); } public static void main(string[] args) { // 通过application抽象类的launch()方法启动程序 launch(args); } }
文件1中,main类继承了application抽象类并重写了start()方法,在该方法中,stage就是javafx工具中用来表示整个图形工具界面窗口的类,在该类中需要加入一个scene(场景)来进行填充,而所有的组件、元素都是构建在scene中的。另外,在javafx 8中支持代码与布局和样式分离,所以在文件中通过fxmlloader的load()方法引入了一个外联的fxml_example.fxml文件,在此fxml文件中就可以专心编写图形界面布局和组件相关功能了。
(3)创建fxml_example.fxml文件。在main.java文件同级目录下依次选择“file”→“new”→“others..”→“new fxml document”选项,创建一个名称为“fxml_example”的fxml格式文件,如文件2所示。
文件2 fxml_example.fxml
<?xml version="1.0" encoding="utf-8"?> <!-- 引入javafx工具相关类 --> <?import java.net.*?> <?import javafx.geometry.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <?import javafx.scene.text.*?> <!-- 创建一个gridpane网格式面板组件 --> <gridpane fx:controller="application.fxmlexamplecontroller" xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"> <!-- 通过相关标签创建一个模拟登录的“用户名”和“密码”的组件 --> <text text="welcome" gridpane.columnindex="0" gridpane.rowindex="0" gridpane.columnspan="2" /> <label text="用户名:" gridpane.columnindex="0" gridpane.rowindex="1" /> <textfield gridpane.columnindex="1" gridpane.rowindex="1" /> <label text="密 码:" gridpane.columnindex="0" gridpane.rowindex="2" /> <passwordfield gridpane.columnindex="1" gridpane.rowindex="2" /> <!-- 通过hbox嵌入一个可调控位置的盒子组件--> <hbox spacing="10" alignment="bottom_right" gridpane.columnindex="1" gridpane.rowindex="4"> <!-- 在hbox盒子中装入一个 button登贵宾犬多少钱一只录按钮,同时注册监听器 --> <button text="登 录:" onaction="#handlesubmitbuttonaction" /> </hbox> <!-- 作为登录按钮的提示框 --> <text fx:id="actiontarget" gridpane.columnindex="0" gridpane.columnspan="2" gridpane.halignment作文250字="right" gridpane.rowindex="6" /> </gridpane>
文件2中,编码风格与xml文档类似。其中第1行代码用来引入fxml文件约束;第3~7行代码用于引入javafx工具相关类;第9~29行代码使用<gridpane>标签创建了一个网格式的面板组件,然后通过各种子标签和属性向该面板组件中进行填充。另外在<gridpane>标签中使用fx:controller=”
application.fxmlexamplecontroller”引入了application包下的fxmlexamplecontroller事件控制类,并且在第23行中,使用onaction=”#handlesubmitbuttonaction”注册了fxmlexamplecontroller类中的监听器方法handlesubmitbuttonaction()。
(4)创建并编辑
fxmlexamplecontroller.java文件。在main.java文件同级目录下创建一个名为fxmlexamplecontroller的事件处理类,然后在该文件中编写事件处理方法,如文件3所示。
文件3
fxmlexamplecontroller.java
import javafx.event.actionevent; import javafx.fxml.fxml; import javafx.scene.text.text; public class fxmlexamplecontroller { // 与fxml_example.fxml文件中的登录提示框fx:id一致 @fxml private text actiontarget; // 为fx分式不等式解法ml_example.fxml文件中的登录按钮编写事件处理 @fxml protected void handlesubmitbuttonaction(actionevent event) { actiontarget.ttext("点击了登录按钮"); } }
文件3中,
fxmlexamplecontroller.java类专门用于编写事件处理方法,其中使用@fxml注解用来表示actiontarget文本属性和handlesubmitbuttonaction()方法可以被fxml格式文件访问,同时handlesubmitbuttonaction()的方法名与文件2中第23行代码onaction=”#handlesubmitbuttonaction”中标记的名称需要相同,actiontarget属性名与文件2中第26行代码fx:id=”actiontarget”的id名也要相同。
完成上述4步操作后,运行主程序main类,结果如图2所示。
图2 javafx项目初步效果图
(5)为fxml_example.fxml图形布局文件引入外联的css样式文件。
● 先在fxml_example.fxml文件最后的</gridpane>标签之前引入名称为application.css的样式表文件,示例如下所示:
<!-- 加入名为application.css的样式表文件 --><stylesheets><url value="@application.css" /></stylesheets>
● 如果要为gridpane面板组件根元素设置样式,需要在<gridpane>标签中添加一个styleclass=”root”的属性,示例如下所示:
<gridpane fx:controller="fxmlexample.fxmlexamplecontroller" xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" **styleclass="root"**>
● 同时可以为某个组件所在标签添加一个id,为该id所在组件设置样式,比如为text=”welcome”的<text>标签所在组件添加一个id,示例如下所示:
<text **id="welcome-text"** text="welcome" gridpane.columnindex="0" gridpane.rowindex="0" gridpane.columnspan="2"/>
(6)编辑application.css样式文件。打开application.css样式文件,为图8-37所示的javafx图形用户接口项目编写css样式,如文件4所示。
文件4 application.css
/* 为gridpane面板组件根元素添加背景图片 */ .root { -fx-background-image: url("background.jpg"); } /* 为label标签组件设置大小、颜色、展示效果 */ .label { -fx-font-size: 12px; -综合评价fx-font-weight: bold; -fx-text-fill: #333333; -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); } /* 为id为welcome-text的组件设置大小、字体、颜色、展示效果 */ #welcome-text { -fx-font-size: 32px; -fx-font-family: "arial black"; -fx-fill: #818181; -fx-effect: innershadow( three-pass-box ,rgba(0,0,0,0.7),6, 0.0 , 0 , 2 ); } /* 为id为actiontarget的组件设置大小、颜色、展示效果 */ #actiontarget { -fx-fill: firebrick; -fx-font-weight: bold; -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); } /* 为button标签组件设置大小、颜色、展示效果 */ .button { -fx-text-fill: white; -fx-font-family: "arial narrow"; -fx-font-weight: bold; -fx-background-color: linear-gradient(#61a2b1, #2a5058); -fx-effect: dropshadow( three-pass-box ,rgba(0,0,0,0.6),5, 0.0 , 0 , 1 ); } /* 设置当鼠标移到button按钮时的大小、颜色、展示效果 */ .button:hover { -fx-background-color: linear-gradient(#2a5058, #61a2b1); }
在文件4中,application.css文件专门用于封装文件样式,在上一步中为fxml_example.fxml图形布局文件引入了该外联的css样式文件,<gridpane>根组件的background.jpg背景图片位于该文件所在同级目录中。其中,对fxml_example.fxml文件中某个名称的标签进行样式设置时,可以使用点号+标签名(如.button)的形式进行设置;对某个id所对应的标签组件进行样式设置时,可以使用井号+id(如#welcome-text)的形式进行设置。
当编写完并引入application.css样式文件成功后,再次启动主程序入口main类中的main()方法,结果如图3所示。
图3 javafx项目最终效果图
本文发布于:2023-04-05 03:47:39,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/9b9650089cb8082788fd008a488650d5.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:java界面开发工具(java图形界面代码生成工具).doc
本文 PDF 下载地址:java界面开发工具(java图形界面代码生成工具).pdf
留言与评论(共有 0 条评论) |