重点推荐JavaFX文章:怎样用JavaFX编写游戏:吃豆人(Pac-Man)
在文章《 用JavaFX的effect实现许愿树(2) 》中,我们增加了鼠标事件处理逻辑和扩展多边形Polygon来画成的愿望星,我们已经可以在 JavaFX 的许愿树上悬挂许多五彩缤纷的愿望星了。现在,我们给程序再增加些功能,使得我们可以在星星上记录下许愿者的名字和愿望,那样就知道星星是谁的了。你可以点击以下画面启动许愿树,点击许愿树后,可以看到一个弹出的窗口来输入你的名字和愿望,点击“OK”确认。如果再次点击同一颗星星,就可以查看或修改愿望的内容,快来试试看吧,点击下图可启动程序:(JDK1.5以上或JDK 1.6)
我们来看看如何增加一个半透明的输入窗口,代码在Dialog类中。首先,我们定义一个CustomNode。javafx.scene.CustomNode提供了用户自定义图形结点(Node)的方法,程序中需要继承该类,然后实现create()函数并返回自定义的Node。我们的CustomNode由一个Group实例来实现,包括一个蓝色半透明的外围框,两个输入框,两个文本以及一个“OK”按钮。Dialog.fx的代码如下:
( JAVAFX参考文章:
用JavaFX的Effect实现许愿树(1)
用JavaFX的Effect功能编写许愿树(1)
JavaFX 1.1和1.0的兼容性 http://blog.sina.com.cn/javafxcenter
JavaFX和Java之间的互操作性
Java和JavaFX的互操作性)
/* * Dialog.fx * * http://www.javafxblogs.com */ package wishtree; import javafx.ext.swing.SwingButton; import javafx.ext.swing.SwingTextField; import javafx.scene.CustomNode; import javafx.scene.Group; import javafx.scene.layout.VBox; import javafx.scene.Node; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.scene.text.Font; import javafx.scene.text.FontWeight; import javafx.scene.text.Text; import javafx.scene.text.TextOrigin; import javafx.stage.Stage; /** * @author Henry Zhang */ public class Dialog extends CustomNode { public var stage: Stage; public var star : Star; var w = bind stage.width; var h = bind stage.height; public var nameField : SwingTextField; public var wishField : SwingTextField; public function show( s: Star): Void { star = s; wishField.text = s.wish; nameField.text = s.name; visible = true; } public override function create(): Node { Group { blocksMouse: true; translateX: bind w / 6 translateY: bind h / 4 content: [ Rectangle { stroke: Color.WHITE strokeWidth: 3 width: bind w * 2 / 3 height: bind h / 2 fill : Color.BLUE; opacity: 0.5 arcHeight: 10 arcWidth: 10 }, // 本文发表自 http://www.javafxblogs.com VBox { spacing: 15 translateX: bind w / 6 translateY: bind h / 8 content: [ Text { content: "名字:" textOrigin: TextOrigin.TOP fill: Color.YELLOW font: Font.font ( null, FontWeight.BOLD, 20); }, nameField = SwingTextField { text: "your name" width: bind w / 4 }, Text { content: "愿望:" textOrigin: TextOrigin.TOP fill: Color.YELLOW font: Font.font ( null, FontWeight.BOLD, 20); }, wishField = SwingTextField { text: "我希望..." width: bind w * .4 }, SwingButton { text: "OK" action: function():Void { star.name = nameField.text; star.wish = wishField.text; visible = false; } } ] }, ] } } }
在create()函数中,我们定义了圆角矩形的透明度为0.5,即可产生半透明的效果,arcHeight和arcWidth两个变量决定了圆角的大小。JavaFX技巧、编程和技术 。JavaFX Guy技术应用博客
Rectangle { stroke: Color.WHITE strokeWidth: 3 width: bind w * 2 / 3 height: bind h / 2 fill : Color.BLUE; opacity: 0.5 arcHeight: 10 arcWidth: 10 },
VBox的作用是把UI元素在垂直排列,相当于LayoutManager的作用。当点击OK按钮时,我们把对话框隐藏,并且把输入值赋给相关的Star对象。Group的属性中,我们设置了blocksMouse的属性,从而防止鼠标事件传导到下层的图形元素中。
接下来,我们把Main.fx略作修改,在生成Star实例时加入事件处理逻辑,使得星星在点击时可以弹出修改对话框,代码如下:
var tree : ImageView = ImageView { x: 80 y: 0 image: Image { url: "{__DIR__}images/tree.png" width: 640 preserveRatio: true } onMousePressed: function(e:MouseEvent) : Void { // do nothing when the dialog is enabled if ( dialog.visible ) return; if ( e.y < 343 ) { currentStar = Star{ translateX: e.x translateY: e.y onMousePressed: function(e:MouseEvent) : Void { // do nothing when the dialog is enabled if ( dialog.visible ) return; var self = e.node as Star; dialog.show(self); } } ; dialog.show(currentStar); insert currentStar after stage.scene.content[currentIndex++]; } } };
至此,单机版的许愿树就完成了。代码可以在这里下载:JavaFX许愿树源代码。下一步,我们会把这个单机版的改成联网版,这样不同的用户可以通过网页在同一棵许愿树上许愿了。需要做的工作包括把用户的许愿请求发送到网站,然后存入数据库中,再通过许愿树展现出来。服务器端的代码可重用原来PHP版本的代码,或者新写都可以。
本文同步发表于: JavaFX许愿树程序:Effect功能的应用(3)
相关推荐
JavaFX+官方教程:RIA+应用开发
javafx2.0,java,javafx,例子,代码 Sun公司(已于20092008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语 言开发富互联网应用程序(RIA)。JavaFX Script编程语言(以下称为JavaFX)是Sun微...
javaFX 3D API 实现水分子模拟结构 idea工程
3. 网络应用程序:JavaFX 可以用于开发网络应用程序,例如 web 应用程序和 Rich Internet Applications 等。 JavaFX 的主要组件包括: 1. JavaFX SDK:JavaFX 的软件开发套件,提供了 JavaFX 的所有功能和工具。 2...
JavaFX 官方教程:RIA 应用开发
JavaFx 官方源码例子,功能强大适合初学者,高手学习研究,建议用官方提供的netbean开发打开
javafx的单机版许愿树,从网上看到的实例,学习了一下加了几行代码,备份
资源名称:JavaFX 官方教程:RIA 应用开发内容简介:《JavaFX官方教程:RIA应用开发》通过使用JavaFX,开发人员和平面设计师可以协同工作来构建健壮的、拟真的应用程序,并能够将它部署到任何地方:桌面、Web、数...
资源名称:JAVA FX官方教程:RIA应用开发内容简介:《JavaFX官方教程:RIA应用开发》通过使用JavaFX,开发人员和平面设计师可以协同工作来构建健壮的、拟真的应用程序,并能够将它部署到任何地方:桌面、Web、数百万...
Chapter 3: JavaFX Fundamentals Chapter 4: Lambdas and Properties Chapter 5: Layouts and Scene Builder Chapter 6: User Interface Controls Chapter 7: Graphics Chapter 8: JavaFX Printing Chapter 9: Media...
javafx之fxml例子_用户登录,基于netbeans javafx fxml实例
JavaFX高级教程:JavaFX2.0的FXML语言.docx 官方中文文档
JavaFX 构建GUI 应用程序 第1 课:JavaFX GUI 简介 第2 课:使用声明性语法 ........ 第8 课:使GUI 元素具有交互
JavaFX_SqliteDB 与SQLite数据库集成 这是一个简单的应用程序,它: 创建一个SQLite数据库 使用javabeans 扩展菜单 SQL查询:preparedstatement 枚举 XML文件 下载正在运行的应用程序的副本: 影片示范 笔记 ...
JavaFX高级教程:部署JavaFX2.0应用 官方中午文档
Javafx 2.0: Introduction by Example
* Effect:Effect 是 JavaFx 中的效果类,提供了视觉效果的功能。 * Image:Image 是 JavaFx 中的图像类,提供了图像处理的功能。 * Media:Media 是 JavaFx 中的媒体类,提供了音频和视频处理的功能。 JavaFx 函数...
Wish Tree,许愿树,帮助你实现梦想园地,使用JavaFX语言开发的一个小程序,希望对学习JavaFX的朋友有一定的帮助。
JavaFX Script编程语言(以下称为JavaFX)是Sun微...JavaMail是实现邮件发送和接收功能而提供的一套标准开发类库,支持常用的邮件协议,如SMTP、POP3、IMAP,开发人员使用JavaMail编写邮件程序时,无需考虑底层的...
JavaFX3D-ManeuvringACamera 演示JavaFX 3D中操纵/处理相机方式的应用程序