Scriptacu-list Tutorial(Part 2)

So we’ve got our first cut domain model and now its time to add our views. Today we are going to add another two classes MyAddressBookView and MyContactEditor…

MyAddressBookView

1. We begin by creating MyAddressBookView as a sublcass of WAComponent with an instance variable of addressBook. (NB by using an instance variable it will mean that your address book gets reset for every session. If you’re not happy with that you can use a class variable instead)
2. Once again we will lazy initialize our variable
   

   addressBook
^addressBook ifNil: [addressBook := MyAddressBook new]


3. Now we will create our rendering method. We start simple by coding a heading…
   

   renderContentOn: html
html heading: 'Contacts' level: 1.

4. Then we add some more lines that will iterate over our collection of contacts and for each one display their name as a hyperlink to a page where their details can be edited…
   

   self addressBook
contacts do: [:contact |
html div class: ('row');
with: [
html anchor
callback: [self showContact: contact];
with: (contact firstName , ' ', contact surname )]]

5. Lastly we will add a few lines to create a button which will allow us to create a new Contact…
   

   html form: [
html span class: 'button';
with: [html submitButton on: #addContact of: self]]

   (Note here the the on: aSymbol of: anObject is a convenience method that uses aSymbol to derive a label for the button and the method to perform. Neat eh!)

6. Before this code can run we need to define the two methods that called in the renderContentOn: method above. First we will define the addContact: method
   

   addContact
| contactEditor contact |
contact := MyContact new.
contactEditor := MyContactEditor on: contact.
(self call: contactEditor) ifTrue: [self addressBook addContact: contact]

   …this is all pretty straightforward except to point out that we will only add our new contact if the editor replies true (as a result of clicking save)

7. Finally for this class we will add our showContact: method…
   

   showContact: aContact
self call: (MyContactEditor on: aContact)

   …managing save and cancel for new contacts is easy. For editing it is a little more involved. Next time we will alter this method to implement a memento for the contact

MyContactEditor

1. Now we need to create the editor for our contacts. Again we create MyContactEditor as a subclass of WAComponent this time with an instance variable of contact.
2. Now create the accessors for the contact variable like we did for the variables in our domain classes last time.
3. We are now going to create a class method that will deliver us a new Editor with the contact already populated…
   

   on: aContact
^self new
contact: aContact ;
yourself

4. One of the most powerful things about seaside is the ability to factor your html into small callable methods. When creating a form I often repeat the same pattern for each input field; I create a div; I put a label for the field inside a “label” span; I put an input field inside a “field” span. So lets create a method that will do that for us…
   

   renderLabel: aLabel withInput: anInputFieldBlock on: html
html div class: 'row';
with: [
html span
class: 'label';
with: aLabel .
html span
class: 'field';
with: anInputFieldBlock].

5. Now we can use this in our rendering…
   

   renderContentOn: html
html heading: 'Contact Details'.
html form
with:
[
self renderLabel: 'First Name: ' withInput: [html textInput on: #firstName of: contact] on: html.
self renderLabel: 'Surname: ' withInput: [html textInput on: #surname of: contact] on: html.
self renderLabel: 'Date of Birth: ' withInput: [html dateInput on: #dateOfBirth of: contact] on: html.
self renderLabel: 'Telephone: ' withInput: [html textInput on: #telephoneNumber of: contact] on: html.
self renderLabel: 'Email: ' withInput: [html textInput on: #emailAddress of: contact] on: html.
html span class: 'button';
with: [html submitButton on: #save of: self].
html span class: 'button';
with: [html submitButton on: #cancel of: self].
]

6. Finally we need to create the save and cancel methods called by our buttons…
   

   save
self answer: true

   cancel
self answer: false

If you got through all that OK then open up a workspace and evaluate MyAddressBookView registerAsApplication: 'AddressBook' and hopefully you can then try out your app (most probably on http://localhost:8080/seaside/AddressBook)

---

Possibly related posts: (automatically generated)

• All Tutorial Video JAF (All In One)
• Back For Now! (part 2)
• Video Tutorial MT-Box For Se

Explore posts in the same categories: Seaside, Smalltalk