The making of TSW WebCoder 2013 part 3 – Design of the dialogs

March 6, 2012

As I mentioned in a previous blog post, I'm rethinking almost every aspect of WebCoder with this new version, and since I have to make all the application dialogs from scratch, I try to give a lot of thought to what might be changed to create an even better dialog. A great example of this is the dialog for managing the templates of WebCoder. Here's what it looks like in WebCoder 2010:

Templates in WebCoder 2010

Nothing wrong with it, but as it turned out, there were actually quite a few things that I wanted to changed for 2012:

  • The Icon view is not very good for templates with long names
  • The toolbar buttons are a bit small
  • The entire dialog is a bit small as well, in case of many templates
  • When adding or editing a template, a new dialog would pop up
  • There is no way to see what a template contains without selecting to edit it

A lot of these things simply made more sense years ago, when the average resolution was way lower, but today, most developers will have a resolution that justifies using a bit more space when needed. I have used this principle for several of the dialogs, but it's especially visible with the templates dialog, as you will see from this screenshot:

Templates dialog in WebCoder 2012 - overview mode

Besides the obvious size difference, I added categories to the templates along with a preview part directly in the dialog. You will also notice that there are now the possibility for placeholders in the templates, for instance to control where the cursor will appear when you use the template.

In case you want to add or edit a template, the dialog will look like this - no new window necessary:

Templates dialog in WebCoder 2012 - edit mode

As you can see, I've also gathered some more templates, ready-to-use for you. If you have any suggestions for templates, please do let me know!

I hope you like what you see. Let me know what you think of this new approach to the dialogs of WebCoder :)


Disclaimer: WebCoder 2012 is still far from being done. These blog posts are merely to show you what this new version will be like and to give you an impression of the development process. I hope to have the final version of WebCoder 2012 ready in the third quarter of 2012, but nothing is certain yet!

Kasper (TSW) @ 11:29 am in TSW,WebCoder