Wall example - taking inputs from a form
<-Previous | ^UP^ | Next->
In the tutorial Getting started with GendL we developed an example application to build a model of a brick built wall. In that application, all inputs were provided as input-slots with default values. In this topic, we'll use the wall application and extend it to include a web based front end to gather inputs via a form.
The basic design concept is to have a web page as a top level object, which gathers the inputs and passes them to the wall application, which is defined as a child object of the web form. We will then retrieve the outputs from the wall application and display these on the web form
So first, we need to familiarise ourselves with the required inputs
(define-object wall(box):input-slots((brick-height 45)(brick-length 180)(brick-width 90)(mortar-joint-width 10)(wall-length 3700)(wall-height 900))...)
Now we define the form-controls to capture these inputs
(define-object wall-example-form (base-html-page):objects((brick-height-fc :type 'number-form-control:prompt "Brick Height (mm)":default 45:ajax-submit-on-change? t)(brick-length-fc :type 'number-form-control:default 180:prompt "Brick Length (mm)":ajax-submit-on-change? t)(brick-width-fc :type 'number-form-control:default 90:prompt "Brick Width (mm)":ajax-submit-on-change? t)(mortar-width-fc :type 'number-form-control:default 10:prompt "Mortar Joint Width (mm)":ajax-submit-on-change? t)(wall-length :type 'number-form-control:default 3700:prompt "Nominal Wall Length (mm)":ajax-submit-on-change? t)(wall-height :type 'number-form-control:default 3700:prompt "Nominal Wall Height (mm)":ajax-submit-on-change? t)))
Having done that, we need to present them on the web page; using a base-html-div is a convenient way to do this. Note that we use the form-controls slot to iterate through all the form-control objects to present them on the web page. Also we would normally define validation-function inputs, but have skipped those in this example
(define-object wall-example-form (base-html-page):computed-slots((main-sheet-body (with-lhtml-string ()(:table(:tr(:td (str (the form-controls-section div)))))))):objects((form-controls-section :type 'base-html-div:inner-html (with-lhtml-string ()(:table(dolist (obj (the form-controls))(htm (:tr (:td (str (theo obj prompt)))(:td (str (theo obj form-control)))))))))...))
Then we need to link the form-control value slots to the :inputs to the wall object
(define-object wall-example-form (base-html-page)......:objects((wall :type 'gdl-user::wall:brick-height (the brick-height-fc value):brick-length (the brick-length-fc value):brick-width (the brick-width-fc value):mortar-joint-width (the mortar-width-fc value):wall-length (the wall-length value):wall-height (the wall-height value))......))
Finally, we need to define a base-html-div to present the wall outputs on the web page. Because all of the form-control objects have been defined with :ajax-submit-on-change? set to T, any change to the form inputs will automatically trigger an update to the outputs display
(define-object wall-example-form (base-html-page):computed-slots((main-sheet-body (with-lhtml-string ()(:table (:tr (:td (str (the form-controls-section div)))(:td (str (the report-section div)))))))):objects(......(report-section :type 'base-html-div:inner-html (with-lhtml-string ()(:table(:tr (:td "Actual Wall Length")(:td (str (the wall actual-wall-length))))(:tr (:td "Actual Wall Height")(:td (str (the wall actual-wall-height))))(:tr (:td "Number of Full Bricks")(:td (str (the wall full-bricks))))(:tr (:td "Number of Half Bricks")(:td (str (the wall half-bricks))))(:tr (:td "Mortar Mass")(:td (fmt "~,1f" (the wall mortar-mass)))))))......))
