Creating a data type named Instance makes for some confusing code.
Monthly Archive for July, 2008
The Toolkitr source is now in the IT Mill Toolkit SVN at http://dev.itmill.com/svn/incubator/Toolkitr/
I guess I have to give a small hack warning, so make sure you wear adequate protection goggles :)
Too thick.
Todays official Worst UI Design Award goes to *drumroll* pgAdmin III!
Awarded for the fantastic decision to allow double clicks in the same tree-view to behave differently depending on what node was clicked!
Double-clicking the localhost-server while not yet connected to it (marked with a red cross) connects to said server.
Double-clicking on one of the databases on said server, which are also marked with a red cross until visited, opens the Properties-popup for that database.
Hooray!
Due to at least one person asking for it, here’s the quick and dirty lowdown on the syntax for the DSL used in Toolkitr.
Layouts
| vertical | OrderedLayout(OrderedLayout.ORIENTATION_VERTICAL) |
| horizontal | OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL) |
| vertical_expand | ExpandLayout(ExpandLayout.ORIENTATION_VERTICAL) |
| horizontal_expand | ExpandLayout(ExpandLayout.ORIENTATION_HORIZONTAL) |
| vertical_split | SplitPanel(SplitPanel.ORIENTATION_VERTICAL) |
| horizontal_split | SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL) |
vertical {
... inner layouts and components ...
}
Component Containers
| tab_sheet | TabSheet |
| accordion | Accordion |
| tab(caption) | adds a tab to the tab sheet or accordion |
The syntax for creating a tab sheet is
tab_sheet {
tab("tab1") {
... inner layout containing components OR a single component ...
}
tab("tab2") {
... inner layout containing components OR a single component ...
}
}
Accordions work in the exact same way, just substitute “tab_sheet” for “accordion”.
Captioned Components
| button | Button |
| embedded | Embedded (not really useful right now, since it only displays it's caption) |
| label | Label |
| select | Select |
| slider | Slider |
| tree | Tree (not really useful right now) |
| text_field | TextField |
| checkbox | CheckBox |
| combobox | ComboBox |
| date_field | DateField |
| inline_date_field | InlineDateField |
| popup_date_field | PopupDateField |
| list_select | ListSelect |
| option_group | OptionGroup |
| twin_select | TwinColSelect |
| link | Link |
| upload | Upload |
The captioned components are all used in the same way. For example:
button("Hello World!")
creates a button with the caption “Hello World!”.
There is currently no way to fill the different selects with data.
Non-captioned Components
| rich_text | RichTextArea |
| progress_indicator | ProgressIndicator |
These components have no captions and are thus used by specifying only the component name and nothing else, e.g.
rich_text
Special components
| table(caption, numberofcolumns) | Table |
| text_area(caption, rows, columns) | TextField with multiple lines |
| grid(width, height) | GridLayout with width and height |
| custom(name) | CustomLayout(name) |
Adding something to a custom layout is done by using “location”, for example:
custom("my_custom_layout") {
location("foo") {
... component(s) ...
}
location("bar") {
... component(s) ...
}
}
That’s about it. I hope I didn’t miss anything…
Disclaimer: I work for IT Mill Ltd
One day I decided that I’d had enough of writing code like this:
Panel googlePanel = new Panel("Google");
OrderedLayout layout = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);
TextField searchField = new TextField("");
layout.addComponent(searchField);
Button searchButton = new Button("Search");
layout.addComponent(searchButton);
Button luckyButton = new Button("I'm feeling lucky");
layout.addComponent(luckyButton);
That piece of code builds a panel containing a Google-like search field and buttons using IT Mill Toolkit. Don’t get me wrong, I think IT Mill Toolkit is great for the kinds of software we do at work! You can quickly build a full AJAX-y Web 2.0 experience (buzzword galore!) without needing to touch any JavaScript or CSS. 1
My biggest grief with the above code is it’s verbosity and convoluted logic when trying to imagine what it will look like on screen. It’s really hard to follow and imagine that the result will look like this
And that is a simple example. More complex layouts can be exhausting to dream up.
So I sat down and started to hack away on a small JRuby application using the IT Mill Toolkit. What a joy! A dynamic, highly expressive and productive language like Ruby combined with all the strengths of IT Mill Toolkit is just a breath of fresh air!
The result? I present to you: Toolkitr
No more verbosity, the Java code required to produce the “Google-panel” can now be generated from this
panel ("Google") {
horizontal {
text_field("")
button("Search")
button("I'm feeling lucky")
}
}
If you are required to use Java, as I mostly am, the generated code can be cut-n-pasted into your project. Just like that.
I’ve been using this for a few months 2 on different projects now and I can tell you that my productivity when coding up new user interfaces has skyrocketed! The code/deploy/test cycle has gone from 2.5 minutes on my largest project (it’s hueg!) to as fast as I can type and click a button.
To play with Toolkitr yourself, just grab the WAR, deploy it in Tomcat/Jetty/whatever, point your browser to http://localhost:8080/Toolkitr and off you go.
Do keep in mind that this is beta software (thats classic :D) and a bit of a hack if I may say so myself, but it works.
If someone’s interested, I’ll post the syntax rules and more detailed information about Toolkitr.
So what next? An entire application framework based on this? Should we call it Toolkit on Rails? :)
(1) You do have to touch CSS if you want to customize the look of the application though. The default theme, however, is very good looking thanks to Jouni, so for basic applications there’s no need to theme.
(2) Yes, I am a bit lazy with the blogging ;)
The project I’m currently working on is highly enterprise grade software. In enterprise projects Java 1.5 and IT Mill Toolkit really is extreme bleeding edge(!), and thus succeeds in keeping us programmers interested.
The problem is that this piece of software is extremely dynamic.
It even creates new data types on the fly.
In Java.
Let that sink in for a while.
For those of you that know Java, you can imagine what reflection gymnastics we’re doing behind the scenes. It’s really very hard to follow in some places… A dynamic language would at least keep the source much cleaner and easier to understand, but the classic “We’re a pure Java-shop, here” seems to be everywhere.
I pity the foo’ that gets to maintain that code base.