How to make a square topped, round rect bottomed graphic?

[Jan Schenkel]

--- On Wed, 12/1/10, David Bovill <david at vaudevillecourt.tv> wrote:
> ? I'm just starting on doing this -
> but it seems to me that you need to
> scroll one of the groups. Maybe that's because I am
> creating it so the
> rounded corners can be at the to top or bottom. So clipping
> the square rect
> to half way, moving it down, and scrolling it down would
> show only the
> bottom half. - which means that effectively the graphic has
> the same rect
> but the group windows are different? This means that the
> gradients can be
> made identical.... wip...
> 

You don't have to worry about scrolling with lockLocation set on the inner groups. Here's a quick code recipe that you can put into a "Create" button:

##
constant kRectangle = "50,50,250,100"
constant kNoMargins = "0,0,0,0"

on mouseUp
   --> load some essentials into local variables
   local tRectangle, tHeight
   put kRectangle into tRectangle
   put (item 4 of tRectangle) - (item 2 of tRectangle) \
          into tHeight
   --> load the fillGradient array
   local tFillGradientA
   put "linear" into tFillGradientA["type"]
   put (item 1 of tRectangle),(item 2 of tRectangle) \
          into tFillGradientA["from"]
   put (item 3 of tRectangle),(item 2 of tRectangle) \
          into tFillGradientA["to"]
   put (item 1 of tRectangle),(item 4 of tRectangle) \
          into tFillGradientA["via"]
   put "0.00000,192,192,192" & return & \
          "1.00000,128,128,128" \
          into tFillGradientA["ramp"]
   --> prepare by resetting the templateControls
   reset the templateGroup
   reset the templateGraphic
   --> start by creating the outer group
   local tOuterGroup
   set the rectangle of the templateGroup to tRectangle
   set the margins of the templateGroup to kNoMargins
   create group "MyCustomControl"
   put it into tOuterGroup
   --> create the roundrect inner group
   local tRoundRectGroup
   put (item 2 of tRectangle) + (tHeight div 2) \
          into item 4 of tRectangle
   set the rectangle of the templateGroup to tRectangle
   set the lockLocation of the templateGroup to true
   create group "RoundRectClipGroup" in tOuterGroup
   put it into tRoundRectGroup
   --> create the roundrect in the top inner group
   put kRectangle into tRectangle
   set the style of the templateGraphic to "RoundRect"
   set the rectangle of the templateGraphic to tRectangle
   set the opaque of the templateGraphic to true
   set the antiAliased of the templateGraphic to true
   set the fillGradient of the templateGraphic to tFillGradientA
   create graphic "RoundRectGraphic" in tRoundRectGroup
   --> create the rectangle inner group
   local tRectangleGroup
   put (item 4 of tRectangle) - (tHeight div 2) \
          into item 2 of tRectangle
   set the rectangle of the templateGroup to tRectangle
   set the lockLocation of the templateGroup to true
   create group "RectangleClipGroup" in tOuterGroup
   put it into tRectangleGroup
   --> create the rectangle in the bottom inner group
   put kRectangle into tRectangle
   set the style of the templateGraphic to "Rectangle"
   set the rectangle of the templateGraphic to tRectangle
   set the opaque of the templateGraphic to true
   set the antiAliased of the templateGraphic to true
   set the fillGradient of the templateGraphic to tFillGradientA
   create graphic "RectangleGraphic" in tRectangleGroup
   --> cleanup by resetting the templateControls
   reset the templateGroup
   reset the templateGraphic
end mouseUp
##

When you click the "Create" button, it creates all required controls dynamically. Just for kicks, I automatically applied a fill gradient to this example. Expand with graphic effects at your own leisure :-)

Write a behavior script that handles resizeControl and getProp/setProp handler pairs for easier scripting (e.g. to switch top and bottom, or from horizontal to vertical); then set the behavior of the outer group to the long id of that behaviour button.

Groups and behaviors are a fantastic combination for creating custom controls by composition. As Trevor has abundantly demonstrated with the DataGrid :-)

Enjoy!

Jan Schenkel.
=====
Quartam Reports & PDF Library for LiveCode
www.quartam.com

=====
"As we grow older, we grow both wiser and more foolish at the same time."  (La Rochefoucauld)