Wiki
grezi / Home
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
: thejfxrt.jar
file found in<javafx-sdk2.1>\rt\lib
folderGROOVY_ALL_JAR
: it should be thegroovy-all-1.8.6.jar
file coming with the Groovy distributionGROOVYFX_JAR
: the GroovyFX jar file generated with the GroovyFX project; for convenience, you will findgroovyfx-0.2-SNAPSHOT.jar
in the sourcelibs
foldergrezi-0.1-SNAPSHOT.jar
, that you can find in the sourcedist
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 theFXForms.grezi.groovy
presentationphysics
for running thePhysics.grezi.groovy
presentation
Updated