Tk Widgets in Javascript

Tk in Javascript is a work in progress by apw, which started about May 2011 and is part of the incr Tcl in Javascript project.

It is intended to be one possible frontend/client part of ATWF and Reporting Tools with Tcl.

It tries to implement Tk widgets using javascript and DOM trees.

That includes a mapping of for example button/label/entry widgets to something which can be done with HTML parts in creating DOM trees and adding properties and attributes to the DOM nodes, that includes mapping of Tk option model to javascript style model and properties of DOM nodes.

Second goal is to map Tk event handling and bind functionality to the javascript event model and the javascript event listeners/handlers. There are also more complex widgets in work like Tree, Tktable, panedwindow, combobox etc.

The selection on which widgets are implemented first is driven by: what is needed for a reporting environment, that includes the decision on which options are implemented first.

apw 2011-07-17: First minimal basic implementation of TkTable widget done. Can create a table with titlecols and titlerows and contents as with TkTable. Scrolling with fixed titlerows and titlecols works. Data for cells are hardwired at the moment (insert rows and setting of cells or use of a variable with binding for the data t.b.d.)

apw 2011-07-31: First minimal basic implementation of BWidget Tree widget done. Can create a Tree widget and insert nodes. Binding for opening and closing of tree parts when clicking works. (code is now about 18.000 LOC)

apw 2011-08-06: trace add variable is mostly implemented and it is used to set cell values in TkTable when -variable option of TkTable widget is used.

apw 2011-08-07: TkTree improvements for more compact layout, start of insert node options handling.

apw 2011-08-11: did some work on performance added command and variable cache and some other improvements.

apw 2011-08-13: TkTree new code for a lot of the sub commands, option handling for nodes and bindImage and bindText are working.

apw 2011-08-14: TkTable new code for better sizing and for better layout. Pack command: new code for packing rules implementation. Pack command is now working much better, added -side option handling. Implementation (partial) of BWidget LabelEntry command.

apw 2011-08-15: Enhancement for pack command and implementation of pack forget command, more general event handling for BWidget Tree command (as in the original code). Can now flip between Tk table widgets when clicking on nodes of Tree widget, depending on node clicked to. (code is now about 20.000 LOC)

apw 2011-08-17: I am planning to give a presentation on this project at Eighteenth Annual Tcl/Tk Conference (2011). After that I will install demos on a server.

apw 2011-08-23: Implementation (partial) of panedwindow command. There are still some problems with drag and drop stopping suddenly, so you have to start dragging again to continue.

apw 2011-08-24: Improvements for panedwindow drag and drop and implementation (partial) of ScrollableFrame.

apw 2011-08-30: Implementation (partial) of Iwidgets scrolledlistbox and combobox commands. (code is now about 22.000 LOC)

Stay tuned.

Paper at Eighteenth Annual Tcl/Tk Conference (2011)

Tk Widgets in Javascript Paper contains some more details.

Small Demos

In the Tcl Source Code widget there is the Tcl source code, used for the demo, the second shows the "real" code needed without the filling of the widgets with data.

A panedwindow with a tree and some tktable widgets, some LabelEntry widgets and some buttons (without -command functionality). only leafs apw10 and apw20 show a tktable widget and when selecting a row within that, the first 4 fields are copied to the LabelEntry widgets.

http://wiedemann-netz.de/texample_pw.html

A ScrollableFrame with some combobox widgets (from Iwidgets) in them. Only list entries are selectable, no other functionality.

http://wiedemann-netz.de/texample_cb.html

Both are parts for the still to be implemented Reporting Tools with Tcl.

Repository

itcl in javascript Select files tab for the sources.