{define-class public OutlinedListValueItem {inherits ListValueItem}

  {constructor public {default 
                          label:Visual,
                          value:any = null,
                          enabled?:bool = true
                      }
    {construct-super
        label,
        enabled? = enabled?,
        value = value
    }
    set self.border-width = 3px
    set self.margin = 1px
    set self.border-color = {self.background.to-FillPattern}
  }

  {method protected {adjust-visuals}:void
    {if self.selected? then
        set self.border-color = {FillPattern.get-red}
     else
        set self.border-color = {self.background.to-FillPattern}
    }
  }
}

{define-class public OutlinedListBox {inherits ListBox}

  || Constructor: pass on all arguments to parent,
  || substituting the proper default list-item-creation-proc
  {constructor {default ...}
    {construct-super
        list-item-creation-proc =
            OutlinedListBox.default-list-item-creation-proc,
        ...
    }
  }
  || specify the custom list-item-creation-proc
  {define-proc {default-list-item-creation-proc val:any}:ListItem
    {return
        {OutlinedListValueItem
            value = val,
            val
        }
    }
  }
}
{OutlinedListBox "Banana","Apple","Orange", "Peach"}

|| LinkButton --CommandButton with the appearance of a hyperlink
{define-class LinkButton {inherits CommandButton}

  {constructor {default
                   label:Visual = "LinkButton",
                   text-underline?:bool = true,
                   outline?:bool = false,
                   color:FillPattern = {FillPattern.get-blue},
                   color-rollover:FillPattern = {FillPattern.get-red},
                   color-pressed:FillPattern = {FillPattern.get-red},
                   ...
               }

    || 1. Set the style of the button appropriately
    ||    Also set button to inherit formatting from document
    {construct-super
        style = CommandButtonStyle.label-only,
        control-appearance-changeable? = true,
        ...
    }

    || 2. Add a reactive label based on clones of the label passed in
    let regLabel:#Visual = {label.clone-appearance}
    let roverLabel:#Visual = {label.clone-appearance}
    let pressLabel:#Visual = {label.clone-appearance}

    set regLabel.text-underline? = text-underline?
    set roverLabel.text-underline? = text-underline?
    set pressLabel.text-underline? = text-underline?

    set regLabel.color = color
    set roverLabel.color = color-rollover
    set pressLabel.color = color-pressed

    {if outline? then
        set regLabel =
            {Frame
                border-width = 1px,
                margin = 3px,
                border-color = color,
                regLabel
            }
        set roverLabel =
            {Frame
                border-width = 1px,
                margin = 3px,
                border-color = color-rollover,
                roverLabel
            }
        set pressLabel =
            {Frame
                border-width = 1px,
                margin = 3px,
                border-color = color-pressed,
                pressLabel
            }
    }

    {set self.reactive-label =
        {ReactiveLabel
            label = regLabel,
            label-rollover = roverLabel,
            label-pressed = pressLabel
        }
    }
  }
}

|| Examples
{LinkButton
    label = "Visit the White House Web Site (Curl language version)",
    {on Action at btn:CommandButton do
        {popup-message
            "Sorry this site is still under construction!"
        }
    }
}
{LinkButton
    label =
        {image source = {url "../../default/images/whlogo-big-stripe.gif"}},
    outline? = true,
    {on Action at btn:CommandButton do
        {popup-message
            "Sorry this site is still under construction!"
        }
    }
}

|| ClockControl

|| Basic control for viewing the current time.
|| This is a non-editable control akin to a TextDisplay.

{define-class public ClockControl {inherits ControlFrame}

  || Formatted time string, which will change dynamically
  field private time-display-string:Dynamic={Dynamic ""}

  || Constructor
  {constructor {default}
    || BaseFrame functionality
    || add a display view of the current time
    set self.time-display-string.value = {DateTime}.info.locale-time
    {self.add-internal
        {Frame
            border-width = 1px,
            margin = 2px,
            border-color = {self.background.to-FillPattern},
            {TextFlowBox text-selectable? = false,
                self.time-display-string
            }
        }
    }

    || add a timer to update the display.
    || an interval of 1s should show every second tick
    {self.animate
        interval = 1s,
        {on TimerEvent do
            {if self.enabled? then
                set self.time-display-string.value =
                    {DateTime}.info.locale-time
            }
        }
    }
  }
  || provide GuiEvent functionality:
  || on-focus-in:  give border that shows selected state
  {method public {on-focus-in e:FocusIn}:void
    {if not self.enabled? then
        {return}
    }
    let ch:Graphic = {self.graphical-children.read-one}
    set ch.border-color = {FillPattern.get-gray}
  }

  || on-focus-out: hide selected border
  {method public {on-focus-out e:FocusOut}:void
    {if not self.enabled? then
        {return}
    }
    let ch:Graphic = {self.graphical-children.read-one}
    set ch.border-color = {self.background.to-FillPattern}
  }

  || on-pointer-press: make control selectable with mouse
  {method public {on-pointer-press e:PointerPress}:void
    {if not self.enabled? then
        {return}
    }
    {e.consume}
    {self.request-key-focus}
  }
}

|| Example
{Dialog
    {spaced-vbox
        {ClockControl},
        {CheckButton
            label = "Clock Enabled",
            enabled? = true,
            value = true,
            {on ValueFinished at c:CheckButton do
                set c.parent.enabled? = c.value
            }
        }
    }
}

       

|| TimeSelectorControl = a control for selecting a time
||
|| This is an editable control,|with a value of DateTime.
|| For clarity, the Date portion of the time will always
|| be the date of the epoch, and times truncated to minutes
||
{define-class public TimeSelectorControl
  {inherits {ValueControlFrame-of DateTime}}

  || dynamic display strings for time:
  field private hrs-display:Dynamic = {Dynamic  "00"}
  field private mins-display:Dynamic = {Dynamic "00"}
  field private _value:DateTime = {DateTime}
  field private has-focus?:bool = false

  || pending-value? indicate whether user currently changing value
  field private _pending-value?:bool = false
  {getter {pending-value?}:bool
    {return self._pending-value?}
  }

  || Constructor
  {constructor {default val = {DateTime hour = 12}, ...}
    {construct-super  ...}
    set self._value = val

    || BaseFrame functionality
    || add a display view of the current time setting,
    || with appropriate event handlers
    {self.add-internal
        {HBox
            border-width = 1px,
            margin = 2px,
            border-color = {self.background.to-FillPattern},
            {TextFlowBox text-selectable? = false,
                self.hrs-display,
                {on p:PointerPress do
                    {if self.has-focus? then
                        {self.set-value-with-events self.value+1hr}
                        {p.consume}
                    }
                }
            },
            ":",
            {TextFlowBox text-selectable? = false,
                self.mins-display,
                {on p:PointerPress do
                    {if self.has-focus? then
                        {self.set-value-with-events self.value+1min}
                        {p.consume}
                    }
                }
            }
        }
    }
  }

  || GuiEvent functionality--
  || on-focus-in:
  {method public {on-focus-in e:FocusIn}:void
    {if not self.enabled? then {return}}
    let ch:Graphic = {self.graphical-children.read-one}
    set ch.background = "#000090"
    set ch.color = {FillPattern.get-white}
    set self.has-focus? = true
  }

  || on-focus-out:
  {method public {on-focus-out e:FocusOut}:void
    {if not self.enabled? then {return}}
    let ch:Graphic = {self.graphical-children.read-one}
    {unset ch.background}
    {unset ch.color}
    set self.has-focus? = false

    {if self._pending-value? then
        {self.enqueue-event {ValueFinished}}
        set self._pending-value? = false
    }
  }

  || on-pointer-press:
  {method public {on-pointer-press e:PointerPress}:void
    {if not self.enabled? then {return}}
    {e.consume}
    {self.request-key-focus}
  }

  || ValueControl-of Functionality
  {getter public open {has-value?}:bool {return true} }

  {method public open {unset-value}:void
    set self.value = {DateTime}
  }

  {getter public open {value}:DateTime
    {return self._value}
  }

  {setter public open {value d:DateTime}:void
    || Normalize time and trigger the display
    set self._value = {DateTime
                          hour = d.info.hour,
                          minute = d.info.minute
                      }
    set self.hrs-display.value = {TimeSelectorControl.padded-int d.info.hour}
    set self.mins-display.value = {TimeSelectorControl.padded-int d.info.minute}
  }

  || set-value-with-events: handle (or simulate) the user actually
  || setting/resetting the value with the ui
  {method public {set-value-with-events t:DateTime}:void
    set self.value = t || actually set the value (see above)
    {self.enqueue-event {ValueChanged}}
    set self._pending-value? = true
  }

  || padded-int: local utility to convert integer into two character string
  {define-proc {padded-int v:int}:String
    {return {if v <= 9 then {String "0"&v} else {String v}}}
  }

}


|| Display Example
{paragraph Click on hours or minutes to edit time, tab to shift focus.}
{Dialog
    {spaced-vbox
        {TimeSelectorControl},
        {CheckButton label = "Time Selector Enabled",
            enabled? = true,
            value = true,
            {on ValueFinished at c:CheckButton do
                set c.parent.enabled? = c.value
            }
        }
    }
}