初识JavaFX,先来建立一个简单的Demo吧。
此处IDE用的idea 2017,首先选择新建项目,新建一个JavaFX Application。

建立完成之后IDE会自动生成一个Hello world程序,此时你可以运行看一下效果。

接着我们打开sample.fxml对界面作一下修改,在此之前我们先删除默认创建的GridPane, 之后从Containers里面拖一个Pane到编辑区域,并且在Controls里面分别拖放一个TextField、Label、Button到编辑区, 并摆放到适当的位置,调节一下大小。(注意:如果你的可视化编辑区域没有显示任何内容,那么你需要清除一下缓存,具体操作: file >> invalidate caches/restart >> invalidate and restart)
当然,如果你不打算用IDE里面集成的界面编辑器,你也可以单独下载一个,亲测不会出现以上问题。
下载地址:http://gluonhq.com/products/scene-builder/
正常情况下你应该可以类似下图的样子:

之后分别选中刚刚加入的三个组件,在右侧的属性栏里面填写id, 你可以根据自己喜好填写, 此处我填的是: text_input, text_show, btn_submit。

在可视化编辑器的属性里还可以编辑很多细节内容, 如颜色、字体等:

填写好之后,就可以写start方法的内容了, 这里定位到元素与安卓开发中的findViewbyid类似, 用的是lookup方法,值得注意的一点是id前面要加上‘#’号,这一点和CSS选择器类似。定位到每个元素后,为按钮绑定一个事件处理,完成后的代码如下图所示:

完成这一步之后你就可以点击运行了,随便输入试一下:

当然,若果你不喜欢用可视化编辑器,也可以用代码组织界面,一样可以实现效果。这里给出简单参考:

效果:

至此,一个简单的JavaFX应用就完成了。