Kirill Simonov avatar Kirill Simonov committed bf3d72a

Added a sample application to Examples.

Comments (0)

Files changed (3)

demo/htraf/static/index.html

     <link rel="stylesheet" type="text/css" href="css/custom.css"/>
 </head>
 <body>
-    <h3>Select School</h3>
+    <h3>Select a School</h3>
     <select id="school" data-source="/school{code, name}"></select>
     <div class="chart"
         data-source="/program{title, count(student)}
         data-display="chart"
         data-chart-title="Percent of Students by Program"></div>
     <h3>Departments</h3>
-    <p>Filter By Name <input id="department_name"/></p>
+    <p>Filter by name: <input id="department_name"/></p>
     <table id="department" data-hide-first-column="yes" 
         data-source="/department{code, name, school.name}
                      ?school=$school&name~$department_name">
     </table>
     <p>
-        Selected Department: 
+        The selected department: 
         <em data-source="/department{name}?code=$department"></em> <br/>
-        Count of Courses in Selected Department: 
+        The number of courses in the selected department: 
         <strong data-source="/department{count(course)}?code=$department">
         </strong>
     </p>
          +-------------+       +---------+
 
 
-Basic examples
-==============
+Sample application
+==================
+
+The full source code:
+
+.. image:: htraf-screenshot.png
+   :scale: 75%
+   :alt: The HTRAF demo
+   :align: right
+   :target: http://htraf.htsql.org/
+
+.. code-block:: html
+
+    <body>
+        <h3>Select School</h3>
+        <select id="school"
+                data-source="/school{code, name}"/>
+        <div class="chart"
+             data-source="/program{title, count(student)}
+                          ?school=$school&count(student)>0" 
+             data-display="chart"
+             data-chart-title="Percent of Students by Program"/>
+
+        <h3>Departments</h3>
+        <p>Filter by name: <input id="department_name"/></p>
+        <table id="department"
+               data-hide-first-column="yes" 
+               data-source="/department{code, name, school.name}
+                            ?school=$school&name~$department_name"/>
+        <p>
+            The selected department: 
+            <em data-source="/department{name}?code=$department"/>
+            <br/>
+            The number of courses in selected department:
+            <strong data-source="/department{count(course)}
+                                 ?code=$department"/>
+        </p>
+
+        <h3>Courses</h3>
+        <table id="course" 
+               data-source="/course?department=$department"/>
+    </body>
+
+See a live demo at http://htraf.htsql.org/.
+
+
+Basic queries
+=============
 
 
 List all schools
 .. _A6: http://demo.htsql.org/school?exists(program)
 
 
-Advanced examples
-=================
+Advanced queries
+================
 
 
 The number of schools with programs
Add a comment to this file

doc/htraf-screenshot.png

Added
New image
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.