Build a JavaFX + LeapMotion application with gradle

For SlideshowFX (which is an app I’m developing in JavaFX and using the LeapMotion controller) I am trying to use gradle as build and dependencies management system instead of the very well-known  maven. There are few steps I had to fight with to successfully build a self-contained application (aka native bundle). For those don’t knowing what that means take a look at the Oracle Documentation.

Disclaimer : I’m new in the gradle’s world so maybe a lot of things could be improved.

Prerequisites

  • Having a JDK 8 up and running
  • Having the JAVA_HOME environment variable defined to point the the JDK 8 installation
  • Having gradle installed properly (version 1.11 used at the time this article was written)
  • Knowing gradle a little bit

 

The javafxpackager

In order to package a JavaFX application you can use the javafxpackager tool provided with the JDK. It allows you to create the application JAR and then the native bundle for your application.

To create the jar you will use the following command:

javafxpackager -createjar ...

You will also need to define some attributes according your application, like -classpath for the list of JARs and libraries your application is using, -appclass for indicating what is the Application class of your application, -srcdir and -srcfiles for indicating which files should be included in your JAR, -outdir for indicating where the JAR file will be created and -outfile for the name of the JAR file.

To create the native bundle you will use the following command:

javafxpackager -deploy -native ...

Building with gradle

In order to build your application with gradle, we will invoke the javafxpackager tool from gradle itself. A JavaFX plugin for gradle exists but I didn’t succeed in using it for my purpose. Indeed for LeapMotion you need some DLL and dylib files that weren’t included in the final JavaFX bundle so I decided to do it myself using gradle tasks. And this also allowed to have a better understanding of the javafxpackager tool instead of just using an IDE to generate my bundle.

Configuration

In the build.gradle file, I configured all projects with the Java plugin and the source and target compatibility:

subprojects {
  apply plugin: 'java'
  sourceCompatibility = 1.8
  targetCompatibility= 1.8
}

Dependencies and libraries

For SlideshowFX I decided to use file dependencies. So first of all I declared the dependencies at the beginning of the build.gradle file:

ext {
  allLibs = new File(rootDir, '/lib')
  felix = fileTree(dir: allLibs, include: 'Felix/*.jar')
  json = fileTree(dir: allLibs, include: 'json/*.jar')
  jsoup = fileTree(dir: allLibs, include: 'jsoup-1.7.3.jar')
  junit = fileTree(dir: allLibs, include: 'junit-4.11.jar')
  leapmotion = fileTree(dir: allLibs, include: 'Leap/*')
  markdown = fileTree(dir: allLibs, include: 'markdown/*.jar')
  scribe = fileTree(dir: allLibs, include: 'Scribe/*.jar')
  textile = fileTree(dir: allLibs, include: 'WikiText/*.jar')
  velocity = fileTree(dir: allLibs, include: 'Velocity/*.jar')
  vertx = fileTree(dir: allLibs, include: 'Vert.x/*.jar')
  zxing = fileTree(dir: allLibs, include: 'ZXing/*.jar')

  jdk = System.env.'JAVA_HOME'
}

Those files collections will be used further for declaring dependencies for each project. For LeapMotion, all files are included: JARs, DLL, and dylib.

Build the jar

To build the JAR I decided to overwrite the default JAR task present in the Java plugin of gradle. We are going to follow these steps:

  • Copy all dependencies of the project to the libsDir folder
  • Build the -classpath attribute for the javafxpackager tool. Each JAR used by the application is adde to the classpath
  • Build the -srcdir/-srcfiles attributes for the javafxpackager tool. There will be many of these attributes because there are classes and resources
  • Build the javafxpackager command to execute
  • Execute the command

Knowing that here is the task definition:

task jar(overwrite: true) << {

  if (jdk != null && !jdk.isEmpty()) {

    if(!libsDir.exists()) libsDir.mkdirs()

    // Copying libs
    copy {
      from(new File(project(':SlideshowFX-markup').libsDir, project(':SlideshowFX-markup').archivesBaseName + ".jar"))
      from(felix.files)
      from(json.files)
      from(jsoup.files)
      from(leapmotion.files)
      from(scribe.files)
      from(velocity.files)
      from(vertx.files)
      from(zxing.files)

      into(libsDir)
    }

    def classpath = ""

    fileTree(dir: libsDir, include: '*.jar', exclude: archivesBaseName + ".jar").each {
      f ->
      classpath += f.name + ","
    }

    classpath += "."

    def javafxpackager = exec {
      workingDir "${project.projectDir.absolutePath}"

      commandLine "${jdk}/bin/javafxpackager",
                  "-createjar", "-v",
                  "-appclass", "com.twasyl.slideshowfx.app.SlideshowFX",
                  "-classpath", "${classpath}",
                  "-outdir", "${buildDir}${File.separator}${libsDir.name}",
                  "-outfile", "${project.archivesBaseName}",
                  "-srcdir", "${buildDir.name}/classes/main", "-srcfiles", "com",
                  "-srcdir", "${buildDir.name}/resources/main", "-srcfiles", "com"
    }
  }
}

Build the native bundle

Now that we have the JAR, let’s make the native bundle. For this we will also create a task for achieving this.

task buildJavaFXBundle << {

  if (jdk != null && !jdk.isEmpty()) {

    def javafxpackager = exec {
      workingDir "${project.projectDir.absolutePath}"

      commandLine "${jdk}/bin/javafxpackager",
                  "-deploy",
                  "-native",
                  "-name", "SlideshowFX",
                  "-outdir", "${buildDir.name}${File.separator}dist",
                  "-outfile", "SlideshowFX",
                  "-srcdir", "${buildDir.name}${File.separator}${libsDir.name}",
                  "-appclass", "com.twasyl.slideshowfx.app.SlideshowFX"
    }
  }
}

Tasks’ dependencies

Now that we have the needed tasks, let’s add some dependencies between them in order to include everything in the gradle lifecycle:

tasks['jar'].dependsOn 'classes'
tasks['jar'].dependsOn ':SlideshowFX-markup:jar'
tasks['buildJavaFXBundle'].dependsOn 'jar'
tasks['assemble'].dependsOn 'buildJavaFXBundle'

Now calling the assemble task makes it.

Update your Scene in JavaFX

Usually it is very simple to update your scene in JavaFX. For example if you want to update the X and Y position of your nodes, you can often simply do some stuff like:

node.setLayoutX(100d);
node.setLayoutY(150d);

But this isn’t a good way of doing it. In JavaFX you have to be sure you are in the JavaFX application thread. But how can you know this?

Platform.isApplicationFxThread();

But what if you’re not in that thread?

Platform.runLater(Runnable r);

So each time you would like to update your scene manually, you should check if you’re or not in the FX application thread. So let’s make a really simple helper class:

/**
 * @author Thierry Wasylczenko
 */
public class PlatformHelper {

    public static void run(Runnable treatment) {
        if(treatment == null) throw new IllegalArgumentException("The treatment to perform can not be null");

        if(Platform.isFxApplicationThread()) treatment.run();
        else Platform.runLater(treatment);
    }
}

The method run does the check for you. Finally you can use a lambda expression to execute that code:

final Node node = ... ;
PlatformHelper.run(() -> {
  node.setLayoutX(100d);
  node.setLayoutY(150d);
});

That’s it.

PathTextField: quick example of property usage in JavaFX

Context

Properties and binding in JavaFX is a really interesting feature that sometimes is hard to illustrate. Recently I just faced a problem in CompilerFX: file paths entered by the user could be problematic. Indeed on some platforms path separator is \ and on others it is /. In Java you can often use / as path separator.

Practice

So in our example, you can choose many solutions like for example:

  • When the user submit the path in a text field, replace all \ by /;
  • When the user enter a \, use a key event to replace it;
  • Choose a more JavaFX way.

Let’s deal with the third solution. Have this ones in mind:

  • In JavaFX you have the properties, allowing you to listen for a change using a ChangeListener;
  • The text of a TextField is store in the text property.

You could implement the second solution listen previously but let’s work with a custom text field that will replace replace all \ by /.

public class PathTextField extends TextField {

  {
    textProperty().addListener(new ChangeListener<String>() {
      @Override
      public void changed(ObservableValue<? extends String> observableValue, String s, String s2) {
        if(!textProperty().isBound() && s2 != null) {
          textProperty().set(s2.replaceAll("\\\\", "/"));
        }
      }
    });
  }
}

In this component, we place a ChangeListener on the text property in order to replace all \ by /. Then you can use it in your FXML files for example.

TableView and ListValueFactory in JavaFX

The TableView control is pretty complete to use and very convenient. But the classical use of it specify that a line is represented by an instance of an Object, usually a property bean. But in some cases it would be very useful to have a line composed by multiple instances of a specific class, i.e. having an instance per column, and each column should display a particular property of your instance. A concrete example would be the management interface of translations in NetBeans. Indeed, this screen display all properties files of a particular resource bundle, having a column for the translations keys and as many columns as needed to display the translations for each keys.

netbeans_i18n_editor

As said above, we could need an instance of object per column, meaning multiple instances per line. So a line of the TableView should be a List<? extends Object>. The problem is to know which data to display in a particular column.

ListValueFactory

As you may know, you can set CellValueFactory on a TableColumn, which will display the value in the cell. For example, you can set a PropertyValueFactory that will look for a property of a bean, and will display it. But that works if you have a single Object per line, not a collection. So we will create our own implementation that will check a property of a bean inside a list.

public class ListValueFactory<T, V> implements Callback<TableColumn.CellDataFeatures<List<T>, V>, ObservableValue<V>> {
  
  private String propertyName;

  public ListValueFactory(String propertyName) {
    this.propertyName = propertyName;
  }
    
  @Override
  public ObservableValue<V> call(TableColumn.CellDataFeatures<List<T> , V> p) {
        
    int index = 0;
        
    ListIterator<TableColumn<List<T>, ?>> iterator = 
       p.getTableView().getColumns().listIterator();
        
    TableColumn tmpColumn;
    while(iterator.hasNext()) {
      tmpColumn = iterator.next();

      if(tmpColumn == p.getTableColumn())
        break;
      else
        index++;
    }

    T object = p.getValue().get(index);

    try {
      Method method = object.getClass().getMethod(propertyName.concat("Property"));
      return (Property<V>) method.invoke(object);
    } catch (Exception ex) {
      Logger.getLogger(ListValueFactory.class.getName()).log(Level.SEVERE, null, ex);
      return null;
    }
  }
}

As you can see, the implementation is totally generic. First, we try to know the index of the column and we suppose that this index is the same index of the data in the list of data. WARNING: this is totally wrong if, in your UI, you move columns ; so take this into consideration because the implementation is not shown here. Once we have the index, we look for the data in the list, and finally, using so introspection, we look for the getter of the property in order to get the value. And that’s it.

Usage

To use this implementation in your code, you juste have to do the following:

TableView<List<Person>> tableView = new TableView<>();
TableColumn<String> columnOne = new TableColumn<>("First name one");
columnOne.setCellValueFactory(new ListValueFactory<List<Person>, String>("firstName"));
TableColumn<String> columnTwo = new TableColumn<>("First name two");
columnTwo.setCellValueFactory(new ListValueFactory<List<Person>, String>("firstName"));
tableView.getColumns().addAll(columnOne, columnTwo);

“Bind” components’ size to a MediaView’s size in JavaFX

The MediaView is a control allowing you to add videos and sounds to your JavaFX application. If you are playing a video, maybe you would like another control to have the same size. For example, you can have a video played next to an image that you would like to have the same height. The easy thing would like to do some property binding like this:

final MediaView mediaView = new MediaView(aPlayerInstance);
mediaView.setFitWidth(200);

final ImageView imageView = new ImageView(anImageInstance);
imageView.fitHeightProperty().bind(mediaView.heightProperty());

But this code is wrong because the MediaView doesn’t have a height property. So in order to succeed in our goal, the MediaView has a boundsInLocalProperty which can be used to change the size of the ImageView in our case. Look at this code example:

final MediaView mediaView = new MediaView(aPlayerInstance);
mediaView.setFitWidth(200);

final ImageView imageView = new ImageView(anImageInstance);

mediaView.boundsInLocalProperty().addListener(new ChangeListener<Bounds>() {
  @Override
  public void changed(ObservableValue<? extends Bounds> observableValue, Bounds bounds, Bounds bounds2) {
    imageView.setFitHeight(bounds2.getHeight());
  }
});

Of course you have to do some nullity checks to make your code more robust.

Working with NetBeans 7.3 and JavaFX 8

Maybe you want to work with the latest version of NetBeans, currently 7.3. But also with the early access of JDK 8 in order to play with the latest features of JavaFX. The thing is that NetBeans will not launch your JavaFX application, even if you are using JDK 7. Indeed you will get an exception dealing with Nashorn.

java.lang.VerifyError: Code generation bug in "runScript": likely stack misaligned: java.lang.ArrayIndexOutOfBoundsException: 0 <eval>
	at jdk.nashorn.internal.codegen.CodeGenerator.leave(CodeGenerator.java:1003)
	at jdk.nashorn.internal.ir.FunctionNode.accept(FunctionNode.java:339)
	at jdk.nashorn.internal.codegen.CompilationPhase$7.transform(CompilationPhase.java:239)
	at jdk.nashorn.internal.codegen.CompilationPhase.apply(CompilationPhase.java:372)
	at jdk.nashorn.internal.codegen.Compiler.compile(Compiler.java:263)
	at jdk.nashorn.internal.runtime.Context.compile(Context.java:758)
	at jdk.nashorn.internal.runtime.Context.compileScript(Context.java:720)
	at jdk.nashorn.internal.runtime.Context.compileScript(Context.java:358)
	at jdk.nashorn.api.scripting.NashornScriptEngine.compileImpl(NashornScriptEngine.java:463)
	at jdk.nashorn.api.scripting.NashornScriptEngine.compileImpl(NashornScriptEngine.java:451)
	at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:379)
	at jdk.nashorn.api.scripting.NashornScriptEngine.eval(NashornScriptEngine.java:134)
	at javax.script.AbstractScriptEngine.eval(AbstractScriptEngine.java:264)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:487)
	at org.apache.tools.ant.util.ReflectUtil.invoke(ReflectUtil.java:108)
	at org.apache.tools.ant.util.ReflectWrapper.invoke(ReflectWrapper.java:81)
	at org.apache.tools.ant.util.optional.JavaxScriptRunner.evaluateScript(JavaxScriptRunner.java:103)
	at org.apache.tools.ant.util.optional.JavaxScriptRunner.executeScript(JavaxScriptRunner.java:67)
	at org.apache.tools.ant.taskdefs.optional.Script.execute(Script.java:52)
	at org.apache.tools.ant.UnknownElement.execute(UnknownElement.java:291)
	at sun.reflect.GeneratedMethodAccessor74.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:487)
	at org.apache.tools.ant.dispatch.DispatchUtils.execute(DispatchUtils.java:106)
	at org.apache.tools.ant.Task.perform(Task.java:348)
	at org.apache.tools.ant.taskdefs.Sequential.execute(Sequential.java:68)
	at org.apache.tools.ant.UnknownElement.execute(UnknownElement.java:291)
	at sun.reflect.GeneratedMethodAccessor74.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:487)
	at org.apache.tools.ant.dispatch.DispatchUtils.execute(DispatchUtils.java:106)
	at org.apache.tools.ant.Task.perform(Task.java:348)
	at org.apache.tools.ant.taskdefs.MacroInstance.execute(MacroInstance.java:398)
	at org.apache.tools.ant.UnknownElement.execute(UnknownElement.java:291)
	at sun.reflect.GeneratedMethodAccessor74.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:487)
	at org.apache.tools.ant.dispatch.DispatchUtils.execute(DispatchUtils.java:106)
	at org.apache.tools.ant.Task.perform(Task.java:348)
	at org.apache.tools.ant.Target.execute(Target.java:392)
	at org.apache.tools.ant.Target.performTasks(Target.java:413)
	at org.apache.tools.ant.Project.executeSortedTargets(Project.java:1399)
	at org.apache.tools.ant.Project.executeTarget(Project.java:1368)
	at org.apache.tools.ant.helper.DefaultExecutor.executeTargets(DefaultExecutor.java:41)
	at org.apache.tools.ant.Project.executeTargets(Project.java:1251)
	at org.apache.tools.ant.module.bridge.impl.BridgeImpl.run(BridgeImpl.java:283)
	at org.apache.tools.ant.module.run.TargetExecutor.run(TargetExecutor.java:541)
	at org.netbeans.core.execution.RunClassThread.run(RunClassThread.java:153)
Caused by: java.lang.ArrayIndexOutOfBoundsException: 0
	at jdk.internal.org.objectweb.asm.Frame.merge(Frame.java:1408)
	at jdk.internal.org.objectweb.asm.Frame.merge(Frame.java:1364)
	at jdk.internal.org.objectweb.asm.MethodWriter.visitMaxs(MethodWriter.java:1382)
	at jdk.nashorn.internal.codegen.MethodEmitter.end(MethodEmitter.java:198)
	at jdk.nashorn.internal.codegen.CodeGenerator.leave(CodeGenerator.java:1000)
	... 50 more

The problem is that NetBeans uses the most recent JDK installed on your machine to run itself. And if you look in the About NetBeans menu entry, you will see that it uses the JDK 8 if it is installed, even if your JAVA_HOME points to your JDK 7 installation.

NB_JDK7

But there is a little workaround to get things working again: you can specify, in a configuration file of NetBeans, which JDK it should use. On OSX, show the package content of NetBeans 7.3.app and go to Content > Resources > NetBeans &gt etc and open the file netbeans.cnf. In this file, locate the line containing netbeans_jdkhome and uncomment it and specify the JDK home you want NetBeans to use. For example:

netbeans_jdkhome="/Library/Java/JavaVirtualMachines/Current/Contents/Home"

Then just restart NetBeans and go the About NetBeans menu entry. You should see that your JDK 7 installation instead of JDK 8.

NB_JDK8

Now if you try to launch your JavaFX application, everything is working again.

Set custom font in JavaFX 2

Maybe you would like to set custom fonts to your application for various reasons: make it touchy, be compliant with your corporation with corporate font, and so on. In JavaFX it’s pretty easy to change the font of a component. You can use the Labeled#setFont(Font f) method in your code, or define the -fx-font-family in your CSS. But what about custom fonts?

Load the font

The first thing you have to do is load the font. This is done like this:

Font.loadFont(SomeApp.class.getResource("/com/twasyl/someapp/font/MyFONT.TTF").toExternalForm(), 12);

This loads your font, which has a family, let’s say Thierry Font. This method makes the font available in your graphics environment and you just have to use it whenever you want. I like to place this code in my Application class, especially in the init method, so the I’m sure the font is loaded before any other treatment (especially before any labeled element is rendered). Let’s write this code:

public class SomeApp extends Application {

  @Override
  public void start(Stage stage) throws Exception {
    // Do some stuff
  }

  @Override
  public void init() throws Exception {
    super.init();

    Font.loadFont(SomeApp.class.getResource("/com/twasyl/someapp/font/MyFONT.TTF").toExternalForm(), 12);
  }

  public static void main(String[] args) {
      SomeApp.launch(args);
  }
}

Use your custom font

Punctual use

Either in your FXML or CSS code, you can now define the -fx-font-family with the value Thierry Font.

<Label style="-fx-font-family: 'Thierry Font'" />

This label will use the font, but what about the others elements? Do I really have to do this on ALL elements? Of course not …

General use

The interesting part is you can define your font for the whole application by default. Indeed in your CSS you just have to do this:

.root {
  -fx-font-family: 'Thierry Font';
  -fx-font-size: 15pt;
}

By default every labeled element will use your custom font. And of course you can change the font for a particular label again, using the style attribute for example.

DrawFX – the text tool

It hasn’t be an easy task to add a text tool, but I finally did it. The tool is actually a simple text area (with some customization for hiding the scroll bars) placed into a panel with some buttons (valid and cancel). The tool is not draggable and has the following options:
– Bold
– Italic
– Underline (a bit tricky to make that one work. A solution is proposed here but I used something else)
– Size for the text
– Change the font by using fonts on your system

It is also possible to resize the text area by simply drag the mouse anywhere. Below is a little demo.

DrawFX – this is JaaavaaaFX

DrawFX has made some good progress these days. A lot of new features/improvements have been implemented like:

  • Priority for tasks: tasks now have a priority which can be LOW, NORMAL and HIGH. The colour of each sticky accords the task’s priority: green for LOW, yellow for NORMAL and orange for HIGH ;
  • It is possible to have multiple layers
  • A “Pen” tool has been added. It draws a line (composed of squares) while the mouse is dragged. The thickness can be modified using a slider ;
  • A “Rectangle” tool has been added in order to draw rectangles. The stroke’s color is the primary color, the fill’s color the secondary one. The width of the stroke can be changed using a slider ;
  • An “Ellipse” tool has been added in order to draw ellipses. The stroke’s color is the primary color, the fill’s color the secondary one. The width of the stroke can be changed using a slider ;
  • A “Shape” tool has been added in order to draw polygons. One click with the primary mouse’s button in the drawing area draws a line between the current click’s location and the previous one, while a double click closes the polygon. The stroke’s color is the primary color, the fill’s color the secondary one. The width of the stroke can be changed using a slider ;
  • A “Move” tool has been added and allows to move a layer ;
  • The “Eraser” tool now have a width and height properties ;
  • The “Bucket” tool is now able to only fill an area delimited by a bound color. For example you can change the color of a polygon by using this tool ;
  • The “Brush” tool has been improved. It now draws shapes defined by a SVG path. By default, the SVG path is a square, but can be changed to any valid path. In my screencast I use the path of a Java logo. It is also to possible to specify the scale X and Y to resize the shape represented by the path.

I still have some nice features left in my mind.

DrawFX – What you draw is what you attach

Some have guessed what I’m developing: a kind of agile board in JavaFX. Well the thing is when I have a team meeting, where we discuss about functionalities, improvements, etc, sometimes I just want to draw something to explain what I understand, what could be done and so on. Sometimes a picture is better than thousand words… So I like to draw… For DrawFX I had this idea: why not give the possibility to the user to draw his ideas and then create a task and attach the content of the drawing board to the task? And that what I did.

I still have a lot of ideas, and here it’s just a first and basic implementation, but more is to come! Here are some screenshots and a screencast.
DrawFX_01

DrawFX02

Follow

Get every new post delivered to your Inbox.