SDSU Emerging Technology
Fall Semester, 2004
Some Seaside Basics
Previous     Lecture Notes Index     Next     
© 2004, All Rights Reserved, SDSU & Roger Whitney
San Diego State University -- This page last updated 23-Sep-04

CS 683 Emerging Technologies Fall Semester, 2004 Doc 12 Some Seaside Basics

Contents

References

Seaside Basics

Text Input and Callbacks

Call-Answer

GetAge - answer

CallAnswerExample – call

Tag Attributes

Tables

Navigation Example

Transactions

Copyright ©, All rights reserved. 2004 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent ( http://www.opencontent.org/opl.shtml) license defines the copyright on this document.

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 2

References

Seaside source code

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 3

Seaside Basics

Some examples showing some basic features of Seaside

To save space on the slides:

Except were noted class methods are of the form: 

canBeRoot
   ^ true
   
initialize
   "self initialize"
   (self registerAsApplication: 'navigationExample')

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 4

Text Input and Callbacks 

Smalltalk.Seaside defineClass: #SimpleInput
   superclass: #{Seaside.WAComponent}
   indexedType: #none
   instanceVariableNames: 'age name '

Instance Methods 

age
   ^age ifNil: [age := 21]
   
age: anInteger
   age := anInteger
   
name
   ^name ifNil: [name := 'Enter your name here']
   
name: aString
   name := aString
   
processRequest
   self inform: 'Your request is being processed'

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 5

Form TextInput and Callbacks Continued 

renderContentOn: html 
   html heading: 'Simple Input Example'.
   html paragraph: 'A simple example of using forms'.
   html heading: 'Form with simple submit' level: 2.
   
   html form: 
         [html textInputOn: #age of: self.
         html 
            textInputWithValue: self name 
            callback: [:text | self name: text].
         html submitButton].
   html heading: 'Submit with action' level: 2.
   
   html form: 
         [html textAreaOn: #age of: self.
         html 
            textAreaWithValue: self name 
            callback: [:text | self name: text , 'me'].
         html 
            submitButtonWithAction: [self processRequest] 
            text: 'Click Me'].
            
   html paragraph: ('Name: ' , self name , 
         ', age: ',  self age printString)
   
updateRoot: anHtmlRoot
   super updateRoot: anHtmlRoot.
   anHtmlRoot title: 'Simple Input'.

http://bismarck.sdsu.edu/cs683/seaside/go/simpleInput

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 6

Call-Answer

GetAge - answer 

Smalltalk.Seaside defineClass: #GetAge
   superclass: #{Seaside.WAComponent}
   instanceVariableNames: 'age '

Instance Methods 

renderContentOn: html 
   html heading: 'Enter Your age'.
   html form: 
         [html textInputOn: #age of: self.
         html submitButtonWithAction: [self validateAge] ].
   
validateAge
   age > 13 & (age < 40) 
      ifTrue: [self answer: age]
      ifFalse: [self inform: 
         'We don''t allow students under the age of 13'] 
   
age
   ^age ifNil: [age := 1]
   
age: anInteger
   age := anInteger

No class methods in this class

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 7

CallAnswerExample – call 

Smalltalk.Seaside defineClass: #CallAnswerExample
   superclass: #{Seaside.WAComponent}
   instanceVariableNames: 'age '

Instance Methods 

askForAge
   age := (self call: GetAge new) + 50
   
renderContentOn: html 
   html heading: 'Call Answer'.
   html 
      form: [html 
                  submitButtonWithAction: [self askForAge] 
                  text: 'Your age'].
   
   age ifNotNil: 
         [html paragraph: 'You claim to be ' , age printString ,
             ' years old']
   
updateRoot: anHtmlRoot
   super updateRoot: anHtmlRoot.
   anHtmlRoot title: 'Call Example'.

http://bismarck.sdsu.edu/cs683/seaside/go/callAnswer

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 8

Tag Attributes 

Smalltalk.Seaside defineClass: #AttributeExample
   superclass: #{Seaside.WAComponent}
   instanceVariableNames: ''
   classInstanceVariableNames: ''

Instance Methods 

renderContentOn: html 
   html heading: 'Attribute Example'.
   html paragraph: 'A plain paragraph'.
   
   html
      cssClass: 'Foo';
      paragraph: 'A  paragraph with class Foo'.
      
   html
      cssId: 'Foo';
      paragraph: 'A  paragraph with id Foo'.
      
   html divClass: 'Bar'
      with: [html paragraph: 'A  paragraph inside a div with class Foo'].
   
   html attributeAt: 'align' put: 'right'.
   html paragraph: 'A paragraph with attribute align=right'
   
updateRoot: anHtmlRoot
   super updateRoot: anHtmlRoot.
   anHtmlRoot title: 'Attribute Example'.

http://bismarck.sdsu.edu/cs683/seaside/go/attributeExample

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 9

Html Generated from Previous Slide 

<h1>Attribute Example</h1>
<p>A plain paragraph</p>
<p class="Foo">A paragraph with class Foo</p>
<p id="Foo">A paragraph with id Foo</p>
<div class="Bar">
 <p>A paragraph inside a div with class Foo</p>
</div>
<p align="right">A paragraph with attribute align=right</p>

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 10

Tables 

Smalltalk.Seaside defineClass: #TableExample
   superclass: #{Seaside.WAComponent}
   indexedType: #none
   private: false
   instanceVariableNames: ''
   classInstanceVariableNames: ''
   imports: ''
   category: 'cs683Examples'

Instance Methods 

style
   ^'table.foo
{
      border-color: blue;
   border-width: 2pt;
      border-style: solid;
}
.foo td
{
   border-color: black;
      border-width: 2pt;
      border-style: solid;
}'
   
updateRoot: anHtmlRoot
   super updateRoot: anHtmlRoot.
   anHtmlRoot title: 'Table Example'.

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 11

Table Continued 

renderContentOn: html 
   html heading: 'Table Examples'.
   
   html table: 
         [html
            tableHeadings: #('Cat' 'Dog' 'Mouse');
            tableRowWith: 1
               with: 2
               with: 3;
            tableRowWith: 4
               with: 5
               with: 1].
   
   html paragraph: 'Table with class foo'.
   
   html
      cssClass: 'foo';
      table: 
            [html tableRow: 
                  [html
                     tableData: 100;
                     tableData: 200;
                     tableData: 300]]

http://bismarck.sdsu.edu/cs683/seaside/go/tableExample

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 12

Navigation Example 

Smalltalk.Seaside defineClass: #NavigationExample
   superclass: #{Seaside.WAFrameComponent}
   instanceVariableNames: ''

Instance Methods 

renderContentOn: html
   html heading: 'Examples'.
   html render: self contents
   
updateRoot: anHtmlRoot
   super updateRoot: anHtmlRoot.
   anHtmlRoot title: 'Examples' 
   
initialize
   self contents: ((WASimpleNavigation new)
            add: HelloWorld new label: 'Hello';
            add: SimpleInput new label: 'Input';
            add: AttributeExample new label: 'Attributes';
            add: TableExample new label: 'Tables';
            add: TransactionExample new label: 'Transactions';
            yourself)

http://bismarck.sdsu.edu/cs683/seaside/go/navigationExample

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 13

Transactions

Smalltalk.Seaside defineClass: #TransactionExample

superclass: #{Seaside.WATask}

instanceVariableNames: ''

Instance Methods 

go
   | age |
   age := -1.
   self inform: 'Starting age is: ' , age printString.
   self isolate: 
         [self inform: 'Start transaction'.
         age := self call: GetAge new.
         self inform: 'Age inside transaction: ' , age printString].
   self inform: 'Age after transaction is: ' , age printString

This class has no class methods

CS 683 Fall 04Doc 12, Some Seaside Basics Slide # 14

Store Transaction Example 

go
   | shipping billing creditCard |
   cart := WAStoreCart new.
   self isolate:
      [[self fillCart.
      self confirmContentsOfCart]
         whileFalse].
   
   self isolate:
      [shipping := self getShippingAddress.
      billing := (self useAsBillingAddress: shipping)
               ifFalse: [self getBillingAddress]
               ifTrue: [shipping].
      creditCard := self getPaymentInfo.
      self shipTo: shipping billTo: billing payWith: creditCard].
   
   self displayConfirmation.

http://bismarck.sdsu.edu/cs683/seaside/go/store

Copyright ©, All rights reserved.

2004 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA.

OpenContent license defines the copyright on this document.

Previous     visitors since 23-Sep-04     Next