LiveCode Forums.

I am trying to mimic the look of OS X Lion's popover windows which are popup windows with an arrow, example:

I thought the easiest way to do it was create a rounded rectangle graphic and use it to skin the stack's shape but it seems that skinning works only with images. I could of course make an image and then use it for skinning but I was wondering if (and when) I need different sized popovers I would always have to create a new image. And there is the problem that the arrow pointing to the window source might be wanted on another side.

Question: any ideas is skinning the right way to go or could it be done some other way?

http://www.rotundasoftware.com/livecode/

Click on "PopupBalloon" on the left side...

I've looked at it and the problem with the "PopupBalloon" is that as a grouped control it will only display in the window it is used from, ie. it cannot be partially outside the parent window. I did a similar grouping of a rounded rectangle with shadow and an arrow image and that works fine inside the parent window. And if I ever want the popover to be detachable then it has to be a substack.

What about building your windowShape with the graphic tools and then exporting it as an image.. I think there was discussion about this on the mailing list some time last year or the the year before (or the year before, etc

What would be the advantage of using the graphic tools & exporting? The image itself is quite simple to do in a drawing program. My main issue is the placement of the arrow as I would like to have that be dynamic. Or do you mean that I should use the graphic tools to create the needed image dynamically at runtime? That might be an option if I can skin a stack with an image that has just been created in memory.

yeah, to do it dynamically.. the other option would be to have two windows for your popup (one for the arrow and one for the body).. the shadowing would be the only issue though..

If anyone is interested, here is how I implemented the popover.

First I created a rounded rectangle and then added arrow bitmaps to all four borders and grouped them together. Then I added an empty image to the stack and depending on which side I wanted the arrow to be exported a snapshot of the group into the image. Then all you have to do is set the shape of the stack to the id of the image and move the controls in the popover to have them centered. Both the rectangle group and image can be hidden on the card. The snapshot still works.

I was actually surprised how easy it was. Perfect shadow and easy to set the transparency of the popover. Even detaching it to a new window works. Here are a couple of screenshots of the new stack in action:

looks nice.. good work