Remaining questions while evaluating JavaFX for a new project

Question

Dear forum members:
currently I am evaluating the possibilities of next-generation GUI technologies, such as JavaFX, Silverlight and Flash/Flex, for a new project. To get a basic understanding of JavaFX's concepts, I worked through the available online text and video tutorials, and all the treated topics seem quite obvious/comprehensible to me +as long as one is only confronted to relatively static GUI component hierarchies+. But, as a newbie, some questions concerning more dynamically defined GUIs (i.e. dynamic JFX scripting*) still remain.
Application scenario (exemplary):
Say I want to create a "Online Shopping Application" that supports "+ShopOwners+" in *dynamically* defining the "+Shop Model+" structure, e.g. accepted visitor (client) categories, product categories their products, pricing information, payment methods, etc.
Then, based on the dynamically defined model, the shop owner should be able to design and layout the necessary forms, such as order forms, survey/feedback forms, etc. This should be done in "design mode", and there should also exist a possibility for him/her to preview the specification results in a "preview mode".
Finally, the shop owner must be able to save the model and forms on the server side in a way that can requested and run be the shopping app end users (the shop clients) via (another (?)) JavaFX frontend.
_The still remaining questions for this scenario are:_
+1. Is JavaFX appropriate for creating such kind of applications, especially when it comes to dynamic JFX scripting (and compilation) on the client side??? (By now I'm not quite sure if this is really necessary for my plans!)+
+2. Concerning the ShopOwner's GUI with its design and preview mode (and knowing that the latter mode will be the GUI version presented to the shop clients in another JFX module):+
+Is it possible to *dynamically *build up a +Scene Graph+ in a way that lets me handle and *compile* the corresponding +JFX Script+ on the client side for previewing it? Or is a client-server roundtrip absolutely necessary?
How could one persist this JFX Script on the server side? I.e., which intermediary format would be the most appropriate? => XML, JSON, JFX Script?
3. Concerning the "Shop Model", would I optimally create JFX classes or even Java Beans to bind to?
4. And finally: What would be your recommended way (software architecture) to fulfill this task in JavaFX?
Do there already exist some JFX components (dynamic forms/survey authoring modules, etc.) that persue a similar task and that I didn't find yet?
As the clarification of the above-mentioned issues are very important for me, I hope that you more experienced users can help me, pointing me to a practicable approach.
Thank you very much for any help and constructive tips in advance.
Best regards
Martin Meyers

Answer 1

Q1: Do I optimally need 2 different custom components for each treated concept, or do I have just 1 component with 2 internal modes (design & preview/usage)??
E.g., (a) FormSpec widget composed of LabelSpec, TextBoxSpec, ChooseBoxSpec,... widgets each having their preview pendants
Form, Label, TextBox, ChooseBox, etc.
versus
+(b) only Form widget composed of Label, TextBox, ChooseBox widgets, but all having a "design/preview execution mode".+
Closer to (b), I think, though each widget doesn't need to be modified to have design and preview modes. Instead, each widget can be wrapped within a Group to provide the design/preview functions without modifying the widget itself.
The technique is as follows. Given a sequence of widgets (Nodes, really), for each widget, wrap it in a Group that contains that widget but with an overlay Rectangle in front of it. The Rectangle can be semi-transparent, or fully transparent if you prefer. (In the example below I've made it a semitransparent color to make its location obvious as well as to provide a highlight that signals design mode.) The overlay Rectangle is set up so that its dimensions will exactly track the dimensions (bounds) of the widget behind it. I've set blocksMouse to true so that when it's present, the overlay traps events and prevents interaction with the widget. There is a boolean variable previewMode, controlled by a CheckBox, that controls the visibility of these overlay rectangles. I've also added a bit of code to track mouse events on the overlay rectangles so that you can move the widgets around when you're in design mode.
Note that the visible variable differs from transparent, i.e. opacity == 0.0. If a node is visible but is transparent, it is still eligible to receive events; whereas if visible is false, it does not receive events.
Here's some code that illustrates this technique. I'll answer your other questions in a subsequent post.
import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.input.*;
import javafx.scene.layout.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
var previewMode = true;
var lastX:Number;
var lastY:Number;
function wrap(n:Node):Node {
    Group {
        content: [
            n,
            Rectangle {
                opacity: 0.2
                fill: Color.web("#ffff00")
                x: bind n.boundsInParent.minX
                y: bind n.boundsInParent.minY
                width: bind n.boundsInParent.width
                height: bind n.boundsInParent.height
                visible: bind previewMode
                blocksMouse: true
                onMousePressed: function(me:MouseEvent) {
                    lastX = me.x;
                    lastY = me.y;
                onMouseDragged: function(me:MouseEvent) {
                    n.layoutX += me.x - lastX;
                    n.layoutY += me.y - lastY;
                    lastX = me.x;
                    lastY = me.y;
var controlList:Node[] = [
    Button {
        layoutX: 140
        layoutY: 20
        text: "Button1"
        action: function() { println("Button1 clicked!"); }
    Slider {
        layoutX: 30
        layoutY: 60
        min: 0
        max: 100
        override var value on replace {
            println("Slider value is now {value}");
    Label {
        layoutX: 50
        layoutY: 100
        text: "Non-interactive label"
    CheckBox {
        layoutX: 40
        layoutY: 140
        text: "CheckBox"
        override var selected on replace {
            println("CheckBox is now {if (selected) "checked" else "unchecked"}");
Stage {
    title: "Design vs Preview Mode"
    width: 400
    height: 250
    scene: Scene {
        content: [
            CheckBox {
                layoutX: 10
                layoutY: 10
                text: "Preview Mode"
                selected: bind previewMode with inverse
            Panel {
                content: for (n in controlList) {
                    wrap(n)
}