RacketUI: Automated Web UI Generator

This teachpack provides facilities for the quick and easy generation of web interfaces for programs written in the HtDP (How to Design Programs) estudent languages of Racket.

1 Quick Start

Consider the following program, which builds an acronym from the capitalized words in a list of strings:

; acronym : listof string -> string
(define (acronym a-los)
  (cond [(empty? a-los) ""]
        [(cons? a-los)
          (if (string-upper-case? (string-ith (first a-los) 0))
              (string-append (string-ith (first a-los) 0)
                             (acronym (rest a-los)))
              (acronym (rest a-los)))]))

A web application for this can be automatically generated by including the following at the top of the program:

(require (planet nah22/racketui:1:3))

and then putting the following code beneath the definition of acronym:

(web-launch
"Acronym Builder"
(function
  "Produces an acronym of the capitalized words in the given list of words."
  (acronym ["Words" (listof+ ["Word" string+])]
           ->["The acronym" string])))

Running this program should launch a web browser with a user interface that allows input of a list of words (strings) and controls to apply the function to that input and view the result.

2 Web Field Specifications

RacketUI generates a user interface based on an annotated specification of the types of data that the underlying function consumes and produces. The types of data that RacketUI supports are given by the web specs below. These are intended to correspond to the types of data used in How to Design Programs.

For the purposes of generating a user-friendly interface, specifications are annotated with text informally describing their purpose or interpretation in the context of the program.

An annotated web field specification, which we call a labeled spec, is a pair

[label spec]
where label is a string and spec is a web spec.

A web spec (web field specification) is one of

(constant x)
where x is any value
boolean
number
symbol
string
string+
for non-empty strings
filename
for functions that expect the name of an input file, or that produce the name of a generated output file
(structure constr lab-spec ...+)
where constr is a structure constructor and lab-spec are one or more labeled specs corresponding to the types expected for the fields of the structure
(oneof lab-spec ...+)
where lab-spec are one or more labeled specs corresponding to an itemization (union) of specifications
(listof lab-spec)
or, for non-empty lists,
(listof+ lab-spec)
where lab-spec is a labeled spec describing the type of elements in the list
(function purpose (proc lab-spec ...+ -> lab-spec))
where purpose is a string, proc is the name of a procedure, and lab-spec is a labeled spec. This form represents a specification for the given function (proc), consuming one or more parameters whose specifications precede ->, and producing data that meets the right-most specification.

It is possible to define a name for specifications that occur repeatedly:

(define/web id spec)

After this, id can be used in any context where a web spec is expected.

3 Starting a Web Application

To start a web application, use the following form:

(web-launch title web-spec)

where title is a string and web-spec is a function web spec.

1	Quick Start
2	Web Field Specifications
3	Starting a Web Application
4	Examples