{let numeric-val:TextField = 
    {TextField
        width = 3cm,
        {validate-with {NumericValidator}}
    }
}
{HBox "Number:", numeric-val}

{let md:MessageDisplay = {MessageDisplay}}
{let numeric-val:TextField = 
    {TextField
        width = 3cm,
        message-display = md,
        {validate-with {NumericValidator}, required? = true}
    }
}
{HBox spacing = 3pt, "Number:", numeric-val, md}

{let md:MessageDisplay = 
    {MessageDisplay
        invalid-entry-background = "magenta",
        required-entry-background = "lime",
        message-color = "magenta"
    }
}
{let numeric-val:TextField = 
    {TextField
        width = 3cm,
        message-display = md,
        {validate-with {NumericValidator}, required? = true}
    }
}
{HBox spacing = 3pt, "Number:", numeric-val, md}

{let md:MessageDialog = {MessageDialog title = "Input error"}}
{let numeric-val:TextField = 
    {TextField
        {validate-with
            {NumericValidator}, 
            dialog-on-finished? = false,
            required? = true
        }
    }
}
{let string-val:TextField = 
    {TextField
        {validate-with
            {StringValidator min-chars = 5, max-chars = 10},
            dialog-on-finished? = false,
            required? = false
        }
    }
}
{let validate-button:CommandButton = 
    {CommandButton
        label = "Validate",
        {on Action at cb:CommandButton do
            {if {validate-dialog {non-null cb.dialog}} then
                {popup-message "Submitted"}
            }
        }
    }
}
{Dialog
    margin = 6pt, 
    message-display = md,
    {VBox
        width = 3cm,
        "Number:",
        numeric-val,
        "String:",
        string-val,
        validate-button
    }
}

{let md:MessageDisplay = {MessageDisplay}}
{let string:TextField = 
    {TextField
        width = 3cm,
        message-display = md,
        name = "string",
        {validate-with
            {StringValidator min-chars = 2, max-chars = 10},
            required? = true
        }
    }
}
{let number:TextField = 
    {TextField
        width = 3cm,
        message-display = md,
        name = "number",
        {validate-with {NumericValidator}, required? = true}
    }
}
{let email:TextField = 
    {TextField
        width = 3cm,
        message-display = md,
        name = "email",
        {validate-with ValidationPattern.email-address}
    }
}
{let cb-val:CommandButton = 
    {CommandButton
        label = "Press",
        name = "button",
        {on Action do
            {popup-message
                {VBox
                    "You entered:",
                    string.value,
                    number.value,
                    email.value
                }
            }
        }
    }
}
{Dialog
    {Table
        columns = 2,
        "String:", string,
        "Number:",number,
        "Email:", email,
        cb-val, md
    },
    {validate-with {DialogValidator}},
    {on vc:ValidationComplete at d:Dialog do
        set {d.get-by-name "button"}.enabled? = d.valid?
    }
}

{let numeric-1:TextField = 
    {TextField
        name = "numeric-1",
        {validate-with {NumericValidator}, required? = true}
    }
}
{let numeric-2:TextField = 
    {TextField
        name = "numeric-2",
        {validate-with {NumericValidator}, required? = true}
    }
}
{let numeric-3:TextField = 
    {TextField
        name = "numeric-3",
        {validate-with {NumericValidator}, required? = true}
    }
}
{let enter-data:CommandButton = 
    {CommandButton
        name = "button",
        label = "Enter Data",
        {validate-with
            {EnablingValidator "numeric-1", "numeric-2"}
        },
        {on Action do
            {popup-message
                "You entered:"
                & " " & {value numeric-1.value}
                & " " & {value numeric-2.value}
            }
        }
    }
}
{Dialog
    {VBox
        "Enter three numbers:",
        numeric-1,
        numeric-2,
        numeric-3,
        enter-data
    },
    {validate-with {DialogValidator}}
}

{define-class public open CompoundMessageDisplay {inherits MessageDisplay}
  let public constant columns:int = 3

  field protected prefix:Frame
  field protected target:Graphic
  field protected suffix:Frame = {Frame}
  field protected message:Frame
  
  {constructor public {default
                          box:Box,
                          label:Visual, 
                          target:Graphic,
                          message-width:Distance = 2in,
                          ...
                      }
    {construct-super ...}
    set self.prefix = {Frame}
    set self.target = target
    set self.message = {Frame}

    {self.prefix.add label}
    set self.message-display = self

    {box.add self.prefix}
    {box.add {HBox self.target, {Fill width = 4px}, self.suffix}}
    {box.add self.message}
    set self.target.message-display = self
  }
  
  || Visual.clear をオーバーライドし、 
  || もし表示されているメッセージがあれば、クリアします。
  {method public {clear}:void
    {self.message.clear}
  }
  
  || イベントに添付されたエラーを表示します。
  {method public open {show 
                          vc:ValidationComplete, 
                          target:ActiveTraversor
                      }:void
    || どのような場合も、変数suffixと適切な色を表示します。
    {self.show-colors target}
    {self.suffix.clear}
    {if vc.controller.required? then
        {self.suffix.add {HBox "*", {Fill}}}
    }
    let display?:bool = not vc.consumed? and vc.display?
    {vc.consume}

    {if-non-null tvr = target.validation-result then
        {if tvr.invalid? and display? then
            set self.message.color = self.message-color
            {self.message.add replace? = true, tvr.message}
            set target.control-content-background = 
                self.invalid-entry-background
            {return}
        }
    }
    {unset target.control-content-background}
  }
}

{let tbl:Table = {Table columns = CompoundMessageDisplay.columns}}
{do
    {CompoundMessageDisplay tbl, "Name:",
        {TextField
            width = 1.5in,
            name = "name",
            {validate-with {StringValidator}, required? = true}
        }
    }

    {CompoundMessageDisplay tbl, "Password:",
        {TextField
            width = 1.5in,
            name = "password",
            {validate-with
                {StringValidator min-chars = 6}, required? = true
            }
        }
    }

    {CompoundMessageDisplay tbl, "Confirm:",
        {TextField width = 1.5in,
            name = "confirm",
            {validate-with {StringValidator}, required? = true},
            {on ve:Validate at tf:TextField do
                let pf:TextField = 
                    {tf.dialog.get-by-name "password"} asa TextField
                {if ve.current? and ve.partial? then
                    {if not {pf.value.prefix? tf.value} then
                        {tf.mark-invalid
                            message =
                                {hlmessage
                                    Confirmation does not match password.
                                }
                        }
                     elseif pf.value != tf.value then
                        {tf.mark-invalid} || incomplete
                    }
                 elseif pf.value != tf.value then
                    {tf.mark-invalid
                        message =
                            {hlmessage
                                Confirmation does not match password.
                            }
                    }
                }
            }
        }
    } 
    {CompoundMessageDisplay tbl, "e-mail address:", 
        {TextField width = 1.5in,
            name = "e-mail",
            {validate-with ValidationPattern.email-address}
        }
    }
    {tbl.add
        {row
            {skip}
            {cell 
                {HBox
                    {ok-button label = "&Login", name = "login",
                        width = 1.5in,
                        {validate-with
                            {EnablingValidator 
                                "password", "name", "confirm", "e-mail"
                            }
                        },
                        {on Action at cb:CommandButton do
                            {type-switch cb.dialog
                             case form:HttpForm do
                                {form.submit}
                             else
                                {popup-message "Logging in..."}
                            }
                        }        
                    }
                }
            }
            {cell * Entry required}
        }
    }

}
{Dialog
    background = "white",
    margin = 6pt,
    tbl,
    {validate-with {DialogValidator}}
}