JavaFX allows one to define an UI not only using the JVM-Language of your choice but also by describing the UI in an XML-Format which is turned into an object graph at runtime.

The JavaFX samples are coming with an example like this:

<?xml version="1.0" encoding="UTF-8"?>
<!--
 * Copyright (c) 2008, 2011 Oracle and/or its affiliates.
 * All rights reserved. Use is subject to license terms.
 *
 * This file is available and licensed under the following license:
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 *  - Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 *  - Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in
 *    the documentation and/or other materials provided with the distribution.
 *  - Neither the name of Oracle Corporation nor the names of its
 *    contributors may be used to endorse or promote products derived
 *    from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>

<AnchorPane fx:controller="demo.LoginController" id="Login" prefHeight="280.0" prefWidth="480.0"
  xmlns:fx="http://javafx.com/fxml">
  <children>
    <TextField layoutX="68.0" layoutY="58.0" prefWidth="126.0" fx:id="userId" onAction="#processLogin"/>
    <PasswordField layoutX="323.0" layoutY="58.0" prefWidth="126.0" fx:id="password" onAction="#processLogin"/>
    <Label layoutX="229.0" layoutY="61.0" text="Password:" />
    <Label layoutX="16.0" layoutY="61.0" text="User:" />
    <Button layoutX="200.0" layoutY="125.0" text="login" defaultButton="true" fx:id="login" onAction="#processLogin"/>
    <Label layoutX="80.0" layoutY="200.0" textFill="RED" fx:id="errorMessage" />
  </children>
  <styleClass>
    <String fx:value="login" />
  </styleClass>
  <properties>
    <backgroundColor>
      <Color blue="1.0" green="1.0" red="1.0" />
    </backgroundColor>
    <elementLockSel>
      <Boolean fx:value="true" />
    </elementLockSel>
  </properties>
</AnchorPane>

The important thing here is that there’s no DTD or Schema available (which is similar to XAML) but there’s a set of rules how the XML-Elements are mapped to Java-Objects. I’m not going into the details of the mapping the interested reader can consult the PDF which describes the XML-Format in detail – the important fact for me is:

• XML is very verbose – so a more condense syntax would be favored to author such files and generate the fxml-File from it
• One needs integration in to Java Development Tools to look up Classes, Attributes, …

Price Question: Which framework in Eclipse world can be used to meet those requirements? Correct Xtext + Xbase + Xtend2 is the perfect match for those requirements. One of the strengths of Xtext is that you get a useable editor out of the box so I defined my own DSL. The translated XML-File from above looks like this:

import java.lang.*
import java.util.*
import javafx.collections.*
import javafx.scene.control.*
import javafx.scene.layout.*
import javafx.scene.paint.*
import javafx.scene.text.*

AnchorPane {
	children: [
		TextField id userId {
			layoutX:68.0,
			layoutY:58.0, 
			prefWidth: 126,
			prefHeight: 280
		},
		PasswordField id password {
			layoutX:323,
			layoutY:58,
			prefWidth:126
		},
		Label {
			layoutX: 229,
			layoutY: 61,
			text: "Password:"
		},
		Label {
			layoutX: 16,
			layoutY: 61,
			text: "User:"
		},
		Button id login { 
			layoutX: 200,
			layoutY: 125,
			text: "login",
			defaultButton: true
		},
		Label id errorMessage {
			layoutX: 80,
			layoutY: 200,
			textFill: "RED",
			call GridPane#rowIndex: 0
		} 
	],
	styleClass: String("login"),
	properties: {
		backgroundColor: Color {
			blue: 1.0,
			green: 1.0,
			red: 1.0
		},
		elementLockSel: Boolean("true")     
	}
}

Which automatically generates the following xml-file in the background while you are editing:

<?xml version="1.0" encoding="UTF-8"?>
<!-- 
	Do not edit this file it is generated by e(fx)clipse from /demo/login.fxgraph
-->
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>

<AnchorPane xmlns:fx="http://javafx.com/fxml"> 
	<children>
		<TextField fx:id="userId" layoutX="68.0" layoutY="58.0" prefWidth="126" prefHeight="280"/> 
		<PasswordField fx:id="password" layoutX="323" layoutY="58" prefWidth="126"/> 
		<Label layoutX="229" layoutY="61"> 
			<text>Password:</text>
		</Label>
		<Label layoutX="16" layoutY="61"> 
			<text>User:</text>
		</Label>
		<Button fx:id="login" layoutX="200" layoutY="125" defaultButton="true"> 
			<text>login</text>
		</Button>
		<Label fx:id="errorMessage" layoutX="80" layoutY="200"> 
			<textFill>RED</textFill>
			<GridPane.rowIndex>0</GridPane.rowIndex>
		</Label>
	</children>
	<styleClass>
		<String fx:value="login"/> 
	</styleClass>
	<properties>
		<backgroundColor>
			<Color blue="1.0" green="1.0" red="1.0"/> 
		</backgroundColor>
		<elementLockSel>
			<Boolean fx:value="true"/> 
		</elementLockSel>
	</properties>
</AnchorPane>

As you see in the end my DSL looks very similar to FX-Script (I’ve never used it myself so I’m doing guess work here).

Anyways the really cool thing is that you get integration into JDT (current only for the element-definition not for the attributes):

• Content assist integration
  
• JavaDoc integration
  

What I have currently is the default generated editor (took around 8 hours) and I’ll include this initial version into the up-coming e(fx)clipse release.