S. Ducasse, 2008 Seaside 1

A Walk on the

SeasideFrom L. Renggli’s slides

S. Ducassewww.seaside.st

S. Ducasse, 2008 Seaside 2

Who cares about?

Client Server

Web Browser

Web Server

Request

Response

HTTP Protocol

S. Ducasse, 2008 Seaside 3

Introduction

Features

Examples

Applications

References

Questions

Outline – Seaside 2.8

S. Ducasse, 2008 Seaside 4

A First Example

1

S. Ducasse, 2008 Seaside 5

<p> <% value1 + value2 %></p>

Common Approach<form action="second.html"> <input type="text" name="value1"> <input type="submit" value="OK"></form>

<form action="result.html"> <input type="text" name="value2"> <input type="submit" value="OK"></form>

<form action="result.html"> <input type="hidden" name="value1" value="<% value1 %>" > <input type="text" name="value2"> <input type="submit" value="OK"></form>

first

.htm

lse

cond

.htm

lre

sult.

htm

l

S. Ducasse, 2008 Seaside 6

valu

e1, v

alue

2

/result

processing

formatting

resu

lt

.../second

processing

formattingva

lue1

valu

e1

Other Problems

/firstformatting

User with Web Browser

S. Ducasse, 2008 Seaside 7

With Seaside

| value1 value2 |

Ask for first numbervalue1 := self request: ‘First Number’.

Ask for second numbervalue2 := self request: ‘Second Number’.

Show sum of first and second number self inform: value1 asNumber + value2 asNumber.

Client Server

Span Window

Back Button 2

S. Ducasse, 2008 Seaside 8

Seaside FeaturesFlow of applications: a continuous piece of code. Just plain Smalltalk

XHTML/CSS building

Component with state

Callback based event-model

Component Composition and Reuse

Web 2.0

Secure

S. Ducasse, 2008 Seaside

Tools

Development tools

Interactive debugging

On the fly recompilation

Code Refactoring

Server and client testing frameworks

9

S. Ducasse, 2008 Seaside 10

XHTML CSS2

Developer & Seaside Graphics Designer

User Interface Design

S. Ducasse, 2008 Seaside 11

User Interface Designhttp://www.csszengarden.com

S. Ducasse, 2008 Seaside 12

XHTML Building

html divNamed: ‘title’ with: ‘Titel’.html divNamed: ‘list’ with: [ html spanClass: ‘item’ with: ‘Item 1’. html spanClass: ‘item’ with: ‘Item 2’. ].

<div id=“title”>Title</div><div id=“list”> <span class=“item”>Item 1</span> <span class=“item”>Item 2</span></div>

S. Ducasse, 2008 Seaside 13

Callback Event ModelExample3>>renderContentOn: html html form: [ htmlsubmitButton callback: [ self inform: ‘Hello’ ] text: ‘Say Hello’ ].

<form method="post" action="/seaside/example2"> <input name="_s" value="WwaXKYdGNmGxCoiy" type="hidden" /> <input name="_k" value="EUCelKJU" type="hidden" /> <input value="Say Hello" name="1" type="submit" /></form>

3

S. Ducasse, 2008 Seaside 14

Callback Event ModelEnhance previous example

Ask for usernameAnswer the username

Enabling halosEditing code on the run

4

S. Ducasse, 2008 Seaside

Storing into model

Example4>>renderContentOn: html

html form: [ html text: ‘Username:’. html textInput callback: [ :value | username := value ]. html submitButton callback : [ self inform: ‘Hi ’ , username ] text: ‘Say Hello’. ].

15

S. Ducasse, 2008 Seaside 16

CompositionExample4>>initialize self children: { WACounter new. WAExample1 new. WAExample2 new. WAExample3 new. WAExample4 new. WAExample4 new. }.

Example4>>renderContentOn: html self children do: [ :each | html render: each ] separatedBy: [ html break ].

5

S. Ducasse, 2008 Seaside 17

Call / AnswerComponents (Web Browser)

B>>bar self answer: 77.B

Server (Source Code)

A>>foo x := self call: B . x asString.

A

A>>foo x := self call: B . x printString. -> 77

A

S. Ducasse, 2008 Seaside 18

Reuse

TabsFormsDialogsWizardsReportsBatchesCharts...

S. Ducasse, 2008 Seaside

Halos revisitedInspecting component modelInspecting XHTML sourceEditing stylesheet (CSS)

Debugging

19

S. Ducasse, 2008 Seaside 20

Applicationsnetstyle.ch

Insurance Application

Business Card Editor

Collaborative Team Management

Source Code Management

Others

Ticketing for Theaters

Booking System for Airlines

Content Management Systems

S. Ducasse, 2008 Seaside 21

Example: DomainHealth insurance

Little company with agencies

Requirements

Create and manage offers

Print and create PDF documents

Process of accepting new policies

Mange existing customers

Billing for agencies

S. Ducasse, 2008 Seaside 22

Example: ConfigurationApplication

Seaside

Apache

PostgreSQL

File System

Sque

ak

SSH

S. Ducasse, 2008 Seaside 23

Availability

Open Source: MIT License

Environments

Squeak (MIT)

GNU Smalltalk

Cincom VisualWorks

Gemstone

VisualAge

http://www.seaside.st

S. Ducasse, 2008 Seaside 24

Abstraction

Request / Response

Session Management

Composition and Reuse

Development

Smalltalk

Web-Tools

RequestResponse

Server

Client

Conclusion

S. Ducasse, 2008 Seaside 25

References

http://www.seaside.st/

Free seaside hosting

Support for Ajax and Web2.0

scriptaculous.seasidehosting.st/

http://seachart.seasidehosting.st/

S. Ducasse, 2008 Seaside 26