JavaFX apps using Javascript and Gainda

In my last posts I've worked the with Nashorn Javascript engine to create JavaFX application.

It's great to work with JavaFX and Javascript, however, we can't forget that a boring part of the javascript code is that we have to import Java classes do be used and this can be a tedious things because you just want to script the view... See some examples of imports I had to use in my last projects

var Scene = Java.type('javafx.scene.Scene')
var VBox = Java.type('javafx.scene.layout.VBox')
var Label = Java.type('javafx.scene.control.Label')
var TextField = Java.type('javafx.scene.control.TextField')
var PieChart = Java.type('javafx.scene.chart.PieChart')
var TableView = Java.type('javafx.scene.control.TableView')
var TableColumn = Java.type('javafx.scene.control.TableColumn')
var PropertyValueFactory = Java.type('javafx.scene.control.cell.PropertyValueFactory')
var SearchService = Java.type('org.jugvale.sentiments.service.SearchService')
var TextSentimentService = Java.type('org.jugvale.sentiments.service.TextSentimentService')
var TableView = Java.type('javafx.scene.control.TableView')
var FXCollections = Java.type('javafx.collections.FXCollections')

Well, it can be improved and that's the goal of the Gainda project. Gainda means Nashorn in Hindi (गैंडा) and Nashorn is the name of the new Javascript engine that comes with Java 8.
With Gainda, we have like a DSL for JavaFX based on Javascript. See how a Hello World application looks like with Gainda:

load('./dist/gainda.js');

Gainda.run([ 'base', 'graphics', 'controls' ], function (stage) {

    var button = new Button();
    var root = new StackPane();

    stage.title = "Hello World!";
    
    button.text = "Say 'Hello World'";
    button.onAction = function() print("Hello World!");
    
    root.children.add(button);

    stage.scene = new Scene(root, 300, 250);
    stage.show();

});

Awesome! The project was created by Rajmahendra, the leader of the Chennai JUG.

My first application using Gainda

Here's the step-by-step to create an application using this framework:

1) Download the gainda.core.js file from github;
2) load it in your application: load('./gainda.core.js');
3) everything happens on run function, you must call this function and pass the modules you want to load, then you are ready to write JavaFX app using Gainda
4) Run it using jjs that can be found in JDK 8 bin folder, use the following command to run it:

$ jjs -fx myApp.js

My first application is a simple app that blinks a text when we click on it:

load('./gainda.core.js');
Gainda.run([ 'base', 'graphics', 'controls' ], function (stage) {
    var txt = new Text("Hello, Gainda!");
    var blink = new FadeTransition(Duration.millis(200), txt);
    txt.effect = new Reflection();
    txt.font = new Font(50);
    txt.fill = Color.RED
    blink.fromValue = 1;
    blink.toValue = 0;
    blink.autoReverse = true;
    blink.cycleCount = 2;
    txt.onMousePressed = function(e){
            blink.playFromStart();    
    };  
    stage.title = "Hello Gainda!";
    stage.scene = new Scene(new StackPane(txt), 350, 150);
    stage.show();
});

Conclusion

Gainda is a new utility for who likes to use another language to create user interface. The project is still starting and if you want to contribute, please contact Rajmahendra.