Kirill Simonov avatar Kirill Simonov committed a7d1310

Removed external libraries from the repository.
Added a `dist` makefile target.

Comments (0)

Files changed (123)

+syntax: glob
+build
+.*.sw?
+*.pyc
 HTSQL_HOST?=localhost
 HTSQL_PORT?=8080
 
+JQUERY_VER=1.5.1
+JQUERYUI_VER=1.8.13
+JSONJS_VER=master
+BLOCKUI_VER=master
+JQPLOT_VER=0.9.7r629
+
+JSMIN=python -c 'import sys, jsmin; sys.stdout.write(jsmin.jsmin(sys.stdin.read()))'
+
 demo:
 	python demo/serve.py ${PGSQL_REGRESS_DB} ${HTSQL_HOST} ${HTSQL_PORT}
 
+
+build/json-js:
+	mkdir -p build/json-js
+	git clone https://github.com/douglascrockford/JSON-js build/json-js
+	cd build/json-js; git checkout ${JSONJS_VER}
+
+build/jquery:
+	mkdir -p build/jquery
+	wget -q -O build/jquery/jquery.min.js http://code.jquery.com/jquery-${JQUERY_VER}.min.js
+
+build/jquery-ui:
+	wget -q -P build http://jquery-ui.googlecode.com/files/jquery-ui-${JQUERYUI_VER}.zip
+	unzip -q build/jquery-ui-${JQUERYUI_VER} -d build
+	rm build/jquery-ui-${JQUERYUI_VER}.zip
+	mv build/jquery-ui-${JQUERYUI_VER} build/jquery-ui
+
+build/blockui:
+	mkdir -p build/blockui
+	git clone https://github.com/malsup/blockui build/blockui
+	cd build/blockui; git checkout ${BLOCKUI_VER}
+
+build/jqplot:
+	mkdir -p build/jqplot
+	wget -P build -q --no-check-certificate \
+		http://bitbucket.org/cleonello/jqplot/downloads/jquery.jqplot.${JQPLOT_VER}.tar.gz
+	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
+	mkdir -p build/htraf
+	cp htraf/htraf.js build/htraf
+	cp htraf/jquery.htraf.js build/htraf
+	cp htraf/htraf.plugins.js build/htraf
+	cp htraf/htraf.css build/htraf
+	cp htraf/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
+	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
+
 dist:
-	# Create build directories
 	rm -rf build
-	mkdir -p build/dist build/tmp/htraf
-	mkdir -p build/tmp/htraf/js/lib build/tmp/htraf/css/lib
-	# HTRAF itself
-	cp htraf/htraf.js build/tmp/htraf
-	cp htraf/js/htraf.*.js build/tmp/htraf/js
-	cp htraf/css/htraf*.css build/tmp/htraf/css
-	cp -r htraf/img build/tmp/htraf
-	# JSON-js
-	wget -P build/tmp -q --no-check-certificate \
-		https://raw.github.com/douglascrockford/JSON-js/master/json2.js
-	cp build/tmp/json2.js build/tmp/htraf/js/lib
-	# JQuery
-	wget -P build/tmp -q http://code.jquery.com/jquery-1.4.3.min.js
-	cp build/tmp/jquery-1.4.3.min.js build/tmp/htraf/js/lib
-	# JQPlot
-	wget -P build/tmp -q --no-check-certificate \
-		http://bitbucket.org/cleonello/jqplot/downloads/jquery.jqplot.0.9.7r629.tar.gz
-	mkdir build/tmp/jqplot
-	tar -xz -C build/tmp/jqplot -f build/tmp/jquery.jqplot.0.9.7r629.tar.gz
-	mkdir -p build/tmp/htraf/js/lib/jqplot/plugins
-	cp build/tmp/jqplot/dist/excanvas.min.js build/tmp/htraf/js/lib/jqplot
-	cp build/tmp/jqplot/dist/jquery.jqplot.min.js build/tmp/htraf/js/lib/jqplot
-	cp build/tmp/jqplot/dist/plugins/*.min.js build/tmp/htraf/js/lib/jqplot/plugins
-	cp build/tmp/jqplot/dist/jquery.jqplot.min.css build/tmp/htraf/css/lib
-	# blockUI
-	wget -P build/tmp -q --no-check-certificate \
-		https://raw.github.com/malsup/blockui/master/jquery.blockUI.js
-	cp build/tmp/jquery.blockUI.js build/tmp/htraf/js/lib
-	# JQuery UI
-	wget -P build/tmp -q http://jquery-ui.googlecode.com/files/jquery-ui-1.8.5.zip
-	wget -P build/tmp -q http://jquery-ui.googlecode.com/files/jquery-ui-themes-1.8.5.zip
-	unzip -q build/tmp/jquery-ui-1.8.5.zip -d build/tmp
-	unzip -q build/tmp/jquery-ui-themes-1.8.5.zip -d build/tmp
-	cp build/tmp/jquery-ui-1.8.5/ui/minified/jquery-ui.min.js build/tmp/htraf/js/lib/jquery-ui-1.8.5.custom.min.js
-	cp build/tmp/jquery-ui-themes-1.8.5/themes/base/jquery-ui.css build/tmp/htraf/css/lib/jquery-ui-1.8.5.custom.css
-	cp -r build/tmp/jquery-ui-themes-1.8.5/themes/base/images/ build/tmp/htraf/css/lib
-	# Pack the bundle
-	cd build/tmp; zip -rq ../dist/htraf-bundle.zip htraf
-	rm -rf build/tmp
+	${MAKE} build/htraf
+	cd build; zip -rq htraf-bundle.zip htraf
 

demo/css/htraf-01.css

+/* Reset CSS start */
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
+	margin:0;
+	padding:0;
+}
+table {
+	border-collapse:collapse;
+	border-spacing:0;
+}
+fieldset,img { 
+	border:0;
+}
+address,caption,cite,code,dfn,em,strong,th,var {
+	font-style:normal;
+	font-weight:normal;
+}
+ol,ul {
+	list-style:none;
+}
+caption,th {
+	text-align:left;
+}
+h1,h2,h3,h4,h5,h6 {
+	font-size:100%;
+	font-weight:normal;
+}
+q:before,q:after {
+	content:'';
+}
+abbr,acronym {
+    border:0;
+}
+/* Reset CSS end */
+
+
+body {
+    position: relative;
+    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
+    font-size: 0.9em;
+    padding: 10px;
+}
+
+div.chart {
+    position: absolute;
+    top: 0px;
+    right: 5px;
+    width: 500px;
+    height: 300px;
+    font-size: 1em;
+}
+
+a {
+	color: #069;
+	text-decoration: none;
+	border-bottom: 1px solid #069;
+}
+
+a:hover {
+	border-bottom: 2px solid #069;
+}
+
+h1 {
+    font-weight: bold;
+    font-size: 2em;
+    color: #069;
+}
+
+h2 {
+	margin: 1em 0 0 0;
+	font-weight: bold;
+	color: #069;
+    font-size: 1.4em;
+}
+
+h3 {
+    margin-top: 0.5em;
+    font-weight: bold;
+    font-size: 1.25em;
+    color: #069;
+}
+
+h3 a {
+	color: #069;
+	font-size: 0.8em;
+	font-weight: bold;
+	text-decoration: none;
+	border-bottom: 1px solid #069;
+}
+
+h3 a:hover {
+	border-bottom: 3px solid #069;
+}
+
+.description {
+	color: #555;
+	margin: 0.2em 0 0.5em 0;
+}
+
+p {
+    margin: 0.25em 0;
+    color: #555;
+}
+
+em.htraf, strong.htraf {
+    color: #900;
+    font-weight: bold;
+}
+
+input {
+    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
+    color: #555;
+}
+
+table.htraf {
+    border-left: 2px solid #ddd;
+    border-right: 2px solid #ddd;
+    border-bottom: 2px solid #ddd;
+}
+
+table.htraf th, table td {
+    padding: 4px 6px;
+    font-size: 0.9em;
+    vertical-align: top;
+}
+
+table.htraf th {
+    background: #ddd;
+    font-weight: bold;
+    color: #555;
+}
+
+table.htraf td {
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+}
+
+.htraf-hover {
+    background: #e4f4fc;
+}
+
+.htraf-selected {
+    background: #aecaff;
+}
+
+ul.htraf li {
+	color: #555;
+	padding: 0 0.3em;
+}
+
+/** error **/
+.error {
+	padding: 0.2em;
+    border: 2px solid #c00;
+    background: #fdc;
+}
+
+.error h3 {
+	margin: 0;
+	color: #900;
+}

demo/css/htraf-02.css

+/* Reset CSS start */
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
+	margin:0;
+	padding:0;
+}
+table {
+	border-collapse:collapse;
+	border-spacing:0;
+}
+fieldset,img { 
+	border:0;
+}
+address,caption,cite,code,dfn,em,strong,th,var {
+	font-style:normal;
+	font-weight:normal;
+}
+ol,ul {
+	list-style:none;
+}
+caption,th {
+	text-align:left;
+}
+h1,h2,h3,h4,h5,h6 {
+	font-size:100%;
+	font-weight:normal;
+}
+q:before,q:after {
+	content:'';
+}
+abbr,acronym {
+    border:0;
+}
+/* Reset CSS end */
+
+
+body {
+    position: relative;
+    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
+    font-size: 0.9em;
+    padding: 10px;
+}
+
+div.chart {
+    position: absolute;
+    top: 0px;
+    right: 5px;
+    width: 500px;
+    height: 300px;
+    font-size: 1em;
+}
+
+a {
+	color: #900;
+	text-decoration: none;
+	border-bottom: 1px solid #900;
+}
+
+a:hover {
+	border-bottom: 2px solid #900;
+}
+
+h1 {
+    font-weight: bold;
+    font-size: 2em;
+    color: #900;
+}
+h2 {
+    font-weight: bold;
+    font-size: 1.2em;
+    color: #900;
+}
+
+h3 {
+    margin-top: 0.5em;
+    font-weight: bold;
+    font-size: 1.25em;
+    color: #900;
+}
+
+h3 a {
+	color: #900;
+	font-weight: bold;
+	text-decoration: none;
+	border-bottom: 1px solid #900;
+}
+
+h3 a:hover {
+	border-bottom: 3px solid #900;
+}
+
+.description {
+	color: #555;
+	margin: 0.2em 0 0.5em 0;
+}
+
+p {
+    margin: 0.25em 0;
+    color: #555;
+}
+
+em.htraf, strong.htraf {
+    color: #369;
+    font-weight: bold;
+}
+
+input {
+    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
+    color: #555;
+}
+
+table.htraf {
+    border-left: 2px solid #ddd;
+    border-right: 2px solid #ddd;
+    border-bottom: 2px solid #ddd;
+}
+
+table.htraf th, table td {
+    padding: 4px 6px;
+    font-size: 0.9em;
+    vertical-align: top;
+}
+
+table.htraf th {
+    background: #ddd;
+    font-weight: bold;
+    color: #555;
+}
+
+table.htraf td {
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+}
+
+.htraf-hover {
+    background: #f6ddaf;
+}
+
+.htraf-selected {
+    background: #ffa43f;
+}
+
+ul.htraf li {
+	color: #555;
+	padding: 0 0.3em;
+}
+
+/** error **/
+.error {
+	padding: 0.2em;
+    border: 2px solid #c00;
+    background: #fdc;
+}
+
+.error h3 {
+	margin: 0;
+	color: #900;
+}
+<!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"/>
+</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>
+
+    <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><a href="examples10/basic/htsql_files.html">Basic 2</a></h3>
+    <div class="description">
+        The same as above, but based on *.htsql files.
+    </div>
+
+    <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>
Removed
Old image

htraf/demo/css/htraf-01.css

-/* Reset CSS start */
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
-	margin:0;
-	padding:0;
-}
-table {
-	border-collapse:collapse;
-	border-spacing:0;
-}
-fieldset,img { 
-	border:0;
-}
-address,caption,cite,code,dfn,em,strong,th,var {
-	font-style:normal;
-	font-weight:normal;
-}
-ol,ul {
-	list-style:none;
-}
-caption,th {
-	text-align:left;
-}
-h1,h2,h3,h4,h5,h6 {
-	font-size:100%;
-	font-weight:normal;
-}
-q:before,q:after {
-	content:'';
-}
-abbr,acronym {
-    border:0;
-}
-/* Reset CSS end */
-
-
-body {
-    position: relative;
-    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
-    font-size: 0.9em;
-    padding: 10px;
-}
-
-div.chart {
-    position: absolute;
-    top: 0px;
-    right: 5px;
-    width: 500px;
-    height: 300px;
-    font-size: 1em;
-}
-
-a {
-	color: #069;
-	text-decoration: none;
-	border-bottom: 1px solid #069;
-}
-
-a:hover {
-	border-bottom: 2px solid #069;
-}
-
-h1 {
-    font-weight: bold;
-    font-size: 2em;
-    color: #069;
-}
-
-h2 {
-	margin: 1em 0 0 0;
-	font-weight: bold;
-	color: #069;
-    font-size: 1.4em;
-}
-
-h3 {
-    margin-top: 0.5em;
-    font-weight: bold;
-    font-size: 1.25em;
-    color: #069;
-}
-
-h3 a {
-	color: #069;
-	font-size: 0.8em;
-	font-weight: bold;
-	text-decoration: none;
-	border-bottom: 1px solid #069;
-}
-
-h3 a:hover {
-	border-bottom: 3px solid #069;
-}
-
-.description {
-	color: #555;
-	margin: 0.2em 0 0.5em 0;
-}
-
-p {
-    margin: 0.25em 0;
-    color: #555;
-}
-
-em.htraf, strong.htraf {
-    color: #900;
-    font-weight: bold;
-}
-
-input {
-    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
-    color: #555;
-}
-
-table.htraf {
-    border-left: 2px solid #ddd;
-    border-right: 2px solid #ddd;
-    border-bottom: 2px solid #ddd;
-}
-
-table.htraf th, table td {
-    padding: 4px 6px;
-    font-size: 0.9em;
-    vertical-align: top;
-}
-
-table.htraf th {
-    background: #ddd;
-    font-weight: bold;
-    color: #555;
-}
-
-table.htraf td {
-    border-right: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-}
-
-.htraf-hover {
-    background: #e4f4fc;
-}
-
-.htraf-selected {
-    background: #aecaff;
-}
-
-ul.htraf li {
-	color: #555;
-	padding: 0 0.3em;
-}
-
-/** error **/
-.error {
-	padding: 0.2em;
-    border: 2px solid #c00;
-    background: #fdc;
-}
-
-.error h3 {
-	margin: 0;
-	color: #900;
-}

htraf/demo/css/htraf-02.css

-/* Reset CSS start */
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
-	margin:0;
-	padding:0;
-}
-table {
-	border-collapse:collapse;
-	border-spacing:0;
-}
-fieldset,img { 
-	border:0;
-}
-address,caption,cite,code,dfn,em,strong,th,var {
-	font-style:normal;
-	font-weight:normal;
-}
-ol,ul {
-	list-style:none;
-}
-caption,th {
-	text-align:left;
-}
-h1,h2,h3,h4,h5,h6 {
-	font-size:100%;
-	font-weight:normal;
-}
-q:before,q:after {
-	content:'';
-}
-abbr,acronym {
-    border:0;
-}
-/* Reset CSS end */
-
-
-body {
-    position: relative;
-    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
-    font-size: 0.9em;
-    padding: 10px;
-}
-
-div.chart {
-    position: absolute;
-    top: 0px;
-    right: 5px;
-    width: 500px;
-    height: 300px;
-    font-size: 1em;
-}
-
-a {
-	color: #900;
-	text-decoration: none;
-	border-bottom: 1px solid #900;
-}
-
-a:hover {
-	border-bottom: 2px solid #900;
-}
-
-h1 {
-    font-weight: bold;
-    font-size: 2em;
-    color: #900;
-}
-h2 {
-    font-weight: bold;
-    font-size: 1.2em;
-    color: #900;
-}
-
-h3 {
-    margin-top: 0.5em;
-    font-weight: bold;
-    font-size: 1.25em;
-    color: #900;
-}
-
-h3 a {
-	color: #900;
-	font-weight: bold;
-	text-decoration: none;
-	border-bottom: 1px solid #900;
-}
-
-h3 a:hover {
-	border-bottom: 3px solid #900;
-}
-
-.description {
-	color: #555;
-	margin: 0.2em 0 0.5em 0;
-}
-
-p {
-    margin: 0.25em 0;
-    color: #555;
-}
-
-em.htraf, strong.htraf {
-    color: #369;
-    font-weight: bold;
-}
-
-input {
-    font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, Verdana, sans-serif;
-    color: #555;
-}
-
-table.htraf {
-    border-left: 2px solid #ddd;
-    border-right: 2px solid #ddd;
-    border-bottom: 2px solid #ddd;
-}
-
-table.htraf th, table td {
-    padding: 4px 6px;
-    font-size: 0.9em;
-    vertical-align: top;
-}
-
-table.htraf th {
-    background: #ddd;
-    font-weight: bold;
-    color: #555;
-}
-
-table.htraf td {
-    border-right: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-}
-
-.htraf-hover {
-    background: #f6ddaf;
-}
-
-.htraf-selected {
-    background: #ffa43f;
-}
-
-ul.htraf li {
-	color: #555;
-	padding: 0 0.3em;
-}
-
-/** error **/
-.error {
-	padding: 0.2em;
-    border: 2px solid #c00;
-    background: #fdc;
-}
-
-.error h3 {
-	margin: 0;
-	color: #900;
-}

htraf/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