{curl 7.0 applet}

{applet
    manifest = "libs/manifest.mcurl"
}

{set-document-properties
    font-size = 10pt,
    background = "wheat"
}

{do
    {set-rendering-mode RenderingMode.high-quality}
}

{let common-style-sheet:StyleSheet =
    {url "styles/my-styles/common-style.scurl"}
}
{let classic-style-sheet:StyleSheet =
    {url "styles/my-styles/classic-style.scurl"}
}
{let custom-style-sheet:StyleSheet =
    {url "styles/my-styles/custom-style.scurl"}
}

|| Form creation procs
{define-proc {regular-style-dialog
                 tf:TextField, pf:PasswordField, cb:CommandButton
             }:Graphic
    {return
        {GroupBox
            label = "",
            {Dialog
                {Table
                    {row-prototype
                        {cell-prototype "Username: "},
                        {cell-prototype tf}
                    },
                    {row-prototype
                        {cell-prototype "Password: "},
                        {cell-prototype pf}
                    },
                    {row-prototype
                        {cell-prototype
                            colspan = 2,
                            halign = "center",
                            cb
                        }
                    }
                }
            },
            {validate-with {DialogValidator}}
        }
    }
}
{define-proc {custom-style-dialog
                 tf:TextField, pf:PasswordField, cb:CommandButton
             }:Graphic
    {return
        {GroupBox
            label = "",
            {Dialog
                {Table
                    {row-prototype
                        {cell-prototype
                            {TextDisplay
                                style-class = "login",
                                value = "Username: "
                            }
                        },
                        {cell-prototype tf}
                    },
                    {row-prototype
                        {cell-prototype
                            {TextDisplay
                                style-class = "login",
                                value = "Password: "
                            }
                        },
                        {cell-prototype pf}
                    },
                    {row-prototype
                        {cell-prototype
                            colspan = 2,
                            halign = "center",
                            cb
                        }
                    }
                }
            },
            {validate-with {DialogValidator}}
        }
    }
}

{value
    let f:Frame = {new Frame}
    let ddl:DropdownList =
        {DropdownList
            width = 2cm,
            look-and-feel = the-standard-look-and-feel,
            "Classic",
            "Default",
            "Custom",
            {on ValueChanged at ddl:DropdownList do
                let tf:TextField =
                    {new TextField,
                        style-class = "login",
                        {validate-with
                            ValidationPattern.email-address,
                            required? = true
                        }
                    }
                let pf:PasswordField =
                    {new PasswordField,
                        {validate-with {StringValidator}, required? = true}
                    }
                let cb:CommandButton =
                    {CommandButton
                        label = "Submit",
                        {on Action at cb:CommandButton do
                            {if-non-null dlg = cb.dialog then
                                {if {validate-dialog dlg} then
                                    let dlg:Dialog =
                                        {new Dialog,
                                            {GroupBox
                                                label = "",
                                                {VBox
                                                    halign = "center",
                                                    {Fill height = 0.1cm},
                                                    {TextFlowBox
                                                        text-breakable? = false,
                                                        "Submitted"
                                                    },
                                                    {Fill height = 0.1cm},
                                                    {CommandButton
                                                        label = "OK",
                                                        style-class = "ok",
                                                        {on Action at
                                                            cb:CommandButton
                                                         do
                                                            {cb.dialog.close
                                                                "ok"
                                                            }
                                                        }
                                                    },
                                                    {Fill height = 0.1cm}
                                                }
                                            }
                                        }
                                    {dlg.show title = "Validate"}
                                }
                            }
                        }
                    }
                {switch ddl.value
                 case "Classic" do
                    let ss:StyleSheet =
                        {new StyleSheet,
                            common-style-sheet,
                            classic-style-sheet
                        }
                    {install-style-sheet ss}
                    let form:GroupBox =
                        {regular-style-dialog tf, pf, cb} asa GroupBox
                    || Need special handling (at least for now) to get the
                    || "classic" look and feel with styling turned on.
                    set form.look-and-feel = the-standard-look-and-feel
                    {f.add replace? = true, form}
                 case "Default" do
                    let ss:StyleSheet =
                        {new StyleSheet,
                            common-style-sheet,
                            {get-default-style-sheet}
                        }
                    {install-style-sheet ss}
                    {f.add replace? = true, {regular-style-dialog tf, pf, cb}}
                 case "Custom" do
                    let ss:StyleSheet =
                        {new StyleSheet,
                            common-style-sheet,
                            custom-style-sheet
                        }
                    {install-style-sheet ss}
                    {f.add replace? = true, {custom-style-dialog  tf, pf, cb}}
                }
            }
        }
    {after 0s do
        {ddl.set-value-with-events "Classic"}
    }
    {center
        {StandardActiveTraversalContainer
            {VBox
                halign = "center",
                spacing = 0.1cm,
                ddl,
                f
            }
        }
    }
}