a walk on the seaside - rmll2008.rmll.info/img/pdf/ducasse-awalkontheseaside-28.pdf · s. ducasse,...
TRANSCRIPT
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