Posted On: Saturday, December 29th, 2007 (ResExcellence, Source Code, User Interface)
Posted by: Bob Keeney

Things have changed considerably in REALbasic over the years. When the 2nd version of this article came out in December of 2005, the REALbasic IDE had been rewritten to use the newer, modern interface and Carbon applications were still the rage for most Mac OS X applications. I will admit that the changes are for the better.

Every good Macintosh application should have a nice preferences window that’s clean and simple. If you take a look at what Apple has done with their own applications (the exception is the System Preferences) you’ll note that they use a toolbar on top of the window and based upon user selection switch between various control panels.

OS X Prefs

This is easy to do in REALbasic. We’ll start by creating a toolbar object in the project and adding 5 toggle style toolbar buttons: Debugger, Build Process, Code Editor, Window Editor and Help. We’ll set their icons to the graphics we’ve already created (note that the icons have an associate mask graphic).

Toolbar Only

Our next step is to create the window itself. Create a new window and add the toolbar that you created earlier. Next, add a PagePanel control and make sure that it has 5 panels. On panel 2, we’ll add a canvas object and set the background to the picture of the REALbasic code editor preferences. In the real world, you’d would add your controls that you would be showing but this is a demonstration.

In the Open event of the toolbar we’ll add this bit of code to preset the toolbar so it uses panel 2:

me.tbCodeEditor.pushed = true

In the action event you’ll do the following bit of code:

Toolbar Buttons Code

Here’s one of the platform differences that you have to be aware of. On the Mac, toggle style toolbar buttons act like radio buttons. In Windows they do not, so we’ll add a bit of code to reset the other buttons using the conditional compilation for Windows.

Otherwise all we do is call a method appropriately named SelectPanel and pass in the index of the panel we’re going to. That method calls SmoothResize which contains an API Declare for the Mac OS X to create a smooth resize of the window. We’ll add another set of conditional compilation #if statements to allow this to run on Windows as well.

Smooth Resize

As you can see, with very little work, it’s possible to make a very nice Mac OS X Style Preferences window. The bonus is that it works pretty well under Windows as well though the example still uses the Mac OS X style background.

Windows Prefs

Download the REALbasic project file: Project File

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

This entry was posted on Saturday, December 29th, 2007 at 6:30 pm and is filed under ResExcellence, Source Code, User Interface. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply