|
|
@@ -66,14 +66,19 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
|
|
|
<h2>Documentation</h2>
|
|
|
<div class="content">
|
|
|
|
|
|
- <h3 id="intro">1. Introduction <a href="#intro">¶</a></h3>
|
|
|
+ <h3>Disclaimer</h3>
|
|
|
|
|
|
- <p class="warning">This documentation is a work in progress.</p>
|
|
|
+ <p class="warning">This documentation is a work in progress. If you find an error in the documentation, please <a href="https://github.com/NicolasPetton/jtalk/issues">file an issue</a>.</p>
|
|
|
+
|
|
|
+ <p>This documentation <strong>doesn't aim to teach Smalltalk</strong>. Knowledge of Smalltalk is needed to understand the topics covered in this documentation. If you want to learn the Smalltalk language, you can read the excellent <a target="_blank" href="http://pharobyexamle.org">Pharo By Example</a> book.</p>
|
|
|
|
|
|
- <p>Jtalk is an implementation of the Smalltalk-80 language. It allows developers to write client-side heavy web applications in Smalltalk. Jtalk includes an integrated development environment with a class browser, workspace and transcript.</p>
|
|
|
+
|
|
|
+ <h3>Introduction</h3>
|
|
|
|
|
|
<p class="information">Jtalk is a young piece of code and evolves quickly. Some features are still incomplete and you may very well encounter bugs, in which case you can <a href="https://github.com/NicolasPetton/jtalk/issues">file an issue</a> or a pull request on the <a href="https://github.com/NicolasPetton/jtalk">repository</a>.</p>
|
|
|
|
|
|
+ <p>Jtalk is an implementation of the Smalltalk-80 language. It allows developers to write client-side heavy web applications in Smalltalk. Jtalk includes an integrated development environment with a class browser, workspace and transcript.</p>
|
|
|
+
|
|
|
<p>Jtalk includes the following features:</p>
|
|
|
<ol>
|
|
|
<li>It is semantically and syntaxically equivalent to <a href="http://www.pharo-project.org">Pharo Smalltalk</a> (the implementation considered as the reference)</li>
|
|
|
@@ -82,9 +87,9 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
|
|
|
<li>A <a href="http://www.jquery.com">jQuery</a> binding</li>
|
|
|
</ol>
|
|
|
|
|
|
- <h3 id="differences-other-smalltalks">2. Differences with other Smalltalk implementations <a href="#differences-other-smalltalks">¶</a></h3>
|
|
|
+ <h3>Differences with other Smalltalk implementations</h3>
|
|
|
|
|
|
- <h3 id="committing">3. Committing changes to disk with the web-based IDE <a href="#committing">¶</a></h3>
|
|
|
+ <h3>Committing changes to disk with the web-based IDE</h3>
|
|
|
|
|
|
<p>The class browser is able to commit changes to disk. The <code>commit category</code> button will send a PUT request with the compiled JavaScript code of all classes in the selected class category in a file named <code>js/CATEGORY.js</code>.</p>
|
|
|
<p>The easiest way to enable committing is probably to setup a webdav with Apache.</p>
|
|
|
@@ -99,9 +104,9 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
|
|
|
<pre><span class="prompt">~#</span> <span class="kbd">htpasswd -c /etc/apache2/htpasswd-webdav <span class="kbd var">USERNAME</span></span></pre>
|
|
|
|
|
|
<h4>Setting up the webdav directory</h4>
|
|
|
- <p>Add the following lines to the default vhost (in /etc/apache2/sites-available/default):</p>
|
|
|
+ <p>Add the following lines to the default vhost (in <code>/etc/apache2/sites-available/default</code>):</p>
|
|
|
<pre>Alias /jtalk/ "/path/to/jtalk/"
|
|
|
- <Directory "/path/to/jtalk/">
|
|
|
+<Directory "/path/to/jtalk/">
|
|
|
Options Indexes MultiViews FollowSymLinks
|
|
|
DirectoryIndex index.html
|
|
|
AllowOverride None
|
|
|
@@ -114,10 +119,10 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
|
|
|
AuthName "jtalk"
|
|
|
AuthUserFile /etc/apache2/htpasswd-webdav
|
|
|
<LimitExcept GET OPTIONS>
|
|
|
- Require valid-user
|
|
|
+ Require valid-user
|
|
|
</LimitExcept>
|
|
|
|
|
|
- </Directory></pre>
|
|
|
+</Directory></pre>
|
|
|
<p>Make sure the group <code>www-data</code> has required rights to make changes to files in the webdav directory.</p>
|
|
|
|
|
|
<h4>Restarting Apache</h4>
|
|
|
@@ -127,7 +132,7 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
|
|
|
<p>and go to <code>http://localhost/jtalk/</code>.</p>
|
|
|
<p>The class browser should now be able to commit changes to disk.</p>
|
|
|
|
|
|
- <h3 id="counter-example">4. The counter example <a href="#counter-example">¶</a></h3>
|
|
|
+ <h3>The counter example</h3>
|
|
|
|
|
|
<p>The following example is the traditional Seaside-like multi-counter application. The buttons at the bottom of each counter increase or decrease the counter.</p>
|
|
|
|
|
|
@@ -139,22 +144,45 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
|
|
|
<p>Open a <button onclick="smalltalk.Browser._openOn_(smalltalk.Counter);">browser</button> on the <code>Counter</code> class in the <code>Canvas</code> class category.
|
|
|
<p>Each Jtalk widget is a subclass of <code>Widget</code>. A widget is a graphical component. The <code>#renderOn:</code> method is used to generate HTML using the HTML canvas.</p>
|
|
|
|
|
|
- <h3 id="html-canvas">5. The HTML canvas <a href="#html-canvas">¶</a></h3>
|
|
|
- <h3 id="widgets">6. Widgets <a href="#widgets">¶</a></h3>
|
|
|
- <h3 id="jquery">7. jQuery <a href="#jquery">¶</a></h3>
|
|
|
+ <p class="information">Rendering methods should be placed in the <code>rendering</code> method protocol, and action methods in the <code>actions</code> protocol.</p>
|
|
|
+
|
|
|
+ <div class="highlight"><pre><code class="smalltalk"><span class="nf">renderOn:</span> <span class="nv">html</span>
|
|
|
+ <span class="nv">html</span> <span class="nf">h1</span> <span class="nf">with:</span> <span class="nv">count</span> <span class="nf">asString</span><span class="p">.</span>
|
|
|
+ <span class="nv">html</span> <span class="nf">button</span>
|
|
|
+ <span class="nf">with:</span> <span class="s">'++'</span><span class="p">;</span>
|
|
|
+ <span class="nf">onClick:</span> [<span class="bp">self</span> <span class="nf">increase</span>]<span class="p">.</span>
|
|
|
+ <span class="nv">html</span> <span class="nf">button</span>
|
|
|
+ <span class="nf">with:</span> <span class="s">'--'</span><span class="p">;</span>
|
|
|
+ <span class="nf">onClick:</span> [<span class="bp">self</span> <span class="nf">decrease</span>]
|
|
|
+</code></pre>
|
|
|
+</div>
|
|
|
+
|
|
|
+ <h3>The HTML canvas</h3>
|
|
|
+ <h3>Widgets</h3>
|
|
|
+ <h3>jQuery</h3>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+<!-- Add ids and anchors to doc titles -->
|
|
|
+<script type="text/javascript">
|
|
|
+ jQuery.each(jQuery('.doc h3'), function(i, heading) {
|
|
|
+ jQuery(heading).attr({'id': jQuery(heading).text().replace(/ /g,"_")})
|
|
|
+ jQuery(heading).html(
|
|
|
+ i + ". " +
|
|
|
+ jQuery(heading).html() +
|
|
|
+ " <a href='#" + jQuery(heading).attr('id') + "'>¶</a>");
|
|
|
+ });
|
|
|
+</script>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="footer">
|
|
|
<div class="main">
|
|
|
- <p>Copyright © 2011 <a href="https://github.com/NicolasPetton">Nicolas Petton</a>.</p>
|
|
|
+ <p>Copyright © 2011 <a href="https://github.com/NicolasPetton">Nicolas Petton</a>. The content of this website in licensed under <a href="http://creativecommons.org/licenses/by-nc/3.0/">CC-BY-NC 3.0</a>.</p>
|
|
|
<p>Jtalk is an opensource project sponsored by <a href="http://www.objectfusion.fr">objectfusion</a>.</p>
|
|
|
- <p>The design of this website was kindly provided by <a href="mailto:neomie.thirion@gmail.com">Noémie Thirion</a>.</p>
|
|
|
+ <p>The design of this website was provided by <a href="mailto:neomie.thirion@gmail.com">Noémie Thirion</a>.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
