renderContentOn:
html
WAHtmlCanvas
WACounter >> renderContentOn: html html heading: count. html anchor callback: [ self increase ]; with: '++'. html space. html anchor callback: [ self decrease ]; with: '--'
Using a DSL
html div id: 'title'; with: 'Title'
<div id="title">Title</div>
html div id: 'list'; with: [ html span class: 'item'; with: 'Item 1'. html span class: 'item'; with: 'Item 2' ]
<div id="list"> <span class="item">Item 1</span> <span class="item">Item 2</span> </div>
html unorderedList id: 'list'; with: [ 1 to: 5 do: [ :i | html listItem class: 'item'; with: 'Item ', i asString ]]
<ul id="list"> <li class="item">Item 1</li> <li class="item">Item 2</li> <li class="item">Item 3</li> <li class="item">Item 4</li> <li class="item">Item 5</li> </ul>
html unorderedList id: 'list'; with: [ 1 to: 5 do: [ :i | html listItem class: 'itemodd' if: i odd; class: 'itemeven' if: i even; with: 'Item ', i asString ]]
<ul id="list"> <li class="itemodd" >Item 1</li> <li class="itemeven">Item 2</li> <li class="itemodd" >Item 3</li> <li class="itemeven">Item 4</li> <li class="itemodd" >Item 5</li> </ul>
renderExampleOn: html html heading level: 2; with: 'Examples'. html tbsAlert beSuccess; with: [ html strong: 'Well done!'. html text: ' You successfully read this important alert message.' ]. html tbsAlert beInfo; with: [ html strong: 'Heads up!'. html text: ' This alert needs your attention, but it''s not super important.' ].
renderExampleOn: html html tbsButtonGroup: [ html tbsButton beDefault; with: 'Left'. html tbsButton beDefault; with: 'Middle'. html tbsButton beDefault; with: 'Right' ].
WACounter
WACounter subclass: #WATwitterCounter instanceVariableNames: '' classVariableNames: '' package: 'Seaside-Examples-Misc'
WATwitterCounter class >> initialize "self initialize" | app | app := WAAdmin register: self asApplicationAt: 'twittercounter'. app addLibrary: JQDeploymentLibrary; addLibrary: TBSDevelopmentLibrary
WATwitterCounter >> renderContentOn: html html tbsContainer: [ html form: [ html tbsButtonGroup beSmall; with: [ html tbsButton beDefault; callback: [ self increase ]; with: '+'. html tbsButton beDefault; callback: [ self decrease ]; with: '-' ]. html space; tbsBadge: self count ] ]
WATwitterCounter >> renderContentOn: html html tbsContainer: [ html form: [ "..." html space. html tbsBadge class: 'odd' if: self count odd; with: self count ] ] WATwitterCounter >> style ^ '.odd { color: red; }'
<span class="badge odd">7</span>
/