Smalltalk ExtJs ClassBrowser

January 28, 2011

Smalltalk ExtJs ClassBrowser

Smalltalk ExtJs ClassBrowser

Above is an image of SST/JavaScript/ExtJs running in Opera with a ClassBrowser window open.

The ClassBrowser tool is now mature enough to be able to browse the Smalltalk classes. Under the class ExtJs, there is a hierarchy of Smalltalk classes which mirror the functionality of the ExtJs class structures. ExtJs component initialization is handled totally though the Smalltalk classes and it is easy to subclass existing classes to create new components. The goal is to hide much of the complexity of using the ExtJs libraries and make building user interfaces as intuitive and easy as it has traditionally been in Smalltalk.

ClassBrowser is a tool of moderate complexity and building it required solving many issues of Smalltalk/JavaScript integration. As a result, there is now enough of a foundation in places for building a number of other tools.

One of the first of these will be a simple interface design tool (like WindowBuilder) that I discussed in my last post.


SST/ExtJs WindowBuilder Tool

January 26, 2011

Smalltalk Express WindowBuilder

Smalltalk Express WindowBuilder

Above is an image of the Smalltalk Express / WindowBuilder tool (16-bit Digitalk Smalltalk/V 2.0).

In the early 1990’s, I was doing consulting work building interfaces using Microsoft Windows 3.1 which was designed for the “segmented” memory model of the early (Intel 8088) IBM PC’s. Programming was done in “C” with “NEAR” and “FAR” pointers and a host of other nonsense that I have thankfully forgotten. In other words, programming Windows 3.1 was a total nightmare.

Then I got a copy of Digitalk/V 2.0 and WindowBuilder. Creating windows was easy! IMHO, what most people like about Smalltalk is that it makes programming much easier – you can concentrate on the application and forget the low-level details.

SST/ExtJs is rapidly maturing and in a couple of days there will be tools available such as ClassBrowsers and Inspectors.

I will also be adding a design tool for building user interfaces modeled, as much as possible, on the concepts of WindowBuilder.

This will initially be for SST/ExtJs but I wll also implement it for SST/Silverlight and SST/Flash.

The goal is to be able to build web-based, collaborative applications rapidly and with a minimum of effort.

ExtJs Class Browser Prototype

ExtJs Class Browser Prototype

Above is an image of a prototype version of a class browser in Smalltalk/ExtJs. Go to the link above to open the Smalltalk/Js page then right-click on the desktop to open the class browser.

Over the past several days I have built most of the infrastructure classes and methods needed for ExtJs. Now, the libraries are complete enough to begin building more complex tools.

Current Smalltalk source code is here.

The next step is add classes for ExtJs data sources for TreeView and ListView widgets. ClassBrowser should be fully functional in a few more days.

Smalltalk Peer-to-Peer Networking

Smalltalk Peer-to-Peer Networking

In the image above, there are four browsers open.
Clockwise from the top left:
— Chrome running SST/JavaScript
— Opera running SST/Silverlight
— Firefox running SST/Silverlight
— Safari running SST/Silverlight

In each of the three SST/Silverlight browsers, I have opened a game board for ‘Tic-Tac-Toe’.

In the SST/JavaScript browser, I have opened a Workspace and executed the following Smalltalk code:

| dict |
dict := Dictionary new.
dict at: '0' put: 'S'.
dict at: '1' put: 'M'.
dict at: '2' put: 'A'.
dict at: '3' put: 'L'.
dict at: '4' put: 'L'.
dict at: '5' put: 'T'.
dict at: '6' put: 'A'.
dict at: '7' put: 'L'.
dict at: '8' put: 'K'.
Channel send: 't3-demo-1' msg: dict

And the Tic-Tac-Toe boards in each of the other browsers immediately changed to read “S-M-A-L-L-T-A-L-K”.

To try this yourself, open a Tic-Tac-Toe board in any SST/Silverlight browser (first link at the top) – choose “Demos” from desktop menu, choose Tic-Tac-Toe, and “DoIt” from the context menu in the right panel. Then open an SST/JavaScript browser (second link at the top), place the above code in the Workspace, select it, and “PrintIt” from the context menu.

What is happening here is that I am sending a Smalltalk dictionary object by Google ChannelAPI from SST/JavaScript to three instances of SST/Silverlight. The Smalltalk dictionary is deserialized by the receiving Smalltalk interpreters and is then used to set the game board positions.

This is peer-to-peer transmission of a Smalltalk object between two different versions of Silver Smalltalk (JavaScript and Silverlight).

Once the other versions of Sillver Smalltalk are released (ActionScript, Java, and Objective-C) it should be possible to send Smalltalk objects amongst any of the current user environments:
— .Net desktop
— Silverlight
— Android
— JavaScript
— Flash/AIR
— iPhone/iPad

Write once, run anywhere….?

Smalltalk ExtJs Widgets

Smalltalk ExtJs Widgets

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

ExtJs (now part of 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.

The JavaScript version of Silver Smalltalk is nearing completion.

I am adding classes that wrap the functionality of the ExtJs JavaScript library. Hopefully, in a couple of days, there will be a functioning class browser and some object inspectors.

The JavaScript version was built first in Java which was then compiled to JavaScript using Google’s GWT compiler. There are also a number of internal methods based on Google’s JSNI (JavaScript Native Interface) to link the interpreter to resources in the environment.

The STVM.js file is approximately 112kb in size and includes the Smalltalk parser, compiler, and bytecode interpreter. This version is functionally equivalent to the Silverlight version and should run in any browser that has JavaScript enabled – there are no plugins (Flash or Silverlight) required.

I am using the ExtJs library because it is the most capable one that I am familiar with. However, any other JavaScript library could be used in its place – jQuery/UI, jQuery, Ext Core, etc.

There will be several more posts about SST/Js as it matures including the use of common Smalltalk libraries between SST/Silverlight and SST/Js and sending objects between the two versions.

Here is a link for anyone who wants to experiment:

Try executing “W := Window new” to see a new Window open.

Internet 3.0

January 17, 2011

The Internet was started more than 40 years ago.

I find it useful to divide the history of the Internet into roughly three distinct periods:

Internet 1.0 1969-1994

This was the period when the Internet mostly used by people in very large organizations. In the 1980’s, I was doing consulting work for meteorologists (using ParcPlace Smalltalk) who had access to a Cray supercomputer connected to the Internet (IIRC, it was referred to as ArpaNet at the time). We used utilities such as FTP, Telnet, and Mail. The user interface was the Unix command line.

Internet 2.0 1995-2006

Tim Berners-Lee first proposed the World Wide Web in 1989 which laid the foundations for the HTML (HyperText Markup Language), DNS (Domain Name Server), and URL (Uniform Resource Locator) standards that we use today. It seems that 1995 was the year that the Internet really entered the public consciousness with the launch of Netscape Navigator and the introduction of the (Internet capable) Java programming language.

The World Wide Web made it easy for non-technical users to navigate the Internet using browsers. And HTML made it possible for semi-technical people to create Web content.

Aspects of Internet 1.0 didn’t disappear, of course – things like FTP and Telnet were still widely used. W3 was layered on top of the existing infrastructure.

The period after 1995 was marked by a huge increase in the popularity of dynamic languages to build Web sites. Some languages had been around for a time (Perl) and some totally new ones were invented specifically for HTML (PHP). New technology led to several new companies being created (eg Google).

Internet 3.0 2007 –

IMHO, we are at the beginning of another major change in the way we use the Internet. I set 2007 as the start of this period because that is when the iPhone was first introduced.

This new period is characterized by a highly interactive, programmed user interface. With HTML web pages displayed in a browser, the page structure and interactions are determined on the server side.

But with programs running in the client device, the user experience and interaction is determined by the program and the server becomes mainly an interface to a database.

This change in the user interface is occurring across the spectrum:
— AJAX applications using JavaScript in browsers
— very capable JavaScript libraries like ExtJs (now
— the Silverlight ecosystem of tools and libraries
— Adobe Flex tools and libraries
— Android phones and tablets
— Apple’s iPhone and iPad
— other devices such as Amazon’s Kindle
— online games such as World of Warcraft and EverQuest

The World Wide Web will still be used for decades to come.

But it is apparent that we are at the start of a much more dynamic way of connecting through the Internet. And most of the new devices using these technologies will be lightweight, portable and wireless.

Which brings me inevitably to Smalltalk.

Smalltalk was designed to be simple, lightweight, and to use a very intuitive messaging protocol. Which makes it the perfect language for the age of Internet 3.0.