Jim Weaver’s Rich-Client Java Blog

ReportMill Hacks JavaFX Puzzler - Wins Free Pro JavaFX Book Anyway :-)

ReportMill Software has been an active member of the JavaFX community from the beginning.  Their innovative JFXBuilder tool has been featured on this blog, and they have an extremely powerful Java-based reporting tool named ReportMill.  Imagine my surprise when I found out that they drastically bent the rules to solve JavaFX Puzzlers #1 and #2 in order to win a Pro JavaFX early access eBook (of course you know that I'm just joking now).  Here's a screenshot of their solution to JavaFX Puzzler #2, which quite frankly looks very different from the screenshot shown in the puzzle's requirements :-)

All kidding aside, ReportMill has a tool named DataBox that they've dubbed "the Instant Java Rich Application Builder."  They used DataBox to solve the JavaFX puzzlers, and even though the DataBox tool doesn't generate JavaFX (yet?), their puzzler solutions are so cool that I've deemed them an additional winner and have given them an eBook.

Congrats, ReportMill!  Let's see how you do with JavaFX Puzzler #3 :-)

Jim Weaver
JavaFXpert.com

Drop the Checkered Flag: Solution to JavaFX Puzzler #2

Yesterday I challenged the readers of this blog with JavaFX Puzzler #2, which calls for creating a "figure 8" track around which a race car travels.  Please take a look at that post for the requirements, as well as the selection criteria for the winners.

I am pleased to announce that the winners of this JavaFX Puzzler are Fei Cheng and Marc Brideau, and that they each will receive a coupon with which they can get the Pro JavaFX early access eBook for free.  Here is the screenshot and code for the example solution:

package javafxpassionpuzzler2;

import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.animation.transition.AnimationPath;
import javafx.animation.transition.OrientationType;
import javafx.animation.transition.PathTransition;
import javafx.scene.Scene;
import javafx.scene.input.*;
import javafx.scene.shape.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

var ellipse: Ellipse;
var path: Path = Path {
  elements: [
    MoveTo {
      x: 200
      y: 200
    },
    ArcTo {
      x: 100
      y: 100
      radiusX: 50
      radiusY: 50
      sweepFlag: false
    },
    ArcTo {
      x: 200
      y: 200
      radiusX: 50
      radiusY: 50
      sweepFlag: false
    },
    ArcTo {
      x: 300
      y: 300
      radiusX: 50
      radiusY: 50
      sweepFlag: true
    },
    ArcTo {
      x: 200
      y: 200
      radiusX: 50
      radiusY: 50
      sweepFlag: true
    },
  ]
}

var anim = PathTransition {
  duration: 10s
  node: bind ellipse
  path: AnimationPath.createFromPath(path)
  orientation: OrientationType.ORTHOGONAL_TO_TANGENT
  interpolate: Interpolator.LINEAR
  repeatCount: Timeline.INDEFINITE
};

Stage {
  title: "PathTransition Puzzler"
  scene: Scene {
    width: 400
    height: 400
    content: [
      path,
      ellipse = Ellipse {
        centerX: 200
        centerY: 200
        radiusX: 20
        radiusY: 10
        fill: Color.BLUE
        onMousePressed: function(me:MouseEvent):Void {
          if (anim.paused) {
            anim.play();
          }
          else {
            anim.pause();
          }
        }
      }
    ]
  }
}
anim.playFromStart();

Please leave a comment if you have any questions about this solution. Congratulations to Fei Cheng and Marc Brideau!

Regards,
Jim Weaver
JavaFXpert.com

JavaFX with Passion! Puzzler #2: Animation

This puzzler is mainly directed at the students of the free JavaFX with Passion! course, and it contains concepts that have been covered in the course so far, including animation.  The first student in that course who submits a correct solution will be awarded a free token for the Pro JavaFX early access eBook.  If you're not enrolled in that course, feel free to submit a solution to this puzzler as well, because I'll give a free eBook for the first correct solution from a non-JavaFX-with-Passion student as well.

Here are the requirements for this second puzzler:

1. As shown in the screenshot above, the JavaFX program must have a Path that resembles a "figure 8" race track.
2. A blue ellipse representing the race car will follow the track when the program begins, with each lap taking 10 seconds.
3. The car will loop infinitely around the track, and will remain perpendicular to the center point of the circle around which it is currently traveling.
4. When the user presses the mouse on the race car (ellipse), the car will pause.
5. When the user presses the mouse on a paused race car, the car will resume moving from its current location.

To enter your solution, submit a comment to this blog post that contains the source code pasted into it.  To validate that the code meets the requirements, I will compile and run it with JavaFX SDK 1.1.1. It must run without any code editing, and must meet the above requirements.

I will feature the two winners and their solutions in an upcoming blog post.  Have fun with this one!

Regards,
Jim Weaver
JavaFXpert.com

And the "Major Award" goes to... (JavaFX Puzzler #1)

Yesterday I challenged the readers of this blog with JavaFX Puzzler #1.  Please take a look at that post for the requirements, as well as the selection criteria for the winners (first correct solution from a JavaFX with Passion! student and first correct solution from someone that isn't enrolled in that course).

I am pleased to announce that the winners of this "Major Award" are Jonathan Share and "acw1668 from HK", and that they each will receive a coupon with which they can get the Pro JavaFX early access eBook for free.  Also, the screenshot of the "Major Award" from the comedy movie "A Christmas Story" has been included above.

Here is the screenshot and code for the example solution:

package javafxpassionpuzzler1;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.text.*;
import javafx.ext.swing.SwingSlider;

Stage {
  var angle:Integer = 0;
  title: "Rotate Puzzler"
  scene: Scene {
    width: 300
    height: 200
    content: [
      Text {
        translateX: 90
        translateY: 90
        rotate: bind angle
        textOrigin: TextOrigin.TOP
        fill: Color.BLUE
        content: bind "Angle: {angle}"
        font: Font.font("sans serif", FontWeight.BOLD, 24)
      },
      SwingSlider {
        translateX: 50
        maximum: 360
        value: bind angle with inverse
      }

    ]
  }
}

Note that the rotate instance variable inherited by the Text class causes the node to be rotated around the center of the node.  Another approach used in reader solutions was to place a Transform.rotate() function in the transforms instance variable.  A downside of the latter approach is that the code must calculate the center of the node.

Please leave a comment if you have any questions about this solution. Congratulations to Jonathan Share and  "acw1668 from HK"!

Regards,
Jim Weaver
JavaFXpert.com

JavaFX with Passion! Puzzler #1

This puzzler is mainly directed at the students of the free JavaFX with Passion! course, and it contains concepts that have been covered in the course so far.  The first student in that course who submits a correct solution will be awarded a free token for the Pro JavaFX early access eBook.  If you're not enrolled in that course, feel free to submit a solution to this puzzler as well, because I'll give a free eBook for the first correct solution from a non-JavaFX-with-Passion student as well.

This first puzzler is pretty simple, but future puzzlers will be increasingly difficult.  Here are the requirements:

1. As shown in the screenshot above, the JavaFX program must have a slider and some text that rotates when the slider is adjusted.
2. The rotation will be from 0 to 360 degrees, depending on the position of the slider.
3. The text will consist of the string "Angle: " followed by the angle of rotation.
4. The text must have a bold font weight, and be blue in color.
5. The point at which the text rotates must be at the center point (both horizontally and vertically) of the text.

To enter your solution, submit a comment to this blog post that contains the source code pasted into it.  To validate that the code meets the requirements, I will compile and run it with JavaFX SDK 1.1. It must run without any code editing, and must meet the above requirements.

I will feature the two winners and their solutions in an upcoming blog post.  Let the games begin!

Regards,
Jim Weaver
JavaFXpert.com