The interface-lift for ARGen had been in the works for a few months prior to the announcement of the transfer. I had mentioned to Bob that I wanted to make ARGen simpler if we had the time. I knew I wanted to change the PopupMenu / Step design, but hadn’t solidified any mockup designs then.

As time progressed the idea grew to having the steps on the side of the window, akin to an Installer Package. This would give users an overview of every step (which was important to me), but it introduced a new challenge. The installer paradigm was designed for navigation sequentially – or one step at a time – and users would have to click next continually.

I didn’t need to build that design to know it was going to be a poor user experience. It was obvious the user would need to be able to navigate the steps in any order using the control. Naturally I thought I’d go for the source list approach. However there wasn’t any up-to-date source list available for Xojo. The closest thing was FGSourceList, a now outdated look.

I had overcome this challenge before. In the TaskTimer redesign, I went for a bold approach using a Listbox with a tall rowheight, and just admitting to needing a Listbox for the data. For TaskTimer, it worked. For ARGen, it looked like an out of place Listbox. The puzzle now was how to make the Listbox look at home.

It wasn’t long until inspiration from another app struck. Timing is a great app for tracking time automatically (sorry, TaskTimer), and its sidebar caught my eye. I could use symbology in a similar manner to indicate the items in my sidebar were clickable. By turning off the Listbox border, I could draw in the Window Paint event to create a sidebar background.

With the help of MBS I am able to get some system colors that I need to build an extended sidebar control. Christian even added accessibility properties to the suite for me, so the control draws correctly in high contrast mode!

Sub Paint(g As Graphics, areas() As REALbasic.Rect) Handles Paint
#pragma unused areas

// Draw fill
#if TargetMacOS then
dim taroColors() as NSColorMBS = NSColorMBS.alternatingContentBackgroundColors
g.ForeColor = taroColors(0).colorValue

#else
g.ForeColor = &cffffff

#endif

// Draw border
#if TargetMacOS then
g.ForeColor = NSColorMBS.secondaryLabelColor.colorValue

if NSWorkspaceMBS.accessibilityDisplayShouldIncreaseContrast = false then
g.ForeColor = rgb(g.ForeColor.Red, g.ForeColor.Green, g.ForeColor.Blue, 204)

end

#else
g.ForeColor = &c999999

#endif

g.DrawLine(lbStep.Width, 0, lbStep.Width, g.Height)

// Draw top border
#if TargetWindows then
g.DrawLine(0, 0, g.Width, 0)

#endif
End Sub

With this the window will draw the background of the sidebar control. Turning off the borders for the Listbox makes the control meld perfectly with the background. The result is a Listbox that is now the sidebar! I manually set the height of the Listbox to match the number of rows, otherwise clicking in the void after the last row selects the last row.

The icons in the Listbox rows are their own set of magic, and I will cover how awesome the icon class is in a follow up post!

Tags: ARGen, Code Secrets, Plugins