Object subclass: #HTMLCanvas instanceVariableNames: 'root' category: 'Canvas'! !HTMLCanvas methodsFor: 'accessing'! root: aTagBrush root := aTagBrush ! root ^root ! ! !HTMLCanvas methodsFor: 'initialization'! initialize super initialize. root := TagBrush fromString: 'div' canvas: self ! ! !HTMLCanvas methodsFor: 'adding'! with: anObject ^self root with: anObject ! ! !HTMLCanvas methodsFor: 'tags'! newTag: aString ^TagBrush fromString: aString canvas: self ! tag: aString ^root addBrush: (self newTag: aString) ! h1 ^self tag: 'h1' ! h2 ^self tag: 'h2' ! h3 ^self tag: 'h3' ! h4 ^self tag: 'h4' ! h5 ^self tag: 'h5' ! h6 ^self tag: 'h6' ! p ^self tag: 'p' ! div ^self tag: 'div' ! span ^self tag: 'span' ! img ^self tag: 'img' ! ul ^self tag: 'ul' ! ol ^self tag: 'ol' ! li ^self tag: 'li' ! table ^self tag: 'table' ! tr ^self tag: 'tr' ! td ^self tag: 'td' ! th ^self tag: 'th' ! form ^self tag: 'form' ! input ^self tag: 'input' ! button ^self tag: 'button' ! select ^self tag: 'select' ! option ^self tag: 'option' ! textarea ^self tag: 'textarea' ! a ^self tag: 'a' ! ! !HTMLCanvas methodsFor: '*JQuery'! appendToJQuery: aJQuery aJQuery appendElement: root element ! ! Object subclass: #TagBrush instanceVariableNames: 'element' category: 'Canvas'! !TagBrush class methodsFor: 'instance creation'! fromString: aString canvas: aCanvas ^self new initializeFromString: aString canvas: aCanvas; yourself ! ! !TagBrush methodsFor: 'adding'! contents: anObject self asJQuery empty. self append: anObject ! addBrush: aTagBrush self appendChild: aTagBrush element. ^aTagBrush ! with: anObject self append: anObject ! append: anObject anObject appendToBrush: self ! appendToBrush: aTagBrush aTagBrush addBrush: self ! appendBlock: aBlock | root | root := canvas root. canvas root: self. aBlock value: canvas. canvas root: root ! appendChild: anElement {'self[''@element''].appendChild(anElement)'} ! appendString: aString self appendChild: (self createTextNodeFor: aString) ! ! !TagBrush methodsFor: 'attributes'! at: aString put: aValue {'self[''@element''].setAttribute(aString, aValue)'} ! removeAt: aString {'self[''@element''].removeAttribute(aString)'} ! class: aString self at: 'class' put: aString ! id: aString self at: 'id' put: aString ! src: aString self at: 'src' put: aString ! href: aString self at: 'href' put: aString ! title: aString self at: 'title' put: aString ! style: aString self at: 'style' put: aString ! ! !TagBrush methodsFor: 'initialization'! initializeFromString: aString canvas: aCanvas element := self createElementFor: aString. canvas := aCanvas ! ! !TagBrush methodsFor: 'accessing'! element ^element ! ! !TagBrush methodsFor: 'converting'! asJQuery ^{'return smalltalk.JQuery._from_(jQuery(self[''@element'']))'} ! asJQueryDo: aBlock aBlock value: self asJQuery ! ! !TagBrush methodsFor: 'events'! onKeyDown: aBlock self asJQuery on: 'keydown' do: aBlock ! onKeyPress: aBlock self asJQuery on: 'keypress' do: aBlock ! onKeyUp: aBlock self asJQuery on: 'keyup' do: aBlock ! onFocus: aBlock self asJQuery on: 'focus' do: aBlock ! onBlur: aBlock self asJQuery on: 'blur' do: aBlock ! onChange: aBlock self asJQuery on: 'change' do: aBlock ! onClick: aBlock self asJQuery on: 'click' do: aBlock ! ! !TagBrush methodsFor: 'private'! createElementFor: aString ^{'return document.createElement(String(aString))'} ! createTextNodeFor: aString ^{'return document.createTextNode(String(aString))'} ! ! Object subclass: #Widget instanceVariableNames: 'root' category: 'Canvas'! !Widget methodsFor: 'accessing'! root ^root ! ! !Widget methodsFor: 'adding'! appendToBrush: aTagBrush self appendToJQuery: aTagBrush asJQuery ! appendToJQuery: aJQuery self render. aJQuery append: self root asJQuery ! ! !Widget methodsFor: 'actions'! alert: aString {'alert(aString)'} ! confirm: aString ^{'return window.confirm(aString)'} ! prompt: aString ^self prompt: aString default: '' ! prompt: aString default: anotherString ^{'return window.prompt(aString, anotherString)'} ! update | canvas | canvas := HTMLCanvas new. canvas root: self root. self root asJQuery empty. self renderOn: canvas ! ! !Widget methodsFor: 'rendering'! render | canvas | canvas := HTMLCanvas new. root := canvas root. self renderOn: canvas ! renderOn: html self ! ! Widget subclass: #Counter instanceVariableNames: 'count' category: 'Canvas'! !Counter methodsFor: 'initialization'! initialize super initialize. count := 0 ! ! !Counter methodsFor: 'rendering'! renderOn: html html h1 with: count asString. html button with: '++'; onClick: [self increase]. html button with: '--'; onClick: [self decrease] ! ! !Counter methodsFor: 'actions'! increase count := count + 1. self update ! decrease count := count - 1. self update ! !