Forms in Pier

Suppose a task is to add a button in Pier to execute code. One way to do that is (code download):

1. Create a class to describe the parameters sent with the button click. For this example a single string is given:

   Object subclass: #PRAdHocObject
   	instanceVariableNames: 'parameter'
   	classVariableNames: ''
   	package: 'Pier-Forms'

2. Add read and write accessors:

   PRAdHocObject>>parameter: aString
   	parameter := aString
   
   PRAdHocObject>>parameter
   	^ parameter ifNil: [ parameter := '' ]

3. Create a method describing the parameter:

   PRAdHocObject>>descriptionParameter
   	<magritteDescription>
   	^ MAStringDescription new
   		  parameterName: 'parameter';
   		  accessor: #parameter;
   		  beSearchable;
   		  priority: 120;
   		  label: 'Parameter';
   		  beRequired;
   		  beEditable;
   		  yourself

4. Create a component by defining a class

   PRViewComponent subclass: #PRAdHocFormView
   	instanceVariableNames: ''
   	classVariableNames: ''
   	package: 'Pier-Forms'
   
   PRAdHocFormView class>>isAbstract
   	^ false

5. Create a render method

   PRAdHocFormView>>renderContentOn: html
   
   	| component |
   	(self context isValidCommand: PREditCommand)
   		ifTrue: [
   			html form: [
   				html render: (component := PRAdHocObject new asComponent).
   				html submitButton
   					callback: [
   						component save.
   						Transcript
   							show: 'The button was pushed: ';
   							show: component model parameter;
   							cr ];
   					with: 'Push' ] ]
   		ifFalse: [
   			html render:
   				'Edit is not valid in this context - no button to push' ]

6. Create a class for the structure

   PRStructure subclass: #PRAdHocForm
   	instanceVariableNames: ''
   	classVariableNames: ''
   	package: 'Pier-Forms'

7. Wire it up with the view created earlier

   PRAdHocForm>>viewComponentClass
   	^ PRAdHocFormView

8. Next is the work in the web browser

   WebBrowser openOn: 'http://localhost:8080/pier'.

   1. Add a link, choose PRAdHocForm:
      
      The list of options is generated in PRAddCommand>>#structureClasses, along with the the permissions to add that class for the user. Either use an admin user or add the permission under the Change Owner link
   2. Set the title of the page to be more readable
   
   1. Type some test text in the parameter, click the button
      

   After the button is clicked, the following should appear in the transcript:

   The button was pushed: This is the parameter as text

   Unfortunately this does not provide the operator much feedback that the button was clicked, but adding that code would double the size of the example.

This code was taken from previous work in PierWorkout.