A walk at the shore

Tagged:  •    •    •  

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!

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 [

    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);
        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 [
        ^ '
            background-color: #aeeeee;
            width: 100%;
            height: 40px;
            padding-left: 5px;
            background-color: #d7eeee;
            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;
            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'

User login