Well, progress on the as-yet-unnamed icon app continues, including some actual coding.
I’ve created an NSBox subclass, RoundedBox, to draw the custom rounded-rectangle, gradient-backed boxes featured in my latest UI mockup. Whereas in the mockup it was just pixels (created in OmniGraffle, as a matter of fact), this time it’s an honest-to-goodness control:
You can play with the toy app shown in the screenshot by downloading it here (includes source code). Since the gradient background is drawn using the Core Image API (specifically CILinearGradient), the app requires Mac OS X 10.4 (Tiger) or later.
Update: I’ve updated the screenshot and the demo app. The box now allows setting the following properties:
- Whether to always draw a full horizontal titlebar. If disabled, the titlebar will cover just the title text, unless there would only be a few pixels between the right edge of the titlebar and the right edge of the box, in which case a full titlebar is always drawn anyway.
- Whether the box is “selected” or not. If true, the border/titlebar is drawn in the darker version of the system’s current control highlight color; i.e. the same color used to highlight selected items in a list. This mimics how Automator highlights the current action in a workflow.
- Which border color to use. Default is 50% white.
- Which gradient start and end colors to use. Default is 92% white to 82% white.
- Which title to use for drawing the title text. Default is white.
The box title is now also truncated (via a trailing ellipsis) if it wouldn’t all fit into the box. Use the popup in the demo app and resize the window to see the behaviour.
Update 2: I’ve updated the screenshot and demo app again, to show the new ability to specify whether to draw a gradient background or a solid color background. Default is to use a gradient background as detailed previously, and the default solid color is 90% white.
Update 3: Download now includes source code.
Cool! But *really* slow on my (aging) Power Mac G3 B&W when live-resizing its tiny window… However, really cool :P ! Kudos Matt, and good luck for the follow-up!
Very pretty. But core image is overkill for the gradient. CoreGraphics has an API for gradients too, see: http://svn.toxicsoftware.com/svn/toxic_public/trunk/Samples/GradientTest/
Hi guys,
Cheers for the feedback. Jonathan: yep, Core Image is probably overkill for a simple gradient. I’ve just been working with it anyway lately, and it was thus the natural first choice for implementing the control quickly. :)
Oh, and I’ve updated both the demo app and the screenshot; see above.
Why a new control? I just don’t see what the advantage of this over just a NSBox is? It looks nice and everything but your window is going to be a goofy combination of Aqua stripes and the Unified look. Weird, if you ask me.
Kewl. Especially now that you’ve included source code. Thanks.
Matt, could you perhaps add a prefix to the class name? That would help other devs who want to integrate this in their code to avoid name collisions. There’s a list of already-taken prefixes at cocoadev.com, but most people just use their initials if you’re not that paranoid :-)