A walk at the shore
By Joachim Jaeckel - Posted on June 14th, 2009
After playing around with seaside a bit, I want you to point you to another short seaside tutorial "HOWTO: Build a simple Seaside website in 30 minutes" under http://smalltalk.cat/blog/Seaside%3A+small+tutorial.
I find it an interesting short tutorial for seaside besides the one on: http://www.swa.hpi.uni-potsdam.de/seaside/tutorial which is also available as a book.
About the first one, I don't want to explain here something, because the explanations on the mentioned WEB-Site are enough (I think).
One thing I could do, to provide the source-code in a form, that you can use directly with gst.
So again:
Happy coding!
Joachim
Seaside.WAComponent subclass: WhateverHey [
renderContentOn: html [
html paragraph: 'Hi, this is my website. It only tokk....'
]
]
Seaside.WAComponent subclass: WhateverWhat [
renderContentOn: html [
html paragraph: 'This website has no useful content...'.
html paragraph: 'I just neede to type some nonsense to see it working'
]
]
Seaside.WAComponent subclass: WhateverSeaside [
renderContentOn: html [
html paragraph: 'Thsi framwork is very nice because: '.
html orderedList with: [html listItem: 'It is fast';
listItem: 'It is easy';
listItem: 'It is Smalltalk']
]
]
Seaside.WAComponent subclass: WhateverRoot [
| aCoupleOfTabs selectedTab |
WhateverRoot class >> canBeRoot [
^true
]
WhateverRoot class >> description [
^'A website about whatever'
]
title [
^'Whatever Website'
]
updateRoot: aHtmlRoot [
super updateRoot: aHtmlRoot.
aHtmlRoot title: self title
]
states [
^Array with: self
]
initialize [
super initialize.
aCoupleOfTabs := OrderedCollection new
add: 'Welcome' -> (Array
with: 'Hey this is my website' -> WhateverHey new
with: 'What is still all about' -> WhateverWhat new);
add: 'Nice Frameworks' -> (Array
with: 'Seaside' -> WhateverSeaside new);
yourself.
selectedTab := aCoupleOfTabs first value
]
renderContentOn: html [
self renderHeaderOn: html.
html div id: 'tabs'; with: [self renderTabsOn: html].
self renderChildrenOn: html
]
renderHeaderOn: html [
html div id: 'header';
with: [html heading: self title]
]
renderTabsOn: html [
html unorderedList id: 'tabs'; with: [
aCoupleOfTabs do: [ :each |
html listItem: [
html anchor
class: (selectedTab = each value
ifTrue: ['active']);
callback: [selectedTab := each value];
with: each key ]]]
]
renderChildrenOn: html [
html div id: 'content'; with: [
selectedTab do: [ :each |
html heading: each key.
html paragraph; render: each value.
html paragraph ]]
]
style [
^ '
body{
background-color: #aeeeee;
}
#header{
width: 100%;
height: 40px;
padding-left: 5px;
background-color: #d7eeee;
}
#content{
font-family: arial;
text-align: justify;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f7eeee;
}
#tabs{
display: inline;
}
#tabs li a{
text-align: center;
width: 100%;
height: 25px;
color: #000;
background-color: #d7eeee;
margin: 0.5em;
padding: 0.5em;
font-size: 12px;
text-decoration: none;
}
#tabs li a:hover{
font-weight: bold;
}
'
]
]
WhateverRoot registerAsApplication: 'Whatever'
