GUI enabling/disabling of controls

In addition to fundamental GUI component interaction, an application should dynamically enable and disable GUI components, to give some guidance to the user, and prohibit (inter)actions which are inappropriate in the current state of the application.

The task: Similar to the task GUI component interaction write a program that presents a form with three components to the user: A numeric input field ("Value") and two buttons ("increment" and "decrement").

The field is initialized to zero. The user may manually enter a new value into the field, increment its value with the "increment" button, or decrement the value with the "decrement" button.

The input field should be enabled only when its value is zero. The "increment" button only as long as the field's value is less then 10: When the value 10 is reached, the button should go into a disabled state. Analogously, the "decrement" button should be enabled only as long as the value is greater than zero.

Effectively, the user can now either increment up to 10, or down to zero. Manually entering values outside that range is still legal, but the buttons should reflect that and enable/disable accordingly.

PicoLisp

The standard PicoLisp GUI is HTTP based. Connect your browser to http://localhost:8080 after starting the following script. <lang PicoLisp>#!/usr/bin/picolisp /usr/lib/picolisp/lib.l

(load "@ext.l" "@lib/http.l" "@lib/xhtml.l" "@lib/form.l")

(de start ()

  (and (app) (zero *Number))
  (action
     (html 0 "Enable/Disable" "lib.css" NIL
        (form NIL
           (gui '(+Var +Able +NumField) '*Number '(=0 *Number) 20 "Value")
           (gui '(+Able +JS +Button) '(> 10 *Number) "increment"
              '(inc '*Number) )
           (gui '(+Able +JS +Button) '(gt0 *Number) "decrement"
              '(dec '*Number) ) ) ) ) )

(server 8080 "@start") (wait)</lang>