Simple Text Form Window

Author: Carl Sassenrath
This example requires REBOL/View
Return to REBOL Cookbook

Here is a nice looking text form that has multiple fields. When the user clicks submit, it displays what was entered in each field. I put a couple check boxes in it for fun too.

Here's the layout code that creates the form:

    the-form: layout [
        across space 2x8
        style label vtext bold 100x24 middle right
        style bar box 306x3 edge [size: 1x1 color: water effect: 'bevel]
        backcolor water

        vh2 300 center "Example Input Form" return
        bar return

        label "Full Name"     f1: field 200 return
        pad 120 c1: check vtext "Programmer" bold return
        pad 120 c2: check vtext "Operator" bold return
        label "Email Address" f2: field return
        label "Phone Number"  f3: field return
        label "Your Comments" f4: area wrap 200x100 return

        bar return
        pad 40 space 100
        btn-enter 60 "Submit" [
            unview/only the-form
        btn-cancel 60 "Close" [unview/only the-form]
    the-form/effect: [gradient 0x1]

Here's the code that gets the value of each field and displays them on the REBOL console:

    show-results: does [
        print [
            "Name:" f1/text newline
            "Programmer:" c1/data newline
            "Operator:" c2/data newline
            "Email:" f2/text newline
            "Phone:" f3/text newline
            "Comments:" mold f4/text newline
        ask "press a key"

Here's how to show the window:

    view center-face the-form

It will look like this:

If you want to verify that text fields contain data, you can add a function like this (add it before the call to view):

    verify-field: func [name face] [
        if any [
            string? face/text
            empty? trim/head/tail face/text
            alert reform ["The" name "field is required"]
            return false

This checks that the field has a string value and that it contains actual text (not just spaces). If not, it displays a message and returns FALSE.

Now you can add a check to the submit button action:

    btn-enter 60 "Submit" [
        if all [
            verify-field "name" f1
            verify-field "email" f2
            verify-field "comments" f4
            unview/only the-form

The form window will only close if the required fields have been entered.

Note that you may need to download a more recent REBOL/View to run this. I've not checked it under older versions.

2006 REBOL Technologies REBOL.com REBOL.net