Download presentation
Presentation is loading. Please wait.
1
Tk Widgets in Javascript
1
2
History Start was about November 2010
Collecting ideas about browser libraries Tcl Plugin JQuery YUI (Yahoo User Interface library) tcl.js (Tcl in Javascript) 2
3
Goal of the Tool Have Tcl code somehow running in a browser
Eventually use of Javascript as the base Serverside parts using ATWF Same code for Tcl kit and browser Start with some Tk widgets Later on extend to ttk (Tile) 3
4
Tcl Plugin + Full Tcl/Tk functionality
+ relatively small effort to use - maintenance? - platform dependent base - based on older Tcl version 4
5
JQuery + compact + simple syntax for complex selectors
+ can be driven with css - mostly for DOM queries - no complex widgets - no megawidgets 5
6
YUI + huge functionality + easy to drive with css
- possibly a lot of overhead - slightly different model than TK - needs an ant based complex build system 6
7
Tcl.js + Javascript implementation of Tcl
+ extension of the implementation through Itcl in Javascript - rather limited Tcl functionality - no Tk 7
8
Decision 1 Use of itcl in Javascript as base
Build own version of Tk widgets based on DOM Use of Tk like option class/object Use of Tk like widget class/object as base Start with simple widgets: button entry label frame toplevel 8
9
Decision 2 Provide the following window managers: pack grid
Start with pack (is simpler) Grid implementation eventually as a GSoC project From the possible options implement first the following: Needed for Reporting Tools with Tcl 9
10
Implementation 1 The following widgets with some options are implemented button label entry frame toplevel 10
11
Implementation 2 In step 2 the following widgets were implemented:
Tktable (rather limited version) Tree (Bwidget) (also limited version) 11
12
Tktable Problem: title rows and cols not available in HTML table
Solution: Use of 4 tables in 2 rows to be able to emulate Tk functionality top left table top right table bottom left table bottom right table Top left table never scrolls Top right table scrolls only horizontally Bottom left table scrolls only vertically Bottom right table is the one with the real scroll bars Synchronisation of 2 tables for every scroll bar Embed that construct in another (HTML) table 12
13
Tree Problem 1: align the elements for the tree Solution:
Use an own table for every row in the tree Open/close image or vertical bar image (multiple times) Image for tree node Text for tree node Problem 2: how to handle open/close of sub trees set style of the next level nodes of the closed tree to: display: none reset style of the next level nodes of the opened tree to: display: block 13
14
Implementation 3 ScrollableFrame (BWidget) LabelEntry (Bwidget)
Combobox PanedWindow (BWidget) ScrollableFrame did not make big problems LabelEntry did not make big problems 14
15
Combobox Implemented using a LabelEntry
Some additional code for the popup list Hard part was positioning of the popup list Needs absolute positioning using the coordinates of the LabelEntry Popup is simulated using the same trick as for the Tree widget Show: set style {display: table-row} Hide: set style {display: none} 15
16
PanedWindow Implemented as 3 or more <div> tags in HTML in a row Sash is a <div> between 2 other <div> elements When dragging sash the size of the 2 other <div> elements is changed accordingly Problem: when moving sash focus changes eventually to the two other <div> elements or the contents within them Solution: Attach the dragging events to the <body> elements of the page Reset at end of dragging Dragging is done using mousedown for starting Dragging is done using mousemove for moving Dragging is done using mouseup for ending No implementation of dropping, as not needed here 16
17
YUI revisited Because of a lot of still missing base functionality in Tk implementation in Javascript: Have a deeper look at YUI again Decision to extract some base functionality to use here Analyse YUI to see how to use parts without need for ant build system Need of only a small wrapper (2 lines) for use of source files For easily being able to enhance with Tk specifics: Do a fork of the sources and start only with limited set of modules Name is TUI (Tcl User Interface), but up to now 90% of original code is used 17
18
TUI 1 Start with Tk button implementation
Add source modules from YUI until needed functionality is reached For basic functionality including events about 40 source files needed Tk functionality for button implemented: button creation button configure (partial, some of the options (mostly styles) button cget (partial, some of the options (mostly styles) -command option -width option -height option -background option -foreground option 18
19
TUI 2 There is some table functionality (datatable), but not like Tktable There are only title rows available Rowspan and colspan are determined from title rows layout Decision to build a tktable module similar to datatable Use of 4 sub tables as in the other implementation Additional title cols functionality Additional rowspan and colspan Tk functionality Additional tag functionality Build cell and cell-set functionality instead of record/record-set Build a plugin for scrolling functionality like in datatable-scroll 19
20
Status Implementation of about 5.000 lines in js
Adaption of about lines of YUI Time frame May to October 2011 Written in Javascript with Tcl/Tk wrappers Should move the current implementation to YUI/TUI completely 20
21
Todos A lot of additional (Mega-)Widgets Finish migration to TUI
Adapt more functionality from YUI Decide what other parts of YUI are needed/interesting Prepare alpha version Take care of feedback to that version Documentation Demos 21
22
Demo URL's http://wiedemann-netz.de/texample_pw.html
22
Similar presentations
