ChitSets Introduction
Dave Davies, 2013

The ChitSets package was built as a front end to TheWordMachine. It provides an extensible desktop environment in a browser page.

It is designed to run on a local machine for personal use. It may also work as a general purpose web page generator with some more effort. This will need a public open source project. My priority is linking into TheWordMachine.

It combines html5, JavaScript, Java (xml, dom, xpath, Servlet, Applet, Desktop Application), AJAX and PHP technologies. It also uses its own structure definition language (csdef) similar to css style definitions.
It is by no means complete, secure or even totally stable. I need to use it now, so it is as it is.
Javascript code is here and JavaDoc here.
The screen shot below displays some old functionality - not all of which may be currently active.

It has a few book contents loaded to test response times.


Desktop Example

The overall design paradigm is something like an expanded desktop in a browser window. The basic display unit is the Chit which can display any html. Chits are collected together as a ChitSet which has a header bar with a title and some control widgets for opening, closing, navigating and dismissing. The header can also be used to drag the ChitSet about (no, not in iPads yet).
A Chitset can represent a file - typically a paragraph per Chit – or collections of Chits from a search operation (not yet) or dynamic message streams (partly implemented).

Technology
Javascript: Started as a standard OO approach but quickly morphed into using the Document structure to store non-transient data. This gives a single integrated data structure so when the html document, or a branch of it, is saved, the state variables are saved with it in the html. The Javascript uses standard html components for: text display, text entry, radio buttons, checkboxes, sliders, images etc. as seen in the Examples chitset in the image above.

Java Applet: This provides:
  • A dynamic w3c.dom model of the local file structure or a static one for web operation.
  • Xml, html and plain text file handling.
  • Component construction using the csdef data definition language. (fragile and flakey)
  • xPath search of the loaded Documents.
  • Java reflection command structure.
  • File handling and other utility methods.
  • A bridge to TheWordMachine when it's extended to the Java ChitWM package.
  • A tighter development environment for when Javascript doesn't realy cut it.
  • No graphics because I lost patience with Swing – way too fiddley - but it might have its uses. (update: Javascript Canvas much better)

  • PHP: Provides server-side utilities.

    Ajax: Provides Javascript access to PHP.

    TheWordMachine: Will provide a Natural Language command and rule interpreter for a Personal Assistant.

    The csDef data definition language:
    Has the structure of css definitions and more: inheritance, recursion, options, function calls (Java & JS).

    A csDef example:

    // Definition from element specification: tagName.instanceClass#instanceName
    ChitSet { // tagName
    inherit { // inheritance
    1: Chit;
    2: instanceClass;
    }
    ischitset: true;
    setopen: true;
    setExpanded: false;
    chitnum: 0;
    class: instanceClass;
    chitoffsetx: 12;
    chitoffsety: 12;
    numchitsexposed: 15;
    setName: makeSetLabel(instanceName); // Java method call
    id: ChitSet_+stripSpaces(setName); // concatenation and another Java call
    ondblclick: 'ChitEvents.dblClick(event)'; // embedded response for JS
    content { // other values or object defs in form: tag.instanceClass#instanceName
    1: img.labelImg#setName;
    2: img.toggleImgH#setImg;
    3: img.toggleImgV#setImg;
    4: img.closeImg#setImg;
    5: img.infoImg#setImg;
    6: img.ringImg#setImg;
    7: setLabel.chitSet#setName;
    8: NodeList#instanceName or NodeList.instanceClass#instanceName; // alternate values
    }
    maxexposure: maxExposure#instanceName or 501;
    setnum: glob.allChitsets.length; // Javascript post-processing using JS global value
    }

    // Or for a more specific content definition - the stuff between the html tags:
    NodeList.file {
    inherit: NodeList;
    fileStyle: instanceTextstyle;
    // In the next line a TextChit is generated for each paragraph of the file referenced by 'instanceName', or other structures for xml and text files. The same applies to any function returning an array, set, or list.

    content: TextChit.instanceTexttype#selectFileFragments(instanceName);
    }


    Status: The csDef use is still brittle and messy.
    Written Chit definitions (in csDef) will eventually be bypassed in most instances by dragging a copy of a previously defined chit from the ChitSet Examples.
    'Ultimately' the intention is to use TheWordMachine parser to interpret the definitions.