SDL/Swing

Over the weekend I dusted off an old project that has always interested me and did a little recreational programming. Yes, I know I'm a geek. The project is called SDL/UI. Its a declarative framework for creating platform independent UIs using the Simple Declarative Language. By cross platform I mean the screen definitions are portable and the controllers are portable if you are using a cross platform language for the logic. SDL/UI's design goals are to be simple, concise and easy to extend. The first incarnation is SDL/Swing. I chose Swing over other options such as WPF because its a very powerful toolkit that lacks a simple application framework and Java is cross platform. The Eclipse and NetBeans RCP platforms are very powerful but they are not declarative and have a steep learning curve. JSR-296, the Swing Application Framework, was intended to provide a simple Swing framework but there has been little activity on this JSR in recent months and it too lacks a declarative component.

JavaFX has some nice capabilities including a declarative scripting language, a rich effects engine, data-binding, mutation triggers and declarative animation. I like the fact it doesn't use giant ugly XML files for UI definitions, but it is a relatively large framework that introduces a new, rather involved language. SDL/Swing definitions are much more concise and the framework is small and unobtrusive. For example, here is a menu definition:

menubar {
    "File" {
        "Open" do="open" // calls "open()" in the controller
        "---"
        "Exit" do="exit"
    }
}

Thats it. The strings in the menubar are automatically interpreted as menus and menu items. The "do" attributes call an action method in the controller associated with the form containing this menubar. SDL attributes are converted to bean properties. This allows you to easily configure components like so:

button "Hello" opaque=false icon="waving_hand.png" foreground="red"

The "button" tag below is mapped to javax.swing.JButton in a bindings property file. There are default bindings for common components. Application developers can add their own bindings or override default bindings like so:

button=com.ooi.swing.RoundButton

Container components take a "layout" attribute that maps to one of about a dozen layout managers ranging from simple vertical and horizontal stacking layouts to complex table layouts. Here is a browser bar (the area with the URL and buttons at the top of your browser) using a vertical layout:

hpane border="2,2,2,2" {
    "URL: "
    text constraint="fill"
    spacer 5
    button "<"
    button ">"
}

Result:


We can build this layout with a single API call referencing the file containing this definition:

JComponent browser = UI.build("comps/browser.sdl");

Examples of more complex layouts including table and spring can be seen here:

The UI in this example was constructed entirely with SDL/Swing. It would require approximately 5 times the number of lines to create the same UI in Java procedurally and the results would be much harder to read.

Finally, SDL/Swing supports dead simple localization. Prefixing "@" to a display string indicates its a key to be replaced by localized text. Example:

button "@yes"

This button will display "Oui" in the french locale. SDL/Swing looks up the strings in UTF8 property files located in the locales directory. This part of the localization system has been ported to C# as well.

I'll leave you with an example of a browser defined in SDL/Swing:

form ID="Browser" {
    hpane loc="north" border="2,2,2,2" \
            preferredHeight=24 {
               
        "URL" border="0,5,0,3" font="strong"
        button "Clear" do="clearURL" focusPainted=false
        text "http://www.cnn.com" constraint="fill" do="browseTo" minimumSize="5,5"
        button "Go" background="dark_green" do="browseTo"
        spacer 7
        button icon="recycle" do="refresh" style="toolbar"
        spacer 5
        button icon="navigate_left" do="back" style="toolbar"
        button icon="navigate_right" do="forward" style="toolbar"
    }
        
    browser URL="http://cnn.com" ID="browser"
}

Note: This example uses an excellent Swing friendly browser component provided by JadeLiquid.

SDL/Swing has a number of other interesting features including declarative CSS-like styles and integration with the SwingX painters framework. I hope to discuss these in a future post. For now we are using SDL/Swing for our own application development but we are considering releasing it as a product, possibly under a dual license with an open source version. As always, comments, questions and creative insults are welcome.


Ikayzo - Design • Build • Localize | Web • Desktop • Mobile