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] [widget]s using javascript and [DOM] trees.

That includes a mapping of for example [button]/[label]/[entry] [widget]s 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 [widget]s 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] [widget]s, some [LabelEntry] [widget]s and some [button]s (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] [widget]s.

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

A [ScrollableFrame] with some [combobox] [widget]s (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**

http://chiselapp.com/user/wiede/repository/itcl_in_javascript/index%|%itcl in javascript%|% Select files tab for the sources.


<<categories>>Category Language | Category Tcl Implementations | Category GUI