Version 1.0
As so far Cocoa support for LiveCode is not complete there has been a problem implementing OS X style toolbars. I started playing around with what LiveCode supports at the moment and was able to make almost everything I needed. The end result looks like this:
Creating the Window and Controls
To get the rounded windowShape I created an opaque rounded rectangle called rectangleBase. Then I made a group of the rectangle called rectangleShape and an empty image called stackShape. All elements were then set to be invisible and based on the size of the window needed I created a snapshot of the new desired window shape with a call to
export snapshot from rectangle lRect of group "RectangleShape" to image "stackShape" as PNG
The white space around the corners of the rounded rectangle where thus turned invisible. Then simply call
set the windowShape of this stack to the id of image "stackShape"
and the window is the correct shape, only empty.
The toolbar itself is simply a button with the fill pattern copied from a screenshot of an actual OS X toolbar. Same with the status bar at the bottom of the window. To allow moving the window I added dragging support for bot the toolbar and status bar:
local sgDragging, sgLeftOffset, sgTopOffset
on mouseDown
put item 1 of the mouseLoc into sgLeftOffset
put item 2 of the mouseLoc into sgTopOffset
put true into sgDragging
end mouseDown
on mouseMove
lock screen
if sgDragging is true then
set the left of this stack to item 1 of globalloc(the mouseLoc) - sgLeftOffset
set the top of this stack to item 2 of globalloc(the mouseLoc) - sgTopOffset
end if
unlock screen
end mouseMove
on mouseRelease
put false into sgDragging
end mouseRelease
on mouseUp
put false into sgDragging
end mouseUp
To allow resizing of the window there is a transparent button in the lower right corner of the window. When the mouse pointer is over the button, the mouse cursor turns into a diagonal resized cursor and the window size can simply be changed by dragging, The code also moves all other visual elements in the window to their proper places.
The window’s title text is just two disabled text fields on top of each other to create the seeminglyy 3d text. They have to be disabled so that dragging the toolbar works when on top of the text.
The most complex part of the window are the decorations. They are composed of a background transparent button (btnDecorations) and three images (btnClose, btnMinimize, and btnZoom). When the mouse cursor moves over btnDecorations, the rollover images of the three decorations are displayed. When the mouse leaves outside the button, the active images of the decorations are shown. However, when the mouse leaves the button but is inside the button’s borders, control is shifted to the three decorations themselves. Have a look at the code to see how this was done. The functionality I made for the buttons are quit for btnClose, iconify for btnMinimize, and grow window vertically to max for btnZoom. Pressing on btnZoom again will restore the window to the size it was before.
Losing Focus
When another window is activated the decorations are hidden, a picture of disabled decorations are shown, the toolbar and status bar colors are dimmed, and the window title colour is changed to grey. See the card script on how this was done.
Even though the window is inactive, moving the mouse cursor over the decorations will activate them in the IDE. See the next chapter for more details.
Known Problems and Possible Optimizations
Problem #1: in the IDE hovering over an inactive window’s decorations and pressing the mouse button will cause the window to become active and come to the top, it does not press the decoration it was over. It should only press the decoration as in other windows without activating the entire window. Any ideas on how solve welcome.
Problem #2: in a standalone application or when the stack is launched from a standalone launcher, the inactive window’s decorations do not respond at all. Seems that the window is not receiving any messages.
Problem #3: flickers when resizing, See Optimization #1. Of course this won’t affect windows where resizing is not needed/implemented.
Optimization #1: changing the stackShape and exporting a snapshot from it is time consuming. And according to the LiveCode documentation if the image source for windowShape has a full alpha-mask it should be possible to set the windowShape property without flicker. This flicker manifests itself now when the window is being resized from the sizer control. Can a rounded rectangle image be drawn by LiveCode using a full alpha-mask? If so, how? One possibility might be 5 images: a rectangle and all the corners that would be joined together to form one image. This is however something I’m not familiar with and would appreciate any pointers or sample code on how to do.
The full project is available for download at the bottom of this screen.
Version History
| Version | Release Date | What's Changed |
| 1.0 | 03-07-2013 | First public release |
