A few UI Editor Tips and Tricks
Kevin walked past my laptop the other day and noticed an ugly looking hot-dog-inspired-colored window, and asked –what the hell is that?
This is what it was:
Ugly? Absolutely. Useful? I think so. I thought it deserved some explanation, so here goes.
Colors
I purposely use the bright colors to distinguish the different elements, along with the exact space each element takes up, and how each element lines up. This is especially helpful for labels.
This is purely to assist with the design of the form in Clarify’s User Interface Editor. These colors are not displayed at runtime in the Clarify Client.
For example, here’s the same form, with the same controls, but without the colors. Notice that its hard to tell what’s what, and how much space each control takes up.
With everything colored, I can easily see the full position, size, and alignment of each control. This makes designing the form much easier.
I then use a little ClearBasic code to color the elements nicely at runtime. For example:
‘Color the titles and summaries
For index = 1 To 10
‘Color the titles
Set label = Me.GetControlByName (“title” & cstr(index))
label.ForeColor = “hyperlink”
If index Mod 2 <> 0 And index <= numberOfResults Then
label.BackColor = “alternateRow”
Else
label.BackColor = “row”
End If
‘Color the summaries
Set label = Me.GetControlByName (“summary” & cstr(index))
label.BackColor = “row”
If index Mod 2 <> 0 And index <= numberOfResults Then
label.BackColor = “alternateRow”
End If
Next index
I often do this in web development as well, adding a background-color style to div elements, allowing me to easily see the size and position of each div.
Hiding controls off-screen
A common technique is to “hide” unused controls off-screen. Expand the form, move those controls to the expanded area, and then shrink the form back to its original size. Those controls outside the visible area will not be seen by agents using the Clarify Client.
Uses of this technique include:
- Baseline controls that are not needed (Deleting these controls could cause runtime errors)
- Controls used for debugging or testing
- Additional explanations
Here’s my form, expanded, so you can see the “hidden” controls:
Also notice that I’ve added some additional labels.
One that says “In UI Editor, expand this form to the right for more info –>” This label has its visible property set to False, so its only visible in UI Editor, and will not be seen in the Clarify Client. This clues the next developer that they can expand the form, and see the “hidden” controls, along with some more information.
I’ve also added a groupbox and a label that explain what’s going on with the form and the colors:
Not only does it remind me what’s going on when I revisit this form, but it also assists the next developer who works on this form.
Stacked Labels
You may notice the gray colored controls, which are behind the red & yellow controls. All 3 of these are labels. I’ve used the gray label to essentially give a left and right padding to the red and yellow labels.
You may also notice that only every other red/yellow label has a gray label behind it. This is allowing me to give a zebra effect to the results – coloring every other one.
This is how it looks at runtime in the Clarify Client:
It’s just enough of a subtle color difference to separate each item, without being overbearing.
The Tab Order is important here. The gray background labels must come before the red and yellow labels, otherwise the gray label will render in front of, instead of behind, the red & yellow labels.
What are some of your UI Editor tips & tricks?
