Just Play It Grand...

Ok, now assuming you’ve loaded the code and you’ve had a chance to play around with it. Let’s just go over the details slightly. You could have got this from the link to the mailing list where Avi explains it himself, but we’ll go over it here as well.

I created two Categories in the browser, one for the Model and one for the Views. There’s no reasoning here other than I’ve seen it done in other examples and it seemed to make sense to me.

The model includes two classes.

ELHGuestListDatabase - which is just my fake database and holds an array of guests. It is also an easy way for me to access the data from anywhere as its a singleton and I can get access to it through a class method. Nothing much to say here other than, the guests instance variable holds an array of ELHGuest.

ELHGuest - this is just a class to represent each Guest. Each guest has a name and possibly a comment.

Now to the more interesting part, the views.

ELHGuestList is a subclass of WAComponent. It represents the main page of our Seaside application.

It has 2 class methods
#canBeRoot - which just returns true and this states that it can be the a Root Component, or rather the entry page for an Application.

#initialize - this method gets called when ELHGuestList is instantiated. “self registerAsApplication: ‘Guest List’” just means to create an application called ‘Guest List’ and have this class as the root component. (This is also why ‘Guest List’ appears at localhost:9090/seaside/ when you point your web browser there for the first time)

We have two instance methods…

#renderContentOn: - This method is used to render content on the canvas which is passed in. This is where we construct our html.
As you can see we’re just creating a table which is populated by the contents of Guests in the database. We add an ‘Add Guest’ link at the bottom of the component with a callback method named #addGuest. What this means, is that if the Add Guest link is clicked, we’ll execute the #addGuest method.

#addGuest - this is the method which will ‘call’ the add guest component. “self call:(ELHAddGuest new).’ simply creates a new instance of ELHAddGuest, and then we call it which will replace the current component (the component who is calling it) with the component being called (ELHAddGuest).

ELHAddGuest has a bunch of instance methods.

#initialize - simply creates a new Guest object which will hold the name / comment which we enter.
#guest / #guest: are just accessors to the guest object.
#renderContentOn: - constructs the html. Here we are just displaying text input fields for the Guests Name/Comment. We use

In #renderContentOn:
#on:of:, to specify a callback which will store the inputted value and on what object it will be stored. A simple way to think of this is, what instance variable will store the value typed into the textfield and on what object should this be stored.

We have #cancel and #save which are callbacks on the submit buttons. Cancel simply performs an #answer which just returns us to the component which called us, #ELHGuestList.

#save on the other hand, will also #answer but this time with the guest which was created. This guest object is also persisted into the database and therefore it will be displayed when ELHGuestList now appears.

Technorati Tags: Squeak