1
0

Presentation.st 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155
  1. Widget subclass: #Slide
  2. instanceVariableNames: 'presentation'
  3. category: 'Presentation'!
  4. !Slide methodsFor: 'accessing'!
  5. presentation
  6. ^presentation
  7. !
  8. presentation: aPresentation
  9. presentation := aPresentation
  10. !
  11. id
  12. self subclassResponsibility
  13. !
  14. cssClass
  15. ^'slide'
  16. !
  17. backgroundColor
  18. ^'#555'
  19. ! !
  20. !Slide methodsFor: 'actions'!
  21. show
  22. document location hash: self id.
  23. self backgroundColor ifNotNil: [
  24. (window jQuery: '#slides') animate: (Dictionary with: 'backgroundColor' -> self backgroundColor) duration: 500].
  25. (window jQuery: '.slide') hide: self presentation slideTransition options: #() duration: 300.
  26. (window jQuery: '#', self id) show: self presentation slideTransition options: #() duration: 300.
  27. ! !
  28. !Slide methodsFor: 'rendering'!
  29. renderOn: html
  30. html div class: self cssClass; id: self id; with: [
  31. self renderSlideOn: html.
  32. self renderMetaOn: html]
  33. !
  34. renderSlideOn: html
  35. !
  36. renderMetaOn: html
  37. html div
  38. id: 'meta';
  39. with: [
  40. html p class: 'title'; with: self presentation title.
  41. html p class: 'description'; with: self presentation description.
  42. html a class: 'author'; with: self presentation author; href: 'mailto:', self presentation email.
  43. html a class: 'url'; with: self presentation url; href: self presentation url]
  44. ! !
  45. !Slide class methodsFor: 'instance creation'!
  46. on: aPresentation
  47. ^self new
  48. presentation: aPresentation;
  49. yourself
  50. ! !
  51. Widget subclass: #Presentation
  52. instanceVariableNames: 'currentSlide slides'
  53. category: 'Presentation'!
  54. !Presentation methodsFor: 'accessing'!
  55. title
  56. ^'Slides'
  57. !
  58. author
  59. ^'John Smith'
  60. !
  61. url
  62. ^'http://jtalk-project.org'
  63. !
  64. description
  65. ^'A presentation written in Jtalk'
  66. !
  67. email
  68. ^'john@smith.com'
  69. !
  70. slides
  71. slides ifNil: [self initSlides].
  72. ^slides
  73. !
  74. slideClasses
  75. ^self subclassResponsibility
  76. !
  77. currentSlide
  78. ^currentSlide
  79. !
  80. currentSlide: aSlide
  81. currentSlide := aSlide
  82. !
  83. slideTransition
  84. ^'fade'
  85. !
  86. style
  87. "Should return a CSS style"
  88. ^ ''
  89. ! !
  90. !Presentation methodsFor: 'actions'!
  91. reload
  92. '#slides' asJQuery remove.
  93. '#tools' asJQuery remove.
  94. 'body' asJQuery append: self.
  95. self checkHash
  96. !
  97. setup
  98. Presentation setCurrent: self.
  99. JQuery documentReady: [
  100. 'body' asJQuery append: self.
  101. self
  102. setKeybindings;
  103. checkHashChange;
  104. checkHash].
  105. !
  106. nextSlide
  107. | next |
  108. self currentSlide ifNotNil: [
  109. next := self slides
  110. at: (self slides indexOf: self currentSlide) + 1
  111. ifAbsent: [nil].
  112. next ifNotNil: [currentSlide := next. next show]]
  113. !
  114. showCurrentSlide
  115. self currentSlide ifNotNil: [
  116. '.slide' asJQuery hide.
  117. ('#', self currentSlide id) asJQuery show]
  118. !
  119. previousSlide
  120. | next |
  121. self currentSlide ifNotNil: [
  122. next := self slides
  123. at: (self slides indexOf: self currentSlide) - 1
  124. ifAbsent: [nil].
  125. next ifNotNil: [currentSlide := next. next show]]
  126. !
  127. setKeybindings
  128. JQuery document on: 'keyup' do: [:e || node |
  129. node := e target nodeName asLowercase.
  130. (node = 'textarea' or: [node = 'input']) ifFalse: [
  131. e keyCode = 39 ifTrue: [self nextSlide].
  132. e keyCode = 37 ifTrue: [self previousSlide]]]
  133. !
  134. checkHashChange
  135. JQuery window on: 'hashchange' do: [self checkHash]
  136. !
  137. checkHash
  138. | hash slide |
  139. hash := document location hash replace: '^#' with: ''.
  140. slide := self slides detect: [:each | each id = hash] ifNone: [nil].
  141. slide ifNotNil: [
  142. self currentSlide = slide ifFalse: [
  143. self currentSlide: slide.
  144. slide show]]
  145. ! !
  146. !Presentation methodsFor: 'initialization'!
  147. initSlides
  148. slides := self slideClasses collect: [:each | each on: self]
  149. ! !
  150. !Presentation methodsFor: 'rendering'!
  151. renderOn: html
  152. html style
  153. type: 'text/css';
  154. with: self style.
  155. html div
  156. id: 'tools';
  157. with: [self renderToolsOn: html].
  158. html div
  159. id: 'slides';
  160. with: [self renderSlidesOn: html]
  161. !
  162. renderSlidesOn: html
  163. self slides do: [:each |
  164. each renderOn: html].
  165. currentSlide ifNil: [currentSlide := self slides first].
  166. self showCurrentSlide
  167. !
  168. renderToolsOn: html
  169. html a
  170. with: 'IDE';
  171. onClick: [TabManager current open].
  172. html a
  173. with: 'Reload';
  174. onClick: [self reload].
  175. html a
  176. with: '←';
  177. onClick: [self previousSlide].
  178. html a
  179. with: '→';
  180. onClick: [self nextSlide]
  181. ! !
  182. Presentation class instanceVariableNames: 'current'!
  183. !Presentation class methodsFor: 'initialization'!
  184. initialize
  185. self isConcrete ifTrue: [self setup]
  186. !
  187. setup
  188. self new setup
  189. !
  190. setCurrent: aSlides
  191. current := aSlides
  192. !
  193. current
  194. ^current
  195. ! !
  196. !Presentation class methodsFor: 'testing'!
  197. isConcrete
  198. ^false
  199. ! !
  200. Presentation subclass: #ESUG2011Presentation
  201. instanceVariableNames: ''
  202. category: 'Presentation'!
  203. !ESUG2011Presentation methodsFor: 'accessing'!
  204. title
  205. ^'Jtalk'
  206. !
  207. description
  208. ^'ESUG 2011, Edinburgh'
  209. !
  210. author
  211. ^'Nicolas Petton'
  212. !
  213. email
  214. ^'nico@objectfusion.fr'
  215. !
  216. url
  217. ^'http://jtalk-project.org'
  218. !
  219. slideClasses
  220. ^Array new
  221. add: IntroSlide;
  222. add: AboutSlide;
  223. add: WhatIsJtalkSlide;
  224. add: JtalkFeaturesSlide;
  225. add: WorkspaceSlide;
  226. add: IDESlide;
  227. add: CountersSlide;
  228. add: JtalkAndJavascriptSlide;
  229. add: JtalkAndJavascriptSlide2;
  230. add: JtalkAndJavascriptSlide3;
  231. add: JtalkAndJavascriptSlide4;
  232. add: JtalkAndCLI;
  233. add: JtalkAndNode;
  234. add: JtalkAndNode2;
  235. add: JtalkAndNode3;
  236. add: JtalkAndWebOS;
  237. add: JtalkAndEnyo;
  238. add: ContributionsSlide;
  239. yourself
  240. !
  241. style
  242. ^'
  243. body {
  244. font-family: Helvetica,Arial,sans;
  245. }
  246. #slides {
  247. width: 100%;
  248. height: 100%;
  249. overflow: hidden;
  250. position: absolute;
  251. top: 0;
  252. bottom: 0;
  253. left: 0;
  254. right: 0;
  255. background: #555;
  256. }
  257. .slide {
  258. background: #fff;
  259. color: #444;
  260. text-align: left;
  261. font-size: 20px;
  262. line-height: 1.8em;
  263. height: 500px;
  264. width: 700px;
  265. padding: 60px;
  266. position: absolute;
  267. left: 50%;
  268. top: 50%;
  269. margin-left: -420px;
  270. margin-top: -320px;
  271. box-shadow: 0 0 20px #111;
  272. -moz-box-shadow: 0 0 20px #111;
  273. -webkit-box-shadow: 0 0 20px #111;
  274. }
  275. .slide.transparent {
  276. background: transparent;
  277. box-shadow: 0 0 0 none;
  278. -moz-box-shadow: 0 0 0 transparent;
  279. -webkit-box-shadow: 0 0 0 transparent;
  280. color: #fff !!important;
  281. }
  282. .slide.black {
  283. background: black;
  284. background-image: -webkit-gradient(
  285. linear,
  286. left bottom,
  287. left top,
  288. color-stop(0.38, rgb(79,79,79)),
  289. color-stop(0.69, rgb(33,33,33)),
  290. color-stop(0.86, rgb(4,4,4))
  291. );
  292. background-image: -moz-linear-gradient(
  293. center bottom,
  294. rgb(79,79,79) 38%,
  295. rgb(33,33,33) 69%,
  296. rgb(4,4,4) 86%
  297. );
  298. color: #fff !!important;
  299. }
  300. .slide.black h1, .slide.black h2, .slide.black h3,
  301. .slide.transparent h1, .slide.transparent h2, .slide.transparent h3 {
  302. color: #fff;
  303. text-shadow: 0 1px 4px #aaa;
  304. }
  305. .slide.black a, .slide.transparent a {
  306. color: #ccc;
  307. }
  308. .slide.white {
  309. color: #333 !!important;
  310. }
  311. .slide.white h1, .slide.white h2, .slide.white h3 {
  312. color: #333;
  313. }
  314. .slide.white a {
  315. color: #333;
  316. }
  317. .slide h1, .slide h2, .slide h3 {
  318. color: #333;
  319. /* text-align: center; */
  320. }
  321. .slide h1 {
  322. font-family: "Droid Sans";
  323. font-size: 36px;
  324. text-shadow: 0 1px 4px #aaa;
  325. margin-top: 30px;
  326. margin-bottom: 50px;
  327. }
  328. /* .slide ul, .slide li { */
  329. /* padding: 0; */
  330. /* margin: 0; */
  331. /* } */
  332. .slide button {
  333. font-size: 18px;
  334. }
  335. .slide a {
  336. color: #555;
  337. text-decoration: none;
  338. cursor: pointer;
  339. }
  340. .slide a:hover {
  341. color: #fff;
  342. background: #555;
  343. }
  344. .slide .right {
  345. text-align: right;
  346. }
  347. .slide .section.center {
  348. text-align: center;
  349. display: table-cell;
  350. vertical-align: middle;
  351. width: 700px;
  352. height: 500px;
  353. }
  354. .slide code {
  355. font-family: "Droid Sans Mono";
  356. color: #444;
  357. border: 1px solid #ddd;
  358. background: #eee;
  359. border-radius: 4px;
  360. padding: 2px;
  361. font-size: 16px;
  362. }
  363. .slide .code2 {
  364. font-family: "Droid Sans Mono";
  365. line-height: 1.2em;
  366. color: #444;
  367. padding: 2px;
  368. font-size: 16px;
  369. }
  370. .slide .CodeMirror {
  371. width: 500px;
  372. height: 300px;
  373. text-align: left;
  374. }
  375. .slide .CodeMirror-scroll {
  376. text-align: left;
  377. }
  378. .slide .fancy {
  379. margin-top: 30px;
  380. -webkit-transform: rotate(-10deg);
  381. -moz-transform: rotate(-10deg);
  382. transform: rotate(-10deg);
  383. color: red;
  384. }
  385. .slide .comment {
  386. opacity: 0.6;
  387. font-weight: normal;
  388. }
  389. .slide .red {
  390. color: red;
  391. }
  392. .slide .blue {
  393. color: blue;
  394. }
  395. .slide#WhatIsJtalk {
  396. background: white url("esug2011/images/balloon.jpg") 650px 50px no-repeat;
  397. }
  398. .slide#ide {
  399. background: black url("esug2011/images/ide_star_wars.png") center center no-repeat;
  400. }
  401. .slide#JtalkAndCLI {
  402. background: white url("esug2011/images/terminal.png") 620px 20px no-repeat;
  403. }
  404. .slide#JtalkAndNode {
  405. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  406. }
  407. .slide#JtalkAndNode2 {
  408. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  409. }
  410. .slide#JtalkAndNode3 {
  411. background: white url("esug2011/images/nodejs.png") 580px 40px no-repeat;
  412. }
  413. .slide#JtalkAndWebOS {
  414. background: white url("esug2011/images/devices.jpg") 380px 280px no-repeat;
  415. }
  416. .slide#JtalkAndEnyo {
  417. background: white url("esug2011/images/enyo.png") 130px 150px no-repeat;
  418. }
  419. .slide#links {
  420. background: white url("esug2011/images/asterix.png") 30px 130px no-repeat;
  421. }
  422. .slide#links .section {
  423. margin-left: 250px;
  424. margin-top: 200px;
  425. font-family: "Droid Sans";
  426. font-size: 26px;
  427. font-weight: bold;
  428. }
  429. #meta {
  430. position: absolute;
  431. font-size: 12px;
  432. opacity: 0.6;
  433. bottom: 0;
  434. right: 0;
  435. z-index: 2;
  436. background: #333;
  437. text-align: right;
  438. padding: 0 10px;
  439. line-height: 1.8em;
  440. color: #eee;
  441. border-top-left-radius: 5px;
  442. }
  443. #meta:hover {
  444. opacity: 0.8;
  445. }
  446. #meta p {
  447. display: inline;
  448. padding: 0 5px;
  449. }
  450. #meta a {
  451. //background: #ccc;
  452. color: #ccc;
  453. text-decoration: none;
  454. padding: 0 5px;
  455. }
  456. #tools {
  457. z-index: 1;
  458. position: fixed;
  459. top: 0;
  460. left: 50%;
  461. margin-left: -150px;
  462. width: 300px;
  463. padding: 5px;
  464. border-radius: 5px;
  465. -moz-border-radius: 5px;
  466. -webkit-border-radius: 5px;
  467. background: #333;
  468. opacity: 0.3;
  469. color: #eee;
  470. }
  471. #tools a {
  472. font-weight: bold;
  473. color: #eee;
  474. text-decoration: none;
  475. cursor: pointer;
  476. padding: 0 2px;
  477. font-size: 14px;
  478. }
  479. #tools:hover {
  480. opacity: 0.8;
  481. }
  482. .slide {
  483. }
  484. '
  485. ! !
  486. ESUG2011Presentation class instanceVariableNames: 'current'!
  487. !ESUG2011Presentation class methodsFor: 'testing'!
  488. isConcrete
  489. ^true
  490. ! !
  491. Slide subclass: #IntroSlide
  492. instanceVariableNames: ''
  493. category: 'Presentation'!
  494. !IntroSlide methodsFor: 'accessing'!
  495. id
  496. ^'intro'
  497. !
  498. cssClass
  499. ^'slide black'
  500. ! !
  501. !IntroSlide methodsFor: 'rendering'!
  502. renderSlideOn: html
  503. html div class: 'section center'; with: [
  504. html h1 with: 'Jtalk, the Smalltalk for Web developers'.
  505. html p with: self presentation author, ' & Göran Krampe - ', self presentation description.
  506. html p with: [
  507. html a
  508. with: self presentation email;
  509. href: 'mailto:', self presentation email].
  510. html p with: [
  511. html a
  512. with: 'goran@krampe.se';
  513. href: 'mailto:goran@krampe.se'].
  514. html p with: [
  515. html a
  516. with: 'objectfusion.fr';
  517. href: 'http://www.objectfusion.fr']]
  518. ! !
  519. Slide subclass: #WhatIsJtalkSlide
  520. instanceVariableNames: ''
  521. category: 'Presentation'!
  522. !WhatIsJtalkSlide methodsFor: 'accessing'!
  523. id
  524. ^'WhatIsJtalk'
  525. ! !
  526. !WhatIsJtalkSlide methodsFor: 'rendering'!
  527. renderSlideOn: html
  528. html div class: 'section center'; with: [
  529. html h1 with: 'Jtalk in a nutshell'.
  530. html h2 with: 'Jtalk is an implementation of Smalltalk'.
  531. html h2 with: 'Jtalk runs on top of the JavaScript runtime'.
  532. html h2 with: 'Jtalk is an opensource project (MIT)'.
  533. html h2 class: 'fancy'; with: 'Jtalk is cool!!']
  534. ! !
  535. Slide subclass: #JtalkFeaturesSlide
  536. instanceVariableNames: ''
  537. category: 'Presentation'!
  538. !JtalkFeaturesSlide methodsFor: 'accessing'!
  539. id
  540. ^'features'
  541. ! !
  542. !JtalkFeaturesSlide methodsFor: 'rendering'!
  543. renderSlideOn: html
  544. html h1 with: 'Jtalk features'.
  545. html ul with: [
  546. html li with: 'Jtalk is (mostly) written in itself, including the parser & compiler'.
  547. html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'.
  548. html li with: 'Core libraries (streams, collections, RegExp, etc)'.
  549. html li with: 'Web related libraries: HTML Canvas, DOM manipulation'.
  550. html li with: 'Full featured IDE'.
  551. html li with: [
  552. html with:'Advanced Smalltalk features, including '.
  553. html code with: '#doesNotUnderstand:'.
  554. html with: ' support and '.
  555. html code with: 'thisContext']]
  556. ! !
  557. Slide subclass: #AboutSlide
  558. instanceVariableNames: ''
  559. category: 'Presentation'!
  560. !AboutSlide methodsFor: 'accessing'!
  561. id
  562. ^'about'
  563. !
  564. cssClass
  565. ^'slide transparent white'
  566. !
  567. backgroundColor
  568. ^'white'
  569. ! !
  570. !AboutSlide methodsFor: 'rendering'!
  571. renderSlideOn: html
  572. html div class: 'section center'; with: [
  573. html h1 with: 'About this presentation'.
  574. html p with: 'This presentation is entirely written in Jtalk and is licensed under CC BY-SA.'.
  575. html p with: [
  576. html with: 'Press '.
  577. html code with: '←'.
  578. html with: ' to move backward and '.
  579. html code with: ' →'.
  580. html with: ' to move forward.'].
  581. html p with: [
  582. html with: 'Open a '.
  583. html button
  584. with: 'browser';
  585. onClick: [Browser openOn: Presentation].
  586. html with: ' to edit the source code.']]
  587. ! !
  588. Slide subclass: #JtalkAndJavascriptSlide3
  589. instanceVariableNames: ''
  590. category: 'Presentation'!
  591. !JtalkAndJavascriptSlide3 methodsFor: 'accessing'!
  592. id
  593. ^'jtalkAndJs3'
  594. !
  595. backgroundColor
  596. ^'#08C'
  597. ! !
  598. !JtalkAndJavascriptSlide3 methodsFor: 'rendering'!
  599. renderSlideOn: html
  600. html h1 with: [
  601. html with: 'Smalltalk '.
  602. html span class: 'red'; with: '♥'.
  603. html with: ' JavaScript'].
  604. html h2 with: 'Smalltalk ⇒ JavaScript'.
  605. html ol with: [
  606. html li
  607. with: 'Unary messages begin with an underscore: ';
  608. with: [html code with: 'yourself'];
  609. with: ' becomes ';
  610. with: [html code with: '_yourself()'].
  611. html li
  612. with: 'Binary messages are prefixed with 2 underscores: ';
  613. with: [html code with: '3@4'];
  614. with: ' becomes ';
  615. with: [html code with: '(3).__at(4)'].
  616. html li
  617. with: 'Keyword message follow the same rules as unary messages, with a final underscore: ';
  618. with: [html code with: 'aDictionary at: 3 put: 4'];
  619. with: ' becomes ';
  620. with: [html code with: 'aDictionary._at_put_(3, 4)']]
  621. ! !
  622. Slide subclass: #JtalkAndJavascriptSlide2
  623. instanceVariableNames: ''
  624. category: 'Presentation'!
  625. !JtalkAndJavascriptSlide2 methodsFor: 'accessing'!
  626. id
  627. ^'jtalkAndJs2'
  628. !
  629. backgroundColor
  630. ^'#08C'
  631. ! !
  632. !JtalkAndJavascriptSlide2 methodsFor: 'rendering'!
  633. renderSlideOn: html
  634. html h1 with: [
  635. html with: 'Smalltalk '.
  636. html span class: 'red'; with: '♥'.
  637. html with: ' JavaScript'].
  638. html h2 with: 'Jtalk maps one to one with the JavaScript equivalent:'.
  639. html ul with: [
  640. html li with: 'String ⇔ String'.
  641. html li with: 'Number ⇔ Number'.
  642. html li with: 'BlockClosure ⇔ function'.
  643. html li with: 'Dictionary ⇔ Object'.
  644. html li with: 'Error ⇔ Error'.
  645. html li with: 'etc.']
  646. ! !
  647. Slide subclass: #JtalkAndJavascriptSlide
  648. instanceVariableNames: ''
  649. category: 'Presentation'!
  650. !JtalkAndJavascriptSlide methodsFor: 'accessing'!
  651. id
  652. ^'jtalkAndJs'
  653. !
  654. cssClass
  655. ^'slide transparent'
  656. !
  657. backgroundColor
  658. ^'#08C'
  659. ! !
  660. !JtalkAndJavascriptSlide methodsFor: 'rendering'!
  661. renderSlideOn: html
  662. html div class: 'section center'; with: [
  663. html h1 with: [
  664. html with: 'Smalltalk '.
  665. html span class: 'red'; with: '♥'.
  666. html with: ' JavaScript']]
  667. ! !
  668. Slide subclass: #WorkspaceSlide
  669. instanceVariableNames: ''
  670. category: 'Presentation'!
  671. !WorkspaceSlide methodsFor: 'accessing'!
  672. id
  673. ^'workspace'
  674. !
  675. backgroundColor
  676. ^'#18bd7d'
  677. !
  678. renderSlideOn: html
  679. | workspace |
  680. workspace := SourceArea new.
  681. html div class: 'section center'; with: [
  682. html h1 with: 'Give Jtalk a try!!'.
  683. workspace renderOn: html.
  684. html div with: [
  685. html button
  686. with: 'DoIt';
  687. onClick: [workspace doIt].
  688. html button
  689. with: 'PrintIt';
  690. onClick: [workspace printIt].
  691. html button
  692. with: 'InspectIt';
  693. onClick: [workspace inspectIt]]]
  694. ! !
  695. Slide subclass: #CountersSlide
  696. instanceVariableNames: ''
  697. category: 'Presentation'!
  698. !CountersSlide methodsFor: 'accessing'!
  699. id
  700. ^'counters'
  701. !
  702. backgroundColor
  703. ^'#18bd7d'
  704. ! !
  705. !CountersSlide methodsFor: 'rendering'!
  706. renderSlideOn: html
  707. html div class: 'section center'; with: [
  708. html h1 with: 'The counter example'.
  709. html div with: [
  710. 2 timesRepeat: [Counter new renderOn: html]]]
  711. ! !
  712. Slide subclass: #JtalkAndJavascriptSlide4
  713. instanceVariableNames: ''
  714. category: 'Presentation'!
  715. !JtalkAndJavascriptSlide4 methodsFor: 'accessing'!
  716. id
  717. ^'jtalkAndJs4'
  718. !
  719. backgroundColor
  720. ^'#08C'
  721. ! !
  722. !JtalkAndJavascriptSlide4 methodsFor: 'rendering'!
  723. renderSlideOn: html
  724. html h1 with: [
  725. html with: 'JavaScript '.
  726. html span class: 'red'; with: '♥'.
  727. html with: ' Smalltalk too!! ';
  728. with: [html span class: 'comment'; with: '(how cute)']].
  729. html h2 with: 'JavaScript ⇒ Smalltalk'.
  730. html ol with: [
  731. html li
  732. with: [html code with: 'someUser.name'];
  733. with: ' becomes ';
  734. with: [html code with: 'someUser name'].
  735. html li
  736. with: [html code with: 'someUser name = "John"'];
  737. with: ' becomes ';
  738. with: [html code with: 'someUser name: ''John'''].
  739. html li
  740. with: [html code with: 'console.log(''hello world'')'];
  741. with: ' becomes ';
  742. with: [html code with: 'console log: ''hello world'''].
  743. html li
  744. with: [html code with: 'window.jQuery(''foo'').css(''background'', ''red'')'];
  745. with: ' becomes ';
  746. with: [html br];
  747. with: [html code with: '(window jQuery: ''foo'') css: ''background'' color: ''red''']]
  748. ! !
  749. Slide subclass: #IDESlide
  750. instanceVariableNames: ''
  751. category: 'Presentation'!
  752. !IDESlide methodsFor: 'accessing'!
  753. id
  754. ^'ide'
  755. !
  756. backgroundColor
  757. ^'black'
  758. !
  759. cssClass
  760. ^'slide transparent'
  761. ! !
  762. !IDESlide methodsFor: 'rendering'!
  763. renderSlideOn: html
  764. " html div class: 'section center'; with: [
  765. html h1
  766. with: 'The wonderful Jtalk ';
  767. with: [
  768. html a
  769. with: 'development tools';
  770. onClick: [TabManager current open]];
  771. with: '.']
  772. "
  773. ! !
  774. Slide subclass: #ContributionsSlide
  775. instanceVariableNames: ''
  776. category: 'Presentation'!
  777. !ContributionsSlide methodsFor: 'accessing'!
  778. id
  779. ^'links'
  780. ! !
  781. !ContributionsSlide methodsFor: 'rendering'!
  782. renderSlideOn: html
  783. html div class: 'section'; with: [
  784. html p with: [
  785. html a href: 'http://jtalk-project.org'; with: 'jtalk-project.org'].
  786. html p with: [
  787. html a href: 'https://github.com/NicolasPetton/jtalk'; with: 'github.com/NicolasPetton/jtalk'].
  788. html p with: [
  789. html a href: 'http://http://groups.google.com/group/jtalk-project'; with: 'groups.google.com/group/jtalk-project']]
  790. ! !
  791. Slide subclass: #JtalkAndCLI
  792. instanceVariableNames: ''
  793. category: 'Presentation'!
  794. !JtalkAndCLI methodsFor: 'not yet classified'!
  795. backgroundColor
  796. ^'#0A1'
  797. !
  798. id
  799. ^'JtalkAndCLI'
  800. !
  801. renderSlideOn: html
  802. html h1 with: [
  803. html with: 'Jtalk and '.
  804. html span class: 'blue'; with: 'the command line'].
  805. html h2 with: 'jtalkc - a fairly elaborate bash script that:'.
  806. html ul with: [
  807. html li with: 'Uses Node.js to run the Jtalk Compiler'.
  808. html li with: 'Compiles .st files to .js'.
  809. html li with: 'Links .js files into a single one'.
  810. html li with: 'Adds class initilization and/or call to main'.
  811. html li with: 'Optionally runs Google Closure compiler']
  812. ! !
  813. Slide subclass: #JtalkAndNode
  814. instanceVariableNames: ''
  815. category: 'Presentation'!
  816. !JtalkAndNode methodsFor: 'not yet classified'!
  817. backgroundColor
  818. ^'#0A1'
  819. !
  820. id
  821. ^'JtalkAndNode'
  822. !
  823. renderSlideOn: html
  824. html h1 with: [
  825. html with: 'Jtalk and '.
  826. html span class: 'blue'; with: 'Node.js'].
  827. html h2 with: 'Hello.st:'.
  828. html pre with: [
  829. html div class: 'code2'; with: 'Object subclass: #Hello
  830. instanceVariableNames: ''''
  831. category: ''Hello''!!
  832. !!Hello class methodsFor: ''main''!!
  833. main
  834. console log: ''Hello world from JTalk in Node.js''
  835. !! !!']
  836. ! !
  837. Slide subclass: #JtalkAndNode2
  838. instanceVariableNames: ''
  839. category: 'Presentation'!
  840. !JtalkAndNode2 methodsFor: 'not yet classified'!
  841. backgroundColor
  842. ^'#0A1'
  843. !
  844. id
  845. ^'JtalkAndNode2'
  846. !
  847. renderSlideOn: html
  848. html h1 with: [
  849. html with: 'Jtalk and '.
  850. html span class: 'blue'; with: 'Node.js'].
  851. html h2 with: 'Makefile:'.
  852. html pre with: [
  853. html div class: 'code2'; with: 'Program.js: Hello.st
  854. ../../bin/jtalkc -N -m Hello Hello.st Program
  855. run: Program.js
  856. ./hello
  857. clean:
  858. rm -f Program.js Hello.js
  859. '].
  860. html h2 with: 'hello:'.
  861. html pre with: [
  862. html div class: 'code2'; with: 'node Program.js $@']
  863. ! !
  864. Slide subclass: #JtalkAndNode3
  865. instanceVariableNames: ''
  866. category: 'Presentation'!
  867. !JtalkAndNode3 methodsFor: 'not yet classified'!
  868. backgroundColor
  869. ^'#0A1'
  870. !
  871. id
  872. ^'JtalkAndNode3'
  873. !
  874. renderSlideOn: html
  875. html h1 with: [
  876. html with: 'Jtalk and '.
  877. html span class: 'blue'; with: 'Node.js'].
  878. html h2 with: 'make clean && make run:'.
  879. html pre with: [
  880. html div class: 'code2'; with: 'rm -f Program.js Hello.js
  881. ../../bin/jtalkc -N -m Hello Hello.st Program
  882. Loading libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js
  883. /home/gokr/jtalk/js/Parser.js /home/gokr/jtalk/js/Compiler.js
  884. /home/gokr/jtalk/js/init.js /home/gokr/jtalk/nodejs/nodecompile.js
  885. and compiling ...
  886. Compiling in debugMode: false
  887. Reading file Hello.st
  888. Exporting category Hello as Hello.js
  889. Adding libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js ...
  890. Adding Jtalk code Hello.js ...
  891. Adding initializer /home/gokr/jtalk/js/init.js ...
  892. Adding call to Hello class >> main ...
  893. Writing Program.js ...
  894. Done.
  895. ./hello'.
  896. html span class: 'blue'; with:'Hello world from JTalk in Node.js']
  897. ! !
  898. Slide subclass: #JtalkAndWebOS
  899. instanceVariableNames: ''
  900. category: 'Presentation'!
  901. !JtalkAndWebOS methodsFor: 'not yet classified'!
  902. backgroundColor
  903. ^'#0A1'
  904. !
  905. id
  906. ^'JtalkAndWebOS'
  907. !
  908. renderSlideOn: html
  909. html h1 with: [
  910. html with: 'Jtalk and '.
  911. html span class: 'blue'; with: 'webOS'].
  912. html h2 with: 'A really cool mobile OS based on Linux:'.
  913. html ul with: [
  914. html li with: 'The primary language in webOS is Javascript'.
  915. html li with: 'The new UI framework for webOS 3.0 is called Enyo'.
  916. html li with: 'Regular apps run in V8 + Webkit'.
  917. html li with: 'Background services run in Node.js']
  918. ! !
  919. Slide subclass: #JtalkAndEnyo
  920. instanceVariableNames: ''
  921. category: 'Presentation'!
  922. !JtalkAndEnyo methodsFor: 'not yet classified'!
  923. id
  924. ^'JtalkAndEnyo'
  925. !
  926. backgroundColor
  927. ^'#0A1'
  928. !
  929. renderSlideOn: html
  930. html h1 with: [
  931. html with: 'Jtalk and '.
  932. html span class: 'blue'; with: 'Enyo'].
  933. ! !