Grezi

Grezi is an experimental implementation of a Zooming User Interface, based on the GroovyFX project that provides a Groovy binding for JavaFX 2.x. You can found here a screencast showing Grezi in action! As its name suggests it, Grezi is inspired by Prezi, The Zooming Presentation Editor.

Grezi permits to create your own presentations in Groovy language: it's based on GroovyFX facilities, and on scripting variables implicitly available in scripted presentations. Presentation.grezi.groovy (that you can found in presentations source folder) and showed in the screencast, is a good example of a scripted Grezi presentation. Here also another screencast showing Grezi in action. Grezi was also used by Jim Weaver in its presentation JavaFX in the Real World at OSCON Java 2011.

The current Grezi version was tested with JavaFX 2.2 and GroovyFX 0.3.

Using Grezi

Using Grezi is really simple:

• use drag/move with the right mouse button to pan a Grezi presentation
• press the right arrow key to focus on the next node defined in a predefined path that links some nodes; SHIFT+SPACE or left arrow key, to focus on the previous node; when focusing on a node, Grezi modifies the scene by moving, scaling or rotating so that, it shows the node using a large part of the display
• press the HOME key to navigate and focus on the first node in the path if there is one
• press the F5 function key to reload a modified presentation; it is particularly useful for the development of a presentation
• press the BACKSPACE key to return on visited nodes ; it's useful when you navigate freely between nodes
• use the mouse wheel to zoom in or zoom out the Grezi presentation
• depending on the presentation, some nodes can be selected in order to focus on them (see below)

Creating Grezi presentations

A Grezi presentation is a valid Groovy script file, and must have a script variable of type Closure, named map containing GroovyFX node definitions. The idea behind this approach is to give the full power of GroovyFX in Grezi presentations; the main class Grezy simply delegates the interpretation of the map's content to GroovyFX. So, a Grezi presentation must have this statement:

map = {
    // ...
}

map permits to build your JavaFX scene, but if you want to perform some initializations like JavaFX property bindings, and/or want to access to the scene instance, you can define a withScene script variable with one parameter as bellow:

withScene = { scene ->
    // ...
}

You can have a look to the Slideshows.grezi.groovy example.

Implicit scripted variables

For now, a Grezi presentation can use the following implicit Groovy variables:

• path

Use this variable to add a JavaFX node to the path of the presentation; path is simply a list of nodes defining the order in which they will be browsed. For example:

path << label(font: "12pt", layoutX: 10, layoutY: 10, 'odelia technologies')

• mapGroup

You can use this variable to access the JavaFX Group instance that contains your presentation defined by the map script variable. This variable is available after the scene is built ; otherwise it can be either unavailable or can have the null value.

• scene

This variable contains a reference to the JavaFX Scene instance. It is available after the scene is built. You can define the withScene script variable to be sure to use a valid scene reference.

• focusOnNode

focusOnNode is a predefined Closure that you use either with node event properties in order to focus on the node on the display, or to focus on a specific node giving its reference; for example when the user click on the node:

label(font: "12pt", layoutX: 10, layoutY: 10, onMousePressed: focusOnNode, text: 'odelia technologies')

Or here, when a button is pressed (bellow graph is a reference to a Node):

button(layoutX: 0, layoutY: 100, text: "test", onAction: { focusOnNode(graph) })

Grezi's presentations

For now, there is just one Grezi presentation available in the source presentations folder:

• Presentation.grezi.groovy

This Grezi presentation contains images and labels, with the possibility to navigate between images. Image files are fetched form the local machine (they are also available in the images source folder), so you have to change the content of imagesDir variable as needed.

• WebBrowser.grezi.groovy

Based on this GroovyFX example, this presentation includes a JavaFX web browser, with animated transition when the page changes.

• TransitionExampleX.grezi.groovy

Inspired by the article Using Transitions for Animation in Oracle's JavaFX 2.0 by Jim Weaver.

• ColorfulCircles.grezi.groovy

The Grezi version of the Colorful Circles Application.

• Graphviz.grezi.groovy

This presentation uses Graphviz (by invoking a command) in order to build a graph with JavaFX nodes, starting from a Graphviz graph definition.

• Graphviz2.grezi.groovy

Like Graphviz.grezi.groovy, this Grezi presentation build a scene from a Graphviz graph definition, and uses Béziers curves for the edges.

• Slideshows.grezi.groovy

Placed in presentations/Slideshows folder, this Grezi presentation demonstrates the use of HTML5 slideshows (with Slidr) showed with the help of a WebView node. It is also a good example of using the withScene script variable defining JavaFX property bindings.

• FXForms.grezi.groovy

In presentations/FXForms folder, this Grezi presentation shows a possible integration with the FXForm2 project (automatic form generation with Bean Validation). You can start the demonstation using the Gradle command fxforms. See this presentation in this screencast screencast.

• InstaViz.grezi.groovy

This Grezi presentation allows the user to create a graph with named nodes that can be connected to each other in a interactive way. When a connection is done, the application reorganizes the graph automatically (using Graphviz internally). Here a screencast about it.

• Physics.grezi.groovy

This presentation demonstrates the combinaison of JavaFX and the JBox2D project (Java Physics Engine), in which balls are dropped at the top of the scene and rebound on walls. There is a screencast of this presentation; it can be started with the Gradle command physics.

• 3DSlideshow.grezi.groovy

This Grezi presentation (placed in presentations/3DSlideshow folder) demonstrates an interaction between the JavaFX scene and a WebView component; the WebView component loads the Hakim CSS 3D Slideshow that is a HTML5/CSS3 slideshow, controled by execution of JavaScript code from the Grezi presentation code. You can see this presentation in action here.

• BubbleTreeFX.grezi.groovy

This Grezi demonstration combines two WebView JavaFX components in order to propose an interesting presentation tool: one of the WebView loads a generated HTML file, using the Bubble Tree JavaScript project (the file page is built using a Groovy template file and data in JSON format); and the other WebView permits to load an existing HTML5 page on a specific topic. This screencast will show you what it's all.

• Particles.grezi.groovy

This Grezi presentation (Particles.grezi.groovy) demonstrates how a particle system can be simulated; this example is inspired by the chapter 2 of the book JavaFX Special Effect (Apress).

• Canvas.grezi.groovy

This grezlet (see the grezlets folder) is a demonstration that uses the JavaFX Canvas component, inspired by Visualising live data with the HTML5 canvas. It shows how to implement animated graphs with Canvas.

• Wave.grezi.groovy

This demonstration (see the grezlets folder) is a reimplementation of the excellent HAKIM's Wave experiment, showing animated water bubbles. The original experiment uses HTML5/Canvas with a PHP server part queried for fetching tweets. In this Grezi grezlet, we use the JavaFX Canvas component and a HTTPBuilder instance is used to fetch tweets using the Tweeter's REST API. You can see this grezlet in action here.

Starting Grezi

You can start a standard Grezi presentation by using the following command (on Windows):

java  -cp %JFXRT_JAR%;%GROOVY_ALL_JAR%;%GROOVYFX_JAR%;Grezi.jar com.odelia.grezi.Grezi path.to.presentation.grezi.groovy

path.to.presentation.grezi.groovy designates a Groovy file containing your Grezi presentation; you also need to use these libraries on the classpath, some of them specified here as environment variables:

• JFXRT_JAR: the jfxrt.jar file found in <javafx-sdk2.1>\rt\lib folder
• GROOVY_ALL_JAR: it should be the groovy-all-1.8.6.jar file coming with the Groovy distribution
• GROOVYFX_JAR: the GroovyFX jar file generated with the GroovyFX project; for convenience, you will find groovyfx-0.2-SNAPSHOT.jar in the source libs folder
• grezi-0.1-SNAPSHOT.jar, that you can find in the source dist folder, in this repository

Building Grezi

Grezi can be built with Gradle 1.0+.

The Gradle build file supplies the task grezi to help you to start a Grezi presentation from Gradle. For example:

gradle grezi -Ppresentation=your_presentation_path_and_name.grezi.groovy

There is also these special tasks for some demonstrations that need specific Java libraries:

• fxforms that starts the FXForms.grezi.groovy presentation
• physics for running the Physics.grezi.groovy presentation