Smalltalk current createPackage: 'Presentation'! Widget subclass: #Presentation instanceVariableNames: 'currentSlide slides' package: 'Presentation'! !Presentation methodsFor: 'accessing'! author ^'John Smith' ! currentSlide ^currentSlide ! currentSlide: aSlide currentSlide := aSlide ! description ^'A presentation written in Jtalk' ! email ^'john@smith.com' ! slideClasses ^self subclassResponsibility ! slideTransition ^'fade' ! slides slides ifNil: [self initSlides]. ^slides ! style "Should return a CSS style" ^ '' ! title ^ self class title. ! url ^'http://jtalk-project.org' ! ! !Presentation methodsFor: 'actions'! currentSlideIndex ^ self slides indexOf: self currentSlide ifAbsent: [1] ! moveAt: anInteger | next | next := self slides at: anInteger ifAbsent: [nil]. next ifNotNil: [currentSlide := next. next show] ! nextSlide | next | self currentSlide ifNotNil: [ next := self slides at: (self currentSlideIndex) + 1 ifAbsent: [nil]. next ifNotNil: [currentSlide := next. next show]] ! previousSlide | next | self currentSlide ifNotNil: [ next := self slides at: (self currentSlideIndex) - 1 ifAbsent: [nil]. next ifNotNil: [currentSlide := next. next show]] ! showCurrentSlide self currentSlide ifNotNil: [ '.slide' asJQuery hide. ('#', self currentSlide id) asJQuery show. 'title' asJQuery text: self title, ' - ', self currentSlide id. ] ! ! !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 ! ! Presentation subclass: #ESUG2011Presentation instanceVariableNames: '' package: 'Presentation'! !ESUG2011Presentation methodsFor: 'accessing'! author ^'Nicolas Petton' ! description ^'ESUG 2011, Edinburgh' ! email ^'nico@objectfusion.fr' ! slideClasses ^Array new add: IntroSlide; add: AboutSlide; add: WhatIsJtalkSlide; add: JtalkFeaturesSlide; add: WorkspaceSlide; add: IDESlide; add: CountersSlide; add: JtalkAndJavascriptSlide; add: JtalkAndJavascriptSlide2; add: JtalkAndJavascriptSlide3; add: JtalkAndJavascriptSlide4; add: JtalkAndCLI; add: JtalkAndNode; add: JtalkAndNode2; add: JtalkAndNode3; add: JtalkAndWebOS; add: JtalkAndEnyo; add: ContributionsSlide; yourself ! style ^' body { font-family: Helvetica,Arial,sans; } #slides { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #555; } .slide { background: #fff; color: #444; text-align: left; font-size: 20px; line-height: 1.8em; height: 500px; width: 700px; padding: 60px; position: absolute; left: 50%; top: 50%; margin-left: -420px; margin-top: -320px; box-shadow: 0 0 20px #111; -moz-box-shadow: 0 0 20px #111; -webkit-box-shadow: 0 0 20px #111; } .slide.transparent { background: transparent; box-shadow: 0 0 0 none; -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; color: #fff !!important; } .slide.black { background: black; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.38, rgb(79,79,79)), color-stop(0.69, rgb(33,33,33)), color-stop(0.86, rgb(4,4,4)) ); background-image: -moz-linear-gradient( center bottom, rgb(79,79,79) 38%, rgb(33,33,33) 69%, rgb(4,4,4) 86% ); color: #fff !!important; } .slide.black h1, .slide.black h2, .slide.black h3, .slide.transparent h1, .slide.transparent h2, .slide.transparent h3 { color: #fff; text-shadow: 0 1px 4px #aaa; } .slide.black a, .slide.transparent a { color: #ccc; } .slide.white { color: #333 !!important; } .slide.white h1, .slide.white h2, .slide.white h3 { color: #333; } .slide.white a { color: #333; } .slide h1, .slide h2, .slide h3 { color: #333; /* text-align: center; */ } .slide h1 { font-family: "Droid Sans"; font-size: 36px; text-shadow: 0 1px 4px #aaa; margin-top: 30px; margin-bottom: 50px; } /* .slide ul, .slide li { */ /* padding: 0; */ /* margin: 0; */ /* } */ .slide button { font-size: 18px; } .slide a { color: #555; text-decoration: none; cursor: pointer; } .slide a:hover { color: #fff; background: #555; } .slide .right { text-align: right; } .slide .section.center { text-align: center; display: table-cell; vertical-align: middle; width: 700px; height: 500px; } .slide code { font-family: "Droid Sans Mono"; color: #444; border: 1px solid #ddd; background: #eee; border-radius: 4px; padding: 2px; font-size: 16px; } .slide .code2 { font-family: "Droid Sans Mono"; line-height: 1.2em; color: #444; padding: 2px; font-size: 16px; } .slide .CodeMirror { width: 500px; height: 300px; text-align: left; } .slide .CodeMirror-scroll { text-align: left; } .slide .fancy { margin-top: 30px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); color: red; } .slide .comment { opacity: 0.6; font-weight: normal; } .slide .red { color: red; } .slide .blue { color: blue; } .slide#WhatIsJtalk { background: white url("esug2011/images/balloon.jpg") 650px 50px no-repeat; } .slide#ide { background: black url("esug2011/images/ide_star_wars.png") center center no-repeat; } .slide#JtalkAndCLI { background: white url("esug2011/images/terminal.png") 620px 20px no-repeat; } .slide#JtalkAndNode { background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat; } .slide#JtalkAndNode2 { background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat; } .slide#JtalkAndNode3 { background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat; } .slide#JtalkAndWebOS { background: white url("esug2011/images/devices.jpg") 380px 280px no-repeat; } .slide#JtalkAndEnyo { background: white url("esug2011/images/enyo.png") 130px 150px no-repeat; } .slide#links { background: white url("esug2011/images/asterix.png") 30px 130px no-repeat; } .slide#links .section { margin-left: 250px; margin-top: 200px; font-family: "Droid Sans"; font-size: 26px; font-weight: bold; } #meta { position: absolute; font-size: 12px; opacity: 0.6; bottom: 0; right: 0; z-index: 2; background: #333; text-align: right; padding: 0 10px; line-height: 1.8em; color: #eee; border-top-left-radius: 5px; } #meta:hover { opacity: 0.8; } #meta p { display: inline; padding: 0 5px; } #meta a { //background: #ccc; color: #ccc; text-decoration: none; padding: 0 5px; } .slide { } ' ! url ^'http://jtalk-project.org' ! ! ESUG2011Presentation class instanceVariableNames: 'current'! !ESUG2011Presentation class methodsFor: 'accessing'! title ^'Jtalk' ! ! !ESUG2011Presentation class methodsFor: 'testing'! isConcrete ^true ! ! Presentation subclass: #FOSDEM2012Presentation instanceVariableNames: '' package: 'Presentation'! !FOSDEM2012Presentation methodsFor: 'accessing'! author ^'Laurent Laffont, Johnny Thornton' ! description ^'FOSDEM 2012, Brussels' ! email ^'laurent.laffont@gmail.com, johnnyt@xan.do' ! slideClasses ^ { FOSDEMIntroSlide. FOSDEMAmberZeroNine. CountersSlide. IDESlide. JtalkAndJavascriptSlide. FOSDEMJSPlayGroundSlide. FOSDEMJSToSmalltalk. FOSDEMBookletSlide. FOSDEMTwitter. FOSDEMCanvasSlide. FOSDEMAmberBackend. FOSDEMREPLSlide. FOSDEMCLISlide. FOSDEMContributionsSlide } ! style ^' body { font-family: Helvetica,Arial,sans; } #slides { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #555; } .slide { background: #fff; color: #444; text-align: left; font-size: 20px; line-height: 1.8em; height: 500px; width: 700px; padding: 60px; position: absolute; left: 50%; top: 50%; margin-left: -420px; margin-top: -320px; box-shadow: 0 0 20px #111; -moz-box-shadow: 0 0 20px #111; -webkit-box-shadow: 0 0 20px #111; } .slide.transparent { background: transparent; box-shadow: 0 0 0 none; -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; color: #fff !!important; } .slide.black { background: black; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.38, rgb(79,79,79)), color-stop(0.69, rgb(33,33,33)), color-stop(0.86, rgb(4,4,4)) ); background-image: -moz-linear-gradient( center bottom, rgb(79,79,79) 38%, rgb(33,33,33) 69%, rgb(4,4,4) 86% ); color: #fff !!important; } .slide.black h1, .slide.black h2, .slide.black h3, .slide.transparent h1, .slide.transparent h2, .slide.transparent h3 { color: #fff; text-shadow: 0 1px 4px #aaa; } .slide.black a, .slide.transparent a { color: #ccc; } .slide.white { color: #333 !!important; } .slide.white h1, .slide.white h2, .slide.white h3 { color: #333; } .slide.white a { color: #333; } .slide h1, .slide h2, .slide h3 { color: #333; /* text-align: center; */ } .slide h1 { font-family: "Droid Sans"; font-size: 36px; text-shadow: 0 1px 4px #aaa; margin-top: 30px; margin-bottom: 50px; } .slide button { font-size: 18px; } .slide a { color: #555; text-decoration: none; cursor: pointer; } .slide a:hover { color: #fff; background: #555; } .slide .right { text-align: right; } .slide .section.center { text-align: center; display: table-cell; vertical-align: middle; width: 700px; height: 500px; } .slide code { font-family: "Droid Sans Mono"; color: #444; border: 1px solid #ddd; background: #eee; border-radius: 4px; padding: 2px; font-size: 16px; } .slide .code2 { font-family: "Droid Sans Mono"; line-height: 1.2em; color: #444; padding: 2px; font-size: 16px; } .slide .CodeMirror { width: 700px; height: 300px; text-align: left; } .slide .CodeMirror-scroll { text-align: left; } .slide .fancy { margin-top: 30px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); color: red; } .slide .comment { opacity: 0.6; font-weight: normal; } .slide .red { color: red; } .slide .blue { color: blue; } #meta { position: absolute; font-size: 12px; opacity: 0.6; bottom: 0; right: 0; z-index: 2; background: #333; text-align: right; padding: 0 10px; line-height: 1.8em; color: #eee; border-top-left-radius: 5px; } #meta:hover { opacity: 0.8; } #meta p { display: inline; padding: 0 5px; } #meta a { //background: #ccc; color: #ccc; text-decoration: none; padding: 0 5px; } .slide { } .slide.blue3d { background: #feffff; background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#d2ebf9)); background: -webkit-linear-gradient(top, #feffff 0%,#d2ebf9 100%); background: -o-linear-gradient(top, #feffff 0%,#d2ebf9 100%); background: -ms-linear-gradient(top, #feffff 0%,#d2ebf9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#feffff", endColorstr="#d2ebf9",GradientType=0 ); background: linear-gradient(top, #feffff 0%,#d2ebf9 100%); } .slide.red3d { background: #febbbb; background: -moz-linear-gradient(top, #febbbb 0%, #fe9090 71%, #ff5c5c 95%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febbbb), color-stop(71%,#fe9090), color-stop(95%,#ff5c5c)); background: -webkit-linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%); background: -o-linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%); background: -ms-linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#febbbb", endColorstr="#ff5c5c",GradientType=0 ); background: linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%); } .slide.green3d { background: #cdeb8e; background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#cdeb8e", endColorstr="#a5c956",GradientType=0 ); background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); } @-webkit-keyframes rotate-horizontal { 0% { -webkit-transform: perspective(1000px) rotateY(-10deg);} 100% { -webkit-transform: perspective(1000px) rotateY(10deg);} } .animate p{ -webkit-animation: rotate-horizontal 2s infinite alternate ease-in-out; } #FOSDEMAmberBackend img { margin: 5px; -webkit-animation: rotate-horizontal 2s infinite alternate ease-in-out; } .slide#FOSDEMContributionsSlide { background: white url("esug2011/images/asterix.png") 30px 130px no-repeat; } .slide#FOSDEMContributionsSlide .section { margin-left: 250px; margin-top: 200px; font-family: "Droid Sans"; font-size: 26px; font-weight: bold; } .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; } ' ! url ^'http://amber-lang.net' ! ! !FOSDEM2012Presentation class methodsFor: 'testing'! isConcrete ^true ! title ^'Amber' ! ! Presentation subclass: #SweSUG2012Presentation instanceVariableNames: '' package: 'Presentation'! !SweSUG2012Presentation methodsFor: 'accessing'! author ^'Göran Krampe' ! description ^'SweSUG 2012, Stockholm' ! email ^'goran@krampe.se' ! slideClasses ^Array new add: SweSUGIntroSlide; add: SweSUGAboutSlide; add: SweSUGWhatIsAmberSlide; add: SweSUGAmberFeaturesSlide; add: SweSUGWorkspaceSlide; add: IDESlide; add: CountersSlide; add: JtalkAndJavascriptSlide; add: JtalkAndJavascriptSlide2; add: JtalkAndJavascriptSlide3; add: JtalkAndJavascriptSlide4; add: JtalkAndCLI; add: JtalkAndNode; add: JtalkAndNode2; add: JtalkAndNode3; add: JtalkAndWebOS; add: JtalkAndEnyo; add: ContributionsSlide; yourself ! style ^' body { font-family: Helvetica,Arial,sans; } #slides { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #555; } .slide { background: #fff; color: #444; text-align: left; font-size: 20px; line-height: 1.8em; height: 500px; width: 700px; padding: 60px; position: absolute; left: 50%; top: 50%; margin-left: -420px; margin-top: -320px; box-shadow: 0 0 20px #111; -moz-box-shadow: 0 0 20px #111; -webkit-box-shadow: 0 0 20px #111; } .slide.transparent { background: transparent; box-shadow: 0 0 0 none; -moz-box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; color: #fff !!important; } .slide.black { background: black; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.38, rgb(79,79,79)), color-stop(0.69, rgb(33,33,33)), color-stop(0.86, rgb(4,4,4)) ); background-image: -moz-linear-gradient( center bottom, rgb(79,79,79) 38%, rgb(33,33,33) 69%, rgb(4,4,4) 86% ); color: #fff !!important; } .slide.black h1, .slide.black h2, .slide.black h3, .slide.transparent h1, .slide.transparent h2, .slide.transparent h3 { color: #fff; text-shadow: 0 1px 4px #aaa; } .slide.black a, .slide.transparent a { color: #ccc; } .slide.white { color: #333 !!important; } .slide.white h1, .slide.white h2, .slide.white h3 { color: #333; } .slide.white a { color: #333; } .slide h1, .slide h2, .slide h3 { color: #333; /* text-align: center; */ } .slide h1 { font-family: "Droid Sans"; font-size: 36px; text-shadow: 0 1px 4px #aaa; margin-top: 30px; margin-bottom: 50px; } /* .slide ul, .slide li { */ /* padding: 0; */ /* margin: 0; */ /* } */ .slide button { font-size: 18px; } .slide a { color: #555; text-decoration: none; cursor: pointer; } .slide a:hover { color: #fff; background: #555; } .slide .right { text-align: right; } .slide .section.center { text-align: center; display: table-cell; vertical-align: middle; width: 700px; height: 500px; } .slide code { font-family: "Droid Sans Mono"; color: #444; border: 1px solid #ddd; background: #eee; border-radius: 4px; padding: 2px; font-size: 16px; } .slide .code2 { font-family: "Droid Sans Mono"; line-height: 1.2em; color: #444; padding: 2px; font-size: 16px; } .slide .CodeMirror { width: 500px; height: 300px; text-align: left; } .slide .CodeMirror-scroll { text-align: left; } .slide .fancy { margin-top: 30px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); color: red; } .slide .comment { opacity: 0.6; font-weight: normal; } .slide .red { color: red; } .slide .blue { color: blue; } .slide#WhatIsJtalk { background: white url("esug2011/images/balloon.jpg") 650px 50px no-repeat; } .slide#ide { background: black url("esug2011/images/ide_star_wars.png") center center no-repeat; } .slide#JtalkAndCLI { background: white url("esug2011/images/terminal.png") 620px 20px no-repeat; } .slide#JtalkAndNode { background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat; } .slide#JtalkAndNode2 { background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat; } .slide#JtalkAndNode3 { background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat; } .slide#JtalkAndWebOS { background: white url("esug2011/images/devices.jpg") 380px 280px no-repeat; } .slide#JtalkAndEnyo { background: white url("esug2011/images/enyo.png") 130px 150px no-repeat; } .slide#links { background: white url("esug2011/images/asterix.png") 30px 130px no-repeat; } .slide#links .section { margin-left: 250px; margin-top: 200px; font-family: "Droid Sans"; font-size: 26px; font-weight: bold; } #meta { position: absolute; font-size: 12px; opacity: 0.6; bottom: 0; right: 0; z-index: 2; background: #333; text-align: right; padding: 0 10px; line-height: 1.8em; color: #eee; border-top-left-radius: 5px; } #meta:hover { opacity: 0.8; } #meta p { display: inline; padding: 0 5px; } #meta a { //background: #ccc; color: #ccc; text-decoration: none; padding: 0 5px; } .slide { } ' ! url ^'http://www.amber-lang.net' ! ! !SweSUG2012Presentation class methodsFor: 'accessing'! title ^'Amber rocks!!' ! ! !SweSUG2012Presentation class methodsFor: 'testing'! isConcrete ^true ! ! Widget subclass: #PresentationNavigator instanceVariableNames: 'presentationBrush currentPresentation slideSelect' package: 'Presentation'! !PresentationNavigator methodsFor: 'accessing'! currentPresentation ^ currentPresentation ifNil: [currentPresentation := Presentation concretePresentations first new]. ! currentPresentation: aPresentation currentPresentation := aPresentation. ! style ^ ' #navigator { z-index: 1; position: fixed; top: 0; left: 50%; margin-left: -150px; padding: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #333; opacity: 0.3; color: #eee; } #navigator a { font-weight: bold; color: #eee; text-decoration: none; cursor: pointer; padding: 0 2px; font-size: 14px; } #navigator:hover { opacity: 0.8; } ' ! ! !PresentationNavigator methodsFor: 'callbacks'! nextSlide self currentPresentation nextSlide. self updateHash. ! previousSlide self currentPresentation previousSlide. self updateHash. ! reload |slideIndex| slideIndex := self currentPresentation currentSlideIndex. self currentPresentation: self currentPresentation class new. self renderCurrentPresentation. self selectSlideAt: slideIndex. ! selectPresentation: aPresentationClass self currentPresentation: aPresentationClass new. self renderCurrentPresentation. ! selectPresentationNamed: aString |presentationClass| presentationClass := (Smalltalk current at: aString). presentationClass ifNotNil: [ self selectPresentation: presentationClass ]. ! selectSlideAt: anInteger self currentPresentation moveAt: anInteger. self updateHash. ! updateHash document location hash: self currentPresentation class name, '-', self currentPresentation currentSlideIndex. ! ! !PresentationNavigator methodsFor: 'hash'! checkHash | hash presentation | hash := (document location hash replace: '^#' with: '') tokenize: '-'. presentation := Presentation concretePresentations detect: [:aPresentationClass | aPresentationClass name == hash first] ifNone: [^ self]. presentation == self currentPresentation class ifFalse: [ self selectPresentationNamed: presentation. self selectSlideAt: hash last ]. ! checkHashChange (window jQuery: window) bind: 'hashchange' do: [self checkHash] ! ! !PresentationNavigator methodsFor: 'keybindings'! setKeybindings (window jQuery: document) keyup: [:e || node | node := e target nodeName asLowercase. (node = 'textarea' or: [node = 'input']) ifFalse: [ e keyCode = 39 ifTrue: [self nextSlide]. e keyCode = 37 ifTrue: [self previousSlide]]] ! ! !PresentationNavigator methodsFor: 'rendering'! open (window jQuery: document) ready: [ self appendToJQuery: 'body' asJQuery; setKeybindings; checkHashChange. ]. ! renderCurrentPresentation presentationBrush contents: [:html | self currentPresentation renderOn: html. ]. self updateSlideSelect. ! renderOn: html html style type: 'text/css'; with: self style. html div id: 'navigator'; with: [ self renderToolsOn: html; renderPresentationSelectOn: html; renderSlideSelectOn: html]. presentationBrush := html div id: 'presentation'; yourself. self checkHash. self renderCurrentPresentation. ! renderPresentationSelectOn: html |presentationSelect| presentationSelect := html select. presentationSelect onChange: [self selectPresentationNamed: presentationSelect asJQuery val]; with: [ Presentation concretePresentationsDo: [:aPresentationClass | html option value: aPresentationClass name; with: aPresentationClass title ] ]. ! renderSlideSelectOn: html slideSelect := html select. slideSelect onChange: [ self selectSlideAt: slideSelect asJQuery val ]. self updateSlideSelect. ! renderToolsOn: html html a with: 'IDE'; onClick: [TabManager current open]. html a with: 'Reload'; onClick: [self reload]. html a with: '←'; onClick: [self previousSlide]. html a with: '→'; onClick: [self nextSlide]. ! updateSlideSelect slideSelect contents: [:html| |index| index := 0. self currentPresentation slidesDo: [ :aSlide| index := index + 1. html option value: index; with: aSlide title ] ]. ! ! !PresentationNavigator class methodsFor: 'initialize'! initialize ^ self open ! open ^ self new open ! ! Widget subclass: #Slide instanceVariableNames: 'presentation' package: 'Presentation'! !Slide methodsFor: 'accessing'! backgroundColor ^'#555' ! cssClass ^'slide' ! id ^ self class name ! presentation ^presentation ! presentation: aPresentation presentation := aPresentation ! title ^ self id ! ! !Slide methodsFor: 'actions'! 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. ! ! !Slide methodsFor: 'rendering'! renderMetaOn: 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] ! renderOn: html html div class: self cssClass; id: self id; with: [ self renderSlideOn: html. self renderMetaOn: html] ! renderSlideOn: html ! ! !Slide class methodsFor: 'instance creation'! on: aPresentation ^self new presentation: aPresentation; yourself ! ! Slide subclass: #AboutSlide instanceVariableNames: '' package: 'Presentation'! !AboutSlide methodsFor: 'accessing'! backgroundColor ^'white' ! cssClass ^'slide transparent white' ! id ^'about' ! ! !AboutSlide methodsFor: 'rendering'! renderSlideOn: html html div class: 'section center'; with: [ html h1 with: 'About this presentation'. html p with: 'This presentation is entirely written in Jtalk and is licensed under CC BY-SA.'. html p with: [ html with: 'Press '. html code with: '←'. html with: ' to move backward and '. html code with: ' →'. html with: ' to move forward.']. html p with: [ html with: 'Open a '. html button with: 'browser'; onClick: [Browser openOn: Presentation]. html with: ' to edit the source code.']] ! ! Slide subclass: #ContributionsSlide instanceVariableNames: '' package: 'Presentation'! !ContributionsSlide methodsFor: 'accessing'! id ^'links' ! ! !ContributionsSlide methodsFor: 'rendering'! renderSlideOn: html html div class: 'section'; with: [ html p with: [ html a href: 'http://jtalk-project.org'; with: 'jtalk-project.org']. html p with: [ html a href: 'https://github.com/NicolasPetton/jtalk'; with: 'github.com/NicolasPetton/jtalk']. html p with: [ html a href: 'http://http://groups.google.com/group/jtalk-project'; with: 'groups.google.com/group/jtalk-project']] ! ! Slide subclass: #CountersSlide instanceVariableNames: '' package: 'Presentation'! !CountersSlide methodsFor: 'accessing'! backgroundColor ^'#18bd7d' ! id ^'counters' ! ! !CountersSlide methodsFor: 'rendering'! renderSlideOn: html html div class: 'section center'; with: [ html h1 with: 'The counter example'. html div with: [ 2 timesRepeat: [Counter new renderOn: html]]] ! ! Slide subclass: #FOSDEMSlide instanceVariableNames: '' package: 'Presentation'! !FOSDEMSlide methodsFor: 'accessing'! codeSnippet self subclassResponsibility ! ! !FOSDEMSlide methodsFor: 'rendering'! renderCodeSnippetOn: html (SourceArea new renderOn: html; editor) setValue: self codeSnippet. ! renderSnippet: aString on: html (SourceArea new renderOn: html; editor) setValue: aString. ! ! FOSDEMSlide subclass: #FOSDEMAmberBackend instanceVariableNames: '' package: '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: #FOSDEMAmberZeroNine instanceVariableNames: '' package: 'Presentation'! !FOSDEMAmberZeroNine methodsFor: 'not yet classified'! renderSlideOn: html html div class: 'section center'; with: [ html h1: 'Amber 0.9.1 is out !!'; div: [html cite with: 'Now with over 43 forks on github and more than 230 followers the project: http://www.amber-lang.net ...is live and kicking!!']; div: [html cite with: '-- Nicolas & Göran'] ] ! ! FOSDEMSlide subclass: #FOSDEMBookletSlide instanceVariableNames: '' package: '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'! bookletOptions ^ #{ 'arrows' -> true. 'keyboard' -> false. 'pageNumbers' -> false. 'closed' -> true } ! 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 :)'. ] ] ]. ! 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]. ! ! FOSDEMSlide subclass: #FOSDEMCLISlide instanceVariableNames: '' package: 'Presentation'! !FOSDEMCLISlide methodsFor: 'rendering'! codeSnippet ^ 'cd examples/nodejs/hello ../../../bin/amberc -m Hello Hello.st Program node Program.js Hello world from Amber in Node.js' ! renderSlideOn: html html h1: 'CLI'. html with: 'amberc compiles .st files into node programs !!'. self renderCodeSnippetOn: html. ! ! FOSDEMSlide subclass: #FOSDEMCanvasSlide instanceVariableNames: 'c2d canvas' package: '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: #FOSDEMContributionsSlide instanceVariableNames: '' package: 'Presentation'! !FOSDEMContributionsSlide methodsFor: 'rendering'! renderSlideOn: html html div class: 'section'; with: [ html p with: [ html a href: '/documentation.html'; with: 'Documentation']. html p with: [ html a href: 'http://amber-lang.net'; with: 'amber-lang.net']. html p with: [ html a href: 'https://github.com/NicolasPetton/amber'; with: 'github.com/NicolasPetton/amber']. html p with: [ html a href: 'http://groups.google.com/group/amber-lang'; with: 'groups.google.com/group/amber-lang']] ! ! FOSDEMSlide subclass: #FOSDEMIntroSlide instanceVariableNames: '' package: '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]]. ! ! FOSDEMSlide subclass: #FOSDEMJSPlayGroundSlide instanceVariableNames: '' package: 'Presentation'! !FOSDEMJSPlayGroundSlide methodsFor: 'accessing'! codeSnippet ^'|logo| logo:=''img#amberlogo'' asJQuery. logo css:''-webkit-transition'' put:''all 10s ease-in-out''. . 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: #FOSDEMJSToSmalltalk instanceVariableNames: '' package: 'Presentation'! !FOSDEMJSToSmalltalk methodsFor: 'accessing'! codeSnippet ^ 'var counter = window.smalltalk.Counter._new(); counter._appendToJQuery_($(''#jsToSmalltalk''));'. ! cssClass ^ 'slide blue3d' ! ! !FOSDEMJSToSmalltalk methodsFor: 'rendering'! renderSlideOn: html html h1: 'Call Smalltalk from Javascript'. html div id: 'jsToSmalltalk'; style: 'float: left'. self renderCodeSnippetOn: html. ! ! FOSDEMSlide subclass: #FOSDEMREPLSlide instanceVariableNames: '' package: 'Presentation'! !FOSDEMREPLSlide methodsFor: 'rendering'! codeSnippet ^ './bin/amber fs := require value: ''fs''. fs readdir: ''/tmp'' do: [:err :file| console log: file]'. ! renderSlideOn: html html h1: 'REPL'. self renderCodeSnippetOn: html. ! ! FOSDEMSlide subclass: #FOSDEMTwitter instanceVariableNames: 'twitterDiv' package: '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. ! 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'). ] ! renderTweets: tweets twitterDiv contents: [ :html| tweets do: [ :tweet| self renderTweet: tweet on: html] ] ! ! Slide subclass: #IDESlide instanceVariableNames: '' package: 'Presentation'! !IDESlide methodsFor: 'accessing'! backgroundColor ^'black' ! cssClass ^'slide transparent' ! id ^'ide' ! ! !IDESlide methodsFor: 'rendering'! renderSlideOn: html " html div class: 'section center'; with: [ html h1 with: 'The wonderful Jtalk '; with: [ html a with: 'development tools'; onClick: [TabManager current open]]; with: '.'] " ! ! Slide subclass: #IntroSlide instanceVariableNames: '' package: 'Presentation'! !IntroSlide methodsFor: 'accessing'! cssClass ^'slide black' ! id ^'intro' ! ! !IntroSlide methodsFor: 'rendering'! renderSlideOn: html html div class: 'section center'; with: [ html h1 with: 'Jtalk, the Smalltalk for Web developers'. html p with: self presentation author, ' & Göran Krampe - ', self presentation description. html p with: [ html a with: self presentation email; href: 'mailto:', self presentation email]. html p with: [ html a with: 'goran@krampe.se'; href: 'mailto:goran@krampe.se']. html p with: [ html a with: 'objectfusion.fr'; href: 'http://www.objectfusion.fr']] ! ! Slide subclass: #JtalkAndCLI instanceVariableNames: '' package: 'Presentation'! !JtalkAndCLI methodsFor: 'not yet classified'! backgroundColor ^'#0A1' ! id ^'JtalkAndCLI' ! renderSlideOn: html html h1 with: [ html with: 'Jtalk and '. html span class: 'blue'; with: 'the command line']. html h2 with: 'jtalkc - a fairly elaborate bash script that:'. html ul with: [ html li with: 'Uses Node.js to run the Jtalk Compiler'. html li with: 'Compiles .st files to .js'. html li with: 'Links .js files into a single one'. html li with: 'Adds class initilization and/or call to main'. html li with: 'Optionally runs Google Closure compiler'] ! ! Slide subclass: #JtalkAndEnyo instanceVariableNames: '' package: 'Presentation'! !JtalkAndEnyo methodsFor: 'not yet classified'! backgroundColor ^'#0A1' ! id ^'JtalkAndEnyo' ! renderSlideOn: html html h1 with: [ html with: 'Jtalk and '. html span class: 'blue'; with: 'Enyo']. ! ! Slide subclass: #JtalkAndJavascriptSlide instanceVariableNames: '' package: 'Presentation'! !JtalkAndJavascriptSlide methodsFor: 'accessing'! backgroundColor ^'#08C' ! cssClass ^'slide transparent' ! id ^'jtalkAndJs' ! ! !JtalkAndJavascriptSlide methodsFor: 'rendering'! renderSlideOn: html html div class: 'section center'; with: [ html h1 with: [ html with: 'Smalltalk '. html span class: 'red'; with: '♥'. html with: ' JavaScript']] ! ! Slide subclass: #JtalkAndJavascriptSlide2 instanceVariableNames: '' package: 'Presentation'! !JtalkAndJavascriptSlide2 methodsFor: 'accessing'! backgroundColor ^'#08C' ! id ^'jtalkAndJs2' ! ! !JtalkAndJavascriptSlide2 methodsFor: 'rendering'! renderSlideOn: html html h1 with: [ html with: 'Smalltalk '. html span class: 'red'; with: '♥'. html with: ' JavaScript']. html h2 with: 'Jtalk maps one to one with the JavaScript equivalent:'. html ul with: [ html li with: 'String ⇔ String'. html li with: 'Number ⇔ Number'. html li with: 'BlockClosure ⇔ function'. html li with: 'Dictionary ⇔ Object'. html li with: 'Error ⇔ Error'. html li with: 'etc.'] ! ! Slide subclass: #JtalkAndJavascriptSlide3 instanceVariableNames: '' package: 'Presentation'! !JtalkAndJavascriptSlide3 methodsFor: 'accessing'! backgroundColor ^'#08C' ! id ^'jtalkAndJs3' ! ! !JtalkAndJavascriptSlide3 methodsFor: 'rendering'! renderSlideOn: html html h1 with: [ html with: 'Smalltalk '. html span class: 'red'; with: '♥'. html with: ' JavaScript']. html h2 with: 'Smalltalk ⇒ JavaScript'. html ol with: [ html li with: 'Unary messages begin with an underscore: '; with: [html code with: 'yourself']; with: ' becomes '; with: [html code with: '_yourself()']. html li with: 'Binary messages are prefixed with 2 underscores: '; with: [html code with: '3@4']; with: ' becomes '; with: [html code with: '(3).__at(4)']. html li with: 'Keyword message follow the same rules as unary messages, with a final underscore: '; with: [html code with: 'aDictionary at: 3 put: 4']; with: ' becomes '; with: [html code with: 'aDictionary._at_put_(3, 4)']] ! ! Slide subclass: #JtalkAndJavascriptSlide4 instanceVariableNames: '' package: 'Presentation'! !JtalkAndJavascriptSlide4 methodsFor: 'accessing'! backgroundColor ^'#08C' ! id ^'jtalkAndJs4' ! ! !JtalkAndJavascriptSlide4 methodsFor: 'rendering'! renderSlideOn: html html h1 with: [ html with: 'JavaScript '. html span class: 'red'; with: '♥'. html with: ' Smalltalk too!! '; with: [html span class: 'comment'; with: '(how cute)']]. html h2 with: 'JavaScript ⇒ Smalltalk'. html ol with: [ html li with: [html code with: 'someUser.name']; with: ' becomes '; with: [html code with: 'someUser name']. html li with: [html code with: 'someUser name = "John"']; with: ' becomes '; with: [html code with: 'someUser name: ''John''']. html li with: [html code with: 'console.log(''hello world'')']; with: ' becomes '; with: [html code with: 'console log: ''hello world''']. html li with: [html code with: 'window.jQuery(''foo'').css(''background'', ''red'')']; with: ' becomes '; with: [html br]; with: [html code with: '(window jQuery: ''foo'') css: ''background'' color: ''red''']] ! ! Slide subclass: #JtalkAndNode instanceVariableNames: '' package: 'Presentation'! !JtalkAndNode methodsFor: 'not yet classified'! backgroundColor ^'#0A1' ! id ^'JtalkAndNode' ! renderSlideOn: html html h1 with: [ html with: 'Jtalk and '. html span class: 'blue'; with: 'Node.js']. html h2 with: 'Hello.st:'. html pre with: [ html div class: 'code2'; with: 'Object subclass: #Hello instanceVariableNames: '''' category: ''Hello''!! !!Hello class methodsFor: ''main''!! main console log: ''Hello world from JTalk in Node.js'' !! !!'] ! ! Slide subclass: #JtalkAndNode2 instanceVariableNames: '' package: 'Presentation'! !JtalkAndNode2 methodsFor: 'not yet classified'! backgroundColor ^'#0A1' ! id ^'JtalkAndNode2' ! renderSlideOn: html html h1 with: [ html with: 'Jtalk and '. html span class: 'blue'; with: 'Node.js']. html h2 with: 'Makefile:'. html pre with: [ html div class: 'code2'; with: 'Program.js: Hello.st ../../bin/jtalkc -N -m Hello Hello.st Program run: Program.js ./hello clean: rm -f Program.js Hello.js ']. html h2 with: 'hello:'. html pre with: [ html div class: 'code2'; with: 'node Program.js $@'] ! ! Slide subclass: #JtalkAndNode3 instanceVariableNames: '' package: 'Presentation'! !JtalkAndNode3 methodsFor: 'not yet classified'! backgroundColor ^'#0A1' ! id ^'JtalkAndNode3' ! renderSlideOn: html html h1 with: [ html with: 'Jtalk and '. html span class: 'blue'; with: 'Node.js']. html h2 with: 'make clean && make run:'. html pre with: [ html div class: 'code2'; with: 'rm -f Program.js Hello.js ../../bin/jtalkc -N -m Hello Hello.st Program Loading libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js /home/gokr/jtalk/js/Parser.js /home/gokr/jtalk/js/Compiler.js /home/gokr/jtalk/js/init.js /home/gokr/jtalk/nodejs/nodecompile.js and compiling ... Compiling in debugMode: false Reading file Hello.st Exporting category Hello as Hello.js Adding libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js ... Adding Jtalk code Hello.js ... Adding initializer /home/gokr/jtalk/js/init.js ... Adding call to Hello class >> main ... Writing Program.js ... Done. ./hello'. html span class: 'blue'; with:'Hello world from JTalk in Node.js'] ! ! Slide subclass: #JtalkAndWebOS instanceVariableNames: '' package: 'Presentation'! !JtalkAndWebOS methodsFor: 'not yet classified'! backgroundColor ^'#0A1' ! id ^'JtalkAndWebOS' ! renderSlideOn: html html h1 with: [ html with: 'Jtalk and '. html span class: 'blue'; with: 'webOS']. html h2 with: 'A really cool mobile OS based on Linux:'. html ul with: [ html li with: 'The primary language in webOS is Javascript'. html li with: 'The new UI framework for webOS 3.0 is called Enyo'. html li with: 'Regular apps run in V8 + Webkit'. html li with: 'Background services run in Node.js'] ! ! Slide subclass: #JtalkFeaturesSlide instanceVariableNames: '' package: 'Presentation'! !JtalkFeaturesSlide methodsFor: 'accessing'! id ^'features' ! ! !JtalkFeaturesSlide methodsFor: 'rendering'! renderSlideOn: html html h1 with: 'Jtalk features'. html ul with: [ html li with: 'Jtalk is (mostly) written in itself, including the parser & compiler'. html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'. html li with: 'Core libraries (streams, collections, RegExp, etc)'. html li with: 'Web related libraries: HTML Canvas, DOM manipulation'. html li with: 'Full featured IDE'. html li with: [ html with:'Advanced Smalltalk features, including '. html code with: '#doesNotUnderstand:'. html with: ' support and '. html code with: 'thisContext']] ! ! Slide subclass: #SweSUGSlide instanceVariableNames: '' package: 'Presentation'! !SweSUGSlide methodsFor: 'accessing'! backgroundColor ^'#555' ! codeSnippet self subclassResponsibility ! ! !SweSUGSlide methodsFor: 'rendering'! cssClass ^ 'slide blue3d' ! renderCodeSnippetOn: html (SourceArea new renderOn: html; editor) setValue: self codeSnippet. ! renderSnippet: aString on: html (SourceArea new renderOn: html; editor) setValue: aString. ! ! SweSUGSlide subclass: #SweSUGAboutSlide instanceVariableNames: '' package: 'Presentation'! !SweSUGAboutSlide methodsFor: 'accessing'! backgroundColor ^'#555' ! cssClass ^ 'slide blue3d' ! id ^'About' ! ! !SweSUGAboutSlide methodsFor: 'rendering'! renderSlideOn: html html div class: 'section center'; with: [ html h1 with: 'About this presentation'. html p with: 'This presentation is entirely written in Amber. Lots of stuff was heavily copied from the two earlier presentations from ESUG and FOSDEM.'. html p with: [ html with: 'Press '. html code with: '←'. html with: ' to move backward and '. html code with: ' →'. html with: ' to move forward.']. html p with: [ html with: 'Open a '. html button with: 'browser'; onClick: [Browser openOn: Presentation]. html with: ' to edit the source code.']] ! ! SweSUGSlide subclass: #SweSUGAmberFeaturesSlide instanceVariableNames: '' package: 'Presentation'! !SweSUGAmberFeaturesSlide methodsFor: 'accessing'! id ^'features' ! ! !SweSUGAmberFeaturesSlide methodsFor: 'rendering'! renderSlideOn: html html h1 with: 'Amber features'. html ul with: [ html li with: 'Amber is (mostly) written in itself, including the compiler'. html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'. html li with: 'Core libraries (streams, collections, RegExp, etc)'. html li with: 'Web related libraries: HTML Canvas, DOM manipulation'. html li with: 'Very good javascript integration, both ways'. html li with: 'Full featured IDE!!'. html li with: [ html with:'Advanced features, including '. html code with: '#doesNotUnderstand:'. html with: ' support and '. html code with: 'thisContext']] ! ! SweSUGSlide subclass: #SweSUGIntroSlide instanceVariableNames: '' package: 'Presentation'! !SweSUGIntroSlide methodsFor: 'not yet classified'! id ^'Intro' ! 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]]. ! ! SweSUGSlide subclass: #SweSUGWhatIsAmberSlide instanceVariableNames: '' package: 'Presentation'! !SweSUGWhatIsAmberSlide methodsFor: 'accessing'! id ^'WhatIsAmber' ! ! !SweSUGWhatIsAmberSlide methodsFor: 'rendering'! renderSlideOn: html html div class: 'section center'; with: [ html img: 'esug2011/images/balloon.jpg'. html h1 with: 'Amber in a nutshell'. html h2 with: 'Amber is a true Smalltalk'. html h2 with: 'It compiles to and runs on/in JavaScript'. html h2 with: 'MIT license'. html h2 class: 'fancy'; with: 'Amber is way cool!!'] ! ! SweSUGSlide subclass: #SweSUGWorkspaceSlide instanceVariableNames: '' package: 'Presentation'! !SweSUGWorkspaceSlide methodsFor: 'accessing'! backgroundColor ^'#18bd7d' ! id ^'workspace' ! renderSlideOn: html | workspace | workspace := SourceArea new. html div class: 'section center'; with: [ html h1 with: 'Give Amber a try!!'. workspace renderOn: html. html div with: [ html button with: 'DoIt'; onClick: [workspace doIt]. html button with: 'PrintIt'; onClick: [workspace printIt]. html button with: 'InspectIt'; onClick: [workspace inspectIt]]] ! ! Slide subclass: #WhatIsJtalkSlide instanceVariableNames: '' package: 'Presentation'! !WhatIsJtalkSlide methodsFor: 'accessing'! id ^'WhatIsJtalk' ! ! !WhatIsJtalkSlide methodsFor: 'rendering'! renderSlideOn: html html div class: 'section center'; with: [ html h1 with: 'Jtalk in a nutshell'. html h2 with: 'Jtalk is an implementation of Smalltalk'. html h2 with: 'Jtalk runs on top of the JavaScript runtime'. html h2 with: 'Jtalk is an opensource project (MIT)'. html h2 class: 'fancy'; with: 'Jtalk is cool!!'] ! ! Slide subclass: #WorkspaceSlide instanceVariableNames: '' package: 'Presentation'! !WorkspaceSlide methodsFor: 'accessing'! backgroundColor ^'#18bd7d' ! id ^'workspace' ! renderSlideOn: html | workspace | workspace := SourceArea new. html div class: 'section center'; with: [ html h1 with: 'Give Jtalk a try!!'. workspace renderOn: html. html div with: [ html button with: 'DoIt'; onClick: [workspace doIt]. html button with: 'PrintIt'; onClick: [workspace printIt]. html button with: 'InspectIt'; onClick: [workspace inspectIt]]] ! !