The Return of The Worcester Source… Now with Added Gradient Buttons!
Sunday, April 15, 2012
Being a multi-platform development environment, the main focus of LiveCode has always been to provide the developer with controls and styles that are common to all operating systems that you can deploy to. If Apple and Microsoft could agree on doing everything exactly the same way, this would be great. But they don't and each OS has its own style variations, layout rules and various other quirks.
As a developer, I like to make my work look like it's always been coded for the intended platforms. Take Data Tree, which is now being looked after by NativeSoft. This multi-platform control looks great on Mac OS X and Windows by adapting itself to match the styles and behaviours of the host operating system. It takes work to do this but the results pay dividends.
In this series of blog posts, we're going to look at how to create a custom gradient button for Mac OS X. We'll seem how I overcome my aversion to gradients and use behaviours to make the control work.
Before we start…
In my old site, I used to have a gradient button library that composed the button out of a couple of bitmaps. This was before the days of gradients, graphic effects and behaviours. It's very much due a revist.
The key advantage of using graphic objects, rather than bitmaps, is that they resize very nicely indeed. The trick that I used with bitmaps was to split the body of the control into three. The two ends remained fixed but the bit in the middle was stretched to fit the width of the button. In taking this approach, I needed six images: two ends and a middle for both normal and pressed versions.
Apple also likes to apply some very nice text effects to their controls, giving them a very subtle drop shadow. Some controls have further graphical emphasis on them, which is not possible to recreate with just one field alone. The technique that I used in Data Tree, especially in the highlight, is to layer a couple of fields over the top of each other, each with a different text colour and the anti-aliasing blended them together for me. However, in this library, I've used the graphic effects alone to accomplish this for me and so therefore just need the one field for the label.
To understand what we're trying to recreate, I've snapped and blown up a textured button from Apple's Pages application. Most graphic manipulation packages will smooth and blur an image that's been enlarged, making the pixels fuzzy and harder for us to work out which subtle effects have been applied. I've therefore applied an aggressive sharpen filter to it, so we can better see the pixels.
We can see that the key features of the button includes:
- rounded rectangle
- an inner shadow on the pressed version of the button
- a drop shadow or some other halo effect beneath and around the button
- same again on the label of the button
Whenever you create a custom control, the chances are it will be composed of a number of other controls and objects that make it up. Just as my bitmap version consisted of six images and two fields, this control needs at least one graphic for the body of the button and at least one field for its label. They'll be fused together and with a little bit of coding, will work just like any other native control.
The button has two states: normal and pressed. In creating a custom button, I have two options in achieving this:
- Use just one rounded rectangle graphic and change its graphical properties in code to display each button state.
- Use two rounded rectangle graphics and show or hide them to display each button state.
Although the second option is easier to do, one of the goals of this exercise is to reduce the number of objects inside the controls. I'm therefore going to go for the first option.
End of part one
That's quite a lot of words for now and so I'll leave things there for today. Tune in next week for more!