The ThinG diary

ThinG has been created in 7 days.

...well, almost. But at least I got the main things running, including Cut'n'Paste of most of the Thinlet components.

Back when I started to develop ThinG in Nov 2004, I made a record of the progress. Every night I made a screenshot of how ThinG was looking that day. It weren't seven consecutive days, but it were not more than seven days alltogether. This is a strong argument that Thinlet drastically speeds up your GUI design, because, I guess, if I had done it with Swing or SWT, development would have taken much more time.

Here comes the record of the progress...

screenshot of day 1

Day 1

  • You can add exactly one panel, and add buttons to this panel.
  • The property editor shows the properties of the selected panel or button, but you cannot edit them yet.
screenshot of day 2

Day 2

  • Now you can add all kinds of components. ThinG checks whether it is allowed to add a certain component to the current selected component. Inapplicable components are automatically hidden from the toolbar.
  • The property editor lets you edit boolean (true/false) properties.
  • Nice toolbar icons, but some component icons are still missing.
  • The ThinG application is now rendered anti-aliased.
screenshot of day 3

Day 3

  • New "Document" tab showing the Thinlet XML for the current component tree (later renamed to "XML").
  • The property editor lets you edit string, choice and integer properties. This means, that by now you already have enough functionality to create some small gui's! Just copy and paste the XML document on the "Document" tab over into your favorite editor.
  • Inputs for "property" attributes are checked to adhere to the Thinlet convention ("key1=value1;key2=value2;..."). If not, an error dialog is shown. The screenshot shows what happens if you enter an invalid property text.
  • You can remove components with the new button Remove selected component.
  • You can add a popupmenu to a component only once. Likewise for table headers.
  • Some more icons. Btw. I created all icons by myself, using Microsoft Paint... |-)
  • Still on my TODO list: load & save, import & export, copy & paste of components, setting method properties (ie. actions), fonts and colors in property editor.
screenshot of day 4

Day 4

  • File->Open implemented; the screenshot shows ThinG editing itself after thing.xml has been loaded. Icons and method definitions are not yet loaded. I implemented "Open" rather quick; it took more time to fix the message dialog, so that it matches the size of its contents.
screenshot of day 5

Day 5

  • File->Reload implemented.
  • Edit->Icon Path implemented.
    It is now possible to specify the directory where to load icons from. Icons are actually displayed in the preview. Also, the Edit Icon Path dialog has got a neat directory chooser. Have a look at the screenshot; it shows ThinG editing itself ;-).
  • In fact, coding the directory chooser was the most difficult part. I found out that Thinlet isn't very good at modal dialogs, so the directory chooser had to be inside an external AWT dialog. Same goes for other message dialogs.
  • The ThinG main frame now has a nice icon. :-)
screenshot of day 6

Day 6

  • You can now edit method and keystroke (ie. accelerator) properties. Keystroke strings are checked for proper syntax (eg. "ctrl shift F4" etc.) Method names and arguments are not checked. This is a feature, not a bug; I don't like the idea of checking whether the methods are actually there in some handler class, given its classname and classpath. Maybe later, at save stage.
  • Edit->Copy/Cut/Paste implemented.
    Actually, this was easier than I thought, because I could use the serializer/deserializer for that: a component tree that has been cut to clipboard simply gets serialized and remembered for later addition. You can even paste from the system clipboard: simply select some Thinlet XML in your favorite text editor and execute Edit->Paste from system clipboard !
  • Move Component Up/Down implemented.
    Note that you cannot move "header" and "popupmenu". They stay always at the first or last position of the child list of a component, respectively.
  • When parsing an erroneous XML file, ThinG now outputs the line number.
screenshot of day 7

Day 7

I know, I should rest on the seventh day, but I hope the lord forgives me coding these new features ;-) :
  • You can now edit font and color properties with new font and color chooser dialogs. The screenshot shows the color chooser.
  • You can edit icon properties.
  • The Reset button in the property editor resets the property to its default value.

That's it after seven days. I would call ThinG a product by now. ;-)

Development continues, of course, but I will no longer update the diary. However, it was interesting to document the progress (the first time I actually did this, btw.).

Here's a short list of what I have in mind for the next days:
This list is probably out of date when you look at it. The first public release of ThinG has already been done, and it contains even more features.

Bigger ideas naturally come during the development process. I'll write them down in the doc/TODO.txt file. Have a look!


Dirk Möbius
Last update: 2005/03/10
Document made with Nvu