Disclaimer

This documentation is a work in progress. If you find an error in the documentation, please file an issue.

This documentation doesn't aim to teach Smalltalk. 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 Pharo By Example book.

Introduction

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 file an issue or a pull request on the repository.

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.

Jtalk includes the following features:

1. It is semantically and syntaxically equivalent to Pharo Smalltalk (the implementation considered as the reference)
2. It is written in itself and compiles into efficient JavaScript
3. A canvas API similar to Seaside to generate HTML
4. A jQuery binding

Differences with other Smalltalk implementations

Committing changes to disk with the web-based IDE

The class browser is able to commit changes to disk. The commit category button will send a PUT request with the compiled JavaScript code of all classes in the selected class category in a file named js/CATEGORY.js.

The easiest way to enable committing is probably to setup a webdav with Apache.

The following steps explain how to setup a webdav for Jtalk with Debian, but the setup on OSX and other Linux distros should be similar.

Installing Apache and enabling the dav module

Evaluate the following as root:

~# apt-get install apache2
~# a2enmod dav
~# a2enmod dav_fs

Creating a password for the webdav

~# htpasswd -c /etc/apache2/htpasswd-webdav USERNAME

Setting up the webdav directory

Add the following lines to the default vhost (in /etc/apache2/sites-available/default):

Alias /jtalk/ "/path/to/jtalk/"
<Directory "/path/to/jtalk/">
      Options Indexes MultiViews FollowSymLinks
      DirectoryIndex index.html
      AllowOverride None
      Order allow,deny
      allow from all

      Dav on

      AuthType Basic
      AuthName "jtalk"
      AuthUserFile /etc/apache2/htpasswd-webdav
      <LimitExcept GET OPTIONS>
            Require valid-user
      </LimitExcept>

</Directory>

Make sure the group www-data has required rights to make changes to files in the webdav directory.

Restarting Apache

To restart Apache, evaluate the following:

~# /etc/init.d/apache2 restart

and go to http://localhost/jtalk/.

The class browser should now be able to commit changes to disk.

The counter example

The following example is the traditional Seaside-like multi-counter application. The buttons at the bottom of each counter increase or decrease the counter.

Open a browser on the Counter class in the Canvas class category.

Each Jtalk widget is a subclass of Widget. A widget is a graphical component. The #renderOn: method is used to generate HTML using the HTML canvas.

Rendering methods should be placed in the rendering method protocol, and action methods in the actions protocol.

renderOn: html
    html h1 with: count asString.
    html button
    	with: '++';
    	onClick: [self increase].
    html button
    	with: '--';
    	onClick: [self decrease] 

The HTML canvas

Widgets

jQuery