Been awhile since I've added any tools to the LiveCode community, but after attending the LiveCode conference and seeing Ken Ray's excellent DropTools framework for creating reusable objects, I've jumped in and created a fairly slick little button object called altButton control.
It actually does some pretty interesting things including automatically adding different types of highlights and gradients using a somewhat fancy altButton Inspector and basic rendering algorithms. Here are a few altButtons created by the altButton Inspector. As you would expect, they all have automatic normal, hover, down and disabled states. You can adjust the radius as well as the type of gradient with a single click– so there's no trying to find 'just the right' gradient or highlight.
And here's a picture of the altButton Inspector. It's all explained in the About box as well as below. Currently, it's been tested by a few folks, but I'm still calling it beta. I'll be using it in a few upcoming projects. Thanks Ken for the framework!
altButton Control is (c)2011 by Chipp Walters and free to use in personal and commercial projects. You can download it at:
From the documentation:
altButton Control
Currently, altButton is in BETA. It requires the use of Ken Ray's DropTools toolbar.
After installing DropTools, place the altButton.rev stack in the DropTools folder and then relaunch LiveCode. There you will see the altButton control, which you can drag drop to any stack.
You can access the altButton Inspector by double-clicking the altButton icon on the DropTools Toolbar. From there you can manage most all of the properties for the altButton control.
The goal of altButton was to be able to quickly create buttons for use on Macs, PC's and iOS which all look and work the same. By simply editing the button color, you can create new buttons easily. You don't have to worry about choosing gradients or even selecting the disabled button color or disabled button text.
The altButton control is actually a very simple control consisting of a single rectangle graphic (the 'button'), a text field (the 'label'), and a button (the 'icon'). By using a variety of gradients and effects, many different styles of buttons can be created.
Script Handlers
You'll want to put all handlers in the group script. If you click on a 'just dropped' default button, it will open the script for you. The handlers you'll need to use are:
doMouseUp – instead of mouseUp
doMouseDown – instead of mouseDown
doMouseEnter – instead of mouseEnter
doMouseLeave – instead of mouseLeave
altButton Properties
You can set all the non private properties of altButton using the altButton Inspector. Please note, to change numeric values, click on the numeric field, and with the mouse button depressed, slide left to right to change the number up or down. This control is called a 'slider.'
Here are the props supported for the altButton control:
altDisabled – true or false. Disables the control and changes the text to a slightly darker or lighter color than the button color. Whether it is darker or lighter depends on the altDisabledTextDarker property (true or false) and can be toggled using the disabled text is darker check box. You can view the appearance of the disabled altButton by checking the show disabled state checkbox.
altForeColor – sets the color of the label text for the control. You can change it by clicking the text color button.
altBackColor – sets the color of the button. You can change it using the button color button.
altBtnWidth – sets the width of the button in pixels. You can change it using the button width slider.
altBtnHeight – sets the height of the button in pixels. You can change it using the button height slider.
altCornerRadius – sets the radius of the corners for the button. You can change it using the corner radius slider.
altBorderHilite – sets the color of the 1 pixel line BELOW the button. You can change it using the border hilite button.
altBorderShadow – sets the color of the 1 pixel line ABOVE the button. You can change it using the border shadow button.
altButtonHilite – should be one of the following items: none, low, normal, bright You can change it using the button hilite radio group.
altIcon – sets the icon of the control to the ID of an image. You can change it by typing the number in the icon id number field and pressing the set icon button. If the number is empty or 0, then the icon (button) is hidden in the altButton control.
altIconXoffset – sets the icon's horizontal offset from the center of the control. You can change it using the x offset slider in the Icon Properties area.
altIconYoffset – sets the icon's vertical offset from the center of the control. You can change it using the y offset slider in the Icon Properties area.
altText – sets the text of the label for the control. Text can be multiple lines. You can change it by typing text in the button text field and pressing the set text button.
altTextsize – sets the size of the text. You can change it using the text size slider.
altTextfont – sets the font of the text. You can change it using the text font popup menu.
altTextBold – true or false depending on whether the text should be bold or not. You can change it by clicking the bold checkbox.
altTextItalic – true or false depending on whether the text should be italic or not. You can change it by clicking the italic checkbox.
altTextAlign – should be one of the following items: left,center,right You can change it using the text alignment radio group.
altXoffset – sets the text's horizontal offset from the center of the control. You can change it using the x offset slider in the Label Properties area.
altYoffset – sets the text's vertical offset from the center of the control. You can change it using the y offset slider in the Label Properties area.
altTextShadow – true or false depending on whether a one pixel shadow should appear below the text. You can change it by clicking the text shadow checkbox.
altTextShadowColor – sets the color of the text shadow. You can change it using the shadow color button.
No comments yet.