Window Builder

drmule edited this page Jan 18, 2014 · 5 revisions

Google WindowBuilder is a wysiwyg form layout tool that ships with Eclipse Indigo. It is not perfect, but is quite usable and, for complex forms, is definitely more pleasant than doing layout by hand. This page describes how to integrate forms created with WindowBuilder into your Seesaw project.

The result of the steps laid out on this page is an example project here.

I'm going to assume that you're using Leiningen for your project and you want to minimize your time in Eclipse. If you're a CounterClockwise user, many of the steps here may be unnecessary and you may have a more pleasant experience.

Initial Setup

First, for "simplicity", we'll need the lein-eclipse plugin:

$ lein plugin install lein-eclipse 1.0.0

New for lein2

Plug-ins deprecated.

Edit/create ~/.lein/profiles.clj

Add this entry:

{:user
  {
  :java-cmd "C:\\Program Files\\Java\\jdk1.7.0_40\\bin\\java.exe" ;or whatever your path is
  :plugins [[lein2-eclipse "2.0.0"]   ]
  }
}

Next, set up our project:

$ lein new window-builder
$ cd window-builder

Now we'll edit project.clj to get it ready, by adding the Seesaw dependency and a Java source path so we can compile the form generated by WindowBuilder:

(defproject window-builder "0.0.0-SNAPSHOT"
  :description "Example of using Google Window Builder to create Seesaw forms"
  :dependencies [ [org.clojure/clojure "1.3.0"]
                  [seesaw "1.4.0"] ] 
  :java-source-path "src")

and finally we'll generate an Eclipse project file:

$ lein eclipse

Note that this step can be performed even on existing projects.

Creating the Form

Now we'll build the form with WindowBuilder:

  • Start Eclipse. It's fine to use an existing workspace, or create a new one if you like
  • Click File -> Import... -> General -> Existing Project into Workspace
  • For the root directory, select the project folder just create by Leiningen. DO NOT copy the project into the workspace.
  • Click Finish

and then:

  • Click File -> New -> Other ... -> WindowBuilder -> Swing Designer -> JPanel
  • Set the package to window_builder (note the underscore)
  • Set the Name to MyForm
  • Click Finish

You'll be presented with a blank form. The tabs at the bottom switch between the source and design view.

I'm not going to go into all the details of building the form other than one important detail: each widget that you care about using from Seesaw must be given a name. To do this:

  • Right-click on the Properties panel and click Show Advanced Properties
  • For every widget you'd like to expose, set its name property. This will end up being the Seesaw widget :id

Build your form as you like.

Using the form from Seesaw

Once your form is built in Window builder you can mercifully return to Clojure land. First, you'll need to make sure the Java code is compiled:

$ lein compile
Compiling 1 source file to .../window-builder/classes
No namespaces to :aot compile listed in project.clj.

Now we just need one simple function to make the names you set on the widgets act as Seesaw widget ids:

(ns window-builder.core
  (:use [seesaw.core])
  (:require [seesaw.selector :as selector]))

(defn identify
  [root]
  (doseq [w (select root [:*])]
    (if-let [n (.getName w)]
      (selector/id-of! w (keyword n))))
  root)

This basically iterates over all the widgets in a hierarchy and transfers the name property to where Seesaw expects to find the widget :id. It can be used to construct your form like this:

(identify (window_builder.MyForm.))

Once the form's constructed, you can use it like any other Seesaw widget. See the example for more details.