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
            show-results
        ]
        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
        ]
        true
    ]

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
            show-results
        ]
    ]

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