15.5Adding a Form
We would like to have a Save button so that we can save our changes. We need to wrap our component in a form in order for this to work correctly (see Chapter 10). Here is our updated renderContentOn:
method:
ToDoListView>>renderContentOn: html
html heading: self model title.
html form: [
html anchor
callback: [ self add ];
with: 'add'.
html unorderedList: [ self renderItemsOn: html ].
html submitButton: 'Save' ]
Now we can add a checkbox to change the status of a todo item, see Figure 104.
Note that the value of the checkbox is passed as an argument of the checkbox callback. The callback uses this value to change the status of the todo item. Notice the use of the submitButton
to add a submit button in the form.
ToDoListView>>renderItem: anItem on: html
html listItem
class: 'done' if: anItem isDone;
class: 'overdue' if: anItem isOverdue;
with: [
html checkbox
value: anItem done;
callback: [ :value | anItem done: value ].
html render: anItem title.
html space.
html anchor
callback: [ self edit: anItem ];
with: 'edit'.
html space.
html anchor
callback: [ self remove: anItem ];
with: 'remove' ]