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.

1. Download the code here
2. Unzip the file in some directory, say mydir
3. Open a command line window, navigate to the mydir directory
4. 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