Our latest Updates
REALbasic: Drawing To A Cocoa Unified Toolbar (updated)
We’ve been beavering away in the Figa laboratory on our first Mac App. REALbasic’s Cocoa support has reached the point that it’s probably fit for everyday use despite still being classed as beta. Given that Carbon apps are starting to look dated and (from what we’ve heard) Carbon apps will look worse than a baboon’s bottom in Lion, we’ve decided that the app will be compiled with the Cocoa framework only. What does this mean? Well, our app needs to provide a unified toolbar. This is the toolbar that loads of Mac apps possess. Here’s a piccy of the Finder’s:
REALbasic provides a fairly functional toolbar class that can provide this look but (there’s always a but) does not allow any items apart from a standard button. There is no official way to insert a custom control (like a rounded search field for instance) into the toolbar.
If you’re compiling to Carbon then there are a number of workarounds involving Carbon declares. Since we’re compiling to Cocoa, we can’t use this option. After many hours (seriously!) of searching the internet, it would seem that nobody has implemented this in REALbasic with Cocoa (or at least published how to do it!).
Update: We’ve adjusted our method to incorporate code from Joris Vervuurt. He has made it possible to adjust the height of the top and bottom toolbar, correctly handle sheet window transitions and sorted out a window refresh issue. What a star! We’ve still not been able to find a solution that doesn’t require part of the fantastic MBS plugin from MonkeyBread Software. Specifically, you need the Cocoa and CocoaBase components which currently retail for €39 + VAT. This is a sound investment.
Add the following method to your window:
MovableByWindowBackgroundUnderCocoa as Boolean = False)
#if (TargetCocoa) then
// Calculate the style mask value depending on the properties of the passed window object dim
CustomStyleMask as Integer = NSWindowMBS.NSTexturedBackgroundWindowMask + _
NSWindowMBS.NSTitledWindowMask
if (w.CloseButton) then
CustomStyleMask = CustomStyleMask + NSWindowMBS.NSClosableWindowMask
end if
if (w.MinimizeButton) then
CustomStyleMask = CustomStyleMask + NSWindowMBS.NSMiniaturizableWindowMask
end if
if (w.Resizeable) then
// note: if the Resizeable property of the passed Window object is set to True, the maximize button will be
// enabled (the MaximizeButton property will be ignored)
CustomStyleMask = CustomStyleMask + NSWindowMBS.NSResizableWindowMask
end if
// Apply the calculated style mask value to the window
w.NSWindowMBS.styleMask = CustomStyleMask
// Set the title of the NSWindow object to the title of the passed Window object to make it appear
w.NSWindowMBS.Title = w.Title
// Set whether the window should be movable by the content area or not (default is set to false,
// see the optional parameter MovableByWindowBackgroundUnderCocoa)
w.NSWindowMBS.isMovableByWindowBackground = MovableByWindowBackgroundUnderCocoa
// Disable auto-recalculating the height of the top bar
w.NSWindowMBS.setAutorecalculatesContentBorderThickness(False, NSWindowMBS.NSMaxYEdge)
// Disable auto-recalculating the height of the bottom bar
w.NSWindowMBS.setAutorecalculatesContentBorderThickness(False, NSWindowMBS.NSMinYEdge)
// Set the height of the top bar
w.NSWindowMBS.setContentBorderThickness(TopHeight, NSWindowMBS.NSMaxYEdge)
// Set the height of the bottom bar
w.NSWindowMBS.setContentBorderThickness(BottomHeight, NSWindowMBS.NSMinYEdge)
return true
#elseif (TargetCarbon) then ' check if the required Carbon function is available
if (System.IsFunctionAvailable("HIWindowSetContentBorderThickness", "Carbon")) then
if (w.Composite) then
// The passed Window object must have it's Composite property set to true, otherwise it
// won't work properly
soft declare function HIWindowSetContentBorderThickness Lib "Carbon" (inWindow as WindowPtr,
inBorderThickness as Ptr) as integer
dim BorderThickness as new MemoryBlock(16)
BorderThickness.SingleValue(0) = TopHeight
BorderThickness.SingleValue(4) = 0
BorderThickness.SingleValue(8) = BottomHeight BorderThickness.SingleValue(12) = 0
// Draw the top and bottom bars according to the TopHeight and BottomHeight parameters
dim OSError as Integer = HIWindowSetContentBorderThickness(w, BorderThickness)
// Workaround for an issue where the background would turn white if the HasBackColor property of the
// passed Window object is set to false
if not (w.HasBackColor) then
w.BackColor = RGB(237, 237, 237)
w.HasBackColor = true
end if
// Finally, add rounded corners to the bottom bar
soft declare function ChangeWindowAttributes Lib "Carbon" (Window as WindowPtr,
SetAttributes as Integer, ClearAttributes as Integer) as integer
OSError = ChangeWindowAttributes(w, Bitwise.ShiftLeft(1, (12)), 0)
return true
end if
end if
#endif
return false
exception return false
end function
In the window’s Open event add:
// An error occurred, failed to add the unified top and bottom bars
end if
And Bob’s your uncle! You’ll have a fully functioning window that’s resizable and completely Cocoa-compliant (and Carbon safe) but with the added illusion of a fancy toolbar with your own controls within it. Here’s a screenshot of our example window:
And as a bonus pressie, we’ve attached the (now updated) sample project. Remember that you need the Cocoa plugin from MBS. It’s completely free to use within the REAL Studio IDE with no nagging. You only pay to build it.
7 Comments for REALbasic: Drawing To A Cocoa Unified Toolbar (updated)
I’d like to thank you for posting this example project.
However, as I also posted on the REAL Software Forums, I wanted to be able to set the height of the top and bottom bars.
I just wrote a method (which works on both Carbon and Cocoa) that allows you to do just that!
I’ve uploaded an example project (including the fully commented method) to my website:
http://www.joris-vervuurt.com/rs_forum_examples/UnifiedBars_Example.zip
The method can be found in Window1 of the example project.
Joris you are a legend!
I was just about to update this post to say that I had found an issue with sheet windows. It would seem that using just my code meant that sheet windows did not pop out from underneath the toolbar (they were 20 pixels off). The code you have posted works a treat. I will update the post to reflect this and include your sample if that’s OK.
Thanks! Sure you may use my code, that’s why I posted it in the first place. 
Perhaps a free license for FGSourceList and FGScopeBar? Hehe.
@Joris: Send me an email and I’ll give you a free copy of FGScopeBar to say thanks.
HI Really enjoyed this tutorial. Infact I have used it in my latest project.
Could you elaborate please – to show how to render the buttons and search field that is illustrated in your finder graphic above. That would be really appreciated. Also the ability to add icons?
By “render the search field” do you mean have a rounded textfield? If so then your best bet is to include the (free) macoslib (http://code.google.com/p/macoslib) module in your project and use their NSSearchField control. As for adding icons/buttons to the toolbar – you’ll have to draw them yourself with a custom canvas…
The sheet issue remains when you compile to Carbon. It rolls out at the top instead below the topheight.