Presentation.st 40 KB

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