1
0

Documentation.st 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758
  1. Smalltalk current createPackage: 'Documentation' properties: #{}!
  2. Object subclass: #DocumentationBuilder
  3. instanceVariableNames: 'chapters announcer widget'
  4. category: 'Documentation'!
  5. !DocumentationBuilder methodsFor: 'accessing'!
  6. chapters
  7. ^chapters ifNil: [chapters := self buildChapters]
  8. !
  9. announcer
  10. ^announcer ifNil: [announcer := Announcer new]
  11. !
  12. widget
  13. ^widget ifNil: [widget := DocumentationWidget on: self]
  14. ! !
  15. !DocumentationBuilder methodsFor: 'building'!
  16. buildChapters
  17. ^((self class methodDictionary values sorted: [:a :b | a selector < b selector])
  18. select: [:each | each category = 'chapters'])
  19. collect: [:each | self perform: each selector]
  20. !
  21. buildOn: aCanvas
  22. aCanvas with: self widget.
  23. self
  24. checkHashChange;
  25. checkHash
  26. !
  27. buildOnJQuery: aJQuery
  28. self buildOn: (HTMLCanvas onJQuery: aJQuery)
  29. !
  30. build
  31. self buildOnJQuery: ('body' asJQuery)
  32. ! !
  33. !DocumentationBuilder methodsFor: 'chapters'!
  34. ch1introduction
  35. ^DocChapter new
  36. title: 'Introduction';
  37. contents: '
  38. ##Amber Smalltalk in a nutshell
  39. Amber is an implementation of the Smalltalk-80 language. It is designed to make client-side web development **faster, easier and more fun** as it allows developers to write HTML5 applications in a live Smalltalk environment!!
  40. Amber is written in itself, including the IDE and the compiler and it runs **directly inside your browser**. The IDE is fairly complete with a class browser, workspace, transcript, unit test runner, object inspectors, cross reference tools and even a debugger.
  41. Noteworthy features:
  42. - Amber is semantically and syntactically very close to [Pharo Smalltalk](http://www.pharo-project.org). Pharo is considered the reference implementation.
  43. - Amber **seamlessly interacts with JavaScript** and can use its full eco system of libraries without any glue code needed.
  44. - Amber **has no dependencies** and can be used in any JavaScript runtime, not only inside browsers. An important example is [Node.js](http://nodejs.org).
  45. - Amber is a live Smalltalk that **compiles incrementally into efficient JavaScript** often mapping one-to-one with JavaScript equivalents.
  46. - Amber has a **Seaside influenced canvas library** to dynamically generate HTML.
  47. ## Arguments for using Amber
  48. In our humble opinion the main arguments for using Amber are:
  49. - JavaScript is quite a broken language with lots of traps and odd quirks. It is the assembler of the Internet which is cool, but we don''t want to write in it.
  50. - Smalltalk as a language is immensely cleaner and more mature, both syntactically and semantically.
  51. - Smalltalk has a simple class model with a lightweight syntax for closures, it is in many ways a perfect match for the Good Parts of JavaScript.
  52. - Having a true live interactive incremental development environment where you can build your application directly in the browser is unbeatable.
  53. ## Disclaimer
  54. This documentation doesn''t aim to teach Smalltalk.
  55. Knowledge of Smalltalk is needed to understand the topics covered in this documentation.
  56. If you want to learn the Smalltalk language, you can read the excellent [Pharo By Example](http://www.pharobyexample.org) book.
  57. '
  58. !
  59. ch2differencesWithOtherSmalltalks
  60. ^DocChapter new
  61. title: 'Differences with other Smalltalks';
  62. contents: '
  63. Amber has some differences with other Smalltalk implementations. This makes porting code a non-trivial thing, but still quite manageable.
  64. Because it maps Smalltalk constructs one-to-one with the JavaScript equivalent, including Smalltalk classes to JavaScript constructors, the core class library is simplified compared to Pharo Smalltalk.
  65. And since we want Amber to be useful in building lean browser apps we can''t let it bloat too much.
  66. But apart from missing things other Smalltalks may have, there are also things that are plain different:
  67. - The collection class hierarchy is much simpler compared to most Smalltalk implementations. In part this is because we want to map reasonably well with JavaScript counter parts.
  68. - As of today, there is no SortedCollection. The size of arrays is dynamic, and they behave like an ordered collection. They can also be sorted with the `#sort*` methods.
  69. - The `Date` class behaves like the `Date` and `TimeStamp` classes in Pharo Smalltalk. Therefore both `Date today` and `Date now` are valid in Amber.
  70. - Amber does not have class Character, but `String` does implement some of Character behavior so a single character String can work as a Character.
  71. - Amber does support **class instance variables**, but not class variables.
  72. - Amber only has global classes and packages, but not arbitrary objects. Use classes instead like `Smalltalk current` instead of `Smalltalk` etc.
  73. - Amber does not support pool dictionaries.
  74. - Amber uses **< ...javascript code... >** to inline JavaScript code and does not have pragmas.
  75. - Amber does not have class categories. The left side in the browser lists real Packages, but they feel much the same.
  76. '
  77. !
  78. ch3GettingStarted
  79. ^DocChapter new
  80. title: 'Getting started';
  81. contents: '
  82. To get started hacking in Amber you can basically take three routes, independent of your platform:
  83. 1. Just **try it out directly** at [www.amber-lang.net](http://www.amber-lang.net) - click the **Class browser** button there. But you will **not be able to save any code you write**!!
  84. Still, it works fine for looking at the IDE and playing around. Just **don''t press F5/reload** - it will lose any code you have written.
  85. 2. Download an Amber zip-ball, install [Nodejs](http://www.nodejs.org), fire up the Amber server and then open Amber from localhost - then you **can save code**. Detailed instructions are below!!
  86. 3. Same as above but install git first and get a proper clone from [http://github.com/NicolasPetton/amber](http://github.com/NicolasPetton/amber) instead of a zip/tar-ball.
  87. If you want to **contribute to Amber itself** this is really what you want to do. In fact, in most cases this is what you want to do. It requires installing git first, but it is quite simple - although we leave this bit as an "exercise to the reader" :)
  88. **PLEASE NOTE:** Amber core developers use Linux.
  89. We do not want to introduce dependencies that aren''t cross platform - but currently amberc (the command line compiler) is a bash script and we also use Makefiles
  90. (for building Amber itself and server side examples) written on Linux/Unix. So using Windows is currently a bit limited - you can''t run "make" in the .st directory to rebuild whole of Amber for example.
  91. BUT... if you only want to use Amber to build web client apps and not really get involved in hacking Amber itself - then you should be fine!!
  92. ## Downloading Amber
  93. Currently you can download in zip or tar-ball format, either cutting edge or a release. [Downloads are available here](https://github.com/NicolasPetton/amber/archives/amber).
  94. Unpack wherever you like, but I would rename the directory that is unpacked to something slightly shorter - like say "amber". :)
  95. And yes, at this point you can double click the index.html file in the amber directory to get the IDE up, but again, **you will not be able to save code**. So please continue below :)
  96. ## Installing Node.js
  97. [Node](http://www.nodejs.org) (for short) is simply the V8 Javascript VM from Google (used in Chrome) hooked together with some hard core C-libraries for doing "evented I/O".
  98. Basically it''s JavaScript for the server - on asynch steroids. Amber runs fine in Node and we use it for several Amber tools, like amberc (the command line Amber compiler) or the Amber server (see below).
  99. There are also several Amber-Node examples to look at if you want to play with running Amber programs server side. **In short - you really want to install Nodejs. :)**
  100. - Installing Node on Linux can be done using your package tool of choice (`apt-get install nodejs` for example) or any other way described at [the download page](http://nodejs.org/#download).
  101. - Installing Node on MacOS or Windows is probably done best by using the [installers available at Nodejs.org](http://nodejs.org/#download).
  102. ## Starting Amber server
  103. Nicolas has written a minimal webDAV server that is the easiest way to get up and running Amber with the ability to save code. This little server is written in... Amber!!
  104. And it runs on top of Node. So to start it up serving your brand new directory tree of sweet Amber you do:
  105. cd amber (or whatever you called the directory you unpackaged)
  106. ./bin/server (in windows you type `node server\server.js` instead)
  107. It should say it is listening on port 4000. If it does, hooray!! That means both Node and Amber are good. In Windows you might get a question about opening that port in the local firewall - yep, do it!!
  108. ## Firing up Amber
  109. The Amber IDE is written in... Amber. It uses [jQuery](http://jquery.com) and runs right in your browser as a ... well, a web page.
  110. We could open it up just using a file url - but the reason we performed the previous steps is so that we can load the IDE web page from a server that can handle PUTs (webDAV) of source code.
  111. According to web security Amber can only do PUT back to the same server it was loaded from. Thus we instead want to open it [through our little server now listening on port 4000](http://localhost:4000/index.html).
  112. Clicking that link and then pressing the **Class browser** should get your Amber IDE running with the ability to commit modified packages locally.
  113. To verify that you can indeed commit now - just select a Package in the browser, like say "Examples" and press the **Commit** button below. **If all goes well nothing happens :)**.
  114. So in order to really know if it worked we can check the modified date on the files **amber/st/Examples.st**, **amber/js/Examples.js** and **amber/js/Examples.deploy.js** - they should be brand new.
  115. NOTE: We can use any webDAV server and Apache2 has been used earlier and works fine. But the Amber server is smaller and simpler to start.
  116. '
  117. !
  118. ch5Index
  119. ^ClassesIndexChapter new
  120. !
  121. ch6KernelObjects
  122. ^PackageDocChapter on: (Package named: 'Kernel-Objects')
  123. !
  124. ch7KernelClasses
  125. ^PackageDocChapter on: (Package named: 'Kernel-Classes')
  126. !
  127. ch4Tutorials
  128. ^TutorialsChapter new
  129. !
  130. ch8KernelCollection
  131. ^PackageDocChapter on: (Package named: 'Kernel-Collections')
  132. !
  133. ch9KernelMethods
  134. ^PackageDocChapter on: (Package named: 'Kernel-Methods')
  135. ! !
  136. !DocumentationBuilder methodsFor: 'routing'!
  137. checkHashChange
  138. (window jQuery: window) bind: 'hashchange' do: [self checkHash]
  139. !
  140. checkHash
  141. | hash presentation |
  142. hash := document location hash replace: '^#' with: ''.
  143. self announcer announce: (ChapterSelectionAnnouncement new
  144. id: hash;
  145. yourself)
  146. ! !
  147. !DocumentationBuilder methodsFor: 'updating'!
  148. update
  149. chapters := nil.
  150. announcer := nil.
  151. widget := nil.
  152. (window jQuery: '.documentation') remove.
  153. self build
  154. ! !
  155. DocumentationBuilder class instanceVariableNames: 'current'!
  156. !DocumentationBuilder class methodsFor: 'accessing'!
  157. current
  158. ^current ifNil: [current := self new]
  159. ! !
  160. !DocumentationBuilder class methodsFor: 'initialization'!
  161. initialize
  162. self current build
  163. ! !
  164. Widget subclass: #DocChapter
  165. instanceVariableNames: 'title contents parent'
  166. category: 'Documentation'!
  167. !DocChapter methodsFor: 'accessing'!
  168. title
  169. ^title ifNil: ['']
  170. !
  171. title: aString
  172. title := aString
  173. !
  174. contents
  175. ^contents ifNil: ['']
  176. !
  177. contents: aString
  178. contents := aString
  179. !
  180. htmlContents
  181. ^(Showdown at: #converter) new makeHtml: self contents
  182. !
  183. chapters
  184. "A doc chapter can contain sub chapters"
  185. ^#()
  186. !
  187. cssClass
  188. ^'doc_chapter'
  189. !
  190. level
  191. ^self parent ifNil: [1] ifNotNil: [self parent level +1]
  192. !
  193. level: anInteger
  194. level := anInteger
  195. !
  196. parent
  197. ^parent
  198. !
  199. parent: aChapter
  200. parent := aChapter
  201. !
  202. id
  203. "The id is used in url fragments.
  204. It must be unique amoung all chapters"
  205. ^self title replace: ' ' with: '-'
  206. !
  207. announcer
  208. ^DocumentationBuilder current announcer
  209. ! !
  210. !DocChapter methodsFor: 'actions'!
  211. selectClass: aClass
  212. DocumentationBuilder current announcer announce: (ClassSelectionAnnouncement on: aClass)
  213. !
  214. selectChapter: aChapter
  215. document location hash: aChapter id
  216. !
  217. displayChapter: aChapter
  218. DocumentationBuilder current widget displayChapter: aChapter
  219. ! !
  220. !DocChapter methodsFor: 'initialization'!
  221. initialize
  222. super initialize.
  223. self subscribe
  224. ! !
  225. !DocChapter methodsFor: 'rendering'!
  226. renderOn: html
  227. html div
  228. class: self cssClass;
  229. with: [
  230. self renderDocOn: html.
  231. self renderLinksOn: html]
  232. !
  233. renderDocOn: html
  234. | div |
  235. html h1 with: self title.
  236. self renderNavigationOn: html.
  237. div := html div class: 'contents'.
  238. div asJQuery html: self htmlContents
  239. !
  240. renderNavigationOn: html
  241. self parent ifNotNil: [
  242. html div
  243. class: 'navigation'; with: [
  244. html a
  245. with: '← back to ', self parent title;
  246. onClick: [self selectChapter: self parent]]]
  247. !
  248. renderLinksOn: html
  249. html ul
  250. class: 'links';
  251. with: [
  252. self chapters do: [:each |
  253. html li with: [
  254. html a
  255. with: each title;
  256. onClick: [self selectChapter: each]]]]
  257. ! !
  258. !DocChapter methodsFor: 'subscriptions'!
  259. subscribe
  260. self announcer on: ChapterSelectionAnnouncement do: [:ann |
  261. ann id = self id ifTrue: [self displayChapter: self]]
  262. ! !
  263. DocChapter subclass: #PackageDocChapter
  264. instanceVariableNames: 'package chapters'
  265. category: 'Documentation'!
  266. !PackageDocChapter methodsFor: 'accessing'!
  267. package
  268. ^package
  269. !
  270. title
  271. ^'Package ', self package name
  272. !
  273. chapters
  274. ^chapters
  275. !
  276. contents
  277. ^'Classes in package ', self package name, ':'
  278. ! !
  279. !PackageDocChapter methodsFor: 'initialization'!
  280. initializeWithPackage: aPackage
  281. package := aPackage.
  282. chapters := (aPackage classes sorted: [:a :b | a name < b name]) collect: [:each |
  283. (ClassDocChapter on: each)
  284. parent: self;
  285. yourself]
  286. ! !
  287. !PackageDocChapter class methodsFor: 'instance creation'!
  288. on: aPackage
  289. ^self basicNew
  290. initializeWithPackage: aPackage;
  291. initialize;
  292. yourself
  293. ! !
  294. DocChapter subclass: #ClassDocChapter
  295. instanceVariableNames: 'theClass'
  296. category: 'Documentation'!
  297. !ClassDocChapter methodsFor: 'accessing'!
  298. theClass
  299. ^theClass
  300. !
  301. contents
  302. ^self theClass comment isEmpty
  303. ifTrue: [self theClass name, ' is not documented yet.']
  304. ifFalse: [self theClass comment]
  305. !
  306. cssClass
  307. ^'doc_class ', super cssClass
  308. !
  309. title
  310. ^self theClass name
  311. !
  312. initializeWithClass: aClass
  313. theClass := aClass
  314. ! !
  315. !ClassDocChapter methodsFor: 'rendering'!
  316. renderLinksOn: html
  317. html ul
  318. class: 'links';
  319. with: [
  320. html li with: [html a
  321. with: 'Browse this class';
  322. onClick: [Browser openOn: self theClass]]]
  323. ! !
  324. !ClassDocChapter methodsFor: 'subscriptions'!
  325. subscribe
  326. super subscribe.
  327. self announcer
  328. on: ClassSelectionAnnouncement do: [:ann |
  329. ann theClass = self theClass ifTrue: [
  330. self selectChapter: self]]
  331. ! !
  332. !ClassDocChapter class methodsFor: 'accessing'!
  333. on: aClass
  334. ^self basicNew
  335. initializeWithClass: aClass;
  336. initialize;
  337. yourself
  338. ! !
  339. Widget subclass: #DocumentationWidget
  340. instanceVariableNames: 'builder selectedChapter chapterDiv'
  341. category: 'Documentation'!
  342. !DocumentationWidget methodsFor: 'accessing'!
  343. builder
  344. ^builder
  345. !
  346. builder: aDocumentationBuilder
  347. builder := aDocumentationBuilder
  348. !
  349. chapters
  350. ^self builder chapters
  351. !
  352. selectedChapter
  353. ^selectedChapter ifNil: [selectedChapter := self chapters first]
  354. !
  355. selectedChapter: aChapter
  356. ^selectedChapter := aChapter
  357. ! !
  358. !DocumentationWidget methodsFor: 'actions'!
  359. displayChapter: aChapter
  360. self selectedChapter: aChapter.
  361. self updateChapterDiv
  362. !
  363. selectChapter: aChapter
  364. document location hash: aChapter id
  365. ! !
  366. !DocumentationWidget methodsFor: 'rendering'!
  367. renderOn: html
  368. html div
  369. class: 'documentation';
  370. with: [
  371. self renderMenuOn: html.
  372. chapterDiv := html div.
  373. self updateChapterDiv]
  374. !
  375. renderMenuOn: html
  376. html div
  377. class: 'menu';
  378. with: [
  379. html ol with: [
  380. self chapters do: [:each |
  381. html li with: [
  382. self renderChapterMenu: each on: html]]]]
  383. !
  384. renderChapterMenu: aChapter on: html
  385. html a
  386. with: aChapter title;
  387. onClick: [
  388. self selectChapter: aChapter].
  389. html ol with: [
  390. aChapter chapters do: [:each |
  391. html li with: [
  392. self renderChapterMenu: each on: html]]]
  393. ! !
  394. !DocumentationWidget methodsFor: 'updating'!
  395. updateChapterDiv
  396. chapterDiv contents: [:html |
  397. html with: self selectedChapter]
  398. ! !
  399. !DocumentationWidget class methodsFor: 'instance creation'!
  400. on: aBuilder
  401. ^self new
  402. builder: aBuilder;
  403. yourself
  404. ! !
  405. DocChapter subclass: #ClassesIndexChapter
  406. instanceVariableNames: ''
  407. category: 'Documentation'!
  408. !ClassesIndexChapter methodsFor: 'accessing'!
  409. cssClass
  410. ^'index_doc ', super cssClass
  411. !
  412. title
  413. ^'Smalltalk classes by index'
  414. !
  415. alphabet
  416. ^'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
  417. ! !
  418. !ClassesIndexChapter methodsFor: 'rendering'!
  419. renderDocOn: html
  420. html h1 with: self title.
  421. self alphabet do: [:letter || classes |
  422. classes := Smalltalk current classes select: [:each | each name first = letter].
  423. classes ifNotEmpty: [html h2 with: letter].
  424. html ul with: [
  425. (classes sorted: [:a :b | a name < b name])
  426. do: [:each |
  427. html li with: [html a
  428. with: each name;
  429. onClick: [self selectClass: each]]]]]
  430. ! !
  431. Object subclass: #ClassSelectionAnnouncement
  432. instanceVariableNames: 'theClass'
  433. category: 'Documentation'!
  434. !ClassSelectionAnnouncement methodsFor: 'accessing'!
  435. theClass
  436. ^theClass
  437. !
  438. theClass: aClass
  439. theClass := aClass
  440. ! !
  441. !ClassSelectionAnnouncement class methodsFor: 'instance creation'!
  442. on: aClass
  443. ^self new
  444. theClass: aClass;
  445. yourself
  446. ! !
  447. Object subclass: #ChapterSelectionAnnouncement
  448. instanceVariableNames: 'id'
  449. category: 'Documentation'!
  450. !ChapterSelectionAnnouncement methodsFor: 'accessing'!
  451. id
  452. ^id
  453. !
  454. id: aString
  455. id := aString
  456. ! !
  457. DocChapter subclass: #TutorialsChapter
  458. instanceVariableNames: ''
  459. category: 'Documentation'!
  460. !TutorialsChapter methodsFor: 'accessing'!
  461. title
  462. ^'Tutorials'
  463. !
  464. contents
  465. ^'Here''s a serie of tutorials. If you are new to Smalltalk, you can also learn Amber online with [ProfStef](http://www.amber-lang.net/learn.html)'
  466. !
  467. chapters
  468. ^{ self firstAppChapter. self counterChapter }
  469. !
  470. firstAppChapter
  471. ^DocChapter new
  472. title: 'A first application';
  473. contents: '
  474. Let''s make Hello World in Amber.
  475. First, you need a place for your new project. I made a new directory under amber:
  476. amber/projects/hello
  477. This will store your project files. To get started, add a new index.html file to this folder, as well as empty js and st folders.
  478. Your index.html can be really basic. The most important thing it does is include amber.js and run loadAmber. Here is a basic index.html you can use:
  479. <!!DOCTYPE html>
  480. <html>
  481. <head>
  482. <title>My First Amber Project</title>
  483. <script src="../../js/amber.js" type="text/javascript"></script>
  484. <script type="text/javascript">
  485. loadAmber({
  486. files: [],
  487. prefix: ''projects/hello/js'',
  488. ready: function() {
  489. }});
  490. </script>
  491. </head>
  492. <body>
  493. <article>
  494. <h1>My First Amber Project</h1>
  495. <button onclick="smalltalk.Browser._open()">class browser</button>
  496. <button id="sayHello">say hello</button>
  497. </article>
  498. </body>
  499. </html>
  500. Now start up amber with node.js and navigate to http://localhost:4000/projects/hello/index.html
  501. It''s boring so far, so lets write some code. Click the button to open the class browser. Find an existing class and change its name to Hello and its package to HelloApp.
  502. Then click save. This creates a new class and leaves the old one intact, it doesn''t overwrite it. Your class will look like this:
  503. Object subclass: #Hello
  504. instanceVariableNames: ''''
  505. package: ''HelloApp''
  506. Now click save and navigate to your new class in its new package.
  507. Then click ''commit package''. You just created a new class and saved your work.
  508. On your file system check out your js and st folders. Your new class is now saved in both JavaScript and Smalltalk.
  509. Now, refresh your browser page and reopen the class browser. Oh no, your new class is gone!! To load your new class automatically, you have to add it in index.html. Make your JavaScript look like this:
  510. loadAmber({
  511. files: [''HelloApp.js''],
  512. prefix: ''projects/hello/js'',
  513. ready: function() {
  514. }});
  515. Save and refresh again. Now your class is loaded and shows up in the class browser.
  516. Now, let''s make this class do something. Create a new message in the class browser by navigating to your class, then clicking ''not yet classified'' and fill in a simple message. Try this for example:
  517. begin
  518. "Makes me say hello to the user."
  519. | msg button |
  520. msg := ''Hello world!!''.
  521. button := ''#sayHello'' asJQuery.
  522. button click: [button after: ''<p>'' , msg , ''</p>''].
  523. Your message isn''t too helpful if it doesn''t get called. Save it, commit the package, then edit index.html again. You can write JavaScript code that sends a message to Smalltalk:
  524. loadAmber({
  525. files: [''HelloApp.js''],
  526. prefix: ''projects/hello/js'', // path for js files i think
  527. ready: function() {
  528. $(function() {
  529. smalltalk.Hello._new()._begin();
  530. });
  531. }});
  532. From there, you can create new Smalltalk classes and messages to build up your app. Enjoy!!
  533. '
  534. !
  535. counterChapter
  536. ^DocChapter new
  537. title: 'The counter application';
  538. contents: '
  539. This tutorial will teach you how to build HTML with Amber using jQuery and the HTMLCanvas API. It is freely adapted from
  540. the [Seaside counter example](http://www.seaside.st/about/examples/counter)
  541. ##The counter widget
  542. The counter is the most basic example of a widget. It allows to increment and decrement a number by clicking a button.
  543. Amber already comes with a counter example in the `Examples` package. To avoid class name conflict, we''ll name our counter class `TCounter`.
  544. Widget subclass: #TCounter
  545. instanceVariableNames: ''count header''
  546. package: ''Tutorials''
  547. The first method is used to initialize the component with the default state, in this case we set the counter to 0:
  548. initialize
  549. super initialize.
  550. count := 0
  551. The method used for rendering a widget is `#renderOn:`. It takes an instance of HTMLCanvas as parameter.
  552. The `header` h1 kept as an instance variable, so when the count value change, we can update it''s contents accordingly.
  553. renderOn: html
  554. header := html h1
  555. with: count asString;
  556. yourself.
  557. html button
  558. with: ''++'';
  559. onClick: [self increase].
  560. html button
  561. with: ''--'';
  562. onClick: [self decrease]
  563. The counter is almost ready. All we need now is to implement the two action methods `#increase` and `#decrease` to change the state
  564. of our counter and update its header.
  565. increase
  566. count := count + 1.
  567. header contents: [:html | html with: count asString]
  568. decrease
  569. count := count - 1.
  570. header contents: [:html | html with: count asString]
  571. That''s it!! We can now display an instance of TCounter by rendering it on the page using jQuery:
  572. TCounter new appendToJQuery: ''body'' asJQuery
  573. '
  574. ! !