Tag Archives: JavaFx

JavaFX 2.0 – NodeCodeEditor

As I previously said I am working on a Software Component Editor. Transforming my inkscape visual prototype to my FX Application was quiet easy thanks to JavaFX SVGPath. At least for the shape contour, but I had another problem to solve to manage gradient.

So I started groping around JavaFx Gradient paint (RadialGradient and LinearGradient). Modifying and launching again and again to adjust my gradient attributes change. And then I get bored… I mean, It was about to take me a whole life making theses adjustments !

Thinking about it I remembered the way prototypes are built in my company, using SmallTalk language and performing changes on code on the editor that is taken into account as soon as they are “accepted”. Well I can do that too ! Thanks to Eclipse IDE debug mode. The only constraint was to have no structural change in my code and finding a way to have a loop that will take into account all changes on my JavaFX graphical Application.

Please welcome my little NodeEditionVisualizer ! It is simply a JavaFX Application that loop on a method call that draw a user created Node continuously. It has to be launched in debug mode so that changes are taken into account when you save. It is composed of an X/Y axis and a user created Node that can be changed dynamically.

protected ScheduledThreadPoolExecutor executor = new ScheduledThreadPoolExecutor(1);
public static void main(String[] args) {
	public void start(final Stage primaryStage) throws Exception {
		final Group pane = new Group();
		Scene scene = new Scene(pane);
		primaryStage.setTitle("C3 Shape Editor");
		final Path axis = PathBuilder.create().elements(
			new MoveTo(0, 0),
			new LineTo(0, 100),
			new LineTo(-10, 90),
			new MoveTo(0, 100),
			new LineTo(10,90),
			new MoveTo(0, 100),
			new LineTo(0, 3000),
			new MoveTo(0, 0),
			new LineTo(100, 0),
			new LineTo(90, -10),
			new MoveTo(100, 0),
			new LineTo(90, 10),
			new MoveTo(100, 0),
			new LineTo(3000, 0)).stroke(Color.WHITE).build();
		final Text origin = TextBuilder.create()
		final Text x = TextBuilder.create()
		.text("X Axis").fill(Color.WHITE).x(50).y(-5)
		final Text y = TextBuilder.create()
		.text("Y Axis").fill(Color.WHITE).x(-25).y(70).rotate(-90)
		this.executor.scheduleAtFixedRate(new Runnable(){
			public void run() {
				Platform.runLater(new Runnable(){
					public void run() {
						Node dut = createShape();
						pane.getChildren().addAll(dut, axis, origin, x, y);
		}, 200, 200, TimeUnit.MILLISECONDS);
		primaryStage.setOnCloseRequest(new EventHandler() {
			public void handle(WindowEvent paramT) {
	public Node createShape(){
		Rectangle rectangle = RectangleBuilder.create()
                Circle circle = CircleBuilder.create()
                return new Group(circle, rectangle);

As usual, code is available in a jar on download page.

Feel free to reuse this code ! If you have some suggestions, I would be glad to take them into account !


JavaFx 2.0 – SVGPath

I start developing a new application for a software components editor (more informations soon). So I built my visual using Inkscape (as usual). Then I asked myself how to import my svg objects into JavaFx. I saw Inkscape does offer to export your svg into JavaFx code, but for now only JavaFx1.3 script is supported, so unable to do it for  my JavaFX2.0 business application… Well I was only half tempted by writing a JavaFX1.3 to JavaFX2.0 code converter…

What a good suprise to discover the SVGPath object in JavaFx ! It made my import work quite easy (not easier than if Inkscape generated it for me but….). I just use the Inkscape objects xml editor to copy the path informations as shown :

Then juste create a JavaFx SVGPath Object and fill the content attribute with what you’ve copied

And Here you are with your SVG interface work into your business JavaFx code ! Take care that positions of the SVG Object path points from Inkscape are relative to the top/left corner of your page.

I did not find out how to easily transform your SVG object fill information as available in the Inkscape xml editor into JavaFx. I might think of writing a small parser program that compute such information into code… For now I translated myself the fill information using JavaFx Painter.

If some of you have interesting informations about SVGPath in JavaFx, raise your hand !

JavaFX 2.0 – Presenter II

Many projects in progress in my stack ! Today I’d like to share an upgrade of my Presenter project that aims to offer a simple API in JavaFX to create a “Prezi” like items navigation. This upgrade does manage Node rotation and Node scaling so that the Node does take most of the screen ! It also include a drag’n’drop on the view to move the camera where you want. No zoom In & out available for now since I did not had time to implement it !

Here is the result in a new Video.

[local /wp-content/uploads/2011/08/presenter2.avi Download Video]

Note that managing Node does allow to do more than just navigating through slides… As you will see in a future post :)

As usual, example code and test available in the download page !


JavaFx 2.0 – Presenter


As I mentioned in previous post I spend some time to try JavaFx 2.0 beta release. After playing a little with the tutorials, I try myself writing code that would include JavaFx Node transition, effects and coordinates manipulation.

I tried writing a simple slide presenter where slide would be defined in the graphic system coordinate as javafx.scene.Group and could be added to a com.mrlonee.presenter.Presenter. A little video of the sample presenter application is available :

[local /wp-content/uploads/2011/06/presenter.avi Presenter]

Here is a snapshot of the global view proposed by the application when it is launched

Initial overview is performed by scaling down the root node.

//Initial Scale

This presenter is responsible for proposing a container Group and a simple method to present next or previous element.

public interface Presenter{
public void addElementToPresent(final Node node);
public void presentNextElement();
public void presentPreviousElement();
public void presentElement(final Node node);
public Group getRootNode();

Slide declaration is for now done by constructing Nodes. Here is an example of what I’ve done for my sample application :

* Hello slide
Distant lightEffectDistant = new Light.Distant();
Text text = new TextBuilder()
.content("Hello").x(0).y(300).fill(Color.GREEN).font(new Font(50))
.effect(new LightingBuilder().light(lightEffectDistant).surfaceScale(5.0).build())
* Slide 1
List slide1Stops = new ArrayList();
slide1Stops.add(new StopBuilder().offset(0.0).color(Color.BLUE).build());
slide1Stops.add(new StopBuilder().offset(1.0).color(Color.DARKBLUE).build());
Group slide1 = new GroupBuilder().children(
new RectangleBuilder()
.fill(new LinearGradientBuilder().startX(0.5).startY(0.0).endX(1.0).endY(0.0)
new TextBuilder().x(60).y(70).font(new Font(30))
.effect(new DropShadowBuilder().offsetX(3.0).offsetY(3.0).build()).build(),
new TextBuilder().x(75).y(90).font(new Font(20))
* Slide 2
List slide2Stops = new ArrayList();
slide2Stops.add(new StopBuilder().offset(0.2).color(Color.RED).build());
slide2Stops.add(new StopBuilder().offset(0.8).color(Color.RED.darker()).build());
slide2Stops.add(new StopBuilder().offset(1.0).color(Color.RED).build());
Group slide2 = new GroupBuilder().children(
new CircleBuilder()
.fill(new RadialGradientBuilder().centerX(0.3).centerY(0.3).stops(slide2Stops).build())
new TextBuilder().x(115).y(180).font(new Font(30))
.textAlignment(TextAlignment.CENTER).content("MrLoNee Too !")
.effect(new ReflectionBuilder().fraction(0.8).build())

Transition between each element is composed of a translate and and scale transition played together. It gives the effect that we scale up and down while translating to the next slide to present as follow

The translation code is above :

Timeline animationTransition = new TimelineBuilder()
new KeyFrame(Duration.ZERO,
new KeyValue( this.root.translateXProperty(), fromX),
new KeyValue( this.root.translateYProperty(), fromY)
new KeyFrame(Duration.ZERO,
new KeyValue( this.root.scaleXProperty(), this.root.scaleXProperty().get()),
new KeyValue( this.root.scaleYProperty(), this.root.scaleYProperty().get())
new KeyFrame(Duration.valueOf(300),
new KeyValue( this.root.scaleXProperty(), 0.7),
new KeyValue( this.root.scaleYProperty(), 0.7)
new KeyFrame(Duration.valueOf(150),
new KeyValue( this.root.translateXProperty(), fromX + (toX - fromX)/6),
new KeyValue( this.root.translateYProperty(), fromY + (toY - fromY)/6)
new KeyFrame(Duration.valueOf(450),
new KeyValue( this.root.translateXProperty(), fromX + (toX - fromX)*5/6),
new KeyValue( this.root.translateYProperty(), fromY + (toY - fromY)*5/6)
new KeyFrame(Duration.valueOf(600),
new KeyValue(this.root.translateXProperty(), toX),
new KeyValue(this.root.translateYProperty(), toY)
new KeyFrame(Duration.valueOf(600),
new KeyValue( this.root.scaleXProperty(), finalScale),
new KeyValue( this.root.scaleYProperty(), finalScale)

A Thumb view is built by the presenter as you add element to present. This thumb view just add a cyan circle node that is surrounded by a blue circle as the slide with thumb circle index  is presented. An example for third slide would be :

The source code is available in presenter.jar file in download page !

Feel free to try it. I might upgrade it with :

  • scale each slide so that it take the whole frame size
  • propose real node thumb to navigate when there is many slide
  • propose a way to choose what animation transition shall be taken
  • propose a slide editor (well it may be long I suppose…)

I still have to find a way to perform a scale animation that is using a custom scale center. I could use it to finish to scale so that the currently presented slide takes the whole frame width/height instead of using 1.0 scale of the slide.


JavaFx – Exciting 2.0

Yesterday I received an e-mail from javafx4you with the following title : “JavaFx 2.0 beta is now available for download”. I had only a few moment to process this information because I already had plans, but I take time to download the beta version and install it on my computer.

After 2 minutes of coding I wrote a simple Stage just to see it running before leaving, but unfortunately my JDK version (64bit) did not fit the JavaFx jar (only 32 bit available for now). So I Took some time to download the 32 bit version of the last JDK… and Yes, the code did work !

So I go on and took time to write the full demo code availabe here.

The result is a cool cicle animation and blur effect stage. It seems to be very powerfull as the animation are really easy to describe and run… And graphical effects seem to be easy to compose.

I then tried to play with the event and add a mouseEnter mouseExited listener on each circle of the scene. The API is very close to Swing listeners, swing guy will not be very surprise, except that it seems to be the same approach than Android API, it is not a addMouseListener() method but a setOnMouseEntered(). So not a list of observer but a single observer ? I tried to add two different listener, and only the second one was called !

Moreover, JavaFx follow the same Single Threading rule than Swing. When in swing you use SwingUtilities.invokeLater() you shall now use Platform.runLater() for JavaFx. Swing/JavaFx integration seems to be managed through the javafx.embed.JFXPanel component that is a swing component. So integrating JavaFx into Swing is done ! Don’t forget to transfer event from Swing Thread to JavaFx Thread to respect the coding rule !

Now new experience can start, with easier graphic manipulation. I hope I will have time to try things again.