BWToolkit 1.2

BWToolkit 1.2 is out with three new additions along with other improvements and fixes. The first addition is a gradient box which lets you draw a rectangle with a gradient or solid color. It also has optional border and inset lines. The next addition is a styled text field which lets you apply a gradient and a shadow to text. An example of what you’ll be able to create in Interface Builder with these two additions is this fancy header bar in Capo. The last addition is a hyperlink button that lets you link text or images to URLs which will open in the browser.

For a complete list of what’s new in 1.2 and to download the plugin and framework, visit the BWToolkit website.

BWToolkit 1.1: Codeless Split Views

I’m pleased to announce that BWToolkit 1.1 is now available for download with a brand new split view. The new BWSplitView has three main features:

1. Subview autosizing: In the inspector, the developer can tell the split view which subviews should resize with the window and which should remain at a fixed size. The standard behavior of NSSplitView is to ignore the autosizing masks on the subviews and resize them proportionally as the split view resizes. This is not the desired behavior for most applications. BWSplitView honors each subview’s autoresizing mask which is easily configurable in both the BWSplitView inspector and the subview’s size inspector.
2. Constraints: Each subview’s minimum and maximum size is configurable in the BWSplitView inspector. You can specify the size in points or as a percentage of the split view’s size.
3. Collapsing: BWSplitView has powerful new collapsing functionality. A view marked as “collapsible” in the inspector will collapse when its divider has been double clicked and when the user tries to make the view smaller than its minimum size. You can also hook up a toggle button to the split view’s toggleCollapse: action which will collapse or expand the subview using Core Animation. The split view takes care of synchronizing its state with the toggle button, so the button never shows the opposite indication.

The reason I call the split view “codeless” is that for the vast majority of use cases, the developer will not have to write a single line of code to get the split view functionality they desire. For other use cases that do require something out of the ordinary, the developer can set themselves as the delegate on the split view and implement any relevant delegate methods.

In the video below, I create iCal’s split view layout, with maximum and minimum sizes for subviews, subview collapsing with animation, and proper autoresizing behavior, all within Interface Builder – and it takes less than 3 minutes.

 
I’d love to hear your thoughts on the split view and any ideas you may have for improvements. Drop me a line or file a bug.

And a big thanks to Fraser Kuyvenhoven for developing the split view’s resizing algorithm.
 

Source Code

BWToolkit 1.0.2

BWToolkit 1.0.2 is now out with some added functionality. The selectable toolbar has some new methods for setting its selected item, which is useful if you want to display the window with a certain tab selected, or want to select a certain tab from within another tab. You specify which item should be selected by passing in the item identifier, which is a unique, non-localizable string.

To make this process simpler, a new item has been added to the plugin to allow you to easily specify a toolbar item’s identifier in Interface Builder. This item can be used with standard toolbars as well as selectable toolbars.

As for other improvements, the size of the framework bundle has been reduced by 40% by using Apple’s TIFF compression instead of Adobe’s and a few bugs have been fixed. See the release notes for details on the particular bug fixes.
 

Source Code

Introducing BWToolkit

Update: BWToolkit now has its own website.

BWToolkit is a BSD licensed plugin for Interface Builder 3 that contains commonly used UI elements and other useful objects. Using these objects is as simple as dragging them from the library to your canvas or document window.

When I first heard about the plugin architecture in IB 3, I saw a huge potential for improving the developer user experience and lowering the barrier to entry for developers who are new to Cocoa. I hope to have accomplished that with this plugin. Read on for details regarding the items in BWToolkit and screencasts showing how they work. Be sure to read the release notes if you’re interested in downloading the plugin. It has installation instructions and known issues that users of this plugin should be aware of.

“No Code” Preferences Windows and Tabbed Sheets

With the Selectable Toolbar item in this plugin, you’ll be able to create preferences windows and tabbed sheets without writing a line of code. Using BWToolkit to create a preferences window or a tabbed sheet is radically simpler than conventional means. You don’t have to write a controller class or fiddle with plists and multiple nib/xib files. It’s drag and drop. Watch the videos below to see it in action.

Transparent Controls

BWToolkit contains a suite of controls for transparent windows (or HUD windows). Provided controls include a button, pop-up button, check box, slider, text field, text view, table view, and a check box cell for a table view. If you find yourself needing a much wider array of controls than the ones available here, a standard panel may be more appropriate for your particular interface.

Button Bars

The plugin includes an anchored button bar, anchored buttons, and unanchored buttons. An anchored button bar is one that is placed directly below a view (in other words, anchored to that view). Anchored button bars often appear at the bottom left of windows below source lists (like in Mail.app), below a table view with padding below the bar (like the Network pref pane), or run all the way across the bottom of the window (like in AppZapper). The anchored button bar library item handles all three of these modes.

Unanchored buttons are usually placed below a table view with a bit of padding separating the view from the buttons. They’re often configured to have a plus button beside a minus button. The unanchored buttons are similar to “Gradient Buttons” in Interface Builder, but tweaked to aesthetically replicate the +/- buttons in System Preferences. For instance, when a button is disabled, only the glyph dims, so the group of buttons remain a visually cohesive unit.

Using the anchored button bar and the gradient split view included in the plugin, you can easily create a Mail.app style interface. When an anchored button bar is dropped in a vertical split view, the split view is automatically configured to resize when the user drags the resize handle on the button bar. It’s also configured to keep the source list the same width while the window is resized - the standard split view behavior is to resize all of its subviews. Lastly, the left most view is constrained within a minimum and maximum width (which is configurable in the button bar inspector).

Bottom Bars

With this plugin, you’ll be able to add a bottom bar to a window and it will appear on your canvas. This makes sizing and placement of controls on or around the bottom bar a trivial exercise. There are four bottom bars to choose from: mini size, small size, regular size, and one for sheets.

There are also some controls for bottom bars included in the plugin. You’ll find plus and minus glyphs for regular size Round Textured buttons, a text field with an inset (or etched) appearance, and a textured slider. The textured slider comes pre-configured with the two most popular indicators in Mac apps: speaker and photo. If you opt to use them, you’ll find that the click actions for the two indicators are conveniently already hooked up to the slider.

And More

There are a few other items in the plugin that haven’t been listed yet or shown in a screencast: split views with adjustable divider colors, Fonts and Colors toolbar items from iWork ‘08, and a fancy gradient token field.

If you have any questions or comments, feel free to email me or ping me on Twitter.
 

Source Code