1
0

Presentation.st 49 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487
  1. Smalltalk current createPackage: 'Presentation' properties: #{}!
  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|
  1345. c2d := canvas element getContext: '2d'.
  1346. c2d
  1347. clearRect: 0
  1348. y: 0
  1349. width: canvas element width
  1350. height: canvas element height.
  1351. 40 atRandom timesRepeat: [ |rgba|
  1352. rgba := ',' join: {255 atRandom. 255 atRandom. 255 atRandom. 10 atRandom / 10}.
  1353. c2d at: 'fillStyle' put: 'rgba(', rgba, ')'.
  1354. c2d
  1355. fillRect: 600 atRandom
  1356. y: 300 atRandom
  1357. width: 200 atRandom
  1358. height: 200 atRandom ]
  1359. ! !
  1360. !FOSDEMCanvasSlide methodsFor: 'rendering'!
  1361. renderSlideOn: html
  1362. html h1: 'Playing with canvas'.
  1363. canvas := html canvas
  1364. width: 700;
  1365. height: 400.
  1366. self updateCanvas.
  1367. ! !
  1368. !FOSDEMCanvasSlide methodsFor: 'updating'!
  1369. updateCanvas
  1370. self drawOnCanvas.
  1371. window setTimeout: [self updateCanvas] delay: 500.
  1372. ! !
  1373. FOSDEMSlide subclass: #FOSDEMContributionsSlide
  1374. instanceVariableNames: ''
  1375. package: 'Presentation'!
  1376. !FOSDEMContributionsSlide methodsFor: 'rendering'!
  1377. renderSlideOn: html
  1378. html div class: 'section'; with: [
  1379. html p with: [
  1380. html a href: '/documentation.html'; with: 'Documentation'].
  1381. html p with: [
  1382. html a href: 'http://amber-lang.net'; with: 'amber-lang.net'].
  1383. html p with: [
  1384. html a href: 'https://github.com/NicolasPetton/amber'; with: 'github.com/NicolasPetton/amber'].
  1385. html p with: [
  1386. html a href: 'http://groups.google.com/group/amber-lang'; with: 'groups.google.com/group/amber-lang']]
  1387. ! !
  1388. FOSDEMSlide subclass: #FOSDEMIntroSlide
  1389. instanceVariableNames: ''
  1390. package: 'Presentation'!
  1391. !FOSDEMIntroSlide methodsFor: 'not yet classified'!
  1392. renderSlideOn: html
  1393. html div class: 'section center animate'; with: [
  1394. html img src: 'fosdem2012/images/amber.png'.
  1395. html p: self presentation author.
  1396. html p: self presentation description.
  1397. html p: [
  1398. html with: self presentation email]].
  1399. ! !
  1400. FOSDEMSlide subclass: #FOSDEMJSPlayGroundSlide
  1401. instanceVariableNames: ''
  1402. package: 'Presentation'!
  1403. !FOSDEMJSPlayGroundSlide methodsFor: 'accessing'!
  1404. codeSnippet
  1405. ^'|logo|
  1406. logo:=''img#amberlogo'' asJQuery.
  1407. logo
  1408. css:''-webkit-transition'' put:''all 10s ease-in-out''.
  1409. <logo.css(''-webkit-transform'', ''rotateY(360deg)'');>.
  1410. logo click: [window alert: ''This is cool !!''].
  1411. logo inspect'.
  1412. ! !
  1413. !FOSDEMJSPlayGroundSlide methodsFor: 'rendering'!
  1414. renderSlideOn: html
  1415. html div
  1416. class: 'section center';
  1417. with: [
  1418. self renderCodeSnippetOn: html.
  1419. html img
  1420. id: 'amberlogo';
  1421. src: 'fosdem2012/images/amber.png' ]
  1422. ! !
  1423. FOSDEMSlide subclass: #FOSDEMJSToSmalltalk
  1424. instanceVariableNames: ''
  1425. package: 'Presentation'!
  1426. !FOSDEMJSToSmalltalk methodsFor: 'accessing'!
  1427. codeSnippet
  1428. ^
  1429. 'var counter = window.smalltalk.Counter._new();
  1430. counter._appendToJQuery_($(''#jsToSmalltalk''));'.
  1431. !
  1432. cssClass
  1433. ^ 'slide blue3d'
  1434. ! !
  1435. !FOSDEMJSToSmalltalk methodsFor: 'rendering'!
  1436. renderSlideOn: html
  1437. html h1: 'Call Smalltalk from Javascript'.
  1438. html div
  1439. id: 'jsToSmalltalk';
  1440. style: 'float: left'.
  1441. self renderCodeSnippetOn: html.
  1442. ! !
  1443. FOSDEMSlide subclass: #FOSDEMREPLSlide
  1444. instanceVariableNames: ''
  1445. package: 'Presentation'!
  1446. !FOSDEMREPLSlide methodsFor: 'rendering'!
  1447. codeSnippet
  1448. ^
  1449. './bin/amber
  1450. fs := require value: ''fs''.
  1451. fs readdir: ''/tmp'' do: [:err :file| console log: file]'.
  1452. !
  1453. renderSlideOn: html
  1454. html h1: 'REPL'.
  1455. self renderCodeSnippetOn: html.
  1456. ! !
  1457. FOSDEMSlide subclass: #FOSDEMTwitter
  1458. instanceVariableNames: 'twitterDiv'
  1459. package: 'Presentation'!
  1460. !FOSDEMTwitter methodsFor: 'accessing'!
  1461. cssClass
  1462. ^ 'slide black'
  1463. ! !
  1464. !FOSDEMTwitter methodsFor: 'callback'!
  1465. loadTweets
  1466. jQuery
  1467. ajax: 'http://search.twitter.com/search.json?rpp=3&q=%40AmberSmalltalk'
  1468. options: #{
  1469. 'type' -> 'GET'.
  1470. 'success' -> [ :json | self renderTweets: (json results)].
  1471. 'dataType' -> 'jsonp'
  1472. }.
  1473. ! !
  1474. !FOSDEMTwitter methodsFor: 'rendering'!
  1475. renderSlideOn: html
  1476. html button
  1477. onClick: [self loadTweets];
  1478. with: 'What about @AmberSmalltalk on Twitter ?'.
  1479. twitterDiv := html div.
  1480. !
  1481. renderTweet: tweet on: html
  1482. html div
  1483. class: 'tweet';
  1484. with: [
  1485. html
  1486. span: (tweet at: 'created_at');
  1487. img: (tweet at: 'profile_image_url');
  1488. span: (tweet at: 'from_user');
  1489. div: (tweet at: 'text').
  1490. ]
  1491. !
  1492. renderTweets: tweets
  1493. twitterDiv contents: [ :html|
  1494. tweets do: [ :tweet|
  1495. self renderTweet: tweet on: html] ]
  1496. ! !
  1497. Slide subclass: #IDESlide
  1498. instanceVariableNames: ''
  1499. package: 'Presentation'!
  1500. !IDESlide methodsFor: 'accessing'!
  1501. backgroundColor
  1502. ^'black'
  1503. !
  1504. cssClass
  1505. ^'slide transparent'
  1506. !
  1507. id
  1508. ^'ide'
  1509. ! !
  1510. !IDESlide methodsFor: 'rendering'!
  1511. renderSlideOn: html
  1512. " html div class: 'section center'; with: [
  1513. html h1
  1514. with: 'The wonderful Jtalk ';
  1515. with: [
  1516. html a
  1517. with: 'development tools';
  1518. onClick: [TabManager current open]];
  1519. with: '.']
  1520. "
  1521. ! !
  1522. Slide subclass: #IntroSlide
  1523. instanceVariableNames: ''
  1524. package: 'Presentation'!
  1525. !IntroSlide methodsFor: 'accessing'!
  1526. cssClass
  1527. ^'slide black'
  1528. !
  1529. id
  1530. ^'intro'
  1531. ! !
  1532. !IntroSlide methodsFor: 'rendering'!
  1533. renderSlideOn: html
  1534. html div class: 'section center'; with: [
  1535. html h1 with: 'Jtalk, the Smalltalk for Web developers'.
  1536. html p with: self presentation author, ' & Göran Krampe - ', self presentation description.
  1537. html p with: [
  1538. html a
  1539. with: self presentation email;
  1540. href: 'mailto:', self presentation email].
  1541. html p with: [
  1542. html a
  1543. with: 'goran@krampe.se';
  1544. href: 'mailto:goran@krampe.se'].
  1545. html p with: [
  1546. html a
  1547. with: 'objectfusion.fr';
  1548. href: 'http://www.objectfusion.fr']]
  1549. ! !
  1550. Slide subclass: #JtalkAndCLI
  1551. instanceVariableNames: ''
  1552. package: 'Presentation'!
  1553. !JtalkAndCLI methodsFor: 'not yet classified'!
  1554. backgroundColor
  1555. ^'#0A1'
  1556. !
  1557. id
  1558. ^'JtalkAndCLI'
  1559. !
  1560. renderSlideOn: html
  1561. html h1 with: [
  1562. html with: 'Jtalk and '.
  1563. html span class: 'blue'; with: 'the command line'].
  1564. html h2 with: 'jtalkc - a fairly elaborate bash script that:'.
  1565. html ul with: [
  1566. html li with: 'Uses Node.js to run the Jtalk Compiler'.
  1567. html li with: 'Compiles .st files to .js'.
  1568. html li with: 'Links .js files into a single one'.
  1569. html li with: 'Adds class initilization and/or call to main'.
  1570. html li with: 'Optionally runs Google Closure compiler']
  1571. ! !
  1572. Slide subclass: #JtalkAndEnyo
  1573. instanceVariableNames: ''
  1574. package: 'Presentation'!
  1575. !JtalkAndEnyo methodsFor: 'not yet classified'!
  1576. backgroundColor
  1577. ^'#0A1'
  1578. !
  1579. id
  1580. ^'JtalkAndEnyo'
  1581. !
  1582. renderSlideOn: html
  1583. html h1 with: [
  1584. html with: 'Jtalk and '.
  1585. html span class: 'blue'; with: 'Enyo'].
  1586. ! !
  1587. Slide subclass: #JtalkAndJavascriptSlide
  1588. instanceVariableNames: ''
  1589. package: 'Presentation'!
  1590. !JtalkAndJavascriptSlide methodsFor: 'accessing'!
  1591. backgroundColor
  1592. ^'#08C'
  1593. !
  1594. cssClass
  1595. ^'slide transparent'
  1596. !
  1597. id
  1598. ^'jtalkAndJs'
  1599. ! !
  1600. !JtalkAndJavascriptSlide methodsFor: 'rendering'!
  1601. renderSlideOn: html
  1602. html div class: 'section center'; with: [
  1603. html h1 with: [
  1604. html with: 'Smalltalk '.
  1605. html span class: 'red'; with: '♥'.
  1606. html with: ' JavaScript']]
  1607. ! !
  1608. Slide subclass: #JtalkAndJavascriptSlide2
  1609. instanceVariableNames: ''
  1610. package: 'Presentation'!
  1611. !JtalkAndJavascriptSlide2 methodsFor: 'accessing'!
  1612. backgroundColor
  1613. ^'#08C'
  1614. !
  1615. id
  1616. ^'jtalkAndJs2'
  1617. ! !
  1618. !JtalkAndJavascriptSlide2 methodsFor: 'rendering'!
  1619. renderSlideOn: html
  1620. html h1 with: [
  1621. html with: 'Smalltalk '.
  1622. html span class: 'red'; with: '♥'.
  1623. html with: ' JavaScript'].
  1624. html h2 with: 'Jtalk maps one to one with the JavaScript equivalent:'.
  1625. html ul with: [
  1626. html li with: 'String ⇔ String'.
  1627. html li with: 'Number ⇔ Number'.
  1628. html li with: 'BlockClosure ⇔ function'.
  1629. html li with: 'Dictionary ⇔ Object'.
  1630. html li with: 'Error ⇔ Error'.
  1631. html li with: 'etc.']
  1632. ! !
  1633. Slide subclass: #JtalkAndJavascriptSlide3
  1634. instanceVariableNames: ''
  1635. package: 'Presentation'!
  1636. !JtalkAndJavascriptSlide3 methodsFor: 'accessing'!
  1637. backgroundColor
  1638. ^'#08C'
  1639. !
  1640. id
  1641. ^'jtalkAndJs3'
  1642. ! !
  1643. !JtalkAndJavascriptSlide3 methodsFor: 'rendering'!
  1644. renderSlideOn: html
  1645. html h1 with: [
  1646. html with: 'Smalltalk '.
  1647. html span class: 'red'; with: '♥'.
  1648. html with: ' JavaScript'].
  1649. html h2 with: 'Smalltalk ⇒ JavaScript'.
  1650. html ol with: [
  1651. html li
  1652. with: 'Unary messages begin with an underscore: ';
  1653. with: [html code with: 'yourself'];
  1654. with: ' becomes ';
  1655. with: [html code with: '_yourself()'].
  1656. html li
  1657. with: 'Binary messages are prefixed with 2 underscores: ';
  1658. with: [html code with: '3@4'];
  1659. with: ' becomes ';
  1660. with: [html code with: '(3).__at(4)'].
  1661. html li
  1662. with: 'Keyword message follow the same rules as unary messages, with a final underscore: ';
  1663. with: [html code with: 'aDictionary at: 3 put: 4'];
  1664. with: ' becomes ';
  1665. with: [html code with: 'aDictionary._at_put_(3, 4)']]
  1666. ! !
  1667. Slide subclass: #JtalkAndJavascriptSlide4
  1668. instanceVariableNames: ''
  1669. package: 'Presentation'!
  1670. !JtalkAndJavascriptSlide4 methodsFor: 'accessing'!
  1671. backgroundColor
  1672. ^'#08C'
  1673. !
  1674. id
  1675. ^'jtalkAndJs4'
  1676. ! !
  1677. !JtalkAndJavascriptSlide4 methodsFor: 'rendering'!
  1678. renderSlideOn: html
  1679. html h1 with: [
  1680. html with: 'JavaScript '.
  1681. html span class: 'red'; with: '♥'.
  1682. html with: ' Smalltalk too!! ';
  1683. with: [html span class: 'comment'; with: '(how cute)']].
  1684. html h2 with: 'JavaScript ⇒ Smalltalk'.
  1685. html ol with: [
  1686. html li
  1687. with: [html code with: 'someUser.name'];
  1688. with: ' becomes ';
  1689. with: [html code with: 'someUser name'].
  1690. html li
  1691. with: [html code with: 'someUser name = "John"'];
  1692. with: ' becomes ';
  1693. with: [html code with: 'someUser name: ''John'''].
  1694. html li
  1695. with: [html code with: 'console.log(''hello world'')'];
  1696. with: ' becomes ';
  1697. with: [html code with: 'console log: ''hello world'''].
  1698. html li
  1699. with: [html code with: 'window.jQuery(''foo'').css(''background'', ''red'')'];
  1700. with: ' becomes ';
  1701. with: [html br];
  1702. with: [html code with: '(window jQuery: ''foo'') css: ''background'' color: ''red''']]
  1703. ! !
  1704. Slide subclass: #JtalkAndNode
  1705. instanceVariableNames: ''
  1706. package: 'Presentation'!
  1707. !JtalkAndNode methodsFor: 'not yet classified'!
  1708. backgroundColor
  1709. ^'#0A1'
  1710. !
  1711. id
  1712. ^'JtalkAndNode'
  1713. !
  1714. renderSlideOn: html
  1715. html h1 with: [
  1716. html with: 'Jtalk and '.
  1717. html span class: 'blue'; with: 'Node.js'].
  1718. html h2 with: 'Hello.st:'.
  1719. html pre with: [
  1720. html div class: 'code2'; with: 'Object subclass: #Hello
  1721. instanceVariableNames: ''''
  1722. category: ''Hello''!!
  1723. !!Hello class methodsFor: ''main''!!
  1724. main
  1725. console log: ''Hello world from JTalk in Node.js''
  1726. !! !!']
  1727. ! !
  1728. Slide subclass: #JtalkAndNode2
  1729. instanceVariableNames: ''
  1730. package: 'Presentation'!
  1731. !JtalkAndNode2 methodsFor: 'not yet classified'!
  1732. backgroundColor
  1733. ^'#0A1'
  1734. !
  1735. id
  1736. ^'JtalkAndNode2'
  1737. !
  1738. renderSlideOn: html
  1739. html h1 with: [
  1740. html with: 'Jtalk and '.
  1741. html span class: 'blue'; with: 'Node.js'].
  1742. html h2 with: 'Makefile:'.
  1743. html pre with: [
  1744. html div class: 'code2'; with: 'Program.js: Hello.st
  1745. ../../bin/jtalkc -N -m Hello Hello.st Program
  1746. run: Program.js
  1747. ./hello
  1748. clean:
  1749. rm -f Program.js Hello.js
  1750. '].
  1751. html h2 with: 'hello:'.
  1752. html pre with: [
  1753. html div class: 'code2'; with: 'node Program.js $@']
  1754. ! !
  1755. Slide subclass: #JtalkAndNode3
  1756. instanceVariableNames: ''
  1757. package: 'Presentation'!
  1758. !JtalkAndNode3 methodsFor: 'not yet classified'!
  1759. backgroundColor
  1760. ^'#0A1'
  1761. !
  1762. id
  1763. ^'JtalkAndNode3'
  1764. !
  1765. renderSlideOn: html
  1766. html h1 with: [
  1767. html with: 'Jtalk and '.
  1768. html span class: 'blue'; with: 'Node.js'].
  1769. html h2 with: 'make clean && make run:'.
  1770. html pre with: [
  1771. html div class: 'code2'; with: 'rm -f Program.js Hello.js
  1772. ../../bin/jtalkc -N -m Hello Hello.st Program
  1773. Loading libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js
  1774. /home/gokr/jtalk/js/Parser.js /home/gokr/jtalk/js/Compiler.js
  1775. /home/gokr/jtalk/js/init.js /home/gokr/jtalk/nodejs/nodecompile.js
  1776. and compiling ...
  1777. Compiling in debugMode: false
  1778. Reading file Hello.st
  1779. Exporting category Hello as Hello.js
  1780. Adding libraries /home/gokr/jtalk/js/boot.js /home/gokr/jtalk/js/Kernel.js ...
  1781. Adding Jtalk code Hello.js ...
  1782. Adding initializer /home/gokr/jtalk/js/init.js ...
  1783. Adding call to Hello class >> main ...
  1784. Writing Program.js ...
  1785. Done.
  1786. ./hello'.
  1787. html span class: 'blue'; with:'Hello world from JTalk in Node.js']
  1788. ! !
  1789. Slide subclass: #JtalkAndWebOS
  1790. instanceVariableNames: ''
  1791. package: 'Presentation'!
  1792. !JtalkAndWebOS methodsFor: 'not yet classified'!
  1793. backgroundColor
  1794. ^'#0A1'
  1795. !
  1796. id
  1797. ^'JtalkAndWebOS'
  1798. !
  1799. renderSlideOn: html
  1800. html h1 with: [
  1801. html with: 'Jtalk and '.
  1802. html span class: 'blue'; with: 'webOS'].
  1803. html h2 with: 'A really cool mobile OS based on Linux:'.
  1804. html ul with: [
  1805. html li with: 'The primary language in webOS is Javascript'.
  1806. html li with: 'The new UI framework for webOS 3.0 is called Enyo'.
  1807. html li with: 'Regular apps run in V8 + Webkit'.
  1808. html li with: 'Background services run in Node.js']
  1809. ! !
  1810. Slide subclass: #JtalkFeaturesSlide
  1811. instanceVariableNames: ''
  1812. package: 'Presentation'!
  1813. !JtalkFeaturesSlide methodsFor: 'accessing'!
  1814. id
  1815. ^'features'
  1816. ! !
  1817. !JtalkFeaturesSlide methodsFor: 'rendering'!
  1818. renderSlideOn: html
  1819. html h1 with: 'Jtalk features'.
  1820. html ul with: [
  1821. html li with: 'Jtalk is (mostly) written in itself, including the parser & compiler'.
  1822. html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'.
  1823. html li with: 'Core libraries (streams, collections, RegExp, etc)'.
  1824. html li with: 'Web related libraries: HTML Canvas, DOM manipulation'.
  1825. html li with: 'Full featured IDE'.
  1826. html li with: [
  1827. html with:'Advanced Smalltalk features, including '.
  1828. html code with: '#doesNotUnderstand:'.
  1829. html with: ' support and '.
  1830. html code with: 'thisContext']]
  1831. ! !
  1832. Slide subclass: #SweSUGSlide
  1833. instanceVariableNames: ''
  1834. package: 'Presentation'!
  1835. !SweSUGSlide methodsFor: 'accessing'!
  1836. backgroundColor
  1837. ^'#555'
  1838. !
  1839. codeSnippet
  1840. self subclassResponsibility
  1841. ! !
  1842. !SweSUGSlide methodsFor: 'rendering'!
  1843. cssClass
  1844. ^ 'slide blue3d'
  1845. !
  1846. renderCodeSnippetOn: html
  1847. (SourceArea new
  1848. renderOn: html;
  1849. editor) setValue: self codeSnippet.
  1850. !
  1851. renderSnippet: aString on: html
  1852. (SourceArea new
  1853. renderOn: html;
  1854. editor) setValue: aString.
  1855. ! !
  1856. SweSUGSlide subclass: #SweSUGAboutSlide
  1857. instanceVariableNames: ''
  1858. package: 'Presentation'!
  1859. !SweSUGAboutSlide methodsFor: 'accessing'!
  1860. backgroundColor
  1861. ^'#555'
  1862. !
  1863. cssClass
  1864. ^ 'slide blue3d'
  1865. !
  1866. id
  1867. ^'About'
  1868. ! !
  1869. !SweSUGAboutSlide methodsFor: 'rendering'!
  1870. renderSlideOn: html
  1871. html div class: 'section center'; with: [
  1872. html h1 with: 'About this presentation'.
  1873. 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.'.
  1874. html p with: [
  1875. html with: 'Press '.
  1876. html code with: '←'.
  1877. html with: ' to move backward and '.
  1878. html code with: ' →'.
  1879. html with: ' to move forward.'].
  1880. html p with: [
  1881. html with: 'Open a '.
  1882. html button
  1883. with: 'browser';
  1884. onClick: [Browser openOn: Presentation].
  1885. html with: ' to edit the source code.']]
  1886. ! !
  1887. SweSUGSlide subclass: #SweSUGAmberFeaturesSlide
  1888. instanceVariableNames: ''
  1889. package: 'Presentation'!
  1890. !SweSUGAmberFeaturesSlide methodsFor: 'accessing'!
  1891. id
  1892. ^'features'
  1893. ! !
  1894. !SweSUGAmberFeaturesSlide methodsFor: 'rendering'!
  1895. renderSlideOn: html
  1896. html h1 with: 'Amber features'.
  1897. html ul with: [
  1898. html li with: 'Amber is (mostly) written in itself, including the compiler'.
  1899. html li with: 'Full Smalltalk object system, including classes & metaclasses, etc'.
  1900. html li with: 'Core libraries (streams, collections, RegExp, etc)'.
  1901. html li with: 'Web related libraries: HTML Canvas, DOM manipulation'.
  1902. html li with: 'Very good javascript integration, both ways'.
  1903. html li with: 'Full featured IDE!!'.
  1904. html li with: [
  1905. html with:'Advanced features, including '.
  1906. html code with: '#doesNotUnderstand:'.
  1907. html with: ' support and '.
  1908. html code with: 'thisContext']]
  1909. ! !
  1910. SweSUGSlide subclass: #SweSUGIntroSlide
  1911. instanceVariableNames: ''
  1912. package: 'Presentation'!
  1913. !SweSUGIntroSlide methodsFor: 'not yet classified'!
  1914. id
  1915. ^'Intro'
  1916. !
  1917. renderSlideOn: html
  1918. html div class: 'section center animate'; with: [
  1919. html img src: 'fosdem2012/images/amber.png'.
  1920. html p: self presentation author.
  1921. html p: self presentation description.
  1922. html p: [
  1923. html with: self presentation email]].
  1924. ! !
  1925. SweSUGSlide subclass: #SweSUGWhatIsAmberSlide
  1926. instanceVariableNames: ''
  1927. package: 'Presentation'!
  1928. !SweSUGWhatIsAmberSlide methodsFor: 'accessing'!
  1929. id
  1930. ^'WhatIsAmber'
  1931. ! !
  1932. !SweSUGWhatIsAmberSlide methodsFor: 'rendering'!
  1933. renderSlideOn: html
  1934. html div class: 'section center'; with: [
  1935. html img: 'esug2011/images/balloon.jpg'.
  1936. html h1 with: 'Amber in a nutshell'.
  1937. html h2 with: 'Amber is a true Smalltalk'.
  1938. html h2 with: 'It compiles to and runs on/in JavaScript'.
  1939. html h2 with: 'MIT license'.
  1940. html h2 class: 'fancy'; with: 'Amber is way cool!!']
  1941. ! !
  1942. SweSUGSlide subclass: #SweSUGWorkspaceSlide
  1943. instanceVariableNames: ''
  1944. package: 'Presentation'!
  1945. !SweSUGWorkspaceSlide methodsFor: 'accessing'!
  1946. backgroundColor
  1947. ^'#18bd7d'
  1948. !
  1949. id
  1950. ^'workspace'
  1951. !
  1952. renderSlideOn: html
  1953. | workspace |
  1954. workspace := SourceArea new.
  1955. html div class: 'section center'; with: [
  1956. html h1 with: 'Give Amber a try!!'.
  1957. workspace renderOn: html.
  1958. html div with: [
  1959. html button
  1960. with: 'DoIt';
  1961. onClick: [workspace doIt].
  1962. html button
  1963. with: 'PrintIt';
  1964. onClick: [workspace printIt].
  1965. html button
  1966. with: 'InspectIt';
  1967. onClick: [workspace inspectIt]]]
  1968. ! !
  1969. Slide subclass: #WhatIsJtalkSlide
  1970. instanceVariableNames: ''
  1971. package: 'Presentation'!
  1972. !WhatIsJtalkSlide methodsFor: 'accessing'!
  1973. id
  1974. ^'WhatIsJtalk'
  1975. ! !
  1976. !WhatIsJtalkSlide methodsFor: 'rendering'!
  1977. renderSlideOn: html
  1978. html div class: 'section center'; with: [
  1979. html h1 with: 'Jtalk in a nutshell'.
  1980. html h2 with: 'Jtalk is an implementation of Smalltalk'.
  1981. html h2 with: 'Jtalk runs on top of the JavaScript runtime'.
  1982. html h2 with: 'Jtalk is an opensource project (MIT)'.
  1983. html h2 class: 'fancy'; with: 'Jtalk is cool!!']
  1984. ! !
  1985. Slide subclass: #WorkspaceSlide
  1986. instanceVariableNames: ''
  1987. package: 'Presentation'!
  1988. !WorkspaceSlide methodsFor: 'accessing'!
  1989. backgroundColor
  1990. ^'#18bd7d'
  1991. !
  1992. id
  1993. ^'workspace'
  1994. !
  1995. renderSlideOn: html
  1996. | workspace |
  1997. workspace := SourceArea new.
  1998. html div class: 'section center'; with: [
  1999. html h1 with: 'Give Jtalk a try!!'.
  2000. workspace renderOn: html.
  2001. html div with: [
  2002. html button
  2003. with: 'DoIt';
  2004. onClick: [workspace doIt].
  2005. html button
  2006. with: 'PrintIt';
  2007. onClick: [workspace printIt].
  2008. html button
  2009. with: 'InspectIt';
  2010. onClick: [workspace inspectIt]]]
  2011. ! !