{define-proc package {make-frame
                         border-style:BorderStyle,
                         border-color:FillPattern =
                             FillPattern.blue
                     }
    let label:String = {{String border-style}.tail 12}
    {return
        || Outer Frame is added for spacing only.
        {Frame margin = 3pt,
            {Frame
                width = 2cm, 
                height = 1cm, 
                border-width = 3pt,
                background = FillPattern.silver, 
                border-color = border-color,                
                border-style = border-style,
                label
            }
        }
    }
}       

{RasterBox      
    {make-frame BorderStyle.none},
    {make-frame BorderStyle.flat},
    {make-frame BorderStyle.raised},
    {make-frame BorderStyle.sunken},
    {make-frame BorderStyle.ridge},
    {make-frame BorderStyle.groove},
    {make-frame BorderStyle.dash},
    {make-frame BorderStyle.dot},
    {make-frame BorderStyle.double}
}

{let constant f:Frame =
    {Frame
        border-width = 60px,
        border-style = BorderStyle.tiled,
        border-color =
            {FillPattern.from-url
                {url "curl://source/docs/default/images/tiled-border.gif"}
            }
    }
}

{value
    {f.add
        {HBox
            background = "#6f4e20",
            control-content-background = "#6f4e20",
            color = "white",
            spacing = 5mm,
            "border-width:",
            {TextField
                width = 2cm,
                value = "60px",
                control-appearance-changeable? = true,
                {on ValueFinished at tf:TextField do
                    set f.border-width = {evaluate tf.value}
                }
            }
        }
    }
    
    f
}

{def button =
    {CommandButton
        outside-margin = 
            {OffsetSpec 
                left = 30px, right = 30px, 
                top = 30px, bottom = 30px
            },
        shadow-spec = {ShadowSpec},
        shadow-color = {FillPattern.from-rgb 0, 0, 0, opacity = 0.175}
    }
}

{def demo =
    {value
        let offset-slider:#Slider
        let angle-slider:#Slider
        let radius-slider:#Slider
        let falloff-slider:#Slider
        let opacity-slider:#Slider
        let ul-round?:#CheckButton
        let ur-round?:#CheckButton
        let lr-round?:#CheckButton
        let ll-round?:#CheckButton
        def change-handler =
            {on ValueChanged do
                set button.shadow-spec =
                    {ShadowSpec
                        offset = offset-slider.value asa double * 1px,
                        angle = angle-slider.value asa double * 1deg,
                        corner-radius = radius-slider.value asa double * 1px,
                        falloff = falloff-slider.value asa int,
                        upper-left-rounded? = ul-round?.value,
                        upper-right-rounded? = ur-round?.value,
                        lower-right-rounded? = lr-round?.value,
                        lower-left-rounded? = ll-round?.value
                    }
            }
        set offset-slider =
            {Slider
                width = 10cm,
                domain = 
                    {StandardIntDomain
                        default-value = 6,
                        min-allowable = 0,
                        max-allowable = 20
                    },
                minor-tick-spacing = 1,
                major-tick-spacing = 5,
                change-handler
            }
        set angle-slider =
            {Slider
                width = 10cm,
                domain = 
                    {StandardIntDomain
                        default-value = 135,
                        min-allowable = 0,
                        max-allowable = 360
                    },
                minor-tick-spacing = 30,
                major-tick-spacing = 90,
                change-handler
            }
        set radius-slider =
            {Slider
                width = 10cm,
                domain = 
                    {StandardFloatDomain
                        default-value = button.shadow-spec.corner-radius asa PixelDistance / 1px,
                        min-allowable = 0.0f,
                        max-allowable = 10.0f
                    },
                minor-tick-spacing = .5,
                major-tick-spacing = 2f,
                change-handler
            }
        set falloff-slider =
            {Slider
                width = 10cm,
                domain = 
                    {StandardIntDomain
                        default-value = button.shadow-spec.falloff,
                        min-allowable = 0,
                        max-allowable = 10
                    },
                minor-tick-spacing = 1f,
                major-tick-spacing = 2f,
                change-handler
            }
        set opacity-slider =
            {Slider
                width = 10cm,
                domain = 
                    {StandardFloatDomain
                        default-value = {button.shadow-color.to-Pixel}.alpha,
                        min-allowable = 0.0f,
                        max-allowable = 1.0f
                    },
                minor-tick-spacing = .05f,
                major-tick-spacing = .2f,
                {on ValueChanged do
                    set button.shadow-color =
                        {FillPattern.from-rgb 0, 0, 0, opacity =
                            opacity-slider.value asa double
                        }
                }
            }
        set ul-round? =
            {CheckButton
                label = "upper-left",
                value = button.shadow-spec.upper-left-rounded?,
                change-handler
            }
        set ur-round? =
            {CheckButton
                label = "upper-right",
                value = button.shadow-spec.upper-right-rounded?,
                change-handler
            }
        set lr-round? =
            {CheckButton
                label = "lower-right",
                value = button.shadow-spec.lower-right-rounded?,
                change-handler
            }
        set ll-round? =
            {CheckButton
                label = "lower-left",
                value = button.shadow-spec.lower-left-rounded?,
                change-handler
            }

        {VBox
            {center {value button}},
            {Dialog
                {Table
                    {row-prototype button},
                    {row-prototype "offset", {Fill width = 12pt}, offset-slider},
                    {row-prototype "angle", {Fill width = 12pt}, angle-slider},
                    {row-prototype "radius", {Fill width = 12pt}, radius-slider},
                    {row-prototype "falloff", {Fill width = 12pt}, falloff-slider},
                    {row-prototype "shadow-color opacity", {Fill width = 12pt}, opacity-slider},
                    {row-prototype "corners rounded?", {Fill width = 12pt},
                        {HBox spacing = 8pt, ul-round?, ur-round?, lr-round?, ll-round?}
                    }
                }
            }
        }
    }
}

{CommandButton
    label = "Press me to display the example!",
    {on Action do
        def view = 
            {View
                visibility = "normal",
                {VBox
                    margin = 10pt,
                    spacing = 24pt,
                    demo
                }
            }
        {view.set-rendering-mode RenderingMode.high-quality}
    }
}