JavaFX Puzzler 2 - First Correct Solution Gets Free JavaFX Script eBook

In this post, I'm going to give you a slightly more difficult JavaFX Script related "puzzler".  If you've been following along with this blog, and exploring the resources to which I've been pointing you (hint: especially the JavaFXPad tutorial), you may find this puzzler easy to do.  The first person to post a comment with a correct solution will be given a free JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications eBook (PDF download).  When submitting your answer, be sure to put your correct email address in the  "Email Address: (Not displayed with comment.)" text field on the comment form so that I can contact you with the information to obtain your free eBook.

Printing the Contents of a Canvas Instance

Before I give you the puzzler, I'd like to mention that Andre Torensma pointed out my comment in this blog post about not having built printing capability into the Word Search Puzzle Builder.  Andre asked how that could best be accomplished, so I wrote a quick example that shows how to print the contents of a Canvas instance.  See the screenshot below, and the code listing that follows it:

/*
 * RedRubberBall.fx
 */
 
import javafx.ui.*;
import javafx.ui.canvas.*;

Frame {
  var canvas = 
    Canvas {
      content:
        Circle {
          cx: 200
          cy: 200
          radius: 100
          fill: red
        }
    }
  title: "Red Rubber Ball"
  content:
    BorderPanel {
      center:
        canvas
      top:
        FlowPanel {
          content: [
            Button {
              text: "Print"
              action:
                operation() {
                  canvas.print();
                }
            }
          ]
        }
    }
  width: 500
  height: 500
  visible: true
}

As shown in the listing, the Canvas has an operation named print() that causes what is drawn on it to be printed.  When you click the Print button shown in the screenshot, a standard printer dialog box should appear.  Of course, a JavaFX application invoked with Java Web Start would have to be granted the appropriate permissions to print.

Another thing to point out in this listing is that an instance of the Canvas class is created and assigned to a variable so that it may be referred to later when printing the canvas.  Variable assignments in this manner are considered part of the declarative expression, and don't require a semi-colon at the end.  The scope of the variable named canvas is the block in which it is defined (between the curly braces associated with the Frame object).

As a result of Andre's prompting, I added print functionality to the Word Search Puzzle Builder using the same technique as shown in the excerpt above.  For now I just added a Print option to the Grid menu (no shortcut or toolbar icon yet).  Give it a try if you'd like!

Back to the Puzzler

The objective of the puzzler is to modify the code listing above so that the program provides the following functionality:

• Dragging the circle with a pointing device (e.g. a mouse) causes the circle to move with the pointing device.
• Clicking a button named Reset that is located directly to the left of the Print button (see the screenshot below) causes the red circle to move to its original position (with the center of the circle at 200 pixels on the x axis and 200 pixels on the y axis).

You must use a model class (I named mine RedBallModel) with x and y attributes that hold the current location of the circle.  You must use binding to cause the circle to appear at the coordinates in the model.  Clicking the Reset button, and dragging the pointing device, directly change the values in the model.

Please submit your solution in the form of a comment to this post.  I will examine the code to make sure that it meets the requirements above, and then cut and paste the code into JavaFXPad to verify that it works per the requirements.  Even if you're not the first to respond, go ahead and submit a solution anyway, as it may be the case that the entries submitted prior to yours don't meet the requirements stated above.

Good luck!
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications

Comments

[Erik]

Hi Jim, good beginning exercise. Here's a version that uses the model for initialization
as well.
Erik
//

import javafx.ui.*;
import javafx.ui.canvas.*;

class RedBallModel {
attribute xi: Integer;
attribute yi: Integer;
attribute x: Integer;
attribute y: Integer;

}

RedBallModel.xi = 200;
RedBallModel.yi = 200;

var rbm = RedBallModel{
xi:200
yi: 200
x: 200
y: 200
};

Frame {
var canvas =
Canvas {
content:
Circle {
cx: bind rbm.x
cy: bind rbm.y
radius: 100
fill: red
onMouseDragged: operation(e:CanvasMouseEvent) {
rbm.x += e.localDragTranslation.x;
rbm.y += e.localDragTranslation.y;
}
}
}

title: "Red Rubber Ball"
content:
BorderPanel {
center:
canvas
top:
FlowPanel {
content: [
Button {
text: "Reset"
action:
operation() {
rbm.x=rbm.xi;
rbm.y=rbm.yi;
}
},
Button {
text: "Print"
action:
operation() {
canvas.print();
}
}
]
}
}
width: 500
height: 500
visible: true
}

[Pavel]

Hi Jim,

Please check my code:

/*
* RedRubberBall.fx
*/

import javafx.ui.*;
import javafx.ui.canvas.*;

class Coords {
attribute x: Integer;
attribute y: Integer;
}

var position = new Coords(){
x:200,
y:200
};

Frame {
var circle =
Circle {

cx: bind position.x
cy: bind position.y
radius: 100
fill: red

}
var canvas =
Canvas {
content:
circle
onMouseDragged: operation(e:MouseEvent) {
position.x = e.x;
position.y = e.y;
}
}
title: "Red Rubber Ball"
content:
BorderPanel {
center:
canvas
top:
FlowPanel {
content: [
Button {
text: "Reset"
action:
operation() {
position.x = 200;
position.y = 200;
}
},
Button {
text: "Print"
action:
operation() {
canvas.print();
}
}

]
}
}
width: 500
height: 500
visible: true
}

This is the first thing i do with fx besides testing the apps from the net. Thanks for the oportunity to learn something :)