>_Chaotic Java

Some more JavaFX surprises

· JavaFX

Playing around with JavaFX and reading some more in the [scarce] documentation, I found the following neat tricks:
  • Expressions within quoted text: In JavaFX you can use variable and attribute names inside quoted strings, such as if you had a variable called name with the value "Aviad", the following quoted string: "Name: {name}" would be parsed (and printed out if used as output) to be "Name: Aviad". The neat part is that expressions can be used inside the curly brackets, and even if .. then .. else constructs.
  • Automatic Nested Loops: In JavaFX you can create a nested loop by just specifying the second (or third or nth) loop in the for construct. Example for writing the multiplication table: 
    
import java.lang.*;
import javafx.ui.*;
import javafx.ui.canvas.*;

Canvas {
    content: bind foreach (i in [1..10], j in [1..10]) {
        Text { content: "{i*j}" x:i * 30 y:j * 30}
    }
}
  • Quick Animations: You can quickly create animations by using the operator dur (from "duration"). When assigning any value with an array of possible values and the operator dur, JavaFX will create a background thread (or, more likely, push events into the AWT event queue) which will assign the range of values into the variable. By binding the location, size or transformation of a graphical element, this can create a smooth animation. Try the following example for a cube which escapes when approached with the mouse cursor: 
    
import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.Math;

class EscapingRect extends CompositeNode {
    attribute x: Number;
    attribute y: Number;
    attribute size: Number;
    
    operation runAway();
}

function EscapingRect.composeNode() = Rect { 
    x: bind x y: bind y
    width: bind size 
    height: bind size 
    fill: red 
    
    onMouseEntered: operation(e:CanvasMouseEvent) {
        runAway();
    }
};

operation EscapingRect.runAway() {
    var xDir = if Math.random() > 0.5 then 1 else -1;
    var yDir = if Math.random() > 0.5 then 1 else -1;
    x = [x..x+Math.random()*100 * xDir] dur 500;
    y = [y..y+Math.random()*100 * yDir] dur 500;
}

Canvas {
    content: EscapingRect { x: 100 y: 100 size: 100 }
}
And just like before, copy and paste it into JavaFX Pad and it should work!

Comments (16)

just me
I don't know why is wrong, but try to tst it! It just dosen't work... I have test it in NetBeans 5.5 and here it is the error: file:/C:/JavaApplications/JavaFXSamples/build/classes/FXSample.fx:7: Encountered "{" at line 7, column 8.
just me
I don't know why is wrong, but try to test it! It just dosen't work... I have test it in NetBeans 5.5 and here it is the error: file:/C:/JavaApplications/JavaFXSamples/build/classes/FXSample.fx:7: Encountered "{" at line 7, column 8.
just me
Are you sure that this work (look at line 7): import java.lang.*; import javafx.ui.*; import javafx.ui.canvas.*; Canvas { content: bind foreach (i in [1..10], j in [1..10]) { Text { content: "{i*j}" x:i * 30 y:j * 30} } }
just me
Wrong: import java.lang.*; import javafx.ui.*; import javafx.ui.canvas.*; Canvas { content: bind foreach (i in [1..10], j in [1..10]) { Text { content: "{i*j}" x:i * 30 y:j * 30} } } Good...: import java.lang.*; import javafx.ui.*; import javafx.ui.canvas.*; Canvas { content: bind foreach (i in [1..10], j in [1..10]) Text { content: "{i*j}" x:i * 30 y:j * 30} }
Avah
Why is it wrong to have the additional brackets?
JavaFX articles at “Chaotic Java” blog | JavaFX site
[...] Some more JavaFX surprises [...]
Sébastien Letélié and Cyril Balit weblog - Java, Javascript, Eclipse, RCP, RIA, SOA, AJAX, WPF, Swing, SWT, JFace, Web Services, REST
[...] Chris Oliver don’t choose XML for JavaFX Script unlike Microsoft with XAML. It’s true that JavaFX Script syntax is more intuitive and have advantages but we loose XML extension advantages (XInclude, XPath, XSLT). I was thinking Sun make more interest on JAXX, an XML UI language for Swing. But it’s a reality that JavaFX Script is an easier syntax for UI design. What about SWT ? Bob Brewin say JavaFX Script could be extended for SWT [Ed Burnette interview Q5], and SWT is going to be compatible with WPF, could we have SWT UI generated with XAML ? Don’t forget SWT is an UI library for RDA not RWA. The Silverlight, Flex and JavaFX Script objectives aren’t the same than Eclipse RCP, NetBeans RCP, Apollo and WPF. I notice that Silverlight use only 30% of WPF [5mn avec Kevin Gallo, Product Manager Silverlight par Didier Girard] where JavaFX Script can use all Java libraries. [...]
Sébastien Letélié and Cyril Balit weblog - Java, Javascript, Eclipse, RCP, RIA, SOA, AJAX, WPF, Swing, SWT, JFace, Web Services, REST
[...] Chris Oliver n’a pas choisi XML pour JavaFX Script contrairement à Microsoft avec XAML. Il est vrai que la syntaxe de Java FX Script est plus séduisante et offre des avantages mais on perd alors les avantages d’XML en terme d’extension (XInclude, XPath, XSLT). Dommage que Sun n’est pas poussé plus en avant le framework JAXX qui propose une syntaxe XML pour définir des UI. Mais ne nous y trompons pas il est indéniable que JavaFX Script propose une syntaxe facilitant la création d’UI plus ergonomique. Qu’en est il alors de SWT, Bob Brewin prétend que la syntaxe de JavaFX Script peut être étendu pour SWT [Ed Burnette interview Q5]. sachant que SWT est en cours d’adaptation à WPF, pourrait on avoir un XAML générant du SWT ? Cependant n’oublions pas que SWT n’est pas destiné au RWA mais uniquement au RDA. Les objectifs de Silverlight, Flex, JavaFX Script ne sont pas les mêmes que ceux de Eclipse RCP, NetBeans RCP, Apollo, et WPF. A noter que Silverlight n’utiliserais que 30% de WPF [5mn avec Kevin Gallo, Product Manager Silverlight par Didier Girard] contrairement à JavaFX qui s’appuie directement sur Java et donc toutes ses bibliothèques. Ce qu’il est intéressant de constater c’est qu’Eclipse est présent à presque tous les niveaux : [...]
Avah
Fixed. Thanks!
scarce
not scarse
Chaotic Java » Blog Archive » So, why not Groovy, really?
[...] Chaotic Java The interweb, design patterns, frameworks and Java « Some more JavaFX surprises [...]
jj
Hi, cool I like JavaFx. One question for you is it also possible to add a Rect dynamical with a Button or something? pseudocode: button{ canvas.getContent().add(myRect) } Is this possible?
Avah
jj: I don't understand your question... Are you looking to bind a rect to a button, or to have the rect as the button's content?
jj
Sorry. I try it again. The only thing I want is to generate dynamically Objects. It doesn't matter if this is a Rect or something like that. And the question was: I have a Canvas with some Object - and I want to add new Object (Views, Textfield, Rect) to the same Canvas. Also it have to be possible to get all objects from the Canvas - so can delete them. Hope this was better ....
Avah
jj: Elements like buttons do not have a sense of "canvas" - it's only Nodes (like CompositeNode) that have it. A composite node can reach to its parent canvas using the getCanvas() method, and then it should be able to access the content attribute. I suppose that if you create a function in a composite node that does something with getCanvas().content, and then assign the function to Button's action attribute (for example), it might work - but I haven't tried it. See if it works and let me know!
jj
okay THANKX. Now I can dynamically create Rect or simiular Object onto a Canvas. I have to Buttons one for Create and the other for delete. I did all Object in a List or Array. The List is full with objects which inherit from compositeNode. At Least I bind the hole list with select or foreach to the content.