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:

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

Differences with other Smalltalk implementations

Jtalk has some differences with other Smalltalk implementations. 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. The following list explains the main differences:

There is no identity in Jtalk. Especially, there is no == method, or Symbol class. For convenience and compatibility, the Jtalk parser will recognize symbol literals as strings.
The collection class hierarchy is simpler compared to most Smalltalk implementations. There is no OrderedCollection, Set or SortedCollection. However, the size of arrays is dynamic, and they behave like an ordered collection. They can also be sorted with the #sort* methods.
The Date class behaves like the Date and TimeStamp classes in Pharo Smalltalk. Therefore both Date today and Date now are valid in Jtalk.
Jtalk use solely = to test object equality and not the #hash method.
Jtalk misses thisContext and does not support #doesNotUnderstand.

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 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.

{% highlight smalltalk %}renderOn: html html h1 with: count asString. html button with: '++'; onClick: [self increase]. html button with: '--'; onClick: [self decrease] {% endhighlight %}

Documentation