Add slide with Twitter demo

examples/presentation/st/Presentation.st

@@ -67,255 +67,6 @@ on: aPresentation
 		yourself
 ! !
 
-
-Slide subclass: #FOSDEMSlide
-	instanceVariableNames: ''
-	category: 'Presentation'!
-
-!FOSDEMSlide methodsFor: 'accessing'!
-
-codeSnippet
-	self subclassResponsibility
-! !
-
-!FOSDEMSlide methodsFor: 'rendering'!
-
-renderSnippet: aString on: html
-	(SourceArea new 
-			renderOn: html;
-			editor)  setValue: aString.
-!
-
-renderCodeSnippetOn: html
-	(SourceArea new 
-			renderOn: html;
-			editor)  setValue: self codeSnippet.
-! !
-
-
-FOSDEMSlide subclass: #FOSDEMREPLSlide
-	instanceVariableNames: ''
-	category: 'Presentation'!
-
-!FOSDEMREPLSlide methodsFor: 'rendering'!
-
-renderSlideOn: html
-	html h1: 'REPL'.
-	self renderCodeSnippetOn: html.
-!
-
-codeSnippet
-	^ 
-'./bin/amber
-fs := require value: ''fs''.
-fs readdir: ''/tmp'' do: [:err :file| console log: file]'.
-! !
-
-FOSDEMSlide subclass: #FOSDEMJSToSmalltalk
-	instanceVariableNames: ''
-	category: 'Presentation'!
-
-!FOSDEMJSToSmalltalk methodsFor: 'accessing'!
-
-cssClass
-	^ 'slide blue3d'
-!
-
-codeSnippet
-	^
-'var counter = window.smalltalk.Counter._new();
-counter._appendToJQuery_($(''#jsToSmalltalk''));'.
-! !
-
-!FOSDEMJSToSmalltalk methodsFor: 'rendering'!
-
-renderSlideOn: html
-	html h1: 'Call Smalltalk from Javascript'.
-	html div
-		id: 'jsToSmalltalk';
-		style: 'float: left'.
-	self renderCodeSnippetOn: html.
-! !
-
-FOSDEMSlide subclass: #FOSDEMCanvasSlide
-	instanceVariableNames: 'c2d canvas'
-	category: 'Presentation'!
-
-!FOSDEMCanvasSlide methodsFor: 'accessing'!
-
-cssClass
-	^ 'slide red3d'
-! !
-
-!FOSDEMCanvasSlide methodsFor: 'drawing'!
-
-drawOnCanvas
-	|c2d|
-	c2d := canvas element getContext: '2d'.
-	c2d 
-		clearRect: 0 
-		y: 0 
-		width: canvas element width 
-		height: canvas element height.
-	
-	40 atRandom timesRepeat: [ |rgba|
-			rgba := ',' join: {255 atRandom. 255 atRandom. 255 atRandom. 10 atRandom / 10}.
-			c2d	at: 'fillStyle' put: 'rgba(', rgba, ')'.
-			c2d
-				fillRect: 600 atRandom 
-				y: 300 atRandom 
-				width: 200 atRandom 
-				height: 200 atRandom ]
-! !
-
-!FOSDEMCanvasSlide methodsFor: 'rendering'!
-
-renderSlideOn: html
-	html h1: 'Playing with canvas'.
-	canvas := html  canvas 
-				width: 700;
-				height: 400.
-
-	self updateCanvas.
-! !
-
-!FOSDEMCanvasSlide methodsFor: 'updating'!
-
-updateCanvas
-	self drawOnCanvas.
-	window setTimeout: [self updateCanvas] delay: 500.
-! !
-
-FOSDEMSlide subclass: #FOSDEMJSPlayGroundSlide
-	instanceVariableNames: ''
-	category: 'Presentation'!
-
-!FOSDEMJSPlayGroundSlide methodsFor: 'accessing'!
-
-codeSnippet
-^'|logo|
-logo:=''img#amberlogo'' asJQuery.
-
-logo
-  css:''-webkit-transition'' put:''all 10s ease-in-out''.
-
-<logo.css(''-webkit-transform'', ''rotateY(360deg)'');>.
-
-logo click: [window alert: ''This is cool !!''].
-
-logo inspect'.
-! !
-
-!FOSDEMJSPlayGroundSlide methodsFor: 'rendering'!
-
-renderSlideOn: html
-	html div
-		class: 'section center'; 
-		with: [
-			self renderCodeSnippetOn: html.
-			html img
-				id: 'amberlogo'; 
-				src: 'fosdem2012/images/amber.png'	]
-! !
-
-FOSDEMSlide subclass: #FOSDEMAmberBackend
-	instanceVariableNames: ''
-	category: 'Presentation'!
-
-!FOSDEMAmberBackend methodsFor: 'accessing'!
-
-cssClass
-	^ 'slide green3d'
-! !
-
-!FOSDEMAmberBackend methodsFor: 'rendering'!
-
-renderSlideOn: html
-	html div
-		class: 'section center';
-		with: [	html h1: 'Need a backend ?'.
-				{'nodejs.png'. 'php.gif'. 'rails.png'.   'pharo.png'. 'ambrhino.jpg'} do: [:aString |
-						html img: 'fosdem2012/images/', aString.
-				]
-		]
-! !
-
-FOSDEMSlide subclass: #FOSDEMBookletSlide
-	instanceVariableNames: ''
-	category: 'Presentation'!
-
-!FOSDEMBookletSlide methodsFor: 'accessing'!
-
-cssClass
-	^ 'slide blue3d'
-! !
-
-!FOSDEMBookletSlide methodsFor: 'css'!
-
-style
-	^ '
-#book { font-size: 1.4em; }
-#book .b-load .b-wrap-right { background-color: #DEC3A9;}
-#book .b-load .b-wrap-left { background-color: #DDD;} 
-'
-! !
-
-!FOSDEMBookletSlide methodsFor: 'rendering'!
-
-renderSlideOn: html
-	self renderBookOn: html.
-	html link 
-		rel:'stylesheet';
-		href: 'fosdem2012/lib/booklet/jquery.booklet.1.2.0.css'.
-	
-	html style: self style.
-	
-	jQuery 
-		getScript: 'fosdem2012/lib/booklet/jquery.booklet.1.2.0.min.js' 	
-		do: ['#book' asJQuery booklet: self bookletOptions].
-!
-
-renderBookOn: html
-	html div 
-		id: 'book';
-		with: [	html div
-					class: 'b-load';
-					with: [	html 
-								div: 'Amber makes it easy to plug existing javascript libraires';
-								div: 'Here is an example with the jQuery Booklet plugin';
-								div: 'Want to see how ?';
-								div: [ html button
-										onClick: [Browser openOn: FOSDEMBookletSlide ];
-										with: 'Just browse the code :)'.						] 	
-																							
-					]	
-		].
-!
-
-bookletOptions
-	^ #{ 
-		'arrows' -> true.
-		'keyboard' -> false.
-		'pageNumbers' -> false.
-		'closed' -> true
-	}
-! !
-
-FOSDEMSlide subclass: #FOSDEMIntroSlide
-	instanceVariableNames: ''
-	category: 'Presentation'!
-
-!FOSDEMIntroSlide methodsFor: 'not yet classified'!
-
-renderSlideOn: html
-	html div class: 'section center animate'; with: [
-		html img src: 'fosdem2012/images/amber.png'.
-		html p: self presentation author.
-          	html p: self presentation description.
-		html p: [
-			html with: self presentation email]].
-! !
-
 Widget subclass: #PresentationNavigator
 	instanceVariableNames: 'presentationBrush currentPresentation slideSelect'
 	category: 'Presentation'!
@@ -519,7 +270,6 @@ open
 	^ self new open
 ! !
 
-
 Widget subclass: #Presentation
 	instanceVariableNames: 'currentSlide slides'
 	category: 'Presentation'!
@@ -608,130 +358,309 @@ moveAt: anInteger
 	next ifNotNil: [currentSlide := next. next show]
 !
 
-currentSlideIndex
-	^ self slides indexOf: self currentSlide ifAbsent: [1]
+currentSlideIndex
+	^ self slides indexOf: self currentSlide ifAbsent: [1]
+! !
+
+!Presentation methodsFor: 'enumerating'!
+
+slidesDo: aBlockWithArg
+	self slides do: [:aSlide| aBlockWithArg value: aSlide].
+! !
+
+!Presentation methodsFor: 'initialization'!
+
+initSlides
+	slides := self slideClasses collect: [:each | each on: self]
+! !
+
+!Presentation methodsFor: 'rendering'!
+
+renderOn: html
+	html style
+		type: 'text/css';
+		with: self style.
+	html div 
+		id: 'slides';
+		with: [self renderSlidesOn: html]
+!
+
+renderSlidesOn: html
+	self slides do: [:each | 
+		each renderOn: html].
+	currentSlide ifNil: [currentSlide := self slides first].
+	self showCurrentSlide
+! !
+
+Presentation class instanceVariableNames: 'current'!
+
+!Presentation class methodsFor: 'accessing'!
+
+concretePresentations
+	^ self allSubclasses select: [:aPresentationClass| aPresentationClass isConcrete]
+!
+
+title
+	^ 'Slides'
+! !
+
+!Presentation class methodsFor: 'enumerating'!
+
+concretePresentationsDo: aBlockWithArg
+	self concretePresentations do: aBlockWithArg.
+! !
+
+!Presentation class methodsFor: 'testing'!
+
+isConcrete
+	^false
+! !
+
+Slide subclass: #FOSDEMSlide
+	instanceVariableNames: ''
+	category: 'Presentation'!
+
+!FOSDEMSlide methodsFor: 'accessing'!
+
+codeSnippet
+	self subclassResponsibility
+! !
+
+!FOSDEMSlide methodsFor: 'rendering'!
+
+renderSnippet: aString on: html
+	(SourceArea new 
+			renderOn: html;
+			editor)  setValue: aString.
+!
+
+renderCodeSnippetOn: html
+	(SourceArea new 
+			renderOn: html;
+			editor)  setValue: self codeSnippet.
+! !
+
+FOSDEMSlide subclass: #FOSDEMREPLSlide
+	instanceVariableNames: ''
+	category: 'Presentation'!
+
+!FOSDEMREPLSlide methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1: 'REPL'.
+	self renderCodeSnippetOn: html.
+!
+
+codeSnippet
+	^ 
+'./bin/amber
+fs := require value: ''fs''.
+fs readdir: ''/tmp'' do: [:err :file| console log: file]'.
+! !
+
+FOSDEMSlide subclass: #FOSDEMJSToSmalltalk
+	instanceVariableNames: ''
+	category: 'Presentation'!
+
+!FOSDEMJSToSmalltalk methodsFor: 'accessing'!
+
+cssClass
+	^ 'slide blue3d'
+!
+
+codeSnippet
+	^
+'var counter = window.smalltalk.Counter._new();
+counter._appendToJQuery_($(''#jsToSmalltalk''));'.
+! !
+
+!FOSDEMJSToSmalltalk methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html h1: 'Call Smalltalk from Javascript'.
+	html div
+		id: 'jsToSmalltalk';
+		style: 'float: left'.
+	self renderCodeSnippetOn: html.
 ! !
 
-!Presentation methodsFor: 'enumerating'!
+FOSDEMSlide subclass: #FOSDEMCanvasSlide
+	instanceVariableNames: 'c2d canvas'
+	category: 'Presentation'!
 
-slidesDo: aBlockWithArg
-	self slides do: [:aSlide| aBlockWithArg value: aSlide].
+!FOSDEMCanvasSlide methodsFor: 'accessing'!
+
+cssClass
+	^ 'slide red3d'
 ! !
 
-!Presentation methodsFor: 'initialization'!
+!FOSDEMCanvasSlide methodsFor: 'drawing'!
 
-initSlides
-	slides := self slideClasses collect: [:each | each on: self]
+drawOnCanvas
+	|c2d|
+	c2d := canvas element getContext: '2d'.
+	c2d 
+		clearRect: 0 
+		y: 0 
+		width: canvas element width 
+		height: canvas element height.
+	
+	40 atRandom timesRepeat: [ |rgba|
+			rgba := ',' join: {255 atRandom. 255 atRandom. 255 atRandom. 10 atRandom / 10}.
+			c2d	at: 'fillStyle' put: 'rgba(', rgba, ')'.
+			c2d
+				fillRect: 600 atRandom 
+				y: 300 atRandom 
+				width: 200 atRandom 
+				height: 200 atRandom ]
 ! !
 
-!Presentation methodsFor: 'rendering'!
+!FOSDEMCanvasSlide methodsFor: 'rendering'!
 
-renderOn: html
-	html style
-		type: 'text/css';
-		with: self style.
-	html div 
-		id: 'slides';
-		with: [self renderSlidesOn: html]
-!
+renderSlideOn: html
+	html h1: 'Playing with canvas'.
+	canvas := html  canvas 
+				width: 700;
+				height: 400.
 
-renderSlidesOn: html
-	self slides do: [:each | 
-		each renderOn: html].
-	currentSlide ifNil: [currentSlide := self slides first].
-	self showCurrentSlide
+	self updateCanvas.
 ! !
 
-Presentation class instanceVariableNames: 'current'!
+!FOSDEMCanvasSlide methodsFor: 'updating'!
 
-!Presentation class methodsFor: 'accessing'!
+updateCanvas
+	self drawOnCanvas.
+	window setTimeout: [self updateCanvas] delay: 500.
+! !
 
-concretePresentations
-	^ self allSubclasses select: [:aPresentationClass| aPresentationClass isConcrete]
-!
+FOSDEMSlide subclass: #FOSDEMJSPlayGroundSlide
+	instanceVariableNames: ''
+	category: 'Presentation'!
 
-title
-	^ 'Slides'
-! !
+!FOSDEMJSPlayGroundSlide methodsFor: 'accessing'!
 
-!Presentation class methodsFor: 'enumerating'!
+codeSnippet
+^'|logo|
+logo:=''img#amberlogo'' asJQuery.
 
-concretePresentationsDo: aBlockWithArg
-	self concretePresentations do: aBlockWithArg.
+logo
+  css:''-webkit-transition'' put:''all 10s ease-in-out''.
+
+<logo.css(''-webkit-transform'', ''rotateY(360deg)'');>.
+
+logo click: [window alert: ''This is cool !!''].
+
+logo inspect'.
 ! !
 
-!Presentation class methodsFor: 'testing'!
+!FOSDEMJSPlayGroundSlide methodsFor: 'rendering'!
 
-isConcrete
-	^false
+renderSlideOn: html
+	html div
+		class: 'section center'; 
+		with: [
+			self renderCodeSnippetOn: html.
+			html img
+				id: 'amberlogo'; 
+				src: 'fosdem2012/images/amber.png'	]
 ! !
 
-Widget subclass: #Slide
-	instanceVariableNames: 'presentation'
+FOSDEMSlide subclass: #FOSDEMAmberBackend
+	instanceVariableNames: ''
 	category: 'Presentation'!
 
-!Slide methodsFor: 'accessing'!
+!FOSDEMAmberBackend methodsFor: 'accessing'!
 
-presentation
-	^presentation
-!
+cssClass
+	^ 'slide green3d'
+! !
 
-presentation: aPresentation
-	presentation := aPresentation
-!
+!FOSDEMAmberBackend methodsFor: 'rendering'!
 
-id
-	^ self class name
-!
+renderSlideOn: html
+	html div
+		class: 'section center';
+		with: [	html h1: 'Need a backend ?'.
+				{'nodejs.png'. 'php.gif'. 'rails.png'.   'pharo.png'. 'ambrhino.jpg'} do: [:aString |
+						html img: 'fosdem2012/images/', aString.
+				]
+		]
+! !
 
-cssClass
-	^'slide'
-!
+FOSDEMSlide subclass: #FOSDEMBookletSlide
+	instanceVariableNames: ''
+	category: 'Presentation'!
 
-backgroundColor
-	^'#555'
-!
+!FOSDEMBookletSlide methodsFor: 'accessing'!
 
-title
-	^ self id
+cssClass
+	^ 'slide blue3d'
 ! !
 
-!Slide methodsFor: 'actions'!
+!FOSDEMBookletSlide methodsFor: 'css'!
 
-show
-	self backgroundColor ifNotNil: [
-		(window jQuery: '#slides') css: 'background' color: self backgroundColor].
-	(window jQuery: '.slide') hide: self presentation slideTransition options: #() duration: 300.
-	(window jQuery: '#', self id) show: self presentation slideTransition options: #() duration: 300.
+style
+	^ '
+#book { font-size: 1.4em; }
+#book .b-load .b-wrap-right { background-color: #DEC3A9;}
+#book .b-load .b-wrap-left { background-color: #DDD;} 
+'
 ! !
 
-!Slide methodsFor: 'rendering'!
-
-renderOn: html
-	html div class: self cssClass; id: self id; with: [
-		self renderSlideOn: html.
-		self renderMetaOn: html]
-!
+!FOSDEMBookletSlide methodsFor: 'rendering'!
 
 renderSlideOn: html
+	self renderBookOn: html.
+	html link 
+		rel:'stylesheet';
+		href: 'fosdem2012/lib/booklet/jquery.booklet.1.2.0.css'.
+	
+	html style: self style.
+	
+	jQuery 
+		getScript: 'fosdem2012/lib/booklet/jquery.booklet.1.2.0.min.js' 	
+		do: ['#book' asJQuery booklet: self bookletOptions].
 !
 
-renderMetaOn: html
+renderBookOn: html
 	html div 
-		id: 'meta';
-		with: [
-			html p class: 'title'; with: self presentation title.
-			html p class: 'description'; with: self presentation description.
-			html a class: 'author'; with: self presentation author; href: 'mailto:', self presentation email.
-			html a class: 'url'; with: self presentation url; href: self presentation url]
+		id: 'book';
+		with: [	html div
+					class: 'b-load';
+					with: [	html 
+								div: 'Amber makes it easy to plug existing javascript libraires';
+								div: 'Here is an example with the jQuery Booklet plugin';
+								div: 'Want to see how ?';
+								div: [ html button
+										onClick: [Browser openOn: FOSDEMBookletSlide ];
+										with: 'Just browse the code :)'.						] 	
+																							
+					]	
+		].
+!
+
+bookletOptions
+	^ #{ 
+		'arrows' -> true.
+		'keyboard' -> false.
+		'pageNumbers' -> false.
+		'closed' -> true
+	}
 ! !
 
-!Slide class methodsFor: 'instance creation'!
+FOSDEMSlide subclass: #FOSDEMIntroSlide
+	instanceVariableNames: ''
+	category: 'Presentation'!
 
-on: aPresentation
-	^self new
-		presentation: aPresentation;
-		yourself
+!FOSDEMIntroSlide methodsFor: 'not yet classified'!
+
+renderSlideOn: html
+	html div class: 'section center animate'; with: [
+		html img src: 'fosdem2012/images/amber.png'.
+		html p: self presentation author.
+          	html p: self presentation description.
+		html p: [
+			html with: self presentation email]].
 ! !
 
 Presentation subclass: #ESUG2011Presentation
@@ -1898,6 +1827,25 @@ body {
 .slide#ide {
     background: black url("esug2011/images/ide_star_wars.png") center center no-repeat;
 }
+
+
+.tweet {
+	background-color: #aaa;
+	color: black;
+	padding: 10px;
+	border-radius: 10px;
+	border: 5px solid #eee;
+	margin: 10px;
+}
+
+.tweet img {
+	vertical-align: top;
+	margin-right: 10px;
+}
+
+.tweet span:first-child {
+	float: right;
+}
 '
 !
 
@@ -1910,6 +1858,7 @@ slideClasses
 	FOSDEMJSPlayGroundSlide.
 	FOSDEMJSToSmalltalk.
 	FOSDEMBookletSlide.
+	FOSDEMTwitter.
 	FOSDEMCanvasSlide.
 	FOSDEMAmberBackend.
 	FOSDEMREPLSlide
@@ -1926,3 +1875,52 @@ title
 	^'Amber'
 ! !
 
+FOSDEMSlide subclass: #FOSDEMTwitter
+	instanceVariableNames: 'twitterDiv'
+	category: 'Presentation'!
+
+!FOSDEMTwitter methodsFor: 'accessing'!
+
+cssClass
+	^ 'slide black'
+! !
+
+!FOSDEMTwitter methodsFor: 'callback'!
+
+loadTweets
+	jQuery 
+		ajax: 'http://search.twitter.com/search.json?rpp=3&q=%40AmberSmalltalk'
+		options: #{
+				'type' -> 'GET'.
+				'success' -> [ :json | self renderTweets: (json results)].
+				'dataType' -> 'jsonp'
+			}.
+! !
+
+!FOSDEMTwitter methodsFor: 'rendering'!
+
+renderSlideOn: html
+	html button
+		onClick: [self loadTweets];
+		with: 'What about @AmberSmalltalk on Twitter ?'.
+	twitterDiv := html div.
+!
+
+renderTweets: tweets
+	twitterDiv contents: [	:html|
+						tweets do: [	:tweet|  
+									self renderTweet: tweet on: html] ]
+!
+
+renderTweet: tweet on: html
+	html div 
+		class: 'tweet';
+		with: [
+			html 
+				span: (tweet at: 'created_at');
+				img: (tweet at: 'profile_image_url');
+				span: (tweet at: 'from_user');
+				div: (tweet at: 'text'). 
+		]
+! !
+