JavaFX的Effect功能例子：编写许愿树程序(3)

重点推荐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)