One of the things we spend a lot of time on here is ways to make our lives easier while developing.  DropTo->Gadget is just one of the tools we've developed so that we can spend more time actually coding and less time on the annoying, repetitive tasks.

XMLSettingsTransform is another example, and it works so well that we want to share it with other developers.  You might be wondering what XMLSettingsTransform is now and possibly the easiest way for me to summarize it is to say that it's a script that transforms XML into a settings dialog for your gadget.  The result is a familiar and consistent layout across all your gadgets, with advanced user interface elements and behaviors such as tab strips, combo boxes and spin controls that can automatically disable themselves if another setting has (or doesn't have) a specific value.

For the end user, this consistency makes for a comfortable environment in which they can customize the gadget, especially if you use the authentic looking custom controls that match controls used in Windows Vista dialogs.  For the developer, it makes writing the settings a breeze.  There's no HTML or styling involved (unless you decide not to use the default stylesheet) and there's no need to write even a single line of code.

Read on for a more detailed description of the features.  You can also see a working example of XMLSettingsTransform in the latest version of Amazon Sidebar Tool.

 

If you are a developer, you might be thinking "well, it doesn't really take me long to build my settings dialog anyway".  It might not, especially if you don't add any input checking or settings dependencies, or if you only have 2 user-definable settings in your gadget.  XMLSettingsTransform concentrates on taking care of the more difficult tasks that many developers don't even consider adding to their settings, but are a significant part of creating a user-friendly experience.

Custom Controls

Let's all be honest, there's a poor selection of controls available to gadgets. I really don't understand why Microsoft didn't expose any controls from the .NET Framework. A custom tag that works in a similar fashion to g:image wouldn't have been very difficult to implement.  So this is one of those situations where we have to take charge and create our own solutions.

Currently, XMLSettingsTransform provides three custom controls:

• Tab Strip - the group-switching interface we're all familiar with.
• ComboBox - a drop-down select box with text input capabilities gives you the option of typing a value manually or selecting predefined values from a list.
• Spin Control - A numeric-only text box with up and down buttons that allow the user to "spin" the value, or just type it manually.

Each of these custom controls has the necessary event handlers required to emulate the "real thing" as closely as possible.  For instance, the Tab Strip control allows multiple rows of tabs and switches tab when Ctrl+Tab is pressed,  the ComboBox cycles the predefined select options when the up/down keys are pressed and the spin control allows mouse wheel scrolling and has 3 different stylable states for the up/down buttons (idle, mouseover and mousedown).

Dependencies

Have you ever changed a setting in a gadget, only to find that setting didn't have any effect because another setting needed to have a specific value?  Auction Sidebar Tool disables any settings that require an eBay User ID if there isn't one set.  This gives users a good indication of what features they can use without inputting their details.  XMLSettingsTransform handles dependencies in a very straightforward manner.  You just declare the "dependency" attribute in the XML for the setting that needs to be disabled.  This is also recursive, meaning settings that depend on a setting that is disabled because of a dependency are also disabled.

Input matching and helpful messages/tips

Something else rather a pain to implement in gadgets is input matching.  I've seen (and even created) gadgets that don't check the input in a text box in the settings, so they'll save any value be it valid or otherwise.  This can cause errors in script or if this value is sent to a web API somewhere, it could be 2 or 3 seconds before the user even knows he's entered an incorrect value.

With XMLSettingsTransform, there are 2 attributes that can be added to a setting's XML tag: match and keymatch.  It's probably obvious to figure out which does what; match will perform a regular expression test on the whole string in a textbox when it loses focus and keymatch will perform a regular expression test on a key as the user is typing, blocking it if there's no match.  The user will be unable to switch focus away from a textbox with an invalid value, nor will he be able to close the settings dialog using the OK button.

That's all great, but we can't just block input or lock focus to a text box without letting the user know there's something wrong.  If a key is blocked or if the user tries to switch focus to another setting when the input is invalid, a system beep will sound.  That's a good start, but the user still doesn't know why it beeped.  This is where you might have to write a wee bit of code, 1 line per match to be exact.  XMLSettingsTransform will check for a string assigned to a global associative-array key with the setting name and if it finds one, it puts that string into a handy message bubble drawn with VML:

XMLSettingsTransform is starting to look like quite the time saver, eh?

I could hark on about XMLSettingsTransform all day (oh wait, I already have), but I'm sure the developers among you are more interested in actually trying it out.  Too bad this is just a post telling you that we will be releasing XMLSettingsTransform soon after we iron out a few issues.  It will be available under a Creative Commons Attribution-Non-Commercial-No Derivative Works license, which means it can't be used for commercial purposes, although we may consider commercial licenses on request.

I'll try and get the latest version plus developer how-tos/documentation released soon.  If you're really itching to use XMLSettingsTransform, you can download the aforementioned release of Amazon Sidebar Tool which is missing the spin control.  If you need any help getting started with it, feel free to ask for help in our Developer Tools forum.