Seaside Examples

Here are some notes and a set of example apps that illustrate the use of the Seaside framework. They are in various states of completion - all the code can be found on Github.

Overview

Seaside is the open source framework of choice for developing sophisticated and dynamic web applications. Seaside uses the power of objects to master the web. With Seaside, building web applications is as simple as building desktop applications. Seaside lets you build highly dynamic and interactive web applications.

Seaside supports agile development through interactive debugging and unit testing. Seaside is based on Smalltalk, a proven and robust language implemented by different vendors. Seaside is now available for all major Smalltalk environments: Pharo, Squeak, GNU Smalltalk, Cincom Smalltalk, GemStone Smalltalk, and VA Smalltalk.

Never (only exception would be for testing purposes) use the style method. Always use updateRoot to specify the libraries you want to make use of - either from a friendly cdn or served using a local webserver. Running a simple http server such as is supplied with Python is a perfect solution when building / testing an application.

Start the test webserver - in the folder where the assets are stored

  python -m SimpleHTTPServer

Updated updateRoot method

  updateRoot: anHtmlRoot
  super updateRoot: anHtmlRoot.
  "anHtmlRoot stylesheet url: (RP_ToDoFileLibrary urlOf: #bootstrapCss)"
  anHtmlRoot stylesheet
      url: 'http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'.
  anHtmlRoot stylesheet
      url: 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'.
  anHtmlRoot stylesheet
      url: 'http://localhost:8000/css/top_10.css'.

Just because you can use JQuery directly in your code doesn't mean its the best way to do things. Use separate js files and serve these from a webserver (see above). Update the updateRoot method as appropriate.

Having said that here is a quote from the Seaside book -

The standard way of doing so in jQuery is to keep all the Javascript functionality unobtrusive in a separate Javascript file. This is possible with Seaside, but not the suggested way. In Seaside we try to encapsulate views and view-related functionality in components. Furthermore we keep components independent of each other and reusable in different contexts, what does not work well with sharing unobtrusive Javascript code. Additionally, the unobtrusiveness comes into the way when we want to define AJAX interactions.

I guess - in the end - the method that is used will depend on the particular problem that is being solved - mix and match. Some examples are given below.

Callbacks are awesome. However what has caught me out on a number of occasions is when the callback: has been the last message in the cascade and have found that it is not registered. The point is - always place the with: as the last message in the cascade after any 'callbacks'.

  html div
    class: 'col-md-12';
    class: 'note-action';
    with: [  	
      html anchor 
	      class: 'add-note';	
	      callback: [ self addNote: aTask ];							
	      with:  [
	        html span 
		      class: 'note-link';									
		          with: 'Add Note'.
	      ].													
    ].

Making sense of the existing Seaside JQuery documentation is not as easy as it should be (at least for me) - a number of examples that illustrate how basic interactions and ajax calls can be performed using Seaside can be found on github.

Here are some notes about ajax form processing in Seaside - based partly on notes from StackOverflow (Johan Brichau)

• When you use regular form submission, Seaside will trigger the callbacks for all fields inside the form for you. When you want to trigger the form submission as an ajax request, the Seaside-jQuery's #serializeForm method will also serialize the contents of all input fields inside the form and trigger their callbacks on the server side in an ajax request, just as in a 'standard' form submission. No need to change the implementation of the form!
• Use 'bePush' method to simulate a JQuery 'preventDefault' action on a button
• Using '#onComplete: is okay but be aware that the javascript is generated when the page is rendered for the first time
• You can only specify a single 'response generating' callback on each ajax request (e.g. only a single script, html, json callback per request). This is a logical limitation since a single request can only generate a single response. You can, however, add multiple 'secondary' callbacks (e.g. the serialize form callbacks, a callback:json:, etc...)

Logging actions / variable values (and more) to the browser console can be an essential part of development process - but how do you do that in Seaside. Here are some examples.

In a Seaside application when a session expires, by default the requests made to the application are not 'handled' - there is no active session to indicate what needs to happen. A common user flow when a session has expired would be to display an appropriate login form (or redirect the user to a different webpage). Ken Treis in his blog Something to Talk About outlines how this user flow can be replicated in Seaside.

Add an 'application' class - override WAApplication and add one method - expiryPathFor. This ensures that on expiry the current url has '/expired' added to it.

To complete the process add an initialRequest method to the application's root and finally register your Seaside application as an instance of CTApplication instead of WAApplication with the class method applicationNamed.