Experimental Declarative UI Language

Preface

I recently read a bit about a declarative UI language, using Java/Swing.

The language is now named JavaFX Script Language, previouly F3, see the getting started page. The original swing support tutorial is available here.

The official page for the JavaFX language is available at openjfx. See the language description on Wikipedia.

While I was reading the swing tutorial I started thinking of how close the same declarative could be expressed in Ruby running with JRuby (a Ruby interpreter written in Java, 100% pure Java).

So I started writing a proof of concept... I named swiby (Swing with Ruby)

I won't write a full tutorial here, just a short introduction. The project is only experimental, I reached a point showing my idea was realistic and I don't plan to go on right now.

Two things interrested me in F3: the declarative approach for Swing GUIs and the automatic data binding. As a reflection on defining the declarative Swing was already made by F3 author (Chris Oliver), I relied on it. But, while working on it, I found we could go some step further. I didn't really take any decision but, for this project to go on, a reflection on a very clear definition is required.

Comparison Examples

I followed the F3 tutorial, trying to write the same kind of code. Here I just give two examples of how close the code written in F3 and the version I named swiby are.

The first example is the dynamic version of Hello, world. The F3 code is as follows:

class HelloWorldModel { attribute saying: String; } var model = HelloWorldModel { saying: "Hello World" }; var win = Frame { title: "Hello World F3" width: 200 content: Label { text: bind model.saying } visible: true };

While the version I wrote looks like:

require ' swiby ' class HelloWorldModel attr_accessor :saying end model = HelloWorldModel . new model . saying = " Hello World " Frame { title " Hello World F3 " width 200 content { Label { text bind ( model , :saying ) } } visible true }

The second example is the one showing tabbed pane, here is the F3 version:

var model = Model { tabPlacement: TOP tabLayout: WRAP selectedTab: 3 tabCount: 5 }; Frame { height: 300 width: 400 content: TabbedPane { tabPlacement: bind model.tabPlacement tabLayout: bind model.tabLayout tabs: bind foreach (i in [1..model.tabCount]) Tab { title: "Tab {i}" toolTipText: "Tooltip {i}" } selectedIndex: bind model.selectedTab } visible: true }

And the swiby one:

require ' swiby ' class Model attr_accessor :tabPlacement attr_accessor :tabLayout attr_accessor :selectedTab attr_reader :tabCount def tabCount= ( value ) @tabCount = value . to_i end end model = Model . new model . tabPlacement = TOP model . tabLayout = WRAP model . tabCount = 5 model . selectedTab = 3 Frame { height 300 width 400 content { TabbedPane { tabPlacement bind { model . tabPlacement } tabLayout bind { model . tabLayout } tabs bind { ( 1 .. model . tabCount ). collect do | i | Tab { title " Tab #{i} " tooltip " Tooltop #{i} " } end } selectedIndex bind { model . selectedTab } } } visible true }

I also added a second window to test the demo (see next image).

The control window changes the number of tabs and the tab position. Next image shows the window with the tabs.

Hereafter, the code of the control window.

class DemoModel attr_reader :layoutIndex attr_reader :placementIndex def initialize ( model ) @model = model end def layoutIndex= ( value ) @model . tabLayout = [ SCROLL , WRAP ][ value ] @layoutIndex = value end def placementIndex= ( value ) @model . tabPlacement = [ TOP , LEFT , RIGHT , BOTTOM ][ value ] @placementIndex = value end end demo = DemoModel . new ( model ) demo . layoutIndex = 1 demo . placementIndex = 0 Frame { title bind {" Tab count is #{model.tabCount} "} width 200 content { GridPanel { border { Empty { top 5 left 5 bottom 5 right 5 } } rows 3 columns 2 hgap 10 vgap 5 cells {[ SimpleLabel { text " Number of tabs: " }, TextField { value bind ( model , :tabCount ) }, SimpleLabel { text " Placement: " }, ComboBox { cells {[ " Top ", " Left ", " Right ", " Bottom " ]} selection bind ( demo , :placementIndex ) }, SimpleLabel { text " Layout: " }, ComboBox { cells {[ " Scroll ", " Wrap " ]} selection bind ( demo , :layoutIndex ) } ]} } } visible true }

How to run the examples?

To run and test the examples follow next steps, but first you need to install JRuby of course.

Download the code here Unzip the file in some directory, say mydir Open a command line window, navigate to the mydir directory Execute next command: jruby -Iswiby samples/tab_demo.rb

Replace tab_demo.rb with the script you want to test. All the examples are in the samples subdirectory.

Future...

As I said above, I just wanted to asses the idea, a lot of things are missing, Swing support is poor. A big refactoring of swiby is necessary and a better definition of the declarative language is necessary.

Errors are very difficult to track. An effort to produce helpful and precise messages is top priority! As a remark, jruby seems to point one line after the actual line.

Updates

July 14, 2007

Added reference to the renamed F3 language as JavaFX Script Language

September 15, 2007

Some JavaFX links were changed...

Links

JavaFX Script and Swing page

JavaFX Script Language page

F3 presentation on Wikipedia

F3 language description

F3 swing support description

The Java Ruby Interpreter, JRuby

Tool used to generate colored syntax examples for Ruby, Syntax Project