Commits

Kirill Simonov committed beaec72

Cleaned up README, demo, and build process.

Comments (0)

Files changed (31)

 and you don't have to notify anyone which license you are using. You are
 free to use HTRAF in commercial projects as long as the copyright header
 is left intact.
+
+HTRAF includes the following external libraries:
+
+    jQuery JavaScript Library
+    http://jquery.com/
+    Copyright 2011, John Resig
+
+    jQuery UI
+    http://jqueryui.com/
+    Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+
+    jQuery blockUI plugin 
+    http://jquery.malsup.com/block/
+    Copyright (c) 2007-2010 M. Alsup
+
+    jqPlot Charts
+    http://www.jqplot.com/
+    Copyright (c) 2009 - 2010 Chris Leonello
+
+    JSON in JavaScript
+    http://www.json.org/js.html
+    Public Domain
+
 .PHONY: build dist doc clean
 
+HTRAF_VER=2.0.0b1
+
 JQUERY_VER=1.5.1
 JQUERYUI_VER=1.8.13
 JSONJS_VER=master
 
 JSMIN=python -c 'import sys, jsmin; sys.stdout.write(jsmin.jsmin(sys.stdin.read()))'
 
+BUILD=build/htraf-${HTRAF_VER}
+
+dist: build
+	cd build; zip -rq htraf-${HTRAF_VER}.zip htraf-${HTRAF_VER}
+
+build:
+	${MAKE} clean ${BUILD}
+
+doc:
+	mkdir -p build
+	sphinx-build -b html doc build/doc
+
+clean:
+	rm -rf build
+
 build/json-js:
 	mkdir -p build/json-js
 	git clone https://github.com/douglascrockford/JSON-js build/json-js
 	tar -xz -C build/jqplot -f build/jquery.jqplot.${JQPLOT_VER}.tar.gz
 	rm build/jquery.jqplot.${JQPLOT_VER}.tar.gz
 
-build/htraf: build/json-js build/jquery build/jquery-ui build/blockui build/jqplot doc
-	mkdir -p build/htraf
-	cp src/htraf.js build/htraf
-	cp src/jquery.htraf.js build/htraf
-	cp src/htraf.plugins.js build/htraf
-	cp src/htraf.css build/htraf
-	cp src/htraf-load.gif build/htraf
-	mkdir -p build/htraf/lib
-	cat build/json-js/json2.js | ${JSMIN} > build/htraf/lib/json2.min.js
-	cp build/jquery/jquery.min.js build/htraf/lib/jquery.min.js
+${BUILD}: build/json-js build/jquery build/jquery-ui build/blockui build/jqplot doc
+	mkdir -p ${BUILD}/htraf
+	cp README LICENSE *-LICENSE ${BUILD}
+	cp -r demo ${BUILD}
+	cp -r build/doc ${BUILD}
+	cp src/*.js src/*.css src/*.gif ${BUILD}/htraf
+	mkdir -p ${BUILD}/htraf/lib
+	cat build/json-js/json2.js | ${JSMIN} > ${BUILD}/htraf/lib/json2.min.js
+	cp build/jquery/jquery.min.js ${BUILD}/htraf/lib/jquery.min.js
 	cat build/jquery-ui/ui/minified/jquery.ui.core.min.js \
 		build/jquery-ui/ui/minified/jquery.ui.position.min.js \
 		build/jquery-ui/ui/minified/jquery.ui.widget.min.js \
-		> build/htraf/lib/jquery-ui.custom.min.js
-	cat build/blockui/jquery.blockUI.js | ${JSMIN} > build/htraf/lib/jquery.blockUI.min.js
-	cp build/jqplot/dist/excanvas.min.js build/htraf/lib
-	cp build/jqplot/dist/jquery.jqplot.min.js build/htraf/lib
-	cp build/jqplot/dist/plugins/*.min.js build/htraf/lib
-	cp build/jqplot/dist/jquery.jqplot.min.css build/htraf/lib
+		> ${BUILD}/htraf/lib/jquery-ui.custom.min.js
+	cat build/blockui/jquery.blockUI.js | ${JSMIN} \
+		> ${BUILD}/htraf/lib/jquery.blockUI.min.js
+	cp build/jqplot/dist/excanvas.min.js ${BUILD}/htraf/lib
+	cp build/jqplot/dist/jquery.jqplot.min.js ${BUILD}/htraf/lib
+	cp build/jqplot/dist/plugins/*.min.js ${BUILD}/htraf/lib
+	cp build/jqplot/dist/jquery.jqplot.min.css ${BUILD}/htraf/lib
 
-doc:
-	mkdir -p build
-	sphinx-build -b html doc build/htraf/doc
-
-build:
-	${MAKE} clean build/htraf
-
-dist: build
-	cd build; zip -rq htraf-bundle.zip htraf
-
-clean:
-	rm -rf build
-
-HTRAF Installation Instructions
-===============================
+****************************************************
+  HTRAF -- A Rapid Application Framework for HTSQL
+****************************************************
 
-HTSQL 2.x
----------
+HTRAF is a Javascript toolkit for embedding data into HTML pages.  HTRAF
+uses HTSQL to fetch data from relational databases.
 
-1. Download HTSQL 2.0
-    $ hg clone https://zindel@bitbucket.org/prometheus/htsql
+To start using HTRAF, copy the content of `htraf` directory to the root
+of your website and add the script `/htraf/htraf.js` to your HTML pages.
+For more information on HTRAF, see documentation in `doc` directory.
+An example of a dynamic HTRAF page is located in `demo` directory.
 
-2. Install HTSQL
-    $ cd path/to/htsql && python setup.py develop
+    http://htraf.org/
+        HTRAF homepage and documentation
 
-3. Run tests
-    $ cd path/to/htsql && make test-pgsql
+    http://bitbucket.org/prometheus/htraf
+        HTRAF source code
 
-4. Start HTRAF demo server
-    $ make demo
+    http://htsql.org/
+        HTSQL database query language
 
-5. Open http://127.0.0.1/ in your browser
+    irc://irc.freenode.net#htsql
+        IRC chat in #htsql on freenode
 
-6. Have fun!
+    http://lists.htsql.org/mailman/listinfo/htsql-users
+        The mailing list for users of HTSQL and HTRAF
 
 
-HTSQL 1.x
----------
+HTRAF is copyright by Prometheus Research, LLC and released under dual
+MIT/GPL license; see file `LICENSE` for more details.  HTRAF is written
+by Oleksiy Golovko and Owen McGettrick.
 
-1. Download HTSQL
-
-2. Install HTSQL
-   $ cd path/to/htsql && python setup.py develop
-
-3. Run tests
-   $ cd path/to/htsql && make test-pgsql
-
-4. Install HTRAF plugin
-   $ cd plugins && python setup.py develop
-
-5. Start HTRAF demo server
-   $ htsql-ctl serve htsql_regress -P "htraf.HTRAF"
-
-6. Open http://127.0.0.1/-/htraf/index.html in your browser
-
-7. Have fun!

demo/doc.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>HTRAF Documentation</title>
-    <link type="text/css" rel="stylesheet" href="css/htraf-02.css"/>
-    <script language="JavaScript" src="../js/lib/jquery-1.4.3.js"></script>
-    <script language="JavaScript" src="../js/lib/creole.js"></script>
-    <script language="JavaScript">
-        function id(s) {
-            return $.trim(s).toLowerCase().replace(/[^A-Za-z_-]/g, '_');
-        }
-        Parse.Simple.Doc = function(options) {
-            Parse.Simple.Creole.call(this, options);
-                
-            var g = this.grammar;
-            this.grammar.def = {
-                regex: /\`\`(.+?)\`\`/,
-                build: function(node, r, options) {
-                    var uri = '#' + id(r[1]); 
-                    g.namedUri.build.call(this, node, 
-                                          [null, uri, r[1]], options);
-                }
-            };
-
-            this.grammar.li.children.push(this.grammar.def);
-            this.grammar.paragraph.children.push(this.grammar.def);
-
-            this.grammar.root = new this.ruleConstructor(this.grammar.root);
-        }
-        Parse.Simple.Doc.prototype = new Parse.Simple.Creole();
-        Parse.Simple.Doc.prototype.constructor = Parse.Simple.Doc;
-
-        $(function() {
-            $('.creole').each(function() {
-                var data = $(this).text();
-                $(this).text('');
-                var creole = new Parse.Simple.Doc({});
-                creole.parse(this, data);
-            });
-
-            $('h1,h2,h3').each(function() {
-                $(this).attr('id', id($(this).text()));
-            });
-        });
-    </script>
-
-    <style>
-        html, body {
-            width: 100%;
-            height: 100%;
-            padding: 0px;
-        }
-        div.menu {
-            position: absolute;
-            width: 200px;
-            top: 0px;
-            bottom: 0px;
-            left: 0px;
-            overflow: auto;
-            padding-top: 10px;
-            padding-left: 10px;
-        }
-        a {
-            border-bottom-width: 0px;
-        }
-        a:hover {
-            border-bottom-width: 1px;
-        }
-        div.menu ul {
-            margin:0 0 5px 10px;
-        }
-
-        div.doc {
-            position: absolute;
-            left: 220px;
-            right: 10px;
-            bottom: 0px;
-            top: 0px;
-            overflow: auto;
-        }
-        div.doc h1 {
-            margin: 1em 0 0 0;
-        }
-        div.doc h3 {
-            font-size: 1em;
-        }
-        strong {
-            font-weight: bold;
-        }
-        em {
-            font-style: italic;
-            color: #555555;
-        }
-        ol {
-            list-style-type: decimal;
-            list-style-position: inside;
-            color: #555555;
-        }
-        pre {
-            font-family: Monaco, monospace;
-            font-size: 0.9em;
-        }
-    </style>
-</head>
-<body>
-    <div class="menu creole">
-* ``Widgets``
-** ``table``
-** ``select``
-** ``list``
-** ``iframe``
-** ``chart``
-** ``singleValue``
-* ``Attributes``
-** ``data-htsql``
-** ``data-widget``
-** ``data-onchange``
-** ``data-onerror``
-** ``data-onempty``
-** ``data-onbeforeload``
-** ``data-onafterload``
-** ``data-column``
-** ``data-type``
-** ``data-show-title``
-** ``data-title``
-** ``data-legend``
-** ``data-x-vertical``
-** ``data-hide-column-N``
-    </div>
-    <div class="doc creole">
-== Widgets
-Every tag in the HTML document marked with the ``data-htsql`` attribute 
-is considered as //widget//. Each widget is loaded
-with data according to ``data-htsql`` attribute and rendered according to
-data received and ``attributes`` specified. Typically, widget's children are 
-removed, so make sure to not keep any data/markup inside those tags in your
-HTML. 
-
-The type of widget is determined as following:
-
-# ``data-widget`` value if specified;
-# tag name;
-# if nothing of above fits, ``singleValue`` widget is used.
-
-=== table
-HTML &lt;table&gt; with &lt;thead&gt; header and &lt;tbody&gt; content. The
-simplest and typical representation of the query resultset. When row is 
-selected the value of column #0 becomes the value of the whole widget. 
-Optional ``data-hide-column-N`` (N is integer) attributes may be used to hide
-columns. Even column is hidden it is still could be accessed.
-
-**Custom Attributes:** ``data-hide-column-N``
-
-**Example ([[basic/index.html|functional]]): **
-{{{
-<pre>
-    &lt;table id="department"
-        data-htsql="/department{code, name, school.name}
-                     ?school=$school&amp;name~$department_name"&gt;
-    &lt;/table&gt;
-</pre>
-}}}
-
-=== select
-HTML &lt;select&gt; tag. Generates options based on resultset. Each row
-becomes an option, where the first column is its value, the second one is
-its text. In case if resultset has only 1 column - uses its value for both:
-value and text.
-
-**Example ([[basic/index.html|functional]]): **
-{{{
-<pre>
-    &lt;select data-htsql="/school{id(), name}" id="school"&gt;&lt;/select&gt;
-</pre>
-}}}
-
-=== list
-&lt;ul&gt; and &lt;ol&gt; tags. Generates &lt;li&gt; per each row in resultset
-much like ``select`` does: the first column becomes the value, the second
-is used for text (falling back to the first if row length is 1). Note, that 
-items are selectable. 
-
-**Example ([[iframe_list.html|functional]]): **
-{{{
-<pre>
-    &lt;ul data-htsql="/school{id(), name}" id="school"&gt;&lt;/ul&gt;
-</pre>
-}}}
-
-=== iframe
-HTML &lt;iframe&gt; with the //src// attr generated dynamically basing on
-``data-htsql`` specified. 
-
-**Example ([[iframe_list.html|functional]]): **
-{{{
-<pre>
-    &lt;iframe data-htsql="/school{id(), name}" id="school"&gt;&lt;/iframe&gt;
-</pre>
-}}}
-
-=== chart
-HTML &lt;div&gt; tag used as the canvas for drawing charts using the 
-[[http://www.jqplot.com|jqPlot]] library. Note, that element width and
-height should be specified, i.e. there should be some space to draw the chart. 
-At the moment, 4 types of chart are supported: //pie//, //line//, //bar// and 
-//stack//. 
-
-**pie** chart is the simplest one, it uses the resultset of 2 
-columns. The first column is the pie segment identifier (used for legend), 
-the second one is the numeric value, which defines how big the pie segment is.
-
-**bar**, **stack** and **line** charts require the similar 2+ columns 
-resultsets, where the first column represents the X axis (**line** has
-the restriction here: when using it the first column should be either date,
-datetime or numeric). Every following column represents the series of Y values.
-Legend is contructed of column titles starting from the second column. 
-
-
-**Custom Attributes:** ``data-show-title``, ``data-title``, ``data-legend``,
-                       ``data-x-vertical``
-
-**Example ([[chart.html|functional]]): **
-{{{
-<pre>
-    &lt;div style="width: 750px; height: 400px;" 
-         data-htsql="/program{degree^,count(student)}" 
-         data-widget="chart"
-         data-type="pie"&gt;&lt;/div&gt;
-    &lt;div class="chart" 
-        data-htsql="/student{dob.year()^,count(gender='f') as Females,
-                            count(gender='m') as Males}" 
-         data-widget="chart"
-         data-type="bar"&gt;&lt;/div&gt;
-
-</pre>
-}}}
-
-=== singleValue
-
-Could be used with any HTML widget, also used as the fallback, when no widget
-is specified. Takes the value of the first row and first column and replaces
-the tag contents with it.
-
-
-**Example ([[basic/index.html|functional]]): **
-{{{
-<pre>
-    &lt;em data-htsql="/department{name}?code=$department"&gt;&lt;/em&gt;
-</pre>
-}}}
-
-
-== Attributes
-All HTRAF-specific attributes start with ``data-`` prefix. Almost all of them
-are optional (except of ``data-htsql``). Use them to customize widget's 
-behavior and appearance. Note, if you change them using //$(...).attr()// call
-the related widget will be reloaded and/or re-rendered.
-{{{
-<pre>
-</pre>
-}}}
-
-=== data-htsql
-
-* //Required, HTSQL expression or link to .htsql resource//
-* //Widgets: all//
-
-The most important attribute. Actually triggers all further HTRAF processing
-on the HTML tag. Any valid HTSQL expression or a link to //*.htsql// resource
-is permitted there. Please note, that all HTSQL **$variables** will be bound
-to a page elements with the matching identifier. For example, 
-&lt;input id="variables"&gt; would match the previously mentioned variable.
-
-**Example ([[basic/index.html|functional]]): **
-{{{
-<pre>
-    &lt;select data-htsql="/school{id(), name}" id="school"&gt;&lt;/select&gt;
-    &lt;table id="department"
-        data-htsql="/department{code, name, school.name}
-                     ?school=$school"&gt;
-    &lt;/table&gt;
-</pre>
-}}}
-
-Make sure to list all dependent variables in data-htsql when using the 
-//.htsql// resources. Otherwise HTRAF never know how to bind page elements.
-The example would be:
-{{{
-<pre>
-    &lt;select data-htsql="/-/school.htsql" id="school"&gt;&lt;/select&gt;
-    &lt;table id="department"
-        data-htsql="/-/department.htsql?school=$school"&gt;
-    &lt;/table&gt;
-</pre>
-}}}
-
-=== data-widget
-
-* //Optional, String//
-* //Widgets: all(although currently makes sense for 'chart' only) //
-
-Specifies the widget name.
-
-=== data-onchange
-
-* //Optional, String//
-* //Widgets: all//
-
-JavaScript code to be executed when widget's value changes. Inside the 
-attribute //this// points to the DOM element attribute belongs to.
-**Example:**
-{{{
-<pre>
-    &lt;table id="department" data-onchange="alert($(this).val())"
-        data-htsql="/-/department.htsql?school=$school"&gt;
-    &lt;/table&gt;
-</pre>
-}}}
-
-=== data-onerror
-
-* //Optional, String//
-* //Widgets: all//
-
-JavaScript code to be executed when widget's loading produces an error on the
-server (usually means that incorrect HTSQL was specified). Inside the 
-attribute //this// points to the DOM element attribute belongs to, first 
-argument holds the error information.
-**Example:**
-{{{
-<pre>
-    &lt;table id="department" 
-        data-onerror="alert($(this).attr('id') + ' ' + arguments[0].reason)"
-        data-htsql="bad-htsql"&gt;
-    &lt;/table&gt;
-</pre>
-}}}
-
-=== data-empty
-
-* //Optional, String//
-* //Widgets: all//
-
-JavaScript code to be executed when widget is loaded but the resultset is 
-empty. Inside the attribute //this// points to the DOM element attribute 
-belongs to.
-**Example:**
-{{{
-<pre>
-    &lt;table id="department" data-onempty="$(this).hide()"
-        data-htsql="/-/department.htsql?school=$school"&gt;
-    &lt;/table&gt;
-</pre>
-}}}
-
-=== data-onbeforeload
-
-* //Optional, String//
-* //Widgets: all//
-
-JavaScript code to be executed before loading the widget. 
-Inside the attribute //this// points to the DOM element attribute belongs to.
-
-=== data-onafterload
-
-* //Optional, String//
-* //Widgets: all//
-
-JavaScript code to be executed after the widget is loaded. 
-Inside the attribute //this// points to the DOM element attribute belongs to.
-
-=== data-type
-
-* //Optional, Choice ('line', 'bar', 'stack', 'pie')//
-* //Widgets: // ``chart``
-
-Chart type, defaults to 'line'.
-
-=== data-show-title
-
-* //Optional, Boolean ('yes', 'true', 'no', 'false')//
-* //Widgets: // ``chart``
-
-=== data-title
-
-* //Optional, Any//
-* //Widgets: // ``chart``
-
-Title to be shown at the top of the chart. By default shows the HTSQL query.
-
-=== data-legend
-
-* //Optional, Choice ('se', 'ne', 'sw', 'nw', 'no')//
-* //Widgets: // ``chart``
-Chart legend control: 'se' means south-east, 'nw' means north-east etc. 
-'no' means hide the legend entirely. Defaults to 'ne'.
-
-=== data-x-vertical
-
-* //Optional, Boolean ('yes', 'true', 'no', 'false')//
-* //Widgets: // ``chart``
-When set to true, marks on the X axis are shown vertically.
-
-=== data-hide-column-N
-
-* //Optional, Boolean ('yes', 'true', 'no', 'false')//
-* //Widgets: // ``table``
-When set to true, column N is hidden (N starts from 0). 
-
-    </div>
-</body>
-</html>

demo/examples10/basic/count_course.htsql

-/department{count(course)}?code=$department

demo/examples10/basic/course.htsql

-/course?department=$department

demo/examples10/basic/department.htsql

-/department{code, name, school.name}?school=$school&name~$department_name

demo/examples10/basic/department_name.htsql

-/department{name}?code=$department

demo/examples10/basic/htsql_files.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Basic Demo (Select, Table, Single Value) based on
-           *.htsql files </title>
-    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
-    <link type="text/css" rel="stylesheet" href="../../css/htraf-02.css"/> 
-</head>
-<body>
-    <small>
-        <a href="index.html">Same functionality (htsql queries inside HTML)</a>
-    </small>
-    <h3>Select School</h3>
-    <select id="school" data-htsql="school.htsql"></select>
-    <h3>Departments</h3>
-    <p>Filter By Name <input id="department_name"/></p>
-    <table id="department" data-htsql="department.htsql"
-           data-ref="school department_name">
-    </table>
-    <p>
-        Selected Department: 
-        <em data-htsql="department_name.htsql" data-ref="department"></em> 
-        <br/>
-
-        Count of Courses in Selected Department: 
-        <strong data-htsql="count_course.htsql" data-ref="department">
-        </strong>
-    </p>
-    <table id="course" data-htsql="course.htsql" data-ref="department">
-    </table>
-</body>
-</html>

demo/examples10/basic/index.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Basic Demo (Select, Table, Single Value) </title>
-    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
-    <link type="text/css" rel="stylesheet" href="../../css/htraf-02.css"/>
-</head>
-<body>
-    <small>
-        <a href="htsql_files.html">
-            Same functionality (htsql queries are hidden in *.htsql files)
-        </a>
-    </small>
-    <h3>Select School</h3>
-    <select id="school" data-htsql="/school{code, name}"></select>
-    <h3>Departments</h3>
-    <p>Filter By Name <input id="department_name"/></p>
-    <table id="department"
-        data-htsql="/department{code, name, school.name}
-                   ?school=$school&name~$department_name"
-        data-ref="school department_name">
-    </table>
-    <p>
-        <span>Selected Department: </span>
-        <em data-htsql="/department{name}?code=$department"
-            data-ref="department"></em> <br/>
-
-        <span>Count of Courses in Selected Department: </span>
-        <strong data-htsql="/department{count(course)}?code=$department"
-                data-ref="department">
-        </strong>
-    </p>
-    <table id="course" data-htsql="/course?department=$department"
-           data-ref="department">
-    </table>
-</body>
-</html>

demo/examples10/basic/school.htsql

-/school{code, name}

demo/examples10/basic/theming.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Basic Demo (Select, Table, Single Value) </title>
-    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
-    <link type="text/css" rel="stylesheet" href="../../css/htraf-02.css"/>
-    <script language="JavaScript">
-        $(function() {
-            $('a.theme').click(function() {
-                $('a.theme').each(function() {
-                    var id = $(this).attr('id');
-                    if(!id)
-                        return;
-                    $('link[href*="' + id + '"]').remove();
-                });
-                var id = $(this).attr('id');
-                
-                if(id) {
-                    var cssNode = document.createElement('link');
-                        cssNode.type = 'text/css';
-                        cssNode.rel = 'stylesheet';
-                        cssNode.href = '../../css/' + id + '.css';
-                        cssNode.media = 'screen';
-                        cssNode.title = 'dynamicLoadedSheet';
-                        document.getElementsByTagName("head")[0]
-                                .appendChild(cssNode);
-                }
-                
-                return false;
-            }); 
-        });
-    </script>
-</head>
-<body>
-    <small>
-        <strong>Theme: </strong>
-        <a class="theme" id="htraf-02" href="#">Dark</a>
-        <a class="theme" id="htraf-01" href="#">Light</a>
-        <a class="theme" id="" href="#">No Theme</a>
-    </small>
-    <h3>Select School</h3>
-    <select id="school" data-htsql="/school{code, name}"></select>
-    <h3>Departments</h3>
-    <p>Filter By Name <input id="department_name"/></p>
-    <table id="department"
-        data-htsql="/department{code, name, school.name}
-                   ?school=$school&name~$department_name"
-        data-ref="school department_name">
-    </table>
-    <p>
-        <span>Selected Department: </span>
-        <em data-htsql="/department{name}?code=$department"
-            data-ref="department"></em> <br/>
-
-        <span>Count of Courses in Selected Department: </span>
-        <strong data-htsql="/department{count(course)}?code=$department"
-                data-ref="department">
-        </strong>
-    </p>
-    <table id="course" data-htsql="/course?department=$department"
-           data-ref="department">
-    </table>
-</body>
-</html>

demo/examples10/chart.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Built-in chart demo</title>
-    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
-    <style>
-        div.chart {
-            height: 450px;
-        }
-    </style>
-</head>
-<body>
-    <span data-htsql=""></span>
-    <div class="chart" style="width: 750px;" 
-         data-htsql="/program{degree^,count(student)}" 
-         data-widget="chart"
-         data-type="pie"></div>
-    <div class="chart" 
-        data-htsql="/student{dob.year()^,count(gender='f') as Females,
-                            count(gender='m') as Males}" 
-         data-widget="chart"
-         data-type="bar"></div>
-    <div class="chart" 
-        data-htsql="/student{dob.year()^,count(gender='f') as Females,
-                            count(gender='m') as Males}" 
-        data-widget="chart"
-        data-legend="nw"
-        data-title="The same as above but 'stack' chart"
-        data-type="stack"
-        data-x-vertical="yes"></div>
-    <strong>
-        The same as above but 'line' chart with title/legend turned off
-    </strong>
-    <div class="chart" 
-        data-htsql="/student{dob.year()^,count(gender='f') as Females,
-                            count(gender='m') as Males}" 
-        data-widget="chart"
-        data-show-title="no"
-        data-legend="no"
-        data-type="line"></div>
-    <div class="chart" 
-        data-htsql="/student{dob^,count(gender='f') as Females,
-                            count(gender='m') as Males}" 
-        data-widget="chart"
-        data-type="line"></div>
-
-    <h2>Chart depends on $var</h2>
-    <select id="school" data-htsql="/school"></select>
-    <div class="chart" style="width: 450px;" 
-         data-htsql="/program{degree^,count(student)}
-         ?school=$school&count(student)>0" 
-         data-ref="school"
-         data-widget="chart"
-         data-type="pie"></div>
-    
-</body>
-</html>

demo/examples10/error/attr_handler.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Errors</title>
-    <script type="text/javascript">
-            function onerror(info) {
-                var $el = $(info.element).next();
-                if(!$el.is('.error'))
-                    $el = $('<div class="error"></div>')
-                        .insertAfter(info.element);
-                var reason = $('<pre/>').text(info.reason);
-                var detail = $('<pre/>').text(info.detail);
-                $el.append('<h3>Custom handler for prev. element</h3>')
-                    .append(reason).append('<br>').append(detail);
-            } 
-    </script>
-    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
-    <link type="text/css" rel="stylesheet" href="../../css/htraf-02.css"/> 
-</head>
-<body>
-    <h3>Select School</h3>
-    <select id="school" data-htsql="/school{code, name}"></select>
-    <div>Selected School: 
-        <span data-htsql="/school{na me}?code=$school"
-              data-onerror="onerror(arguments[1]);"
-              data-ref="school"></span>
-    </div>
-    <h3>Departments</h3>
-    <p>Filter By Name <input id="department_name"/></p>
-    <table id="department"
-        data-htsql="/department{code, name, school.name}
-                   ?school=$school&name~$department_name"
-        data-ref="school department_name">
-    </table>
-    <p>
-        Selected Department: 
-        <em data-htsql="/department{name}?code=$department"
-            data-ref="department"></em> <br/>
-        Count of Courses in Selected Department: 
-        <strong data-htsql="department_name.htsql"
-                data-ref="department">
-        </strong>
-    </p>
-</body>
-</html>

demo/examples10/error/custom_handler.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Errors</title>
-    <script type="text/javascript">
-        function onerror(e, info) {
-            var $el = $(info.element).next();
-            if(!$el.is('.error'))
-                $el = $('<div class="error"></div>')
-                    .insertAfter(info.element);
-            var reason = $('<pre/>').text(info.reason);
-            var detail = $('<pre/>').text(info.detail);
-            $el.append('<h3>Previous element has triggered an error</h3>')
-                .append(reason).append('<br>').append(detail);
-        } 
-    </script>
-    <script type="text/javascript" 
-            src="/-/htraf/htraf.js"
-            data-onerror="onerror.apply(null, arguments);"></script>
-    <link type="text/css" rel="stylesheet" href="../../css/htraf-02.css"/> 
-</head>
-<body>
-    <h3>Select School</h3>
-    <select id="school" data-htsql="/school{code, name}"></select>
-    <div>Selected School: 
-        <span data-htsql="/school{na me}?code=$school"
-              data-ref="school"></span>
-    </div>
-    <h3>Departments</h3>
-    <p>Filter By Name <input id="department_name"/></p>
-    <table id="department"
-        data-htsql="/department{code, name, school.name}
-                    ?school=$school&name~$department_name"
-        data-ref="school department_name">
-    </table>
-    <p>
-        Selected Department: 
-        <em data-htsql="/department{name}?code=$department"
-            data-ref="department"></em> <br/>
-        Count of Courses in Selected Department: 
-        <strong data-htsql="department_name.htsql"
-                data-ref="department">
-        </strong>
-    </p>
-</body>
-</html>

demo/examples10/error/department_name.htsql

-/departm ent{name}?code=$department

demo/examples10/error/index.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Errors</title>
-    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
-    <link type="text/css" rel="stylesheet" href="../../css/htraf-02.css"/>
-</head>
-<body>
-    <h3>Select School</h3>
-    <select id="school" data-htsql="/school{code, name}"></select>
-    <div>Selected School: 
-        <span data-htsql="/school{na me}?code=$school"
-              data-ref="school"></span>
-    </div>
-    <h3>Departments</h3>
-    <p>Filter By Name <input id="department_name"/></p>
-    <table id="department"
-        data-htsql="/department{code, name, school.name}
-                    ?school=$school&name~$department_name"
-        data-ref="school department_name">
-    </table>
-    <p>
-        Selected Department: 
-        <em data-htsql="/department{name}?code=$department"
-            data-ref="department"></em> <br/>
-        Count of Courses in Selected Department: 
-        <strong data-htsql="department_name.htsql"
-                data-ref="department">
-        </strong>
-    </p>
-</body>
-</html>

demo/examples10/iframe_list.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Ul/Ol and Iframe simple demo</title>
-    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
-    <link type="text/css" rel="stylesheet" href="../css/htraf-02.css"/> 
-    <style>
-        iframe {
-            width: 450px;
-            height: 350px;
-        }
-    </style>
-</head>
-<body>
-    <h1>List of Schools (click on item to select)</h1>
-    <ul data-htsql="/school{id(), name}" id="school"></ul>
-    <iframe data-htsql="/program{title, count(student)}
-                         ?count(student)>0&school=$school
-                        /chart(type='pie', legend='ne', 
-                        title='Students By Program')"
-            data-ref="school">
-    </iframe>
-    <script data-htsql="/department{1^,count(course)}?school=$school"
-            data-ref="school">
-    </script>
-</body>
-</html>

demo/examples10/param.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Query string parameters handling</title>
-    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
-    <link type="text/css" rel="stylesheet" href="../css/htraf-02.css"/> 
-</head>
-<body>
-    <h1>Use query string to get more departments (?school=bus for example)</h1>
-
-    <h3>Select School</h3>
-    <select id="school" data-htsql="/school{code, name}"></select>
-
-    <h3>Departments</h3>
-    <table id="department"
-        data-htsql="/department{code, name, school.name}
-                   ?school=$school|school.name~$_school"
-        data-ref="school _school">
-    </table>
-</body>
-</html>

demo/examples10/slots.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>On-page linking and slots demo</title>
-    <script type="text/javascript" src="/-/htraf/htraf.js"></script>
-    <link type="text/css" rel="stylesheet" href="../css/htraf-02.css"/> 
-</head>
-<body>
-    <h3>Select School</h3>
-    <select id="school" data-htsql="/school{code, name}"></select>
-    <h3>Departments</h3>
-    <script id="department" data-htsql="/department?school=$school"
-            data-ref="school"></script>
-    <table id="department_table" data-bind="department">
-    </table>
-    <p>
-        <span>Selected Department: </span>
-        <em data-bind="department_table" data-slot="name"></em>
-        <script id="d" data-bind="department_table" data-slot="code"></script>
-        <br/>
-        <span>Count of Courses in Selected Department: </span>
-        <strong data-htsql="/department{count(course)}?code=$d" data-ref="d">
-        </strong>
-    </p>
-
-</body>
-</html>

demo/examples20/cors.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>Getting data from the custom server (CORS)</title>
-    <script type="text/javascript" 
-            src="../../htraf.js"
-            data-htsql-version="2"
-            data-htsql-prefix="/@">
-    </script>
-    <script data-server="edgar" data-htsql-prefix="http://htsql.org/@edgar">
-    </script>
-    <link type="text/css" rel="stylesheet" href="../css/htraf-02.css"/> 
-</head>
-<body>
-    <strong>Data is taken from the <a href="http://htsql.org/@edgar">EDGAR</a> 
-        database.</strong><br/><br/>
-    Filter by Name: <input type="text" id="name" value="ALE"/><br/>
-    <table data-htsql="/company?name~$name" data-ref="name" 
-           data-server="edgar"/>
-</body>
-</html>

demo/examples20/index.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title> HTRAF Demo </title>
-    <script type="text/javascript" 
-            src="../../htraf.js"
-            data-htsql-version="2"
-            data-htsql-prefix="/@">
-    </script>
-    <link rel="stylesheet" type="text/css" href="../css/htraf-02.css"/>
-</head>
-<body>
-    <h3>Select a School</h3>
-    <select id="school"
-        data-htsql="/school{code, name}?exists(department)">
-    </select>
-    <div style="width: 500px; height: 350px;" 
-        data-htsql="/program{title, count(student)}
-                    ?school_code=$school&count(student)>0" 
-        data-ref="school"
-        data-type="pie"
-        data-widget="chart"
-        data-title="Percent of Students by Program"></div>
-    <h3>Departments</h3>
-    <p>Filter by name: <input id="department_name"/></p>
-    <table id="department" data-hide-column-0="yes" 
-        data-htsql="/department{code, name, school.name}
-                    ?school_code=$school&name~$department_name"
-        data-ref="school department_name">
-    </table>
-    <p>
-        The selected department: 
-        <em data-htsql="/department{name}?code=$department"
-            data-ref="department"></em> <br/>
-        The number of courses in the selected department: 
-        <strong data-htsql="/department{count(course)}?code=$department"
-                data-ref="department">
-        </strong>
-    </p>
-    <h3>Courses</h3>
-    <table id="course" data-htsql="/course?department_code=$department"
-           data-ref="department">
-    </table>
-</body>
-</html>

demo/examples20/pycon-us-2011.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title> HTRAF Demo </title>
-    <script type="text/javascript" 
-            src="../../htraf.js"
-            data-htsql-version="2"
-            data-htsql-prefix="/@">
-    </script>
-    <link rel="stylesheet" type="text/css" href="../css/htraf-02.css"/>
-</head>
-<body>
- <h3>Select a School</h3>
- <select id="school" 
-   data-htsql="/school{code, name}?exists(department)">
- </select>
- <h3>Departments</h3>
- <p>Filter by name: <input id="dept_name"/></p>
- <table id="department"
-   data-htsql="/department{code, name, school.name}
-               ?school_code=$school&name~$dept_name"></table>
- <p>The number of courses in this department: 
-   <strong data-htsql="/department{count(course)}
-                       ?code=$department"></strong>
- </p>
- <h3>Courses</h3>
- <table id="course" 
-   data-htsql="/course?department_code=$department"></table>
-</body>
-</html>
 <!DOCTYPE html>
 <html>
+  
 <head>
-    <title>Test/Demo Index</title>
-    <link type="text/css" rel="stylesheet" href="css/htraf-02.css"/>
+    <title> HTRAF Demo </title>
+    <script type="text/javascript" 
+            src="../htraf/htraf.js"
+            data-htsql-version="2"
+            data-htsql-prefix="http://demo.htsql.org">
+    </script>
+    <link rel="stylesheet" type="text/css" href="css/htraf-02.css"/>
 </head>
+
 <body>
-    <h1>HTRAF</h1>
-    <p>
-    The idea behind the HTSQL Rapid Application Framework (HTRAF) is to let 
-    you take any HTSQL url that you can run in browser url and embed it in an 
-    html page as a building block of an application.  RAF also provides 
-    simple methods for linking these HTSQL data-enabled objects together to 
-    form more complex applications.
-    RAF is a client-side javascript library that is included with the 
-    commercial HTSQL product. It is a plugin that can be turned on or off.
-    All you need to get started is to simply include the following Javascript
-    file to your page:
-    <pre>
-        &lt;script type="text/javascript" src="/-/htraf/htraf.js"&gt;&lt;/script&gt;
-    </pre>
-    </p>
-    <p>
 
-    For more details please check examples or <a href="doc.html">documentation</a>.
-    </p>
+<h3>Select a School</h3>
+<select id="school"
+        data-htsql="/school{code, name}?exists(department)">
+</select>
+<div style="width: 500px; height: 350px;"
+     data-htsql="/program{title, count(student)}
+                         ?school_code=$school&count(student)>0"
+     data-ref="school"
+     data-type="pie"
+     data-widget="chart"
+     data-title="Percent of Students by Program">
+</div>
 
-    <h2>Examples</h2>
-    <h3><a href="examples10/basic/index.html">Basic 1</a></h3>
-    <div class="description">
-        Demonstrates the basic functionality: select, table, single value.
-    </div>
+<h3>Departments</h3>
+<p>Filter by name: <input id="department_name"/></p>
+<table id="department" data-hide-column-0="yes"
+       data-htsql="/department{code, name, school.name}
+                              ?school_code=$school&name~$department_name"
+       data-ref="school department_name">
+</table>
+<p>
+    The selected department:
+    <em data-htsql="/department{name}?code=$department"
+        data-ref="department">
+    </em>
+    <br/>
+    The number of courses in the selected department:
+    <strong data-htsql="/department{count(course)}?code=$department"
+            data-ref="department">
+    </strong>
+</p>
 
-    <h3><a href="examples10/basic/htsql_files.html">Basic 2</a></h3>
-    <div class="description">
-        The same as above, but based on *.htsql files.
-    </div>
+</body>
 
-    <h3><a href="examples10/basic/theming.html">Theming</a></h3>
-    <div class="description">
-        Technically the same as above, demonstrates easy switching between
-        CSS themes.
-    </div>
-
-    <h3><a href="examples10/iframe_list.html">Iframe and UL</a></h3>
-    <div class="description">
-        &lt;iframe&gt; and &lt;ul&gt;.
-    </div>
-
-    <h3><a href="examples10/chart.html">Chart</a></h3>
-    <div class="description">
-        Embeddable charts.
-    </div>
-
-    <h3><a href="examples10/error/index.html">Errors handling 1</a></h3>
-    <div class="description">
-        Default Error Handler
-    </div>
-
-    <h3><a href="examples10/error/custom_handler.html">Errors handling 2</a></h3>
-    <div class="description">
-        Page-wide custom error handler
-    </div>
-
-    <h3><a href="examples10/error/attr_handler.html">Errors handling 2</a></h3>
-    <div class="description">
-        Custom error handler specified inside the attribute
-    </div>
-
-    <h3><a href="examples10/slots.html">On-page widgets linking</a></h3>
-    <div class="description">
-        On-page widgets linking and data-slot functionality.
-    </div>
-    <h3><a href="examples10/param.html">Query string parameters</a></h3>
-    <div class="description">
-        <em>?var=value</em> is accessible inside the <em>data-htsql</em> as 
-        $_var. If _var value is not provided but _var is listed in 
-        <em>data-ref</em> - null is assummed.
-    </div>
-</body>
 </html>

demo/index20.html

-<!DOCTYPE html>
-<html>
-<head>
-    <title>HTRAF</title>
-    <link type="text/css" rel="stylesheet" href="css/htraf-02.css"/>
-</head>
-<body>
-    <h1>HTRAF</h1>
-    <p>
-    The idea behind the HTSQL Rapid Application Framework (HTRAF) is to let 
-    you take any HTSQL url that you can run in browser url and embed it in an 
-    html page as a building block of an application.  RAF also provides 
-    simple methods for linking these HTSQL data-enabled objects together to 
-    form more complex applications.
-    RAF is a client-side javascript library that is included with the 
-    commercial HTSQL product. It is a plugin that can be turned on or off.
-    All you need to get started is to simply include the following Javascript
-    file to your page:
-    <pre>
-        &lt;script type="text/javascript"&gt;
-        HTRAF = {
-            prefix: '/htraf', // path to HTRAF files
-            htsqlPrefix: '/@' // path to htsql
-        };
-        &lt;/script&gt;
-        &lt;script type="text/javascript" src="/htraf/htraf2.js"&gt;
-        &lt;/script&gt;
-    </pre>
-    </p>
-    <p>
-
-    For more details please check 
-    <a href="examples20/index.html">example</a> and 
-    <a href="doc.html">documentation</a>.
-    </p>
-
-</body>
-</html>

demo/serve.py

-
-import sys
-import os.path
-import mimetypes
-import wsgiref.simple_server, wsgiref.util
-from htsql import HTSQL
-
-
-class Application(object):
-
-    static = 'htraf'
-    prefix = '/@/'
-    index = 'index20.html'
-
-    def __init__(self, htsql):
-        self.htsql = htsql
-
-    def __call__(self, environ, start_response):
-        if environ['REQUEST_METHOD'] != 'GET':
-            start_response("400 Bad Request",
-                           [('Content-Type', 'text/plain')])
-            return ["Only GET requests are supported.\n"]
-        path = environ['PATH_INFO']
-        if path.startswith(self.prefix):
-            wsgiref.util.shift_path_info(environ)
-            return self.htsql(environ, start_response)
-        if path in ('/index.html', '/'):
-            _environ = dict(environ.items()
-                            + [('PATH_INFO', '/demo/index.html')])
-            uri = wsgiref.util.request_uri(_environ)
-            start_response('303 See Other', [('Location', uri)])
-            return []
-        if path == '/demo/index.html':
-            path = '/demo/index20.html'
-        root = os.path.abspath(self.static)
-        path = os.path.abspath(os.path.join(self.static, path[1:]))
-        if not (path == root or path.startswith(root+os.path.sep)) \
-        or path[len(root):].startswith('/demo/examples10'):
-                start_response("404 Not Found",
-                               [('Content-Type', 'text/plain')])
-                return ["Invalid path.\n"]
-        if os.path.isdir(path) and \
-                os.path.exists(os.path.join(path, self.index)):
-            path = os.path.join(path, self.index)
-        if not os.path.isfile(path):
-            start_response("404 Not Found",
-                           [('Content-Type', 'text/plain')])
-            return ["File not found.\n"]
-        mimetype = mimetypes.guess_type(path)[0]
-        if mimetype is None:
-            mimetype = 'application/octet-stream'
-        stream = open(path, 'rb')
-        data = stream.read()
-        stream.close()
-        start_response('200 OK',
-                       [('Content-Type', mimetype),
-                        ('Content-Length', str(len(data)))])
-        return [data]
-
-    @classmethod
-    def main(cls):
-        if len(sys.argv) != 4:
-            return cls.usage()
-        db, host, port = sys.argv[1:]
-        port = int(port)
-        htsql = HTSQL(db)
-        app = cls(htsql)
-        print >>sys.stderr, "Starting the HTRAF demo on http://%s:%s/" \
-                            % (host, port)
-        httpd = wsgiref.simple_server.make_server(host, port, app)
-        httpd.serve_forever()
-
-    @classmethod
-    def usage(cls):
-        return "Usage: %s DB HOST PORT" % sys.argv[0]
-
-
-if __name__ == '__main__':
-    sys.exit(Application.main())
-
-
        :hide:
 
         <script type="text/javascript"
-            src="../htraf.js"
+            src="../htraf/htraf.js"
             data-htsql-version="2"
             data-htsql-prefix="http://demo.htsql.org">
         </script>
+/*
+ * HTRAF Toolkit
+ * Copyright (c) 2011 Prometheus Research
+ * Released under dual MIT/GPL license; see `LICENSE` for details
+ */
+
 .htraf-selected {
     background: #888888;
 }
+/*
+ * HTRAF Toolkit
+ * Copyright (c) 2011 Prometheus Research
+ * Released under dual MIT/GPL license; see `LICENSE` for details
+ */
+
 (function() {
 
 var attrs = null, scripts = document.getElementsByTagName('script');
+/*
+ * HTRAF Toolkit
+ * Copyright (c) 2011 Prometheus Research
+ * Released under dual MIT/GPL license; see `LICENSE` for details
+ */
+
 (function($, undefined) {
 
 $.htraf.plugin.table = {
+/*
+ * HTRAF Toolkit
+ * Copyright (c) 2011 Prometheus Research
+ * Released under dual MIT/GPL license; see `LICENSE` for details
+ */
+
 (function($, undefined) {
 
 // {{{ Setting up the base htraf parameters