Beginnings of a PIM Example
I’ve put up the beginnings of a PIM example.
What works, the menu, the contact/org list and the add functionality. What needs to be implemented is Edit/Delete. I’d also like to add a master/detail view.
You can get it by loading it up from Monticello with the following details.
MCHttpRepository
location: ‘http://justplayitgrand.com/mc/elhpim’
user: ”
password: ”
Load version ELHPIM-elh.7.
Then bring up a Workspace (if WAKom hasn’t already been started), type, ‘WAKom startOn:9093′, and perform a ‘Do It’.
Go to your Web browser and point it at, localhost:9093/seaside.
You’ll notice an app called PIM present.
Select it.
The main purpose of this example is to help shed light on how to create applications with a menu, and multiple pages. When I first started looking at Seaside, one of the first questions I had was, how do I navigate to another page? All the suggestions seemed to point to ‘call/answer’. So you play around with this for a while, but what you begin to realize is that this isn’t what you want. (Why? because you may be navigating to pages which you will never return from, or are completely independent of the previous page) Instead, what you’re looking for is the idea of rebuilding your component tree. In the PIM example, this is shown by navigating between Contacts and Organizations. What is essentially done is the Content view is changed. Just like in desktop development, you’re just switching in and out what view will be drawn. It’s just that simple.
Alot of times I view call/answer as a mechanism for a modal window/view. I know that doesn’t exactly hold, but in alot of ways I find it to be a good analogy. Like a Sheet in Mac OS X (but for an individual component rather than the entire window).
I just wanted to get this example up. I’ll post more entries discussing what I’ve done. Alot of it could be done better and I plan to improve the code to demonstrate where we started and what it can look like (which I believe will really show the power of Seaside). The more you play with Seaside, the more potential you see… the sky certainly is the limit (or rather your imagination I guess).
This is just a rough start to hopefully help those of you who were frustrated like myself. I’d like to get more stuff out incrementally then waiting until everything falls into place. I hope it helps people. Comments are certainly welcome, as I’m just grunting it out like the rest of you.
Guest List… whats next?
The Guest List showed a very simple example of using Seaside, and I’ll be posting more examples shortly.
Any comments would be much appreciated, as I’m just learning myself.
Guest List Details Discussion
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
First simple Seaside example: A Guest List.
I was reading the Seaside mailing list archives and came across this great post by Avi Bryant explaining to Todd Blanchard how to navigate to a new page. Avi posted back displaying how navigation can be accomplished using call/answer. He used a Guest List as his example. The mailing list entry can be found here.
The code in the list was old, so I decided this would be a good first example to convert to a newer state. You can grab the code and try it out by…
Get the squeak-web image.
Uncompress the file.
Open the squeak-web image by double clicking on it.
You can close any windows which are open. (ie. Script Manager and Preference Browser)
Left click to on the background image to get the World Menu.
Select ‘open…’
Open… menu appears.
Select ‘Monticello Browser’
In the Monticello Browser window…
Click +Repository
Select HTTP.
Enter…
MCHttpRepository
location: ‘http://justplayitgrand.com/mc/elhguestlist’
user: ”
password: ”
Click Accept.
Make sure the ‘http://justplayitgrand.com/mc/elhguestlist’ item is selected in the tableview on the right.
Click the Open button.
A Repository window will open.
Select ELHGuestBook in the left tableview and ELHGuestBook-elh.#.mcz in the right tableview (where # denotes a number, ie. 6 but just select the one with the highest number, ie. ELHGuestBook-elh.6.mcz)
Click Load.
Close the repository window.
Close the Monticello Browser window.
Now open up a browser by…
Left click on the background image.
World Menu appears.
Select open…
Select Class Browser or Image Browser.
At the very left are your categories.
Scroll and find ELHGuestBook-Model and ELHGuestBook-Views. (Mostlikely at the very bottom)
We have successfully loaded the code.
If you open up a Workspace by…
Click on the background image.
Select open…
Select Workspace.
In the Workspace type, WAKom startOn:9090.
Highlight the text you just typed above and click the middle mouse button (by default) and select Do it…
[Note: If Do It… does not appear in the menu, try right clicking and then select Do It…]
Now the Web Server has been started.
Open up a web browser and navigate to…
http://localhost:9090/seaside
You will see an item called ‘Guest List’
Click on the ‘Guest List’ item.
Now play with it and look at the code in the Class Browser in Squeak.
Technorati Tags: Squeak
Wiki for recording what I learn with Seaside
I just put up a wiki called Seaside Docs which will include anything I find interesting about Seaside and any notes I’ve made about it. I hope to grow it into something other people can benefit from and if not, just a place I can do a brain dump.
:= or _ ?
What’s the preferred method? In the default image which I downloaded from Squeak Homepage, it seems _ is the default. In the Squeak-Web Image from Damien Cassou it seems := is the default. Confused? Me too. Which one should I be using, or is it just personal preference? (and where did the left arrow go?)
Class variable syntax check upon declaration
I went to create a Singleton and for a second I had to think how to actually do this. I code alot of Objective-C, and its funny how your brain really gets rewired. In Objective-C you would declare a static variable, which is its way of defining a class variable. It seems that after a long time of doing this I didn’t really think of it that way (in ObjC), I just thought of it as a static variable, in the C sense. So it takes a second to step back and think, what am I doing again?
Anyway, I went to declare the class variable in the Class definition. I entered… ’sharedAddressBook’, performed a save of the editing window. A debugger window appears. Huh?
Ok, first time through I didn’t even read it and just clicked Proceed. I thought maybe its a bug in Squeak. But then I got wondering, why did a debugger window come up? So I undo the operation and do it again. Ah, it’s telling me a style recommendation and I can ignore it by clicking Proceed which will infact go ahead and declare it and save the editing window OR I can Abandon it and it returns me back to the Class declaration with no save occurring. Cool…
It’s nice to be presented with something like this. It’s proactively saying, hey, you may want to reconsider this as you may have a) typed it wrong or b) you are new around here aren’t you? Why yes I am.
Where to start?
Whenever you go to start something, you always have this grand vision about how everything is going to come together, and usually it never does. So I’m going to try something different. I’m just going to throw this up and see what happens. The main content will be Smalltalk related, in particular Squeak, but it may have other things here or there.
My plans are just to throw things up… as they are discovered or things of interest. Maybe others will find it interesting, maybe not. Who knows… but its a start.