#!/usr/bin/perl -w # # Copyright 2000 by Michael Coyle # Released under GPL. # # Call it with: # [an error occurred while processing this directive] # # Get the file name from the browser... $file_name = $ENV{'QUERY_STRING'}; # Open the file... open (EP, $file_name); # Print to the browser... print "Content-Type: text/html \n\n"; # Load the file and keep spitting it out to the browser... while () { chomp; print "$_ "; } # Close the file and go home... close EP #!/usr/bin/perl -w # # Copyright 2000 by Michael Coyle # Released under GPL. # # Call it with: # [an error occurred while processing this directive] # # Get the file name from the browser... $file_name = $ENV{'QUERY_STRING'}; # Open the file... open (EP, $file_name); # Print to the browser... print "Content-Type: text/html \n\n"; # Load the file and keep spitting it out to the browser... while () { chomp; print "$_ "; } # Close the file and go home... close EP

3D
3D Photo Gallery (Part 1)
3D Photo Gallery (Part 2)

Audio
Poor Man's MIDI
Make A Metronome
iPod Tricks (Part 1)
iPod Tricks (Part 2)
iPod Tricks (Part 3)
Laugh Track Machine
Audio Player with Reverb
Shepard Melody
RB Phone Home
Build a Drum Machine

Custom Controls and Windows
Double Click Listbox
Draggable Metal Window
Double Click Canvas
Custom Buttons
Custom Buttons Part II
iTunes-style Listboxes
Custom Controls

General RB
Scrolling Windows
Using Mesage Dialogs
Case-Sensitive Word Finder
Introduction to Stacks
Wiggle Window
JPEG in PDF
Listbox Checkboxes
Background Applications
Listbox Auto-Find
Virtual Volumes
Time Tracker
Software Distribution (Part 1)
Software Distribution (Part 2)
Software Distribution (Part 3)
Software Distribution (Part 4)
Exceptions
Tips and Tricks
Text Clippings Made Easy

Graphics
Drawing a Simple Gradient
The SpriteSurface: Space Game
Image Spinner
Cropping Graphics (Part 1)
Cropping Graphics (Part 2)
Cropping Graphics (Part 3)
Cropping Graphics (Part 4)
Shimmer Graphics
Lissajous Figures
Simple Screen Capture
Vector Graphics
Kaleidoscope Images
Stegonography
Spirals!
Image Table
RB Magnifying Lens
Screen Capture
Color Picker Tutorial

Hacks
Ghost Grab
Speedy Mouse Extension
iTunes Plugins
iTunes Skinner

Mac OS X
Global Hot Key Event (Carbon Events)
Login Welcomer (Carbon Events)
Add/Remove Buttons
Resizable Sheets
Mac OS X Preferences Window
Using Sheets in REALbasic
Build a Bundle (Part 1)
Build a Bundle (Part 2)
Dock Your Passwords
Mac OS X Debugging
REALbasic Mac OS X Icon Tutorial
Animate Your Dock
RB and the Command Line

Menus
Window Menu
Templates Menu
Listbox Menu

Novelty
Guessing Game
Calendar Trivia
Tile Mixer
Zip Code Finder
Happy Valentine's Day
Merlin Simulator (Part 1)
Merlin Simulator (Part 2)
Merlin Simulator (Part 3)
Buzzword Machine
AppleSoft BASIC

Printing
Print to PDF

Registration
Registration Code Validation
Network Registration Codes

Resources
Picture Extractor (Part 1)
Picture Extractor (Part 2)

Serial
Caller ID (Part 1)
Caller ID (Part 2)
Caller ID (Part 3)

Speech
Speech Recognition

Socket Communication
Easy Peer-to-Peer File Sharing
MacPAD Version Checking
Display Web Image In Canvas
HTML IMG Tags
Version Tracking
Even Smarter Instant Messaging
Web Tiler
JavaScript and REALbasic
Stock Ticker (Part I)
Stock Ticker (Part 2)
AIM Mate

XML Manipulation
Simple XML Introduction

Video
Big Brother Video Capture

Note: All articles without a byline were written by Erick Tejkowski. When cleaning the site I removed them because the code differed from page to page, and I have yet to put them back in.

REALbasic for Dummies
by Erick Tejkowski

$19.99 @ Amazon

Files are in Stuffit 6.5 or earlier, or ZIP format.
Download Stuffit Expander

Tell us about a bad link.

Mac OS X Preferences Window by Seth Willits
12-06-03

Description
Mac OS X changed many of the ways programs are designed and created. The system-wide toolbar probably had the largest affect more than anything because of its versatility. Toolbars are used in the Finder and Safari for navigation and view manipulation, they're used in Mail to invoke certain actions such as deleting or creating a new document, and in System Preferences, toolbar items are used to select one of many preference panes so that we can change that panes settings.

This idea has been spreading not only among Apple's programs, but also throughout third-party applications. Using this design for a preferences window in your application will certainly improve its image making a better impression on users, and is the reason we're going to make one in this tutorial.

Design
There are really only two parts to creating a preferences window with this design. There are the toolbar items which are used to select from the panes, and then there are the preference panes themselves. Since we're going to want to switch between multiple panes in a single window, we'll use a PagePanel to hold the panes and multiple ToolbarItem controls to select the panes.

In the image above, you can see there is a large page panel filling most of the window, and then a small group of ToolbarItems at the bottom. Since the different preference panes will have varying height requirements, the PagePanel which holds the controls for the panes will need to be tall enough to accomadate the largest pane. When a ToolbarItem is clicked on, thus changing the current pane, the window will resize to be just large enough to show only that pane; Just like in System Preferences.

Adding Controls to the Window
Start making the window for our project by creating a window that is 595 pixels wide and 600 pixels tall. The PagePanel inside of it should be named "PanesPanel", 597 pixels wide and 500 pixels tall, and positioned at Left: -1, and Top: -1. After that, make sure there are three pages in the PagePanel (0, 1, and 2) and add any controls you want to them. Then create three ToolbarItems naming them all "PrefsTBItem" and creating a control array out of them. Make sure that the leftmost ToolbarItem has an Index 0 and the rightmost Index 2. (You're going to want to keep them in the same order as they would appear at runtime.)

Since the three preference panels we're going to make are Dock, Keyboard & Mouse, and Network, go ahead and set the Caption value of those three ToolbarItems to Dock, Keyboard && Mouse, and Network respectively. (Don't forget that double ampersands (&&) are required to make one appear.) Download the finished project and import the pictures into your project. Go ahead and set the image values for the ToolbarItems to PicDock, PicKeyboard, and PicNetwork. Since these images don't have a mask, we will reset the images in code, but we set these now because it makes it easier to see which ToolbarItem is which when we're working in the IDE.

To give the pictures a mask, we'll draw the mask images into the PicDock, PicKeyboard, and PicNetwork images "Mask" properties, then reset the ToolbarItems Image property so the changes will take affect.

Window Resizing
As I said before, we need to know the heights of the individual preference panes so we can resize the window accordingly. To do this, create a new module named "PrefsStuff" and add the constants in the window below. In addition to knowing the heights of the panes, we'll need a way to resize the window. Now while we could simply use a single line of code like "Main.Height = kDockPanelHeight" that's not very fancy since the window is instantly resized. If you take a look at System Preferences, you'll notice that the window smoothly resizes. To do this, we'll use a method from the Carbon Declare Library called SmoothResize. The code for SmoothReisize is below. Add it to your PrefsStuff module.

Sub SmoothResize(w as window, width as integer, height as integer, align as integer)
   // Added 11/13/2001 by Jarvis Badgley
   // Edited 12/05/2001 by Jarvis Badgley
   // Modified 2/3/2002 by Kevin Ballard
   // ---
   // Rewritten 2/22/2002 by Kevin Ballard
   // Based off of code by Jean-Francois Roy 
										<bahamut@mac.com>
										
   // ---
   // Modified 8/23/02 by Kevin Ballard
   // Modified 12/14/02 by Pedro fp 
										<lists@pedro.Net.au>
										
   // Modified 12/14/02 by Kevin Ballard
   //
   // Align numbers:
   //     0) Lock upper left
   //     1) Lock upper right
   //     2) Lock lower left
   //     3) Lock lower right
   //     4) Lock top center
   //     5) Lock left center
   //     6) Lock bottom center
   //     7) Lock right center
   
   #if Target68k then
   // No 68k code
   #else
   
   dim err, t, l as integer
   dim rect as MemoryBlock
   
   #if TargetCarbon then
   Declare Function TransitionWindow Lib "CarbonLib" (window as WindowPtr, effect as Integer, action as Integer, rect as Ptr) as Integer
   Declare Function GetWindowBounds  Lib "CarbonLib" (window As WindowPtr, regionCode As Integer, globalBounds As Ptr) as Integer
   #else
   Declare Function TransitionWindow Lib "WindowsLib" (window as WindowPtr, effect as Integer, action as Integer, rect as Ptr) as Integer
   Declare Function GetWindowBounds  Lib "WindowsLib" (window As WindowPtr, regionCode As Integer, globalBounds As Ptr) as Integer
   #endif
   
   // we get the old window region
   rect = NewMemoryBlock(8)
   err = GetWindowBounds(w, 32, rect)
   
   t = w.Top // Need to know where the top and left of the window go
   l = w.Left
   Select Case align // Use deltas in measurements, not absolutes
   Case 0 // Lock upper left
      rect.Short(4) = rect.Short(4) + (height - w.height)
      rect.Short(6) = rect.Short(6) + (width - w.width)
   Case 1 // Lock upper right
      rect.Short(2) = rect.Short(2) - (width - w.width)
      rect.Short(4) = rect.Short(4) + (height - w.height)
      l = l - (width - w.width) // Left side moves
   Case 2 // Lock lower left
      rect.Short(0) = rect.Short(0) - (height - w.height)
      rect.Short(6) = rect.Short(6) + (width - w.width)
      t = t - (height - w.height) // Top side moves
   Case 3 // Lock lower right
      rect.Short(0) = rect.Short(0) - (height - w.height)
      rect.Short(2) = rect.Short(2) - (width - w.width)
      t = t - (height - w.height) // Top side moves
      l = l - (width - w.width) // Left side moves
   Case 4 // Lock top center
      rect.Short(2) = rect.Short(2) - (width - w.width) / 2
      rect.Short(4) = rect.Short(4) + (height - w.height)
      rect.Short(6) = rect.Short(6) + (width - w.width) / 2
      l = l - (width - w.width)/2 // Both sides move
   Case 5 // Lock left center
      rect.Short(0) = rect.Short(0) - (height - w.height) / 2
      rect.Short(4) = rect.Short(4) + (height - w.height) / 2
      rect.Short(6) = rect.Short(6) + (width - w.width)
      t = t - (height - w.height) / 2 // Top moves
   Case 6 // Lock bottom center
      rect.Short(0) = rect.Short(0) - (height - w.height)
      rect.Short(2) = rect.Short(2) - (width - w.width) / 2
      rect.Short(6) = rect.Short(6) + (width - w.width) / 2
      t = t - (height - w.height) // Top moves
      l = l - (width - w.width) / 2 // Left moves
   Case 7 // Lock right center
      rect.Short(0) = rect.Short(0) - (height - w.height) / 2
      rect.Short(2) = rect.Short(2) - (width - w.width)
      rect.Short(4) = rect.Short(4) + (height - w.height) / 2
      t = t - (height - w.height) / 2// Top moves
      l = l - (width - w.width) // Left moves
   End Select // If none of these, don't change
   
   // transition
   err = TransitionWindow(w, 3, 4, rect)
   
   // have to manually set the window's new height after resizing the window
   w.Top = t
   w.Left = l
   w.Width = width
   w.Height = height
   
   w.refresh
   
   #endif // Target68k
End Sub

Changing Panes
To change panes, we will create a new method in the Main window named "ChangePanes" which will accept a single parameter "newPane as integer" which will be the index value of the pane we're going to switch to. We first use the SmoothResize method with the appropriate constant for the pane's height to resize the window, set the window's title to that of the current preference pane, and then change the PanesPanel's value to show the new pane. Showing the pane (by changing the PanesPanel.Value) before the window is resized looks odd, which is the reason that we resize then show the new pane.

The first parameter of the SmoothResize method is the window which is being resized, the second is the new width of the window (which in our case is the same as the old width, 595), the third is the new height, and the last parameter specifies from which corner the window is being resized. See the SmoothResize method for more info.

And since when our window first opens it should open to one of the panes, we set the default pane in the main window's Open event by calling ChangePane 0.

When the user clicks on any one of the ToolbarItems, the PrefsTBItem's Action event fires which is where we then change the pane. Since the index value of the ToolbarItem in the PrefsTBItem control array is the same as the index of the pane's page in the PanesPanel, we can simply call ChangePane Index to change the preference pane.

The Finished Product
Below is the final result. Now we have a pretty cool looking and functioning preferences window! You can download the project here.

Download REALbasic and create your own software!

Mac OS X Preferences Window by Seth Willits 12-06-03

Mac OS X Preferences Window by Seth Willits
12-06-03