Presentation.st 49 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486
  1. Smalltalk current createPackage: 'Presentation'!
  2. Widget subclass: #Presentation
  3. instanceVariableNames: 'currentSlide slides'
  4. package: 'Presentation'!
  5. !Presentation methodsFor: 'accessing'!
  6. author
  7. ^'John Smith'
  8. !
  9. currentSlide
  10. ^currentSlide
  11. !
  12. currentSlide: aSlide
  13. currentSlide := aSlide
  14. !
  15. description
  16. ^'A presentation written in Jtalk'
  17. !
  18. email
  19. ^'john@smith.com'
  20. !
  21. slideClasses
  22. ^self subclassResponsibility
  23. !
  24. slideTransition
  25. ^'fade'
  26. !
  27. slides
  28. slides ifNil: [self initSlides].
  29. ^slides
  30. !
  31. style
  32. "Should return a CSS style"
  33. ^ ''
  34. !
  35. title
  36. ^ self class title.
  37. !
  38. url
  39. ^'http://jtalk-project.org'
  40. ! !
  41. !Presentation methodsFor: 'actions'!
  42. currentSlideIndex
  43. ^ self slides indexOf: self currentSlide ifAbsent: [1]
  44. !
  45. moveAt: anInteger
  46. | next |
  47. next := self slides
  48. at: anInteger
  49. ifAbsent: [nil].
  50. next ifNotNil: [currentSlide := next. next show]
  51. !
  52. nextSlide
  53. | next |
  54. self currentSlide ifNotNil: [
  55. next := self slides
  56. at: (self currentSlideIndex) + 1
  57. ifAbsent: [nil].
  58. next ifNotNil: [currentSlide := next. next show]]
  59. !
  60. previousSlide
  61. | next |
  62. self currentSlide ifNotNil: [
  63. next := self slides
  64. at: (self currentSlideIndex) - 1
  65. ifAbsent: [nil].
  66. next ifNotNil: [currentSlide := next. next show]]
  67. !
  68. showCurrentSlide
  69. self currentSlide ifNotNil: [
  70. '.slide' asJQuery hide.
  71. ('#', self currentSlide id) asJQuery show.
  72. 'title' asJQuery text: self title, ' - ', self currentSlide id.
  73. ]
  74. ! !
  75. !Presentation methodsFor: 'enumerating'!
  76. slidesDo: aBlockWithArg
  77. self slides do: [:aSlide| aBlockWithArg value: aSlide].
  78. ! !
  79. !Presentation methodsFor: 'initialization'!
  80. initSlides
  81. slides := self slideClasses collect: [:each | each on: self]
  82. ! !
  83. !Presentation methodsFor: 'rendering'!
  84. renderOn: html
  85. html style
  86. type: 'text/css';
  87. with: self style.
  88. html div
  89. id: 'slides';
  90. with: [self renderSlidesOn: html]
  91. !
  92. renderSlidesOn: html
  93. self slides do: [:each |
  94. each renderOn: html].
  95. currentSlide ifNil: [currentSlide := self slides first].
  96. self showCurrentSlide
  97. ! !
  98. Presentation class instanceVariableNames: 'current'!
  99. !Presentation class methodsFor: 'accessing'!
  100. concretePresentations
  101. ^ self allSubclasses select: [:aPresentationClass| aPresentationClass isConcrete]
  102. !
  103. title
  104. ^ 'Slides'
  105. ! !
  106. !Presentation class methodsFor: 'enumerating'!
  107. concretePresentationsDo: aBlockWithArg
  108. self concretePresentations do: aBlockWithArg.
  109. ! !
  110. !Presentation class methodsFor: 'testing'!
  111. isConcrete
  112. ^false
  113. ! !
  114. Presentation subclass: #ESUG2011Presentation
  115. instanceVariableNames: ''
  116. package: 'Presentation'!
  117. !ESUG2011Presentation methodsFor: 'accessing'!
  118. author
  119. ^'Nicolas Petton'
  120. !
  121. description
  122. ^'ESUG 2011, Edinburgh'
  123. !
  124. email
  125. ^'nico@objectfusion.fr'
  126. !
  127. slideClasses
  128. ^Array new
  129. add: IntroSlide;
  130. add: AboutSlide;
  131. add: WhatIsJtalkSlide;
  132. add: JtalkFeaturesSlide;
  133. add: WorkspaceSlide;
  134. add: IDESlide;
  135. add: CountersSlide;
  136. add: JtalkAndJavascriptSlide;
  137. add: JtalkAndJavascriptSlide2;
  138. add: JtalkAndJavascriptSlide3;
  139. add: JtalkAndJavascriptSlide4;
  140. add: JtalkAndCLI;
  141. add: JtalkAndNode;
  142. add: JtalkAndNode2;
  143. add: JtalkAndNode3;
  144. add: JtalkAndWebOS;
  145. add: JtalkAndEnyo;
  146. add: ContributionsSlide;
  147. yourself
  148. !
  149. style
  150. ^'
  151. body {
  152. font-family: Helvetica,Arial,sans;
  153. }
  154. #slides {
  155. width: 100%;
  156. height: 100%;
  157. overflow: hidden;
  158. position: absolute;
  159. top: 0;
  160. bottom: 0;
  161. left: 0;
  162. right: 0;
  163. background: #555;
  164. }
  165. .slide {
  166. background: #fff;
  167. color: #444;
  168. text-align: left;
  169. font-size: 20px;
  170. line-height: 1.8em;
  171. height: 500px;
  172. width: 700px;
  173. padding: 60px;
  174. position: absolute;
  175. left: 50%;
  176. top: 50%;
  177. margin-left: -420px;
  178. margin-top: -320px;
  179. box-shadow: 0 0 20px #111;
  180. -moz-box-shadow: 0 0 20px #111;
  181. -webkit-box-shadow: 0 0 20px #111;
  182. }
  183. .slide.transparent {
  184. background: transparent;
  185. box-shadow: 0 0 0 none;
  186. -moz-box-shadow: 0 0 0 transparent;
  187. -webkit-box-shadow: 0 0 0 transparent;
  188. color: #fff !!important;
  189. }
  190. .slide.black {
  191. background: black;
  192. background-image: -webkit-gradient(
  193. linear,
  194. left bottom,
  195. left top,
  196. color-stop(0.38, rgb(79,79,79)),
  197. color-stop(0.69, rgb(33,33,33)),
  198. color-stop(0.86, rgb(4,4,4))
  199. );
  200. background-image: -moz-linear-gradient(
  201. center bottom,
  202. rgb(79,79,79) 38%,
  203. rgb(33,33,33) 69%,
  204. rgb(4,4,4) 86%
  205. );
  206. color: #fff !!important;
  207. }
  208. .slide.black h1, .slide.black h2, .slide.black h3,
  209. .slide.transparent h1, .slide.transparent h2, .slide.transparent h3 {
  210. color: #fff;
  211. text-shadow: 0 1px 4px #aaa;
  212. }
  213. .slide.black a, .slide.transparent a {
  214. color: #ccc;
  215. }
  216. .slide.white {
  217. color: #333 !!important;
  218. }
  219. .slide.white h1, .slide.white h2, .slide.white h3 {
  220. color: #333;
  221. }
  222. .slide.white a {
  223. color: #333;
  224. }
  225. .slide h1, .slide h2, .slide h3 {
  226. color: #333;
  227. /* text-align: center; */
  228. }
  229. .slide h1 {
  230. font-family: "Droid Sans";
  231. font-size: 36px;
  232. text-shadow: 0 1px 4px #aaa;
  233. margin-top: 30px;
  234. margin-bottom: 50px;
  235. }
  236. /* .slide ul, .slide li { */
  237. /* padding: 0; */
  238. /* margin: 0; */
  239. /* } */
  240. .slide button {
  241. font-size: 18px;
  242. }
  243. .slide a {
  244. color: #555;
  245. text-decoration: none;
  246. cursor: pointer;
  247. }
  248. .slide a:hover {
  249. color: #fff;
  250. background: #555;
  251. }
  252. .slide .right {
  253. text-align: right;
  254. }
  255. .slide .section.center {
  256. text-align: center;
  257. display: table-cell;
  258. vertical-align: middle;
  259. width: 700px;
  260. height: 500px;
  261. }
  262. .slide code {
  263. font-family: "Droid Sans Mono";
  264. color: #444;
  265. border: 1px solid #ddd;
  266. background: #eee;
  267. border-radius: 4px;
  268. padding: 2px;
  269. font-size: 16px;
  270. }
  271. .slide .code2 {
  272. font-family: "Droid Sans Mono";
  273. line-height: 1.2em;
  274. color: #444;
  275. padding: 2px;
  276. font-size: 16px;
  277. }
  278. .slide .CodeMirror {
  279. width: 500px;
  280. height: 300px;
  281. text-align: left;
  282. }
  283. .slide .CodeMirror-scroll {
  284. text-align: left;
  285. }
  286. .slide .fancy {
  287. margin-top: 30px;
  288. -webkit-transform: rotate(-10deg);
  289. -moz-transform: rotate(-10deg);
  290. transform: rotate(-10deg);
  291. color: red;
  292. }
  293. .slide .comment {
  294. opacity: 0.6;
  295. font-weight: normal;
  296. }
  297. .slide .red {
  298. color: red;
  299. }
  300. .slide .blue {
  301. color: blue;
  302. }
  303. .slide#WhatIsJtalk {
  304. background: white url("esug2011/images/balloon.jpg") 650px 50px no-repeat;
  305. }
  306. .slide#ide {
  307. background: black url("esug2011/images/ide_star_wars.png") center center no-repeat;
  308. }
  309. .slide#JtalkAndCLI {
  310. background: white url("esug2011/images/terminal.png") 620px 20px no-repeat;
  311. }
  312. .slide#JtalkAndNode {
  313. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  314. }
  315. .slide#JtalkAndNode2 {
  316. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  317. }
  318. .slide#JtalkAndNode3 {
  319. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  320. }
  321. .slide#JtalkAndWebOS {
  322. background: white url("esug2011/images/devices.jpg") 380px 280px no-repeat;
  323. }
  324. .slide#JtalkAndEnyo {
  325. background: white url("esug2011/images/enyo.png") 130px 150px no-repeat;
  326. }
  327. .slide#links {
  328. background: white url("esug2011/images/asterix.png") 30px 130px no-repeat;
  329. }
  330. .slide#links .section {
  331. margin-left: 250px;
  332. margin-top: 200px;
  333. font-family: "Droid Sans";
  334. font-size: 26px;
  335. font-weight: bold;
  336. }
  337. #meta {
  338. position: absolute;
  339. font-size: 12px;
  340. opacity: 0.6;
  341. bottom: 0;
  342. right: 0;
  343. z-index: 2;
  344. background: #333;
  345. text-align: right;
  346. padding: 0 10px;
  347. line-height: 1.8em;
  348. color: #eee;
  349. border-top-left-radius: 5px;
  350. }
  351. #meta:hover {
  352. opacity: 0.8;
  353. }
  354. #meta p {
  355. display: inline;
  356. padding: 0 5px;
  357. }
  358. #meta a {
  359. //background: #ccc;
  360. color: #ccc;
  361. text-decoration: none;
  362. padding: 0 5px;
  363. }
  364. .slide {
  365. }
  366. '
  367. !
  368. url
  369. ^'http://jtalk-project.org'
  370. ! !
  371. ESUG2011Presentation class instanceVariableNames: 'current'!
  372. !ESUG2011Presentation class methodsFor: 'accessing'!
  373. title
  374. ^'Jtalk'
  375. ! !
  376. !ESUG2011Presentation class methodsFor: 'testing'!
  377. isConcrete
  378. ^true
  379. ! !
  380. Presentation subclass: #FOSDEM2012Presentation
  381. instanceVariableNames: ''
  382. package: 'Presentation'!
  383. !FOSDEM2012Presentation methodsFor: 'accessing'!
  384. author
  385. ^'Laurent Laffont, Johnny Thornton'
  386. !
  387. description
  388. ^'FOSDEM 2012, Brussels'
  389. !
  390. email
  391. ^'laurent.laffont@gmail.com, johnnyt@xan.do'
  392. !
  393. slideClasses
  394. ^ {
  395. FOSDEMIntroSlide.
  396. FOSDEMAmberZeroNine.
  397. CountersSlide.
  398. IDESlide.
  399. JtalkAndJavascriptSlide.
  400. FOSDEMJSPlayGroundSlide.
  401. FOSDEMJSToSmalltalk.
  402. FOSDEMBookletSlide.
  403. FOSDEMTwitter.
  404. FOSDEMCanvasSlide.
  405. FOSDEMAmberBackend.
  406. FOSDEMREPLSlide.
  407. FOSDEMCLISlide.
  408. FOSDEMContributionsSlide
  409. }
  410. !
  411. style
  412. ^'
  413. body {
  414. font-family: Helvetica,Arial,sans;
  415. }
  416. #slides {
  417. width: 100%;
  418. height: 100%;
  419. overflow: hidden;
  420. position: absolute;
  421. top: 0;
  422. bottom: 0;
  423. left: 0;
  424. right: 0;
  425. background: #555;
  426. }
  427. .slide {
  428. background: #fff;
  429. color: #444;
  430. text-align: left;
  431. font-size: 20px;
  432. line-height: 1.8em;
  433. height: 500px;
  434. width: 700px;
  435. padding: 60px;
  436. position: absolute;
  437. left: 50%;
  438. top: 50%;
  439. margin-left: -420px;
  440. margin-top: -320px;
  441. box-shadow: 0 0 20px #111;
  442. -moz-box-shadow: 0 0 20px #111;
  443. -webkit-box-shadow: 0 0 20px #111;
  444. }
  445. .slide.transparent {
  446. background: transparent;
  447. box-shadow: 0 0 0 none;
  448. -moz-box-shadow: 0 0 0 transparent;
  449. -webkit-box-shadow: 0 0 0 transparent;
  450. color: #fff !!important;
  451. }
  452. .slide.black {
  453. background: black;
  454. background-image: -webkit-gradient(
  455. linear,
  456. left bottom,
  457. left top,
  458. color-stop(0.38, rgb(79,79,79)),
  459. color-stop(0.69, rgb(33,33,33)),
  460. color-stop(0.86, rgb(4,4,4))
  461. );
  462. background-image: -moz-linear-gradient(
  463. center bottom,
  464. rgb(79,79,79) 38%,
  465. rgb(33,33,33) 69%,
  466. rgb(4,4,4) 86%
  467. );
  468. color: #fff !!important;
  469. }
  470. .slide.black h1, .slide.black h2, .slide.black h3,
  471. .slide.transparent h1, .slide.transparent h2, .slide.transparent h3 {
  472. color: #fff;
  473. text-shadow: 0 1px 4px #aaa;
  474. }
  475. .slide.black a, .slide.transparent a {
  476. color: #ccc;
  477. }
  478. .slide.white {
  479. color: #333 !!important;
  480. }
  481. .slide.white h1, .slide.white h2, .slide.white h3 {
  482. color: #333;
  483. }
  484. .slide.white a {
  485. color: #333;
  486. }
  487. .slide h1, .slide h2, .slide h3 {
  488. color: #333;
  489. /* text-align: center; */
  490. }
  491. .slide h1 {
  492. font-family: "Droid Sans";
  493. font-size: 36px;
  494. text-shadow: 0 1px 4px #aaa;
  495. margin-top: 30px;
  496. margin-bottom: 50px;
  497. }
  498. .slide button {
  499. font-size: 18px;
  500. }
  501. .slide a {
  502. color: #555;
  503. text-decoration: none;
  504. cursor: pointer;
  505. }
  506. .slide a:hover {
  507. color: #fff;
  508. background: #555;
  509. }
  510. .slide .right {
  511. text-align: right;
  512. }
  513. .slide .section.center {
  514. text-align: center;
  515. display: table-cell;
  516. vertical-align: middle;
  517. width: 700px;
  518. height: 500px;
  519. }
  520. .slide code {
  521. font-family: "Droid Sans Mono";
  522. color: #444;
  523. border: 1px solid #ddd;
  524. background: #eee;
  525. border-radius: 4px;
  526. padding: 2px;
  527. font-size: 16px;
  528. }
  529. .slide .code2 {
  530. font-family: "Droid Sans Mono";
  531. line-height: 1.2em;
  532. color: #444;
  533. padding: 2px;
  534. font-size: 16px;
  535. }
  536. .slide .CodeMirror {
  537. width: 700px;
  538. height: 300px;
  539. text-align: left;
  540. }
  541. .slide .CodeMirror-scroll {
  542. text-align: left;
  543. }
  544. .slide .fancy {
  545. margin-top: 30px;
  546. -webkit-transform: rotate(-10deg);
  547. -moz-transform: rotate(-10deg);
  548. transform: rotate(-10deg);
  549. color: red;
  550. }
  551. .slide .comment {
  552. opacity: 0.6;
  553. font-weight: normal;
  554. }
  555. .slide .red {
  556. color: red;
  557. }
  558. .slide .blue {
  559. color: blue;
  560. }
  561. #meta {
  562. position: absolute;
  563. font-size: 12px;
  564. opacity: 0.6;
  565. bottom: 0;
  566. right: 0;
  567. z-index: 2;
  568. background: #333;
  569. text-align: right;
  570. padding: 0 10px;
  571. line-height: 1.8em;
  572. color: #eee;
  573. border-top-left-radius: 5px;
  574. }
  575. #meta:hover {
  576. opacity: 0.8;
  577. }
  578. #meta p {
  579. display: inline;
  580. padding: 0 5px;
  581. }
  582. #meta a {
  583. //background: #ccc;
  584. color: #ccc;
  585. text-decoration: none;
  586. padding: 0 5px;
  587. }
  588. .slide {
  589. }
  590. .slide.blue3d {
  591. background: #feffff;
  592. background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
  593. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#d2ebf9));
  594. background: -webkit-linear-gradient(top, #feffff 0%,#d2ebf9 100%);
  595. background: -o-linear-gradient(top, #feffff 0%,#d2ebf9 100%);
  596. background: -ms-linear-gradient(top, #feffff 0%,#d2ebf9 100%);
  597. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#feffff", endColorstr="#d2ebf9",GradientType=0 );
  598. background: linear-gradient(top, #feffff 0%,#d2ebf9 100%);
  599. }
  600. .slide.red3d {
  601. background: #febbbb;
  602. background: -moz-linear-gradient(top, #febbbb 0%, #fe9090 71%, #ff5c5c 95%);
  603. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febbbb), color-stop(71%,#fe9090), color-stop(95%,#ff5c5c));
  604. background: -webkit-linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%);
  605. background: -o-linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%);
  606. background: -ms-linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%);
  607. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#febbbb", endColorstr="#ff5c5c",GradientType=0 );
  608. background: linear-gradient(top, #febbbb 0%,#fe9090 71%,#ff5c5c 95%);
  609. }
  610. .slide.green3d {
  611. background: #cdeb8e;
  612. background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
  613. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
  614. background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  615. background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  616. background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  617. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#cdeb8e", endColorstr="#a5c956",GradientType=0 );
  618. background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%);
  619. }
  620. @-webkit-keyframes rotate-horizontal {
  621. 0% { -webkit-transform: perspective(1000px) rotateY(-10deg);}
  622. 100% { -webkit-transform: perspective(1000px) rotateY(10deg);}
  623. }
  624. .animate p{
  625. -webkit-animation: rotate-horizontal 2s infinite alternate ease-in-out;
  626. }
  627. #FOSDEMAmberBackend img {
  628. margin: 5px;
  629. -webkit-animation: rotate-horizontal 2s infinite alternate ease-in-out;
  630. }
  631. .slide#FOSDEMContributionsSlide {
  632. background: white url("esug2011/images/asterix.png") 30px 130px no-repeat;
  633. }
  634. .slide#FOSDEMContributionsSlide .section {
  635. margin-left: 250px;
  636. margin-top: 200px;
  637. font-family: "Droid Sans";
  638. font-size: 26px;
  639. font-weight: bold;
  640. }
  641. .slide#ide {
  642. background: black url("esug2011/images/ide_star_wars.png") center center no-repeat;
  643. }
  644. .tweet {
  645. background-color: #aaa;
  646. color: black;
  647. padding: 10px;
  648. border-radius: 10px;
  649. border: 5px solid #eee;
  650. margin: 10px;
  651. }
  652. .tweet img {
  653. vertical-align: top;
  654. margin-right: 10px;
  655. }
  656. .tweet span:first-child {
  657. float: right;
  658. }
  659. '
  660. !
  661. url
  662. ^'http://amber-lang.net'
  663. ! !
  664. !FOSDEM2012Presentation class methodsFor: 'testing'!
  665. isConcrete
  666. ^true
  667. !
  668. title
  669. ^'Amber'
  670. ! !
  671. Presentation subclass: #SweSUG2012Presentation
  672. instanceVariableNames: ''
  673. package: 'Presentation'!
  674. !SweSUG2012Presentation methodsFor: 'accessing'!
  675. author
  676. ^'Göran Krampe'
  677. !
  678. description
  679. ^'SweSUG 2012, Stockholm'
  680. !
  681. email
  682. ^'goran@krampe.se'
  683. !
  684. slideClasses
  685. ^Array new
  686. add: SweSUGIntroSlide;
  687. add: SweSUGAboutSlide;
  688. add: SweSUGWhatIsAmberSlide;
  689. add: SweSUGAmberFeaturesSlide;
  690. add: SweSUGWorkspaceSlide;
  691. add: IDESlide;
  692. add: CountersSlide;
  693. add: JtalkAndJavascriptSlide;
  694. add: JtalkAndJavascriptSlide2;
  695. add: JtalkAndJavascriptSlide3;
  696. add: JtalkAndJavascriptSlide4;
  697. add: JtalkAndCLI;
  698. add: JtalkAndNode;
  699. add: JtalkAndNode2;
  700. add: JtalkAndNode3;
  701. add: JtalkAndWebOS;
  702. add: JtalkAndEnyo;
  703. add: ContributionsSlide;
  704. yourself
  705. !
  706. style
  707. ^'
  708. body {
  709. font-family: Helvetica,Arial,sans;
  710. }
  711. #slides {
  712. width: 100%;
  713. height: 100%;
  714. overflow: hidden;
  715. position: absolute;
  716. top: 0;
  717. bottom: 0;
  718. left: 0;
  719. right: 0;
  720. background: #555;
  721. }
  722. .slide {
  723. background: #fff;
  724. color: #444;
  725. text-align: left;
  726. font-size: 20px;
  727. line-height: 1.8em;
  728. height: 500px;
  729. width: 700px;
  730. padding: 60px;
  731. position: absolute;
  732. left: 50%;
  733. top: 50%;
  734. margin-left: -420px;
  735. margin-top: -320px;
  736. box-shadow: 0 0 20px #111;
  737. -moz-box-shadow: 0 0 20px #111;
  738. -webkit-box-shadow: 0 0 20px #111;
  739. }
  740. .slide.transparent {
  741. background: transparent;
  742. box-shadow: 0 0 0 none;
  743. -moz-box-shadow: 0 0 0 transparent;
  744. -webkit-box-shadow: 0 0 0 transparent;
  745. color: #fff !!important;
  746. }
  747. .slide.black {
  748. background: black;
  749. background-image: -webkit-gradient(
  750. linear,
  751. left bottom,
  752. left top,
  753. color-stop(0.38, rgb(79,79,79)),
  754. color-stop(0.69, rgb(33,33,33)),
  755. color-stop(0.86, rgb(4,4,4))
  756. );
  757. background-image: -moz-linear-gradient(
  758. center bottom,
  759. rgb(79,79,79) 38%,
  760. rgb(33,33,33) 69%,
  761. rgb(4,4,4) 86%
  762. );
  763. color: #fff !!important;
  764. }
  765. .slide.black h1, .slide.black h2, .slide.black h3,
  766. .slide.transparent h1, .slide.transparent h2, .slide.transparent h3 {
  767. color: #fff;
  768. text-shadow: 0 1px 4px #aaa;
  769. }
  770. .slide.black a, .slide.transparent a {
  771. color: #ccc;
  772. }
  773. .slide.white {
  774. color: #333 !!important;
  775. }
  776. .slide.white h1, .slide.white h2, .slide.white h3 {
  777. color: #333;
  778. }
  779. .slide.white a {
  780. color: #333;
  781. }
  782. .slide h1, .slide h2, .slide h3 {
  783. color: #333;
  784. /* text-align: center; */
  785. }
  786. .slide h1 {
  787. font-family: "Droid Sans";
  788. font-size: 36px;
  789. text-shadow: 0 1px 4px #aaa;
  790. margin-top: 30px;
  791. margin-bottom: 50px;
  792. }
  793. /* .slide ul, .slide li { */
  794. /* padding: 0; */
  795. /* margin: 0; */
  796. /* } */
  797. .slide button {
  798. font-size: 18px;
  799. }
  800. .slide a {
  801. color: #555;
  802. text-decoration: none;
  803. cursor: pointer;
  804. }
  805. .slide a:hover {
  806. color: #fff;
  807. background: #555;
  808. }
  809. .slide .right {
  810. text-align: right;
  811. }
  812. .slide .section.center {
  813. text-align: center;
  814. display: table-cell;
  815. vertical-align: middle;
  816. width: 700px;
  817. height: 500px;
  818. }
  819. .slide code {
  820. font-family: "Droid Sans Mono";
  821. color: #444;
  822. border: 1px solid #ddd;
  823. background: #eee;
  824. border-radius: 4px;
  825. padding: 2px;
  826. font-size: 16px;
  827. }
  828. .slide .code2 {
  829. font-family: "Droid Sans Mono";
  830. line-height: 1.2em;
  831. color: #444;
  832. padding: 2px;
  833. font-size: 16px;
  834. }
  835. .slide .CodeMirror {
  836. width: 500px;
  837. height: 300px;
  838. text-align: left;
  839. }
  840. .slide .CodeMirror-scroll {
  841. text-align: left;
  842. }
  843. .slide .fancy {
  844. margin-top: 30px;
  845. -webkit-transform: rotate(-10deg);
  846. -moz-transform: rotate(-10deg);
  847. transform: rotate(-10deg);
  848. color: red;
  849. }
  850. .slide .comment {
  851. opacity: 0.6;
  852. font-weight: normal;
  853. }
  854. .slide .red {
  855. color: red;
  856. }
  857. .slide .blue {
  858. color: blue;
  859. }
  860. .slide#WhatIsJtalk {
  861. background: white url("esug2011/images/balloon.jpg") 650px 50px no-repeat;
  862. }
  863. .slide#ide {
  864. background: black url("esug2011/images/ide_star_wars.png") center center no-repeat;
  865. }
  866. .slide#JtalkAndCLI {
  867. background: white url("esug2011/images/terminal.png") 620px 20px no-repeat;
  868. }
  869. .slide#JtalkAndNode {
  870. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  871. }
  872. .slide#JtalkAndNode2 {
  873. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  874. }
  875. .slide#JtalkAndNode3 {
  876. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  877. }
  878. .slide#JtalkAndWebOS {
  879. background: white url("esug2011/images/devices.jpg") 380px 280px no-repeat;
  880. }
  881. .slide#JtalkAndEnyo {
  882. background: white url("esug2011/images/enyo.png") 130px 150px no-repeat;
  883. }
  884. .slide#links {
  885. background: white url("esug2011/images/asterix.png") 30px 130px no-repeat;
  886. }
  887. .slide#links .section {
  888. margin-left: 250px;
  889. margin-top: 200px;
  890. font-family: "Droid Sans";
  891. font-size: 26px;
  892. font-weight: bold;
  893. }
  894. #meta {
  895. position: absolute;
  896. font-size: 12px;
  897. opacity: 0.6;
  898. bottom: 0;
  899. right: 0;
  900. z-index: 2;
  901. background: #333;
  902. text-align: right;
  903. padding: 0 10px;
  904. line-height: 1.8em;
  905. color: #eee;
  906. border-top-left-radius: 5px;
  907. }
  908. #meta:hover {
  909. opacity: 0.8;
  910. }
  911. #meta p {
  912. display: inline;
  913. padding: 0 5px;
  914. }
  915. #meta a {
  916. //background: #ccc;
  917. color: #ccc;
  918. text-decoration: none;
  919. padding: 0 5px;
  920. }
  921. .slide {
  922. }
  923. '
  924. !
  925. url
  926. ^'http://www.amber-lang.net'
  927. ! !
  928. !SweSUG2012Presentation class methodsFor: 'accessing'!
  929. title
  930. ^'Amber rocks!!'
  931. ! !
  932. !SweSUG2012Presentation class methodsFor: 'testing'!
  933. isConcrete
  934. ^true
  935. ! !
  936. Widget subclass: #PresentationNavigator
  937. instanceVariableNames: 'presentationBrush currentPresentation slideSelect'
  938. package: 'Presentation'!
  939. !PresentationNavigator methodsFor: 'accessing'!
  940. currentPresentation
  941. ^ currentPresentation ifNil: [currentPresentation := Presentation concretePresentations first new].
  942. !
  943. currentPresentation: aPresentation
  944. currentPresentation := aPresentation.
  945. !
  946. style
  947. ^ '
  948. #navigator {
  949. z-index: 1;
  950. position: fixed;
  951. top: 0;
  952. left: 50%;
  953. margin-left: -150px;
  954. padding: 5px;
  955. border-radius: 5px;
  956. -moz-border-radius: 5px;
  957. -webkit-border-radius: 5px;
  958. background: #333;
  959. opacity: 0.3;
  960. color: #eee;
  961. }
  962. #navigator a {
  963. font-weight: bold;
  964. color: #eee;
  965. text-decoration: none;
  966. cursor: pointer;
  967. padding: 0 2px;
  968. font-size: 14px;
  969. }
  970. #navigator:hover {
  971. opacity: 0.8;
  972. }
  973. '
  974. ! !
  975. !PresentationNavigator methodsFor: 'callbacks'!
  976. nextSlide
  977. self currentPresentation nextSlide.
  978. self updateHash.
  979. !
  980. previousSlide
  981. self currentPresentation previousSlide.
  982. self updateHash.
  983. !
  984. reload
  985. |slideIndex|
  986. slideIndex := self currentPresentation currentSlideIndex.
  987. self currentPresentation: self currentPresentation class new.
  988. self renderCurrentPresentation.
  989. self selectSlideAt: slideIndex.
  990. !
  991. selectPresentation: aPresentationClass
  992. self currentPresentation: aPresentationClass new.
  993. self renderCurrentPresentation.
  994. !
  995. selectPresentationNamed: aString
  996. |presentationClass|
  997. presentationClass := (Smalltalk current at: aString).
  998. presentationClass ifNotNil: [ self selectPresentation: presentationClass ].
  999. !
  1000. selectSlideAt: anInteger
  1001. self currentPresentation moveAt: anInteger.
  1002. self updateHash.
  1003. !
  1004. updateHash
  1005. document location hash: self currentPresentation class name, '-', self currentPresentation currentSlideIndex.
  1006. ! !
  1007. !PresentationNavigator methodsFor: 'hash'!
  1008. checkHash
  1009. | hash presentation |
  1010. hash := (document location hash replace: '^#' with: '') tokenize: '-'.
  1011. presentation := Presentation concretePresentations
  1012. detect: [:aPresentationClass | aPresentationClass name == hash first]
  1013. ifNone: [^ self].
  1014. presentation == self currentPresentation class ifFalse: [
  1015. self selectPresentationNamed: presentation.
  1016. self selectSlideAt: hash last
  1017. ].
  1018. !
  1019. checkHashChange
  1020. (window jQuery: window) bind: 'hashchange' do: [self checkHash]
  1021. ! !
  1022. !PresentationNavigator methodsFor: 'keybindings'!
  1023. setKeybindings
  1024. (window jQuery: document) keyup: [:e || node |
  1025. node := e target nodeName asLowercase.
  1026. (node = 'textarea' or: [node = 'input']) ifFalse: [
  1027. e keyCode = 39 ifTrue: [self nextSlide].
  1028. e keyCode = 37 ifTrue: [self previousSlide]]]
  1029. ! !
  1030. !PresentationNavigator methodsFor: 'rendering'!
  1031. open
  1032. (window jQuery: document) ready: [
  1033. self
  1034. appendToJQuery: 'body' asJQuery;
  1035. setKeybindings;
  1036. checkHashChange.
  1037. ].
  1038. !
  1039. renderCurrentPresentation
  1040. presentationBrush contents: [:html |
  1041. self currentPresentation renderOn: html.
  1042. ].
  1043. self updateSlideSelect.
  1044. !
  1045. renderOn: html
  1046. html style
  1047. type: 'text/css';
  1048. with: self style.
  1049. html div
  1050. id: 'navigator';
  1051. with: [ self
  1052. renderToolsOn: html;
  1053. renderPresentationSelectOn: html;
  1054. renderSlideSelectOn: html].
  1055. presentationBrush := html div
  1056. id: 'presentation';
  1057. yourself.
  1058. self checkHash.
  1059. self renderCurrentPresentation.
  1060. !
  1061. renderPresentationSelectOn: html
  1062. |presentationSelect|
  1063. presentationSelect := html select.
  1064. presentationSelect
  1065. onChange: [self selectPresentationNamed: presentationSelect asJQuery val];
  1066. with: [ Presentation concretePresentationsDo: [:aPresentationClass |
  1067. html option
  1068. value: aPresentationClass name;
  1069. with: aPresentationClass title ] ].
  1070. !
  1071. renderSlideSelectOn: html
  1072. slideSelect := html select.
  1073. slideSelect onChange: [ self selectSlideAt: slideSelect asJQuery val ].
  1074. self updateSlideSelect.
  1075. !
  1076. renderToolsOn: html
  1077. html a
  1078. with: 'IDE';
  1079. onClick: [TabManager current open].
  1080. html a
  1081. with: 'Reload';
  1082. onClick: [self reload].
  1083. html a
  1084. with: '←';
  1085. onClick: [self previousSlide].
  1086. html a
  1087. with: '→';
  1088. onClick: [self nextSlide].
  1089. !
  1090. updateSlideSelect
  1091. slideSelect contents: [:html| |index|
  1092. index := 0.
  1093. self currentPresentation slidesDo: [ :aSlide|
  1094. index := index + 1.
  1095. html option
  1096. value: index;
  1097. with: aSlide title ] ].
  1098. ! !
  1099. !PresentationNavigator class methodsFor: 'initialize'!
  1100. initialize
  1101. ^ self open
  1102. !
  1103. open
  1104. ^ self new open
  1105. ! !
  1106. Widget subclass: #Slide
  1107. instanceVariableNames: 'presentation'
  1108. package: 'Presentation'!
  1109. !Slide methodsFor: 'accessing'!
  1110. backgroundColor
  1111. ^'#555'
  1112. !
  1113. cssClass
  1114. ^'slide'
  1115. !
  1116. id
  1117. ^ self class name
  1118. !
  1119. presentation
  1120. ^presentation
  1121. !
  1122. presentation: aPresentation
  1123. presentation := aPresentation
  1124. !
  1125. title
  1126. ^ self id
  1127. ! !
  1128. !Slide methodsFor: 'actions'!
  1129. show
  1130. self backgroundColor ifNotNil: [
  1131. (window jQuery: '#slides') css: 'background' color: self backgroundColor].
  1132. (window jQuery: '.slide') hide: self presentation slideTransition options: #() duration: 300.
  1133. (window jQuery: '#', self id) show: self presentation slideTransition options: #() duration: 300.
  1134. ! !
  1135. !Slide methodsFor: 'rendering'!
  1136. renderMetaOn: html
  1137. html div
  1138. id: 'meta';
  1139. with: [
  1140. html p class: 'title'; with: self presentation title.
  1141. html p class: 'description'; with: self presentation description.
  1142. html a class: 'author'; with: self presentation author; href: 'mailto:', self presentation email.
  1143. html a class: 'url'; with: self presentation url; href: self presentation url]
  1144. !
  1145. renderOn: html
  1146. html div class: self cssClass; id: self id; with: [
  1147. self renderSlideOn: html.
  1148. self renderMetaOn: html]
  1149. !
  1150. renderSlideOn: html
  1151. ! !
  1152. !Slide class methodsFor: 'instance creation'!
  1153. on: aPresentation
  1154. ^self new
  1155. presentation: aPresentation;
  1156. yourself
  1157. ! !
  1158. Slide subclass: #AboutSlide
  1159. instanceVariableNames: ''
  1160. package: 'Presentation'!
  1161. !AboutSlide methodsFor: 'accessing'!
  1162. backgroundColor
  1163. ^'white'
  1164. !
  1165. cssClass
  1166. ^'slide transparent white'
  1167. !
  1168. id
  1169. ^'about'
  1170. ! !
  1171. !AboutSlide methodsFor: 'rendering'!
  1172. renderSlideOn: html
  1173. html div class: 'section center'; with: [
  1174. html h1 with: 'About this presentation'.
  1175. html p with: 'This presentation is entirely written in Jtalk and is licensed under CC BY-SA.'.
  1176. html p with: [
  1177. html with: 'Press '.
  1178. html code with: '←'.
  1179. html with: ' to move backward and '.
  1180. html code with: ' →'.
  1181. html with: ' to move forward.'].
  1182. html p with: [
  1183. html with: 'Open a '.
  1184. html button
  1185. with: 'browser';
  1186. onClick: [Browser openOn: Presentation].
  1187. html with: ' to edit the source code.']]
  1188. ! !
  1189. Slide subclass: #ContributionsSlide
  1190. instanceVariableNames: ''
  1191. package: 'Presentation'!
  1192. !ContributionsSlide methodsFor: 'accessing'!
  1193. id
  1194. ^'links'
  1195. ! !
  1196. !ContributionsSlide methodsFor: 'rendering'!
  1197. renderSlideOn: html
  1198. html div class: 'section'; with: [
  1199. html p with: [
  1200. html a href: 'http://jtalk-project.org'; with: 'jtalk-project.org'].
  1201. html p with: [
  1202. html a href: 'https://github.com/NicolasPetton/jtalk'; with: 'github.com/NicolasPetton/jtalk'].
  1203. html p with: [
  1204. html a href: 'http://http://groups.google.com/group/jtalk-project'; with: 'groups.google.com/group/jtalk-project']]
  1205. ! !
  1206. Slide subclass: #CountersSlide
  1207. instanceVariableNames: ''
  1208. package: 'Presentation'!
  1209. !CountersSlide methodsFor: 'accessing'!
  1210. backgroundColor
  1211. ^'#18bd7d'
  1212. !
  1213. id
  1214. ^'counters'
  1215. ! !
  1216. !CountersSlide methodsFor: 'rendering'!
  1217. renderSlideOn: html
  1218. html div class: 'section center'; with: [
  1219. html h1 with: 'The counter example'.
  1220. html div with: [
  1221. 2 timesRepeat: [Counter new renderOn: html]]]
  1222. ! !
  1223. Slide subclass: #FOSDEMSlide
  1224. instanceVariableNames: ''
  1225. package: 'Presentation'!
  1226. !FOSDEMSlide methodsFor: 'accessing'!
  1227. codeSnippet
  1228. self subclassResponsibility
  1229. ! !
  1230. !FOSDEMSlide methodsFor: 'rendering'!
  1231. renderCodeSnippetOn: html
  1232. (SourceArea new
  1233. renderOn: html;
  1234. editor) setValue: self codeSnippet.
  1235. !
  1236. renderSnippet: aString on: html
  1237. (SourceArea new
  1238. renderOn: html;
  1239. editor) setValue: aString.
  1240. ! !
  1241. FOSDEMSlide subclass: #FOSDEMAmberBackend
  1242. instanceVariableNames: ''
  1243. package: 'Presentation'!
  1244. !FOSDEMAmberBackend methodsFor: 'accessing'!
  1245. cssClass
  1246. ^ 'slide green3d'
  1247. ! !
  1248. !FOSDEMAmberBackend methodsFor: 'rendering'!
  1249. renderSlideOn: html
  1250. html div
  1251. class: 'section center';
  1252. with: [ html h1: 'Need a backend ?'.
  1253. {'nodejs.png'. 'php.gif'. 'rails.png'. 'pharo.png'. 'ambrhino.jpg'} do: [:aString |
  1254. html img: 'fosdem2012/images/', aString.
  1255. ]
  1256. ]
  1257. ! !
  1258. FOSDEMSlide subclass: #FOSDEMAmberZeroNine
  1259. instanceVariableNames: ''
  1260. package: 'Presentation'!
  1261. !FOSDEMAmberZeroNine methodsFor: 'not yet classified'!
  1262. renderSlideOn: html
  1263. html div
  1264. class: 'section center';
  1265. with: [ html
  1266. h1: 'Amber 0.9.1 is out !!';
  1267. 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!!'];
  1268. div: [html cite with: '-- Nicolas & Göran'] ]
  1269. ! !
  1270. FOSDEMSlide subclass: #FOSDEMBookletSlide
  1271. instanceVariableNames: ''
  1272. package: 'Presentation'!
  1273. !FOSDEMBookletSlide methodsFor: 'accessing'!
  1274. cssClass
  1275. ^ 'slide blue3d'
  1276. ! !
  1277. !FOSDEMBookletSlide methodsFor: 'css'!
  1278. style
  1279. ^ '
  1280. #book { font-size: 1.4em; }
  1281. #book .b-load .b-wrap-right { background-color: #DEC3A9;}
  1282. #book .b-load .b-wrap-left { background-color: #DDD;}
  1283. '
  1284. ! !
  1285. !FOSDEMBookletSlide methodsFor: 'rendering'!
  1286. bookletOptions
  1287. ^ #{
  1288. 'arrows' -> true.
  1289. 'keyboard' -> false.
  1290. 'pageNumbers' -> false.
  1291. 'closed' -> true
  1292. }
  1293. !
  1294. renderBookOn: html
  1295. html div
  1296. id: 'book';
  1297. with: [ html div
  1298. class: 'b-load';
  1299. with: [ html
  1300. div: 'Amber makes it easy to plug existing javascript libraires';
  1301. div: 'Here is an example with the jQuery Booklet plugin';
  1302. div: 'Want to see how ?';
  1303. div: [ html button
  1304. onClick: [Browser openOn: FOSDEMBookletSlide ];
  1305. with: 'Just browse the code :)'. ]
  1306. ]
  1307. ].
  1308. !
  1309. renderSlideOn: html
  1310. self renderBookOn: html.
  1311. html link
  1312. rel:'stylesheet';
  1313. href: 'fosdem2012/lib/booklet/jquery.booklet.1.2.0.css'.
  1314. html style: self style.
  1315. jQuery
  1316. getScript: 'fosdem2012/lib/booklet/jquery.booklet.1.2.0.min.js'
  1317. do: ['#book' asJQuery booklet: self bookletOptions].
  1318. ! !
  1319. FOSDEMSlide subclass: #FOSDEMCLISlide
  1320. instanceVariableNames: ''
  1321. package: 'Presentation'!
  1322. !FOSDEMCLISlide methodsFor: 'rendering'!
  1323. codeSnippet
  1324. ^
  1325. 'cd examples/nodejs/hello
  1326. ../../../bin/amberc -m Hello Hello.st Program
  1327. node Program.js
  1328. Hello world from Amber in Node.js'
  1329. !
  1330. renderSlideOn: html
  1331. html h1: 'CLI'.
  1332. html with: 'amberc compiles .st files into node programs !!'.
  1333. self renderCodeSnippetOn: html.
  1334. ! !
  1335. FOSDEMSlide subclass: #FOSDEMCanvasSlide
  1336. instanceVariableNames: 'c2d canvas'
  1337. package: 'Presentation'!
  1338. !FOSDEMCanvasSlide methodsFor: 'accessing'!
  1339. cssClass
  1340. ^ 'slide red3d'
  1341. ! !
  1342. !FOSDEMCanvasSlide methodsFor: 'drawing'!
  1343. drawOnCanvas
  1344. c2d := canvas element getContext: '2d'.
  1345. c2d
  1346. clearRect: 0
  1347. y: 0
  1348. width: canvas element width
  1349. height: canvas element height.
  1350. 40 atRandom timesRepeat: [ |rgba|
  1351. rgba := ',' join: {255 atRandom. 255 atRandom. 255 atRandom. 10 atRandom / 10}.
  1352. c2d at: 'fillStyle' put: 'rgba(', rgba, ')'.
  1353. c2d
  1354. fillRect: 600 atRandom
  1355. y: 300 atRandom
  1356. width: 200 atRandom
  1357. height: 200 atRandom ]
  1358. ! !
  1359. !FOSDEMCanvasSlide methodsFor: 'rendering'!
  1360. renderSlideOn: html
  1361. html h1: 'Playing with canvas'.
  1362. canvas := html canvas
  1363. width: 700;
  1364. height: 400.
  1365. self updateCanvas.
  1366. ! !
  1367. !FOSDEMCanvasSlide methodsFor: 'updating'!
  1368. updateCanvas
  1369. self drawOnCanvas.
  1370. window setTimeout: [self updateCanvas] delay: 500.
  1371. ! !
  1372. FOSDEMSlide subclass: #FOSDEMContributionsSlide
  1373. instanceVariableNames: ''
  1374. package: 'Presentation'!
  1375. !FOSDEMContributionsSlide methodsFor: 'rendering'!
  1376. renderSlideOn: html
  1377. html div class: 'section'; with: [
  1378. html p with: [
  1379. html a href: '/documentation.html'; with: 'Documentation'].
  1380. html p with: [
  1381. html a href: 'http://amber-lang.net'; with: 'amber-lang.net'].
  1382. html p with: [
  1383. html a href: 'https://github.com/NicolasPetton/amber'; with: 'github.com/NicolasPetton/amber'].
  1384. html p with: [
  1385. html a href: 'http://groups.google.com/group/amber-lang'; with: 'groups.google.com/group/amber-lang']]
  1386. ! !
  1387. FOSDEMSlide subclass: #FOSDEMIntroSlide
  1388. instanceVariableNames: ''
  1389. package: 'Presentation'!
  1390. !FOSDEMIntroSlide methodsFor: 'not yet classified'!
  1391. renderSlideOn: html
  1392. html div class: 'section center animate'; with: [
  1393. html img src: 'fosdem2012/images/amber.png'.
  1394. html p: self presentation author.
  1395. html p: self presentation description.
  1396. html p: [
  1397. html with: self presentation email]].
  1398. ! !
  1399. FOSDEMSlide subclass: #FOSDEMJSPlayGroundSlide
  1400. instanceVariableNames: ''
  1401. package: 'Presentation'!
  1402. !FOSDEMJSPlayGroundSlide methodsFor: 'accessing'!
  1403. codeSnippet
  1404. ^'|logo|
  1405. logo:=''img#amberlogo'' asJQuery.
  1406. logo
  1407. css:''-webkit-transition'' put:''all 10s ease-in-out''.
  1408. <logo.css(''-webkit-transform'', ''rotateY(360deg)'');>.
  1409. logo click: [window alert: ''This is cool !!''].
  1410. logo inspect'.
  1411. ! !
  1412. !FOSDEMJSPlayGroundSlide methodsFor: 'rendering'!
  1413. renderSlideOn: html
  1414. html div
  1415. class: 'section center';
  1416. with: [
  1417. self renderCodeSnippetOn: html.
  1418. html img
  1419. id: 'amberlogo';
  1420. src: 'fosdem2012/images/amber.png' ]
  1421. ! !
  1422. FOSDEMSlide subclass: #FOSDEMJSToSmalltalk
  1423. instanceVariableNames: ''
  1424. package: 'Presentation'!
  1425. !FOSDEMJSToSmalltalk methodsFor: 'accessing'!
  1426. codeSnippet
  1427. ^
  1428. 'var counter = window.smalltalk.Counter._new();
  1429. counter._appendToJQuery_($(''#jsToSmalltalk''));'.
  1430. !
  1431. cssClass
  1432. ^ 'slide blue3d'
  1433. ! !
  1434. !FOSDEMJSToSmalltalk methodsFor: 'rendering'!
  1435. renderSlideOn: html
  1436. html h1: 'Call Smalltalk from Javascript'.
  1437. html div
  1438. id: 'jsToSmalltalk';
  1439. style: 'float: left'.
  1440. self renderCodeSnippetOn: html.
  1441. ! !
  1442. FOSDEMSlide subclass: #FOSDEMREPLSlide
  1443. instanceVariableNames: ''
  1444. package: 'Presentation'!
  1445. !FOSDEMREPLSlide methodsFor: 'rendering'!
  1446. codeSnippet
  1447. ^
  1448. './bin/amber
  1449. fs := require value: ''fs''.
  1450. fs readdir: ''/tmp'' do: [:err :file| console log: file]'.
  1451. !
  1452. renderSlideOn: html
  1453. html h1: 'REPL'.
  1454. self renderCodeSnippetOn: html.
  1455. ! !
  1456. FOSDEMSlide subclass: #FOSDEMTwitter
  1457. instanceVariableNames: 'twitterDiv'
  1458. package: 'Presentation'!
  1459. !FOSDEMTwitter methodsFor: 'accessing'!
  1460. cssClass
  1461. ^ 'slide black'
  1462. ! !
  1463. !FOSDEMTwitter methodsFor: 'callback'!
  1464. loadTweets
  1465. jQuery
  1466. ajax: 'http://search.twitter.com/search.json?rpp=3&q=%40AmberSmalltalk'
  1467. options: #{
  1468. 'type' -> 'GET'.
  1469. 'success' -> [ :json | self renderTweets: (json results)].
  1470. 'dataType' -> 'jsonp'
  1471. }.
  1472. ! !
  1473. !FOSDEMTwitter methodsFor: 'rendering'!
  1474. renderSlideOn: html
  1475. html button
  1476. onClick: [self loadTweets];
  1477. with: 'What about @AmberSmalltalk on Twitter ?'.
  1478. twitterDiv := html div.
  1479. !
  1480. renderTweet: tweet on: html
  1481. html div
  1482. class: 'tweet';
  1483. with: [
  1484. html
  1485. span: (tweet at: 'created_at');
  1486. img: (tweet at: 'profile_image_url');
  1487. span: (tweet at: 'from_user');
  1488. div: (tweet at: 'text').
  1489. ]
  1490. !
  1491. renderTweets: tweets
  1492. twitterDiv contents: [ :html|
  1493. tweets do: [ :tweet|
  1494. self renderTweet: tweet on: html] ]
  1495. ! !
  1496. Slide subclass: #IDESlide
  1497. instanceVariableNames: ''
  1498. package: 'Presentation'!
  1499. !IDESlide methodsFor: 'accessing'!
  1500. backgroundColor
  1501. ^'black'
  1502. !
  1503. cssClass
  1504. ^'slide transparent'
  1505. !
  1506. id
  1507. ^'ide'
  1508. ! !
  1509. !IDESlide methodsFor: 'rendering'!
  1510. renderSlideOn: html
  1511. " html div class: 'section center'; with: [
  1512. html h1
  1513. with: 'The wonderful Jtalk ';
  1514. with: [
  1515. html a
  1516. with: 'development tools';
  1517. onClick: [TabManager current open]];
  1518. with: '.']
  1519. "
  1520. ! !
  1521. Slide subclass: #IntroSlide
  1522. instanceVariableNames: ''
  1523. package: 'Presentation'!
  1524. !IntroSlide methodsFor: 'accessing'!
  1525. cssClass
  1526. ^'slide black'
  1527. !
  1528. id
  1529. ^'intro'
  1530. ! !
  1531. !IntroSlide methodsFor: 'rendering'!
  1532. renderSlideOn: html
  1533. html div class: 'section center'; with: [
  1534. html h1 with: 'Jtalk, the Smalltalk for Web developers'.
  1535. html p with: self presentation author, ' & Göran Krampe - ', self presentation description.
  1536. html p with: [
  1537. html a
  1538. with: self presentation email;
  1539. href: 'mailto:', self presentation email].
  1540. html p with: [
  1541. html a
  1542. with: 'goran@krampe.se';
  1543. href: 'mailto:goran@krampe.se'].
  1544. html p with: [
  1545. html a
  1546. with: 'objectfusion.fr';
  1547. href: 'http://www.objectfusion.fr']]
  1548. ! !
  1549. Slide subclass: #JtalkAndCLI
  1550. instanceVariableNames: ''
  1551. package: 'Presentation'!
  1552. !JtalkAndCLI methodsFor: 'not yet classified'!
  1553. backgroundColor
  1554. ^'#0A1'
  1555. !
  1556. id
  1557. ^'JtalkAndCLI'
  1558. !
  1559. renderSlideOn: html
  1560. html h1 with: [
  1561. html with: 'Jtalk and '.
  1562. html span class: 'blue'; with: 'the command line'].
  1563. html h2 with: 'jtalkc - a fairly elaborate bash script that:'.
  1564. html ul with: [
  1565. html li with: 'Uses Node.js to run the Jtalk Compiler'.
  1566. html li with: 'Compiles .st files to .js'.
  1567. html li with: 'Links .js files into a single one'.
  1568. html li with: 'Adds class initilization and/or call to main'.
  1569. html li with: 'Optionally runs Google Closure compiler']
  1570. ! !
  1571. Slide subclass: #JtalkAndEnyo
  1572. instanceVariableNames: ''
  1573. package: 'Presentation'!
  1574. !JtalkAndEnyo methodsFor: 'not yet classified'!
  1575. backgroundColor
  1576. ^'#0A1'
  1577. !
  1578. id
  1579. ^'JtalkAndEnyo'
  1580. !
  1581. renderSlideOn: html
  1582. html h1 with: [
  1583. html with: 'Jtalk and '.
  1584. html span class: 'blue'; with: 'Enyo'].
  1585. ! !
  1586. Slide subclass: #JtalkAndJavascriptSlide
  1587. instanceVariableNames: ''
  1588. package: 'Presentation'!
  1589. !JtalkAndJavascriptSlide methodsFor: 'accessing'!
  1590. backgroundColor
  1591. ^'#08C'
  1592. !
  1593. cssClass
  1594. ^'slide transparent'
  1595. !
  1596. id
  1597. ^'jtalkAndJs'
  1598. ! !
  1599. !JtalkAndJavascriptSlide methodsFor: 'rendering'!
  1600. renderSlideOn: html
  1601. html div class: 'section center'; with: [
  1602. html h1 with: [
  1603. html with: 'Smalltalk '.
  1604. html span class: 'red'; with: '♥'.
  1605. html with: ' JavaScript']]
  1606. ! !
  1607. Slide subclass: #JtalkAndJavascriptSlide2
  1608. instanceVariableNames: ''
  1609. package: 'Presentation'!
  1610. !JtalkAndJavascriptSlide2 methodsFor: 'accessing'!
  1611. backgroundColor
  1612. ^'#08C'
  1613. !
  1614. id
  1615. ^'jtalkAndJs2'
  1616. ! !
  1617. !JtalkAndJavascriptSlide2 methodsFor: 'rendering'!
  1618. renderSlideOn: html
  1619. html h1 with: [
  1620. html with: 'Smalltalk '.
  1621. html span class: 'red'; with: '♥'.
  1622. html with: ' JavaScript'].
  1623. html h2 with: 'Jtalk maps one to one with the JavaScript equivalent:'.
  1624. html ul with: [
  1625. html li with: 'String ⇔ String'.
  1626. html li with: 'Number ⇔ Number'.
  1627. html li with: 'BlockClosure ⇔ function'.
  1628. html li with: 'Dictionary ⇔ Object'.
  1629. html li with: 'Error ⇔ Error'.
  1630. html li with: 'etc.']
  1631. ! !
  1632. Slide subclass: #JtalkAndJavascriptSlide3
  1633. instanceVariableNames: ''
  1634. package: 'Presentation'!
  1635. !JtalkAndJavascriptSlide3 methodsFor: 'accessing'!
  1636. backgroundColor
  1637. ^'#08C'
  1638. !
  1639. id
  1640. ^'jtalkAndJs3'
  1641. ! !
  1642. !JtalkAndJavascriptSlide3 methodsFor: 'rendering'!
  1643. renderSlideOn: html
  1644. html h1 with: [
  1645. html with: 'Smalltalk '.
  1646. html span class: 'red'; with: '♥'.
  1647. html with: ' JavaScript'].
  1648. html h2 with: 'Smalltalk ⇒ JavaScript'.
  1649. html ol with: [
  1650. html li
  1651. with: 'Unary messages begin with an underscore: ';
  1652. with: [html code with: 'yourself'];
  1653. with: ' becomes ';
  1654. with: [html code with: '_yourself()'].
  1655. html li
  1656. with: 'Binary messages are prefixed with 2 underscores: ';
  1657. with: [html code with: '3@4'];
  1658. with: ' becomes ';
  1659. with: [html code with: '(3).__at(4)'].
  1660. html li
  1661. with: 'Keyword message follow the same rules as unary messages, with a final underscore: ';
  1662. with: [html code with: 'aDictionary at: 3 put: 4'];
  1663. with: ' becomes ';
  1664. with: [html code with: 'aDictionary._at_put_(3, 4)']]
  1665. ! !
  1666. Slide subclass: #JtalkAndJavascriptSlide4
  1667. instanceVariableNames: ''
  1668. package: 'Presentation'!
  1669. !JtalkAndJavascriptSlide4 methodsFor: 'accessing'!
  1670. backgroundColor
  1671. ^'#08C'
  1672. !
  1673. id
  1674. ^'jtalkAndJs4'
  1675. ! !
  1676. !JtalkAndJavascriptSlide4 methodsFor: 'rendering'!
  1677. renderSlideOn: html
  1678. html h1 with: [
  1679. html with: 'JavaScript '.
  1680. html span class: 'red'; with: '♥'.
  1681. html with: ' Smalltalk too!! ';
  1682. with: [html span class: 'comment'; with: '(how cute)']].
  1683. html h2 with: 'JavaScript ⇒ Smalltalk'.
  1684. html ol with: [
  1685. html li
  1686. with: [html code with: 'someUser.name'];
  1687. with: ' becomes ';
  1688. with: [html code with: 'someUser name'].
  1689. html li
  1690. with: [html code with: 'someUser name = "John"'];
  1691. with: ' becomes ';
  1692. with: [html code with: 'someUser name: ''John'''].
  1693. html li
  1694. with: [html code with: 'console.log(''hello world'')'];
  1695. with: ' becomes ';
  1696. with: [html code with: 'console log: ''hello world'''].
  1697. html li
  1698. with: [html code with: 'window.jQuery(''foo'').css(''background'', ''red'')'];
  1699. with: ' becomes ';
  1700. with: [html br];
  1701. with: [html code with: '(window jQuery: ''foo'') css: ''background'' color: ''red''']]
  1702. ! !
  1703. Slide subclass: #JtalkAndNode
  1704. instanceVariableNames: ''
  1705. package: 'Presentation'!
  1706. !JtalkAndNode methodsFor: 'not yet classified'!
  1707. backgroundColor
  1708. ^'#0A1'
  1709. !
  1710. id
  1711. ^'JtalkAndNode'
  1712. !
  1713. renderSlideOn: html
  1714. html h1 with: [
  1715. html with: 'Jtalk and '.
  1716. html span class: 'blue'; with: 'Node.js'].
  1717. html h2 with: 'Hello.st:'.
  1718. html pre with: [
  1719. html div class: 'code2'; with: 'Object subclass: #Hello
  1720. instanceVariableNames: ''''
  1721. category: ''Hello''!!
  1722. !!Hello class methodsFor: ''main''!!
  1723. main
  1724. console log: ''Hello world from JTalk in Node.js''
  1725. !! !!']
  1726. ! !
  1727. Slide subclass: #JtalkAndNode2
  1728. instanceVariableNames: ''
  1729. package: 'Presentation'!
  1730. !JtalkAndNode2 methodsFor: 'not yet classified'!
  1731. backgroundColor
  1732. ^'#0A1'
  1733. !
  1734. id
  1735. ^'JtalkAndNode2'
  1736. !
  1737. renderSlideOn: html
  1738. html h1 with: [
  1739. html with: 'Jtalk and '.
  1740. html span class: 'blue'; with: 'Node.js'].
  1741. html h2 with: 'Makefile:'.
  1742. html pre with: [
  1743. html div class: 'code2'; with: 'Program.js: Hello.st
  1744. ../../bin/jtalkc -N -m Hello Hello.st Program
  1745. run: Program.js
  1746. ./hello
  1747. clean:
  1748. rm -f Program.js Hello.js
  1749. '].
  1750. html h2 with: 'hello:'.
  1751. html pre with: [
  1752. html div class: 'code2'; with: 'node Program.js $@']
  1753. ! !
  1754. Slide subclass: #JtalkAndNode3
  1755. instanceVariableNames: ''
  1756. package: 'Presentation'!
  1757. !JtalkAndNode3 methodsFor: 'not yet classified'!
  1758. backgroundColor
  1759. ^'#0A1'
  1760. !
  1761. id
  1762. ^'JtalkAndNode3'
  1763. !
  1764. renderSlideOn: html
  1765. html h1 with: [
  1766. html with: 'Jtalk and '.
  1767. html span class: 'blue'; with: 'Node.js'].
  1768. html h2 with: 'make clean && make run:'.
  1769. html pre with: [
  1770. html div class: 'code2'; with: 'rm -f Program.js Hello.js
  1771. ../../bin/jtalkc -N -m Hello Hello.st Program
  1772. Loading libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js
  1773. /home/gokr/jtalk/js/Parser.js /home/gokr/jtalk/js/Compiler.js
  1774. /home/gokr/jtalk/js/init.js /home/gokr/jtalk/nodejs/nodecompile.js
  1775. and compiling ...
  1776. Compiling in debugMode: false
  1777. Reading file Hello.st
  1778. Exporting category Hello as Hello.js
  1779. Adding libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js ...
  1780. Adding Jtalk code Hello.js ...
  1781. Adding initializer /home/gokr/jtalk/js/init.js ...
  1782. Adding call to Hello class >> main ...
  1783. Writing Program.js ...
  1784. Done.
  1785. ./hello'.
  1786. html span class: 'blue'; with:'Hello world from JTalk in Node.js']
  1787. ! !
  1788. Slide subclass: #JtalkAndWebOS
  1789. instanceVariableNames: ''
  1790. package: 'Presentation'!
  1791. !JtalkAndWebOS methodsFor: 'not yet classified'!
  1792. backgroundColor
  1793. ^'#0A1'
  1794. !
  1795. id
  1796. ^'JtalkAndWebOS'
  1797. !
  1798. renderSlideOn: html
  1799. html h1 with: [
  1800. html with: 'Jtalk and '.
  1801. html span class: 'blue'; with: 'webOS'].
  1802. html h2 with: 'A really cool mobile OS based on Linux:'.
  1803. html ul with: [
  1804. html li with: 'The primary language in webOS is Javascript'.
  1805. html li with: 'The new UI framework for webOS 3.0 is called Enyo'.
  1806. html li with: 'Regular apps run in V8 + Webkit'.
  1807. html li with: 'Background services run in Node.js']
  1808. ! !
  1809. Slide subclass: #JtalkFeaturesSlide
  1810. instanceVariableNames: ''
  1811. package: 'Presentation'!
  1812. !JtalkFeaturesSlide methodsFor: 'accessing'!
  1813. id
  1814. ^'features'
  1815. ! !
  1816. !JtalkFeaturesSlide methodsFor: 'rendering'!
  1817. renderSlideOn: html
  1818. html h1 with: 'Jtalk features'.
  1819. html ul with: [
  1820. html li with: 'Jtalk is (mostly) written in itself, including the parser & compiler'.
  1821. html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'.
  1822. html li with: 'Core libraries (streams, collections, RegExp, etc)'.
  1823. html li with: 'Web related libraries: HTML Canvas, DOM manipulation'.
  1824. html li with: 'Full featured IDE'.
  1825. html li with: [
  1826. html with:'Advanced Smalltalk features, including '.
  1827. html code with: '#doesNotUnderstand:'.
  1828. html with: ' support and '.
  1829. html code with: 'thisContext']]
  1830. ! !
  1831. Slide subclass: #SweSUGSlide
  1832. instanceVariableNames: ''
  1833. package: 'Presentation'!
  1834. !SweSUGSlide methodsFor: 'accessing'!
  1835. backgroundColor
  1836. ^'#555'
  1837. !
  1838. codeSnippet
  1839. self subclassResponsibility
  1840. ! !
  1841. !SweSUGSlide methodsFor: 'rendering'!
  1842. cssClass
  1843. ^ 'slide blue3d'
  1844. !
  1845. renderCodeSnippetOn: html
  1846. (SourceArea new
  1847. renderOn: html;
  1848. editor) setValue: self codeSnippet.
  1849. !
  1850. renderSnippet: aString on: html
  1851. (SourceArea new
  1852. renderOn: html;
  1853. editor) setValue: aString.
  1854. ! !
  1855. SweSUGSlide subclass: #SweSUGAboutSlide
  1856. instanceVariableNames: ''
  1857. package: 'Presentation'!
  1858. !SweSUGAboutSlide methodsFor: 'accessing'!
  1859. backgroundColor
  1860. ^'#555'
  1861. !
  1862. cssClass
  1863. ^ 'slide blue3d'
  1864. !
  1865. id
  1866. ^'About'
  1867. ! !
  1868. !SweSUGAboutSlide methodsFor: 'rendering'!
  1869. renderSlideOn: html
  1870. html div class: 'section center'; with: [
  1871. html h1 with: 'About this presentation'.
  1872. 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.'.
  1873. html p with: [
  1874. html with: 'Press '.
  1875. html code with: '←'.
  1876. html with: ' to move backward and '.
  1877. html code with: ' →'.
  1878. html with: ' to move forward.'].
  1879. html p with: [
  1880. html with: 'Open a '.
  1881. html button
  1882. with: 'browser';
  1883. onClick: [Browser openOn: Presentation].
  1884. html with: ' to edit the source code.']]
  1885. ! !
  1886. SweSUGSlide subclass: #SweSUGAmberFeaturesSlide
  1887. instanceVariableNames: ''
  1888. package: 'Presentation'!
  1889. !SweSUGAmberFeaturesSlide methodsFor: 'accessing'!
  1890. id
  1891. ^'features'
  1892. ! !
  1893. !SweSUGAmberFeaturesSlide methodsFor: 'rendering'!
  1894. renderSlideOn: html
  1895. html h1 with: 'Amber features'.
  1896. html ul with: [
  1897. html li with: 'Amber is (mostly) written in itself, including the compiler'.
  1898. html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'.
  1899. html li with: 'Core libraries (streams, collections, RegExp, etc)'.
  1900. html li with: 'Web related libraries: HTML Canvas, DOM manipulation'.
  1901. html li with: 'Very good javascript integration, both ways'.
  1902. html li with: 'Full featured IDE!!'.
  1903. html li with: [
  1904. html with:'Advanced features, including '.
  1905. html code with: '#doesNotUnderstand:'.
  1906. html with: ' support and '.
  1907. html code with: 'thisContext']]
  1908. ! !
  1909. SweSUGSlide subclass: #SweSUGIntroSlide
  1910. instanceVariableNames: ''
  1911. package: 'Presentation'!
  1912. !SweSUGIntroSlide methodsFor: 'not yet classified'!
  1913. id
  1914. ^'Intro'
  1915. !
  1916. renderSlideOn: html
  1917. html div class: 'section center animate'; with: [
  1918. html img src: 'fosdem2012/images/amber.png'.
  1919. html p: self presentation author.
  1920. html p: self presentation description.
  1921. html p: [
  1922. html with: self presentation email]].
  1923. ! !
  1924. SweSUGSlide subclass: #SweSUGWhatIsAmberSlide
  1925. instanceVariableNames: ''
  1926. package: 'Presentation'!
  1927. !SweSUGWhatIsAmberSlide methodsFor: 'accessing'!
  1928. id
  1929. ^'WhatIsAmber'
  1930. ! !
  1931. !SweSUGWhatIsAmberSlide methodsFor: 'rendering'!
  1932. renderSlideOn: html
  1933. html div class: 'section center'; with: [
  1934. html img: 'esug2011/images/balloon.jpg'.
  1935. html h1 with: 'Amber in a nutshell'.
  1936. html h2 with: 'Amber is a true Smalltalk'.
  1937. html h2 with: 'It compiles to and runs on/in JavaScript'.
  1938. html h2 with: 'MIT license'.
  1939. html h2 class: 'fancy'; with: 'Amber is way cool!!']
  1940. ! !
  1941. SweSUGSlide subclass: #SweSUGWorkspaceSlide
  1942. instanceVariableNames: ''
  1943. package: 'Presentation'!
  1944. !SweSUGWorkspaceSlide methodsFor: 'accessing'!
  1945. backgroundColor
  1946. ^'#18bd7d'
  1947. !
  1948. id
  1949. ^'workspace'
  1950. !
  1951. renderSlideOn: html
  1952. | workspace |
  1953. workspace := SourceArea new.
  1954. html div class: 'section center'; with: [
  1955. html h1 with: 'Give Amber a try!!'.
  1956. workspace renderOn: html.
  1957. html div with: [
  1958. html button
  1959. with: 'DoIt';
  1960. onClick: [workspace doIt].
  1961. html button
  1962. with: 'PrintIt';
  1963. onClick: [workspace printIt].
  1964. html button
  1965. with: 'InspectIt';
  1966. onClick: [workspace inspectIt]]]
  1967. ! !
  1968. Slide subclass: #WhatIsJtalkSlide
  1969. instanceVariableNames: ''
  1970. package: 'Presentation'!
  1971. !WhatIsJtalkSlide methodsFor: 'accessing'!
  1972. id
  1973. ^'WhatIsJtalk'
  1974. ! !
  1975. !WhatIsJtalkSlide methodsFor: 'rendering'!
  1976. renderSlideOn: html
  1977. html div class: 'section center'; with: [
  1978. html h1 with: 'Jtalk in a nutshell'.
  1979. html h2 with: 'Jtalk is an implementation of Smalltalk'.
  1980. html h2 with: 'Jtalk runs on top of the JavaScript runtime'.
  1981. html h2 with: 'Jtalk is an opensource project (MIT)'.
  1982. html h2 class: 'fancy'; with: 'Jtalk is cool!!']
  1983. ! !
  1984. Slide subclass: #WorkspaceSlide
  1985. instanceVariableNames: ''
  1986. package: 'Presentation'!
  1987. !WorkspaceSlide methodsFor: 'accessing'!
  1988. backgroundColor
  1989. ^'#18bd7d'
  1990. !
  1991. id
  1992. ^'workspace'
  1993. !
  1994. renderSlideOn: html
  1995. | workspace |
  1996. workspace := SourceArea new.
  1997. html div class: 'section center'; with: [
  1998. html h1 with: 'Give Jtalk a try!!'.
  1999. workspace renderOn: html.
  2000. html div with: [
  2001. html button
  2002. with: 'DoIt';
  2003. onClick: [workspace doIt].
  2004. html button
  2005. with: 'PrintIt';
  2006. onClick: [workspace printIt].
  2007. html button
  2008. with: 'InspectIt';
  2009. onClick: [workspace inspectIt]]]
  2010. ! !