Building ExtJs Widgets in Smalltalk

January 22, 2011

Smalltalk ExtJs Widgets

Smalltalk ExtJs Widgets


http://www.silversmalltalk.com/index2.html

The image above shows an ExtJs text window created with 12 lines of Smalltalk code.

ExtJs (now part of Sencha.com) is the most capable JavaScript library that I am familiar with. Here is a link to their documentation.

In a previous post, I briefly described the JavaScript version of the Silver Smalltalk interpreter (STVM.js is about 112 kb) and I mentioned that it can integrate with several JavaScript libraries such as ExtJs and jQuery/UI. I have decided to start with ExtJs because of its completeness. Note that the interpreter (STVM.js) remains the same regardless of the library – only the Smalltalk code for primitives is dependent upon the library chosen.

There are several ways to build ExtJs widgets. My preferred pattern is to create a configuration object and send it to the “ComponentMgr” to perform the actual instantiation.

Here are the 12 lines of Smalltalk code that produced the text window example above:

| d1 d2 |
d1 := Dictionary new.
d1 at: 'xtype' put: 'textarea'.
d2 := Dictionary new.
d2 at: 'xtype' put: 'window'.
d2 at: 'layout' put: 'fit'.
d2 at: 'initHidden' put: false.
d2 at: 'items' put: d1.
d2 at: 'width' put: 425.
d2 at: 'height' put: 375.
d2 at: 'title' put: 'Smalltalk in JavaScript'.
ComponentMgr create: d2

You can copy the above code into the workspace, highlight it, and “PrintIt” – a new text window should open.

ExtJs runs in all popular browsers including older versions without requiring any plug-ins. I have successfully used it on IE6 running on Windows 2000 behind a corporate firewall without a problem. It is, however, rather large (~650 kb) so smaller libraries could be better for lightweight applications (eg phones or clients with slow connections).

Over the next few days, I will be extending the Smalltalk JavaScript library to include a documentation browser, a forum, and an instant message/chat application.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: