You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@click.apache.org by sa...@apache.org on 2009/01/18 00:48:37 UTC

svn commit: r735361 [1/2] - in /incubator/click/trunk/tools/docbook: ./ src/ src/css/ src/css/html/ src/docbook/ src/docbook/click/ src/images/ src/images/introduction/ src/styles/ src/styles/html/ src/styles/pdf/

Author: sabob
Date: Sat Jan 17 15:48:36 2009
New Revision: 735361

URL: http://svn.apache.org/viewvc?rev=735361&view=rev
Log:
initial docbook import

Added:
    incubator/click/trunk/tools/docbook/README.txt
    incubator/click/trunk/tools/docbook/build.xml
    incubator/click/trunk/tools/docbook/project.properties
    incubator/click/trunk/tools/docbook/src/
    incubator/click/trunk/tools/docbook/src/css/
    incubator/click/trunk/tools/docbook/src/css/html/
    incubator/click/trunk/tools/docbook/src/css/html/stylesheet.css
    incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.css
    incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.js
    incubator/click/trunk/tools/docbook/src/docbook/
    incubator/click/trunk/tools/docbook/src/docbook/click/
    incubator/click/trunk/tools/docbook/src/docbook/click/ClickManual.xml
    incubator/click/trunk/tools/docbook/src/images/
    incubator/click/trunk/tools/docbook/src/images/LICENSE.txt
    incubator/click/trunk/tools/docbook/src/images/click-logo.png   (with props)
    incubator/click/trunk/tools/docbook/src/images/introduction/
    incubator/click/trunk/tools/docbook/src/images/introduction/advanced-form.png   (with props)
    incubator/click/trunk/tools/docbook/src/images/introduction/advanced-table.png   (with props)
    incubator/click/trunk/tools/docbook/src/images/introduction/simple-form-error.png   (with props)
    incubator/click/trunk/tools/docbook/src/images/introduction/simple-form-success.png   (with props)
    incubator/click/trunk/tools/docbook/src/images/introduction/simple-form.png   (with props)
    incubator/click/trunk/tools/docbook/src/images/introduction/simple-table.png   (with props)
    incubator/click/trunk/tools/docbook/src/styles/
    incubator/click/trunk/tools/docbook/src/styles/html/
    incubator/click/trunk/tools/docbook/src/styles/html/custom.xsl
    incubator/click/trunk/tools/docbook/src/styles/html/titlepage.xml
    incubator/click/trunk/tools/docbook/src/styles/pdf/
    incubator/click/trunk/tools/docbook/src/styles/pdf/custom.xsl
    incubator/click/trunk/tools/docbook/src/styles/pdf/titlepage.xml

Added: incubator/click/trunk/tools/docbook/README.txt
URL: http://svn.apache.org/viewvc/incubator/click/trunk/tools/docbook/README.txt?rev=735361&view=auto
==============================================================================
--- incubator/click/trunk/tools/docbook/README.txt (added)
+++ incubator/click/trunk/tools/docbook/README.txt Sat Jan 17 15:48:36 2009
@@ -0,0 +1,107 @@
+BEST PRACTICE
+=============
+
+# Soft page break: Add soft breaks before sections and programlisting descriptions
+e.g.
+
+  <?dbfo-need height="2in" ?>
+  <section id="section-hello-world">
+
+This will ensure that the <section> will be forced to the next page if less
+than 2 inches available on the current page. This alleviates the problem where
+the section title is displayed at the bottom of the page but the actual content
+only starts on the next page, which looks awkward.
+
+Another example:
+
+  <?dbfo-need height="2in" ?>
+  <para>Next we would have a page template:</para>
+  <programlisting>
+  ...
+  </programlisting>
+
+The snippet above will ensure that the paragraph (together with the programlisting)
+will be forced to the next page if less than 2 inches is available. This removes
+the problem where the program listing description is at the bottom of one page
+and the program listing only starts on the next page by itself.
+
+CHANGELOG
+=========
+
+--------------------------------------------------------------------------------
+
+Added a Code Syntax Highlighter to HTML generator.
+
+Changes made to docs/src/styles/html/titlepage.xml
+ See the section <!-- CLICK HIGHLIGHTER CHANGES START --> in that file
+
+--------------------------------------------------------------------------------
+
+JAI
+
+install JAI for pdf image rendering from Sun:
+
+https://jai.dev.java.net/binary-builds.html#Stable_builds_1.1.3
+
+--------------------------------------------------------------------------------
+
+Reduced PDF font-size for examples.
+
+Changes made to
+
+docs/src/styles/pdf/custom.xls
+  See the section <!-- CLICK FONT CHANGES START --> in that file
+
+--------------------------------------------------------------------------------
+
+# Updated to FOP 0.95. Changes needed to be made to
+
+build-docbook.xml
+ See the section <!-- CLICK FOP 0.95 CHANGES START --> in that file
+docs/src/styles/pdf/custom.xls
+  See the section <!-- CLICK FOP 0.95 CHANGES START --> in that file
+
+added new libs:
+  batik-all-1.7.jar
+  fop.jar
+  commons-io.jar
+  commons-logging.jar
+  xmlgraphics-commons-1.3.1.jar
+
+--------------------------------------------------------------------------------
+
+The generated PDF has a common problem in that there is no control over page
+breaks. For example say you have a description and code listing below, the PDF
+generator don't care if the description is at the end of the page and the code listing
+on the start of the next. However it will be better if the description and code listing
+goes together on the same page. Thus the description should be moved to the top of
+the next together with the code listing. One solution is to add a soft break. Here
+one can add some markup which will force a section to break to the next page. A soft
+page break provides a "hint" to the PDF generator to only break to the next page
+upon a certain condition e.g. only break if less than 2inches are left on the page.
+
+Soft breaks provide some protection against further editing of the document at a later
+stage.
+
+For pagebreaking use: <?dbfo-need height="2in" ?>
+
+The above basically states that there should be at least 2 inches left
+at the bottom of the page for the content to be added. If more than 2 inches is left,
+render the content. If less than 2 inches is available, the page must break and the
+content should be moved to the next page.
+
+e.g:
+  <para>Some text in a paragraph</para>
+
+  <!-- We would like to have the description and code listing on the same page,
+       so we add a soft page break (2 inches) as shown below -->
+  <?dbfo-need height="2in" ?>
+
+  <para>The following code snippet illustrates the technique.</para>
+
+  <programlisting># Some sample code</programlisting>
+
+For further info see:
+  http://www.sagehill.net/docbookxsl/PageBreaking.html
+
+--------------------------------------------------------------------------------
\ No newline at end of file

Added: incubator/click/trunk/tools/docbook/build.xml
URL: http://svn.apache.org/viewvc/incubator/click/trunk/tools/docbook/build.xml?rev=735361&view=auto
==============================================================================
--- incubator/click/trunk/tools/docbook/build.xml (added)
+++ incubator/click/trunk/tools/docbook/build.xml Sat Jan 17 15:48:36 2009
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<!--
+NOTE: This build file depends on the Velocity Docbook Framework and won't
+work unless that framework is installed. Set the property 'dbf.basedir' in
+project.properties to refer to the installation directory before using this
+script.
+-->
+<project name="click-docbook" default="all" basedir=".">
+
+    <!-- Load our properties -->
+    <property file="project.properties"/>
+
+    <!-- Some sanity checks to ensure docbook is setup correctly -->
+    <available file="${dbf.basedir}" property="isDBFAvail"/>
+    <fail message="The Docbook framework is not installed correctly. The specified
+Docbook installation refers to the folder, '${dbf.basedir}', which does not exist.
+Set the property 'dbf.basedir' in project.properties to the correct Docbook installation.">
+        <condition>
+            <or>
+                <isfalse value="${isDBFAvail}"/>
+            </or>
+        </condition>
+    </fail>
+
+    <available file="${dbf.basedir}/fop-lib/fop.jar" property="isFop095Avail"/>
+    <fail message="The JAR '${dbf.basedir}/fop-lib/fop.lib' is not available. To resolve this,
+download the FOP 0.95 distribution and add the new jars to the folder ${dbf.basedir}/fop-lib.">
+        <condition>
+            <or>
+                <isfalse value="${isFop095Avail}"/>
+            </or>
+        </condition>
+    </fail>
+
+    <import file="${dbf.basedir}/build-docbook.xml"/>
+    
+    <property name="docbook.dir" value="click"/>
+    <property name="docbook.file" value="ClickManual"/>
+
+  <!-- ======================================================================== -->
+  <!-- ==                                                                    == -->
+  <!-- == Build all the Velocity Docbook Documentation                       == -->
+  <!-- ==                                                                    == -->
+  <!-- ======================================================================== -->
+    <target name="all" description="--> Build all documentation">
+
+    <!-- Build the Users Guide -->
+        <ant antfile="${dbf.basedir}/build-docbook.xml" target="html">
+            <property name="docbook.dir" value="${docbook.dir}"/>
+            <property name="docbook.file" value="${docbook.file}"/>
+        </ant>
+
+        <ant antfile="${dbf.basedir}/build-docbook.xml" target="htmlsingle">
+            <property name="docbook.dir" value="${docbook.dir}"/>
+            <property name="docbook.file" value="${docbook.file}"/>
+        </ant>
+
+        <antcall target="pdf"/>
+
+        <delete quiet="true" dir="${target.dir}/${docbook.dir}/tmp"/>
+
+        <!--
+            Add IE Mark of the Web to each html page.
+            NB: The MARK_OF_THE_WEB comment must end with a newline!
+        -->
+        <replace dir="${target.dir}/${docbook.dir}">
+            <include name="**/*.html"/>
+            <replacetoken>&lt;!-- MARK_OF_THE_WEB --&gt;</replacetoken>
+            <replacevalue>&lt;!-- saved from url=(0014)about:internet --&gt;
+            </replacevalue>
+        </replace>
+    
+    <!--<fixcrlf srcdir="target/click" includes="**/*.html" eol="crlf" /> -->
+    </target>
+
+  <!-- ======================================================================== -->
+  <!-- ==                                                                    == -->
+  <!-- == Create the PDF documentation                                       == -->
+  <!-- ==                                                                    == -->
+  <!-- ======================================================================== -->
+
+    <taskdef name="fop"
+         classname="org.apache.fop.tools.anttasks.Fop">
+        <classpath>
+            <fileset dir="${dbf.basedir}/fop-lib">
+                <include name="*.jar"/>
+            </fileset>
+           
+        </classpath>
+    </taskdef>
+
+    <target name="pdf" description="Generates a single PDF file" depends="prepare">
+        <available file="${dbf.basedir}/fop-lib/fop.jar" property="isFop095Avail"/>
+        <fail message="The ${dbf.basedir}/fop-lib/fop.lib JAR is not available. To resolve this,
+download the FOP 0.95 distribution and add the new jars to the folder ${dbf.basedir}/fop-lib.">
+            <condition>
+                <or>
+                    <isfalse value="${isFop095Avail}"/>
+                </or>
+            </condition>
+        </fail>
+
+        <transform type="pdf" target="tmp" title="pdf" xsl="fo" dir="${docbook.dir}" file="${docbook.file}"/>
+
+        <mkdir dir="target/${docbook.dir}/pdf"/>
+
+        <fop format="application/pdf"
+            basedir="${src.dir}"
+            fofile="${pdf.target.file}.xml"
+            outfile="target/${docbook.dir}/pdf/${docbook.file}.pdf" />
+    </target>
+
+  <!-- ======================================================================== -->
+  <!-- ==                                                                    == -->
+  <!-- == Clean up the target directory                                      == -->
+  <!-- ==                                                                    == -->
+  <!-- ======================================================================== -->
+    <target name="clean"
+          description="--> Delete temporary and distribution directories for docs">
+        <ant antfile="${dbf.basedir}/build-docbook.xml" target="clean"/>
+    </target>
+</project>

Added: incubator/click/trunk/tools/docbook/project.properties
URL: http://svn.apache.org/viewvc/incubator/click/trunk/tools/docbook/project.properties?rev=735361&view=auto
==============================================================================
--- incubator/click/trunk/tools/docbook/project.properties (added)
+++ incubator/click/trunk/tools/docbook/project.properties Sat Jan 17 15:48:36 2009
@@ -0,0 +1,22 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+
+# Basedir for the docbook framework
+dbf.basedir = ../dbf
+
+# The size of the PDF pages.
+paper.type= Letter

Added: incubator/click/trunk/tools/docbook/src/css/html/stylesheet.css
URL: http://svn.apache.org/viewvc/incubator/click/trunk/tools/docbook/src/css/html/stylesheet.css?rev=735361&view=auto
==============================================================================
--- incubator/click/trunk/tools/docbook/src/css/html/stylesheet.css (added)
+++ incubator/click/trunk/tools/docbook/src/css/html/stylesheet.css Sat Jan 17 15:48:36 2009
@@ -0,0 +1,261 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+html {
+    padding:        0pt;
+    margin:         0pt;
+}
+
+body {
+    margin-top:     1em;
+    margin-bottom:  1em;
+    margin-left:    10%;
+    margin-right:   10%;
+    
+    font-family:    verdana,arial,helvetica,lucida-sans,sans-serif;
+    font-size:      12px;
+}
+
+div {
+    margin:         0pt;
+}
+
+p {
+    text-align:     justify;
+    margin-bottom:  .6em;
+    line-height:    1.2;
+    font-size:      12px;
+}
+
+hr {
+    margin-top:     .6em;
+    margin-bottom:  .6em;
+    margin-left:    0pt;
+    margin-right:   0pt;
+    border:         1px solid gray;
+    background:     gray;
+}
+
+h1,h2,h3,h4,h5 {
+    color:          #000000;
+}
+
+a {
+   text-decoration: underline;
+}
+
+a:hover {
+   text-decoration: underline;
+}
+
+h1,h2,h3,h4,h5 {
+    line-height:    1.3;
+    margin-top:     1.5em;
+    font-family:    Arial, Sans-serif;
+}
+
+h1.title {
+    text-align:     left;
+
+    margin-top:     2em;
+    margin-bottom:  2em;
+    margin-left:    0pt;
+    margin-right:   0pt;
+    color:          #000080;
+}
+
+h2.subtitle, h3.subtitle {
+    text-align:     left;
+    margin-top:     2em;
+    margin-bottom:  2em;
+    text-transform: uppercase;
+}
+
+h3.author, p.othercredit {
+    font-size:      0.9em;
+    font-weight:    normal;
+    font-style:     oblique;
+    text-align:     left;
+    color:          #525D76;
+}
+
+div.titlepage {
+}
+
+div.section {
+}
+
+
+div.authorgroup
+{
+    text-align:     left;
+    margin-bottom:  3em;
+    display:        block;
+}
+
+div.toc, div.list-of-examples, div.list-of-figures {
+    font-size:      0.8em;
+    margin-bottom:  3em;
+}
+
+
+div.itemizedlist {
+    margin-top:     0.5em;
+    margin-bottom:  0.5em;
+}
+
+ol,ul {
+}
+
+li {
+}
+
+pre {
+    margin:         .75em 0;
+    line-height:    1.0;
+    color:          black;
+}
+
+pre.programlisting {
+    font-size:      9pt;
+    padding:        5pt 2pt;
+    border:         1pt solid black;
+    background:     #eeeeee;
+}
+
+div.table {
+    margin:         1em;
+    padding:        0.5em;
+    text-align:     center;
+}
+
+div.table table {
+    display:        block;
+}
+
+div.table td {
+    padding-right:  5px;
+    padding-left:   5px;
+}
+
+div.table p.title {
+    text-align:     center;
+    margin-left:    5%;
+    margin-right:   5%;
+}
+
+p.releaseinfo, .copyright {
+    font-size:      0.7em;
+    text-align:     left;
+    margin:         0px;
+    padding:        0px;
+}
+
+div.note, div.important, div.example, div.informalexample, div.tip, div.caution {
+    margin:         1em;
+    padding:        0.5em;
+    border:         1px solid gray;
+    background-color: #f8f8e0;
+}
+
+div.important th, div.note th, div.tip th {
+    text-align:     left;
+    border-bottom:  solid 1px gray;
+}
+
+div.navheader, div.navheader table {
+    font-family:    sans-serif;
+    font-size:      12px;
+}
+
+div.navfooter, div.navfooter table {
+    font-family:    sans-serif;
+    font-size:      12px;
+}
+
+div.figure {
+    text-align:     center;
+    margin-top:     1em;
+    margin-bottom:  1em;
+}
+
+div.figure p.title {
+    text-align:     center;
+    margin-left:    15%;
+    margin-right:   15%;
+}
+
+div.example p.title {
+    margin-top:     0em;
+    margin-bottom:  0.6em;
+    text-align:     left;
+    padding-bottom: 0.4em;
+    border-bottom:  solid 1px gray;
+}
+
+div.figure img {
+    border:         1px solid gray;
+    padding:        0.5em;
+    margin:         0.5em;
+}
+
+div.revhistory {
+    font-size:      0.8em;
+    width:          90%;
+    margin-left:    5%;
+    margin-top:     3em;
+    margin-bottom:  3em;
+}
+
+div.revhistory table {
+    font-family:    sans-serif;
+    font-size:      12px;
+	border-collapse: collapse;
+}
+
+div.revhistory table tr {
+	border:         solid 1px gray;
+}
+
+div.revhistory table th {
+	border: none;
+}
+
+div.literallayout {
+    background-color: #FAFAFA;
+    border: 1px solid #AAAAAA;
+}
+
+code.filename, code.filename span.pln {
+}
+
+code.varname, code.varname span.pln {
+    color: blue;
+}
+
+span.symbol, span.symbol span.pln {
+    color: red;
+}
+
+code.computeroutput {
+    background-color: #FFFFC0;
+    border: 1px solid #A7BCD6;
+    margin: 0.5em;
+    padding: 0.5em;
+}
\ No newline at end of file

Added: incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.css
URL: http://svn.apache.org/viewvc/incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.css?rev=735361&view=auto
==============================================================================
--- incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.css (added)
+++ incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.css Sat Jan 17 15:48:36 2009
@@ -0,0 +1,38 @@
+.str{color:#2A00FF;}
+.kwd{color:#7F0055;
+    font-weight:bold;}
+.com{color:#3F7F5F;}
+.typ{color:#000;}
+.lit{color:#066;}
+.pun{color:#660;}
+.pln{color:#000;}
+.tag{color:#000099;
+    font-weight:bold;}
+.atn{color:#009900;}
+.atv{color:#000;}
+.dec{color:#606;}
+
+pre.programlisting{
+    padding:1em;
+    border:1px solid #888;
+    overflow:auto;
+    text-align: left;
+    line-height: normal;
+}
+
+@media print{
+    .str{color:#2A00FF;}
+    .kwd{color:#7F0055;
+        font-weight:bold;}
+    .com{color:#3F7F5F;
+        font-style:italic;}
+    .typ{color:#000;
+        font-weight:bold;}
+    .lit{color:#044;}
+    .pun{color:#440;}
+    .pln{color:#000;}
+    .tag{color:#000099;
+        font-weight:bold;}
+    .atn{color:#009900;}
+    .atv{color:#000;}
+}
\ No newline at end of file

Added: incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.js
URL: http://svn.apache.org/viewvc/incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.js?rev=735361&view=auto
==============================================================================
--- incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.js (added)
+++ incubator/click/trunk/tools/docbook/src/css/html/syntax-highlighter.js Sat Jan 17 15:48:36 2009
@@ -0,0 +1,1006 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * The lexer should work on a number of languages including C and friends,
+ * Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles.
+ * It works passably on Ruby, PHP and Awk and a decent subset of Perl, but,
+ * because of commenting conventions, doesn't work on Smalltalk, Lisp-like, or
+ * CAML-like languages.
+ *
+ * If there's a language not mentioned here, then I don't know it, and don't
+ * know whether it works.  If it has a C-like, Bash-like, or XML-like syntax
+ * then it should work passably.
+ *
+ * Usage:
+ * 1) include this source file in an html page via
+ * <script type="text/javascript" src="/path/to/prettify.js"></script>
+ * 2) define style rules.  See the example page for examples.
+ * 3) mark the <pre> and <code> tags in your source with class=programlisting.
+ *    You can also use the (html deprecated) <xmp> tag, but the pretty printer
+ *    needs to do more substantial DOM manipulations to support that, so some
+ *    css styles may not be preserved.
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in.
+ *
+ * Change log:
+ * cbeust, 2006/08/22
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ */
+
+var PR_keywords = {};
+/** initialize the keyword list for our target languages. */
+(function () {
+  var CPP_KEYWORDS = 'abstract bool break case catch char class const ' +
+    'const_cast continue default delete deprecated dllexport dllimport do ' +
+    'double dynamic_cast else enum explicit extern false float for friend ' +
+    'goto if inline int long mutable naked namespace new noinline noreturn ' +
+    'nothrow novtable operator private property protected public register ' +
+    'reinterpret_cast return selectany short signed sizeof static ' +
+    'static_cast struct switch template this thread throw true try typedef ' +
+    'typeid typename union unsigned using declaration, directive uuid ' +
+    'virtual void volatile while typeof';
+  var CSHARP_KEYWORDS = 'as base by byte checked decimal delegate descending ' +
+    'event finally fixed foreach from group implicit in interface internal ' +
+    'into is lock null object out override orderby params readonly ref sbyte ' +
+    'sealed stackalloc string select uint ulong unchecked unsafe ushort var';
+  var JAVA_KEYWORDS = 'package synchronized boolean implements import throws ' +
+    'instanceof transient extends final strictfp native super';
+  var JSCRIPT_KEYWORDS = 'debugger export function with NaN Infinity';
+  var PERL_KEYWORDS = 'require sub unless until use elsif BEGIN END';
+  var PYTHON_KEYWORDS = 'and assert def del elif except exec global lambda ' +
+    'not or pass print raise yield False True None';
+  var RUBY_KEYWORDS = 'then end begin rescue ensure module when undef next ' +
+    'redo retry alias defined';
+  var SH_KEYWORDS = 'done fi';
+
+  var KEYWORDS = [CPP_KEYWORDS, CSHARP_KEYWORDS, JAVA_KEYWORDS,
+                  JSCRIPT_KEYWORDS, PERL_KEYWORDS, PYTHON_KEYWORDS,
+                  RUBY_KEYWORDS, SH_KEYWORDS];
+  for (var k = 0; k < KEYWORDS.length; k++) {
+    var kw = KEYWORDS[k].split(' ');
+    for (var i = 0; i < kw.length; i++) {
+      if (kw[i]) { PR_keywords[kw[i]] = true; }
+    }
+  }
+}).call(this);
+
+// token style names.  correspond to css classes
+/** token style for a string literal */
+var PR_STRING = 'str';
+/** token style for a keyword */
+var PR_KEYWORD = 'kwd';
+/** token style for a comment */
+var PR_COMMENT = 'com';
+/** token style for a type */
+var PR_TYPE = 'typ';
+/** token style for a literal value.  e.g. 1, null, true. */
+var PR_LITERAL = 'lit';
+/** token style for a punctuation string. */
+var PR_PUNCTUATION = 'pun';
+/** token style for a punctuation string. */
+var PR_PLAIN = 'pln';
+
+/** token style for an sgml tag. */
+var PR_TAG = 'tag';
+/** token style for a markup declaration such as a DOCTYPE. */
+var PR_DECLARATION = 'dec';
+/** token style for embedded source. */
+var PR_SOURCE = 'src';
+/** token style for an sgml attribute name. */
+var PR_ATTRIB_NAME = 'atn';
+/** token style for an sgml attribute value. */
+var PR_ATTRIB_VALUE = 'atv';
+
+/** the number of characters between tab columns */
+var PR_TAB_WIDTH = 8;
+
+// some string utilities
+function PR_isWordChar(ch) {
+  return (ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z');
+}
+
+/** Splice one array into another.
+  * Like the python <code>
+  * container[containerPosition:containerPosition + countReplaced] = inserted
+  * </code>
+  * @param {Array} inserted
+  * @param {Array} container modified in place
+  * @param {Number} containerPosition
+  * @param {Number} countReplaced
+  */
+function PR_spliceArrayInto(
+    inserted, container, containerPosition, countReplaced) {
+  inserted.unshift(containerPosition, countReplaced || 0);
+  try {
+    container.splice.apply(container, inserted);
+  } finally {
+    inserted.splice(0, 2);
+  }
+}
+
+/** a set of tokens that can precede a regular expression literal in javascript.
+  * http://www.mozilla.org/js/language/js20/rationale/syntax.html has the full
+  * list, but I've removed ones that might be problematic when seen in languages
+  * that don't support regular expression literals.
+  *
+  * <p>Specifically, I've removed any keywords that can't precede a regexp
+  * literal in a syntactically legal javascript program, and I've removed the
+  * 'in' keyword since it's not a keyword in many languages, and might be used
+  * as a count of inches.
+  * @private
+  */
+var REGEXP_PRECEDER_PATTERN = (function () {
+    var preceders = [
+        '!', '!=', '!==', '#', '%', '%=', '&', '&&', '&&=',
+        '&=', '(', '*', '*=', /* '+', */ '+=', ',', /* '-', */ '-=',
+        '->', /*'.', '..', '...', handled below */ '/', '/=', ':', '::', ';',
+        '<', '<<', '<<=', '<=', '=', '==', '===', '>',
+        '>=', '>>', '>>=', '>>>', '>>>=', '?', '@', '[',
+        '^', '^=', '^^', '^^=', '{', '|', '|=', '||',
+        '||=', '~', 'break', 'case', 'continue', 'delete',
+        'do', 'else', 'finally', 'instanceof',
+        'return', 'throw', 'try', 'typeof'
+        ];
+    var pattern = '(?:' +
+      '(?:(?:^|[^0-9\.])\\.{1,3})|' +  // a dot that's not part of a number
+      '(?:(?:^|[^\\+])\\+)|' +  // allow + but not ++
+      '(?:(?:^|[^\\-])-)'  // allow - but not --
+      ;
+    for (var i = 0; i < preceders.length; ++i) {
+      var preceder = preceders[i];
+      if (PR_isWordChar(preceder.charAt(0))) {
+        pattern += '|\\b' + preceder;
+      } else {
+        pattern += '|' + preceder.replace(/([^=<>:&])/g, '\\$1');
+      }
+    }
+    pattern += '|^)\\s*$';  // matches at end, and matches empty string
+    return new RegExp(pattern);
+    // CAVEAT: this does not properly handle the case where a regular expression
+    // immediately follows another since a regular expression may have flags
+    // for case-sensitivity and the like.  Having regexp tokens adjacent is not
+    // valid in any language I'm aware of, so I'm punting.
+    // TODO: maybe style special characters inside a regexp as punctuation.
+  })();
+
+// Define regexps here so that the interpreter doesn't have to create an object
+// each time the function containing them is called.
+// The language spec requires a new object created even if you don't access the
+// $1 members.
+var pr_amp = /&/g;
+var pr_lt = /</g;
+var pr_gt = />/g;
+var pr_quot = /\"/g;
+/** like textToHtml but escapes double quotes to be attribute safe. */
+function PR_attribToHtml(str) {
+  return str.replace(pr_amp, '&amp;')
+    .replace(pr_lt, '&lt;')
+    .replace(pr_gt, '&gt;')
+    .replace(pr_quot, '&quot;');
+}
+
+/** escapest html special characters to html. */
+function PR_textToHtml(str) {
+  return str.replace(pr_amp, '&amp;')
+    .replace(pr_lt, '&lt;')
+    .replace(pr_gt, '&gt;');
+}
+
+
+var pr_ltEnt = /&lt;/g;
+var pr_gtEnt = /&gt;/g;
+var pr_aposEnt = /&apos;/g;
+var pr_quotEnt = /&quot;/g;
+var pr_ampEnt = /&amp;/g;
+/** unescapes html to plain text. */
+function PR_htmlToText(html) {
+  var pos = html.indexOf('&');
+  if (pos < 0) { return html; }
+  // Handle numeric entities specially.  We can't use functional substitution
+  // since that doesn't work in older versions of Safari.
+  // These should be rare since most browsers convert them to normal chars.
+  for (--pos; (pos = html.indexOf('&#', pos + 1)) >= 0;) {
+    var end = html.indexOf(';', pos);
+    if (end >= 0) {
+      var num = html.substring(pos + 3, end);
+      var radix = 10;
+      if (num && num.charAt(0) == 'x') {
+        num = num.substring(1);
+        radix = 16;
+      }
+      var codePoint = parseInt(num, radix);
+      if (!isNaN(codePoint)) {
+        html = (html.substring(0, pos) + String.fromCharCode(codePoint) +
+                html.substring(end + 1));
+      }
+    }
+  }
+
+  return html.replace(pr_ltEnt, '<')
+    .replace(pr_gtEnt, '>')
+    .replace(pr_aposEnt, "'")
+    .replace(pr_quotEnt, '"')
+    .replace(pr_ampEnt, '&');
+}
+
+/** is the given node's innerHTML normally unescaped? */
+function PR_isRawContent(node) {
+  return 'XMP' == node.tagName;
+}
+
+var PR_innerHtmlWorks = null;
+function PR_getInnerHtml(node) {
+  // inner html is hopelessly broken in Safari 2.0.4 when the content is
+  // an html description of well formed XML and the containing tag is a PRE
+  // tag, so we detect that case and emulate innerHTML.
+  if (null === PR_innerHtmlWorks) {
+    var testNode = document.createElement('PRE');
+    testNode.appendChild(
+        document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));
+    PR_innerHtmlWorks = !/</.test(testNode.innerHTML);
+  }
+
+  if (PR_innerHtmlWorks) {
+    var content = node.innerHTML;
+    // XMP tags contain unescaped entities so require special handling.
+    if (PR_isRawContent(node)) {
+      content = PR_textToHtml(content);
+    }
+    return content;
+  }
+
+  var out = [];
+  for (var child = node.firstChild; child; child = child.nextSibling) {
+    PR_normalizedHtml(child, out);
+  }
+  return out.join('');
+}
+
+/** walks the DOM returning a properly escaped version of innerHTML.
+  */
+function PR_normalizedHtml(node, out) {
+  switch (node.nodeType) {
+    case 1:  // an element
+      var name = node.tagName.toLowerCase();
+      out.push('\074', name);
+      for (var i = 0; i < node.attributes.length; ++i) {
+        var attr = node.attributes[i];
+        if (!attr.specified) { continue; }
+        out.push(' ');
+        PR_normalizedHtml(attr, out);
+      }
+      out.push('>');
+      for (var child = node.firstChild; child; child = child.nextSibling) {
+        PR_normalizedHtml(child, out);
+      }
+      if (node.firstChild || !/^(?:br|link|img)$/.test(name)) {
+        out.push('<\/', name, '>');
+      }
+      break;
+    case 2: // an attribute
+      out.push(node.name.toLowerCase(), '="', PR_attribToHtml(node.value), '"');
+      break;
+    case 3: case 4: // text
+      out.push(PR_textToHtml(node.nodeValue));
+      break;
+  }
+}
+
+/** returns a function that expand tabs to spaces.  This function can be fed
+  * successive chunks of text, and will maintain its own internal state to
+  * keep track of how tabs are expanded.
+  * @return {function (plainText : String) : String } a function that takes
+  *   plain text and return the text with tabs expanded.
+  * @private
+  */
+function PR_tabExpander(tabWidth) {
+  var SPACES = '                ';
+  var charInLine = 0;
+
+  return function (plainText) {
+    // walk over each character looking for tabs and newlines.
+    // On tabs, expand them.  On newlines, reset charInLine.
+    // Otherwise increment charInLine
+    var out = null;
+    var pos = 0;
+    for (var i = 0, n = plainText.length; i < n; ++i) {
+      var ch = plainText.charAt(i);
+
+      switch (ch) {
+        case '\t':
+          if (!out) { out = []; }
+          out.push(plainText.substring(pos, i));
+          // calculate how much space we need in front of this part
+          // nSpaces is the amount of padding -- the number of spaces needed to
+          // move us to the next column, where columns occur at factors of
+          // tabWidth.
+          var nSpaces = tabWidth - (charInLine % tabWidth);
+          charInLine += nSpaces;
+          for (; nSpaces >= 0; nSpaces -= SPACES.length) {
+            out.push(SPACES.substring(0, nSpaces));
+          }
+          pos = i + 1;
+          break;
+        case '\n':
+          charInLine = 0;
+          break;
+        default:
+          ++charInLine;
+      }
+    }
+    if (!out) { return plainText; }
+    out.push(plainText.substring(pos));
+    return out.join('');
+  };
+}
+
+// The below pattern matches one of the following
+// (1) /[^<]+/ : A run of characters other than '<'
+// (2) /<!--.*?-->/: an HTML comment
+// (3) /<!\[CDATA\[.*?\]\]>/: a cdata section
+// (3) /<\/?[a-zA-Z][^>]*>/ : A probably tag that should not be highlighted
+// (4) /</ : A '<' that does not begin a larger chunk.  Treated as 1
+var pr_chunkPattern =
+  /(?:[^<]+|<!--[\s\S]*?-->|<!\[CDATA\[([\s\S]*?)\]\]>|<\/?[a-zA-Z][^>]*>|<)/g;
+var pr_commentPrefix = /^<!--/;
+var pr_cdataPrefix = /^<\[CDATA\[/;
+var pr_brPrefix = /^<br\b/i;
+
+/** split markup into chunks of html tags (style null) and
+  * plain text (style {@link #PR_PLAIN}), converting tags which are significant
+  * for tokenization (<br>) into their textual equivalent.
+  *
+  * @param {String} s html where whitespace is considered significant.
+  * @return {Object} source code and extracted tags.
+  * @private
+  */
+function PR_extractTags(s) {
+
+  // since the pattern has the 'g' modifier and defines no capturing groups,
+  // this will return a list of all chunks which we then classify and wrap as
+  // PR_Tokens
+  var matches = s.match(pr_chunkPattern);
+  var sourceBuf = [];
+  var sourceBufLen = 0;
+  var extractedTags = [];
+  if (matches) {
+    for (var i = 0, n = matches.length; i < n; ++i) {
+      var match = matches[i];
+      if (match.length > 1 && match.charAt(0) === '<') {
+        if (pr_commentPrefix.test(match)) { continue; }
+        if (pr_cdataPrefix.test(match)) {
+          // strip CDATA prefix and suffix.  Don't unescape since it's CDATA
+          sourceBuf.push(match.substring(9, match.length - 3));
+          sourceBufLen += match.length - 12;
+        } else if (pr_brPrefix.test(match)) {
+          // <br> tags are lexically significant so convert them to text.
+          // This is undone later.
+          // <br> tags are lexically significant 
+          sourceBuf.push('\n');
+          sourceBufLen += 1;
+        } else {
+          extractedTags.push(sourceBufLen, match);
+        }
+      } else {
+        var literalText = PR_htmlToText(match);
+        sourceBuf.push(literalText);
+        sourceBufLen += literalText.length;
+      }
+    }
+  }
+  return { source: sourceBuf.join(''), tags: extractedTags };
+}
+
+/** Given triples of [style, pattern, context] returns a lexing function,
+  * The lexing function interprets the patterns to find token boundaries and
+  * returns a decoration list of the form
+  * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+  * where index_n is an index into the sourceCode, and style_n is a style
+  * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+  * all characters in sourceCode[index_n-1:index_n].
+  *
+  * The stylePatterns is a list whose elements have the form
+  * [style : String, pattern : RegExp, context : RegExp, shortcut : String].
+  &
+  * Style is a style constant like PR_PLAIN.
+  *
+  * Pattern must only match prefixes, and if it matches a prefix and context is
+  * null or matches the last non-comment token parsed, then that match is
+  * considered a token with the same style.
+  *
+  * Context is applied to the last non-whitespace, non-comment token recognized.
+  *
+  * Shortcut is an optional string of characters, any of which, if the first
+  * character, gurantee that this pattern and only this pattern matches.
+  *
+  * @param {Array} shortcutStylePatterns patterns that always start with
+  *   a known character.  Must have a shortcut string.
+  * @param {Array} fallthroughStylePatterns patterns that will be tried in order
+  *   if the shortcut ones fail.  May have shortcuts.
+  *
+  * @return {function (sourceCode : String) -> Array.<Number|String>} a function
+  *   that takes source code and a list of decorations to append to.
+  */
+function PR_createSimpleLexer(shortcutStylePatterns,
+                              fallthroughStylePatterns) {
+  var shortcuts = {};
+  (function () {
+    var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+    for (var i = allPatterns.length; --i >= 0;) {
+      var patternParts = allPatterns[i];
+      var shortcutChars = patternParts[3];
+      if (shortcutChars) {
+        for (var c = shortcutChars.length; --c >= 0;) {
+          shortcuts[shortcutChars.charAt(c)] = patternParts;
+        }
+      }
+    }
+  })();
+
+  var nPatterns = fallthroughStylePatterns.length;
+
+  return function (sourceCode, opt_basePos) {
+    opt_basePos = opt_basePos || 0;
+    var decorations = [opt_basePos, PR_PLAIN];
+    var lastToken = '';
+    var pos = 0;  // index into sourceCode
+    var tail = sourceCode;
+
+    while (tail.length) {
+      var style;
+      var token = null;
+
+      var patternParts = shortcuts[tail.charAt(0)];
+      if (patternParts) {
+        var match = tail.match(patternParts[1]);
+        token = match[0];
+        style = patternParts[0];
+      } else {
+        for (var i = 0; i < nPatterns; ++i) {
+          patternParts = fallthroughStylePatterns[i];
+          var contextPattern = patternParts[2];
+          if (contextPattern && !contextPattern.test(lastToken)) {
+            // rule can't be used
+            continue;
+          }
+          var match = tail.match(patternParts[1]);
+          if (match) {
+            token = match[0];
+            style = patternParts[0];
+            break;
+          }
+        }
+
+        if (!token) {  // make sure that we make progress
+          style = PR_PLAIN;
+          token = tail.substring(0, 1);
+        }
+      }
+
+      decorations.push(opt_basePos + pos, style);
+      pos += token.length;
+      tail = tail.substring(token.length);
+      if (style !== PR_COMMENT && /\S/.test(token)) { lastToken = token; }
+    }
+    return decorations;
+  };
+}
+
+var PR_C_STYLE_STRING_AND_COMMENT_LEXER = PR_createSimpleLexer([
+    [PR_STRING,  /^\'(?:[^\\\']|\\[\s\S])*(?:\'|$)/, null, "'"],
+    [PR_STRING,  /^\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)/, null, '"'],
+    [PR_STRING,  /^\`(?:[^\\\`]|\\[\s\S])*(?:\`|$)/, null, '`']
+    ], [
+    [PR_PLAIN,   /^(?:[^\'\"\`\/\#]+)/, null, ' \r\n'],
+    [PR_COMMENT, /^#[^\r\n]*/, null, '#'],
+    [PR_COMMENT, /^\/\/[^\r\n]*/, null],
+    [PR_STRING,  /^\/(?:[^\\\*\/]|\\[\s\S])+(?:\/|$)/, REGEXP_PRECEDER_PATTERN],
+    [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]
+    ]);
+/** splits the given string into comment, string, and "other" tokens.
+  * @param {String} sourceCode as plain text
+  * @return {Array.<Number|String>} a decoration list.
+  * @private
+  */
+function PR_splitStringAndCommentTokens(sourceCode) {
+  return PR_C_STYLE_STRING_AND_COMMENT_LEXER(sourceCode);
+}
+
+var PR_C_STYLE_LITERAL_IDENTIFIER_PUNC_RECOGNIZER = PR_createSimpleLexer([], [
+    [PR_PLAIN,       /^\s+/, null, ' \r\n'],
+    // TODO(mikesamuel): recognize non-latin letters and numerals in identifiers
+    [PR_PLAIN,       /^[a-z_$@][a-z_$@0-9]*/i, null],
+    // A hex number
+    [PR_LITERAL,     /^0x[a-f0-9]+[a-z]/i, null],
+    // An octal or decimal number, possibly in scientific notation
+    [PR_LITERAL,     /^(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?[a-z]*/i,
+     null, '123456789'],
+    [PR_PUNCTUATION, /^[^\s\w\.$@]+/, null]
+    // Fallback will handle decimal points not adjacent to a digit
+    ]);
+    
+/** splits plain text tokens into more specific tokens, and then tries to
+  * recognize keywords, and types.
+  * @private
+  */
+function PR_splitNonStringNonCommentTokens(source, decorations) {
+  for (var i = 0; i < decorations.length; i += 2) {
+    var style = decorations[i + 1];
+    if (style === PR_PLAIN) {
+      var start = decorations[i];
+      var end = i + 2 < decorations.length ? decorations[i + 2] : source.length;
+      var chunk = source.substring(start, end);
+      var subDecs = PR_C_STYLE_LITERAL_IDENTIFIER_PUNC_RECOGNIZER(chunk, start);
+      for (var j = 0, m = subDecs.length; j < m; j += 2) {
+        var subStyle = subDecs[j + 1];
+        if (subStyle === PR_PLAIN) {
+          var subStart = subDecs[j];
+          var subEnd = j + 2 < m ? subDecs[j + 2] : chunk.length;
+          var token = source.substring(subStart, subEnd);
+          if (token == '.') {
+            subDecs[j + 1] = PR_PUNCTUATION;
+          } else if (token in PR_keywords) {
+            subDecs[j + 1] = PR_KEYWORD;
+          } else if (/^@?[A-Z][A-Z$]*[a-z][A-Za-z$]*$/.test(token)) {
+            // classify types and annotations using Java's style conventions
+            subDecs[j + 1] = token.charAt(0) == '@' ? PR_LITERAL : PR_TYPE;
+          }
+        }
+      }
+      PR_spliceArrayInto(subDecs, decorations, i, 2);
+      i += subDecs.length - 2;
+    }
+  }
+  return decorations;
+}
+
+var PR_MARKUP_LEXER = PR_createSimpleLexer([], [
+    [PR_PLAIN,       /^[^<]+/, null],
+    [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/, null],
+    [PR_COMMENT,     /^<!--[\s\S]*?(?:-->|$)/, null],
+    [PR_SOURCE,      /^<\?[\s\S]*?(?:\?>|$)/, null],
+    [PR_SOURCE,      /^<%[\s\S]*?(?:%>|$)/, null],
+    [PR_SOURCE,
+     // Tags whose content is not escaped, and which contain source code.
+     /^<(script|style|xmp)\b[^>]*>[\s\S]*?<\/\1\b[^>]*>/i, null],
+    [PR_TAG,         /^<\/?\w[^<>]*>/, null]
+    ]);
+// Splits any of the source|style|xmp entries above into a start tag,
+// source content, and end tag.
+var PR_SOURCE_CHUNK_PARTS = /^(<[^>]*>)([\s\S]*)(<\/[^>]*>)$/;
+/** split markup on tags, comments, application directives, and other top level
+  * constructs.  Tags are returned as a single token - attributes are not yet
+  * broken out.
+  * @private
+  */
+function PR_tokenizeMarkup(source) {
+  var decorations = PR_MARKUP_LEXER(source);
+  for (var i = 0; i < decorations.length; i += 2) {
+    if (decorations[i + 1] === PR_SOURCE) {
+      var start = decorations[i];
+      var end = i + 2 < decorations.length ? decorations[i + 2] : source.length;
+      // Split out start and end script tags as actual tags, and leave the body
+      // with style SCRIPT.
+      var sourceChunk = source.substring(start, end);
+      var match = (sourceChunk.match(PR_SOURCE_CHUNK_PARTS)
+                   //|| sourceChunk.match(/^(<[?%])([\s\S]*)([?%]>)$/)
+                   );
+      if (match) {
+        decorations.splice(
+            i, 2,
+            start, PR_TAG,  // the open chunk
+            start + match[1].length, PR_SOURCE,
+            start + match[1].length + (match[2] || '').length, PR_TAG);
+      }
+    }
+  }
+  return decorations;
+}
+
+var PR_TAG_LEXER = PR_createSimpleLexer([
+    [PR_ATTRIB_VALUE, /^\'[^\']*(?:\'|$)/, null, "'"],
+    [PR_ATTRIB_VALUE, /^\"[^\"]*(?:\"|$)/, null, '"'],
+    [PR_PUNCTUATION,  /^[<>\/=]+/, null, '<>/=']
+    ], [
+    [PR_TAG,          /^[\w-]+/, /^</],
+    [PR_ATTRIB_VALUE, /^[\w-]+/, /^=/], 
+    [PR_ATTRIB_NAME,  /^[\w-]+/, null], 
+    [PR_PLAIN,        /^\s+/, null, ' \r\n']
+    ]);
+/** split tags attributes and their values out from the tag name, and
+  * recursively lex source chunks.
+  * @private
+  */
+function PR_splitTagAttributes(source, decorations) {
+  for (var i = 0; i < decorations.length; i += 2) {
+    var style = decorations[i + 1];
+    if (style === PR_TAG) {
+      var start = decorations[i];
+      var end = i + 2 < decorations.length ? decorations[i + 2] : source.length;
+      var chunk = source.substring(start, end);
+      var subDecorations = PR_TAG_LEXER(chunk, start);
+      PR_spliceArrayInto(subDecorations, decorations, i, 2);
+      i += subDecorations.length - 2;
+    }
+  }
+  return decorations;
+}
+
+/** identify regions of markup that are really source code, and recursivley
+  * lex them.
+  * @private
+  */
+function PR_splitSourceNodes(source, decorations) {
+  for (var i = 0; i < decorations.length; i += 2) {
+    var style = decorations[i + 1];
+    if (style == PR_SOURCE) {
+      // Recurse using the non-markup lexer
+      var start = decorations[i];
+      var end = i + 2 < decorations.length ? decorations[i + 2] : source.length;
+      var subDecorations = PR_decorateSource(source.substring(start, end));
+      for (var j = 0, m = subDecorations.length; j < m; j += 2) {
+        subDecorations[j] += start;
+      }
+      PR_spliceArrayInto(subDecorations, decorations, i, 2);
+      i += subDecorations.length - 2;
+    }
+  }
+  return decorations;
+}
+
+/** identify attribute values that really contain source code and recursively
+  * lex them.
+  * @private
+  */
+function PR_splitSourceAttributes(source, decorations) {
+  var nextValueIsSource = false;
+  for (var i = 0; i < decorations.length; i += 2) {
+    var style = decorations[i + 1];
+    if (style === PR_ATTRIB_NAME) {
+      var start = decorations[i];
+      var end = i + 2 < decorations.length ? decorations[i + 2] : source.length;
+      nextValueIsSource = /^on|^style$/i.test(source.substring(start, end));
+    } else if (style == PR_ATTRIB_VALUE) {
+      if (nextValueIsSource) {
+        var start = decorations[i];
+        var end
+            = i + 2 < decorations.length ? decorations[i + 2] : source.length;
+        var attribValue = source.substring(start, end);
+        var attribLen = attribValue.length;
+        var quoted =
+            (attribLen >= 2 && /^[\"\']/.test(attribValue) &&
+             attribValue.charAt(0) === attribValue.charAt(attribLen - 1));
+
+        var attribSource;
+        var attribSourceStart;
+        var attribSourceEnd;
+        if (quoted) {
+          attribSourceStart = start + 1;
+          attribSourceEnd = end - 1;
+          attribSource = attribValue;
+        } else {
+          attribSourceStart = start + 1;
+          attribSourceEnd = end - 1;
+          attribSource = attribValue.substring(1, attribValue.length - 1);
+        }
+
+        var attribSourceDecorations = PR_decorateSource(attribSource);
+        for (var j = 0, m = attribSourceDecorations.length; j < m; j += 2) {
+          attribSourceDecorations[j] += attribSourceStart;
+        }
+
+        if (quoted) {
+          attribSourceDecorations.push(attribSourceEnd, PR_ATTRIB_VALUE);
+          PR_spliceArrayInto(attribSourceDecorations, decorations, i + 2, 0);
+        } else {
+          PR_spliceArrayInto(attribSourceDecorations, decorations, i, 2);
+        }
+      }
+      nextValueIsSource = false;
+    }
+  }
+  return decorations;
+}
+
+/** returns a list of decorations, where even entries
+  *
+  * This code treats ", ', and ` as string delimiters, and \ as a string escape.
+  * It does not recognize perl's qq() style strings.  It has no special handling
+  * for double delimiter escapes as in basic, or tje tripled delimiters used in
+  * python, but should work on those regardless although in those cases a single
+  * string literal may be broken up into multiple adjacent string literals.
+  *
+  * It recognizes C, C++, and shell style comments.
+  *
+  * @param {String} sourceCode as plain text
+  * @return {Array.<String,Number>} a  decoration list
+  */
+function PR_decorateSource(sourceCode) {
+  // Split into strings, comments, and other.
+  // We do this because strings and comments are easily recognizable and can
+  // contain stuff that looks like other tokens, so we want to mark those early
+  // so we don't recurse into them.
+  var decorations = PR_splitStringAndCommentTokens(sourceCode);
+  
+  // Split non comment|string tokens on whitespace and word boundaries
+  decorations = PR_splitNonStringNonCommentTokens(sourceCode, decorations);
+  
+  return decorations;
+}
+
+/** returns a decoration list given a string of markup.
+  *
+  * This code recognizes a number of constructs.
+  * <!-- ... --> comment
+  * <!\w ... >   declaration
+  * <\w ... >    tag
+  * </\w ... >   tag
+  * <?...?>      embedded source
+  * <%...%>      embedded source
+  * &[#\w]...;   entity
+  *
+  * It does not recognizes %foo; doctype entities from  .
+  *
+  * It will recurse into any <style>, <script>, and on* attributes using
+  * PR_lexSource.
+  */
+function PR_decorateMarkup(sourceCode) {
+  // This function works as follows:
+  // 1) Start by splitting the markup into text and tag chunks
+  //    Input:  String s
+  //    Output: List<PR_Token> where style in (PR_PLAIN, null)
+  // 2) Then split the text chunks further into comments, declarations,
+  //    tags, etc.
+  //    After each split, consider whether the token is the start of an
+  //    embedded source section, i.e. is an open <script> tag.  If it is,
+  //    find the corresponding close token, and don't bother to lex in between.
+  //    Input:  List<String>
+  //    Output: List<PR_Token> with style in (PR_TAG, PR_PLAIN, PR_SOURCE, null)
+  // 3) Finally go over each tag token and split out attribute names and values.
+  //    Input:  List<PR_Token>
+  //    Output: List<PR_Token> where style in
+  //            (PR_TAG, PR_PLAIN, PR_SOURCE, NAME, VALUE, null)
+  var decorations = PR_tokenizeMarkup(sourceCode);
+  decorations = PR_splitTagAttributes(sourceCode, decorations);
+  decorations = PR_splitSourceNodes(sourceCode, decorations);
+  decorations = PR_splitSourceAttributes(sourceCode, decorations);
+  return decorations;
+}
+
+/**
+  * @param {String} sourceText plain text
+  * @param {Array.<Number|String>} extractedTags chunks of raw html preceded by
+  *   their position in sourceText in order.
+  * @param {Array.<Number|String> decorations style classes preceded by their
+  *   position in sourceText in order.
+  * @return {String} html
+  * @private
+  */
+function PR_recombineTagsAndDecorations(
+    sourceText, extractedTags, decorations) {
+  var html = [];
+  var outputIdx = 0;  // index past the last char in sourceText written to html
+
+  var openDecoration = null;
+  var currentDecoration = null;
+  var tagPos = 0;  // index into extractedTags
+  var decPos = 0;  // index into decorations
+  var tabExpander = PR_tabExpander(PR_TAB_WIDTH);
+
+  // A helper function that is responsible for opening sections of decoration
+  // and outputing properly escaped chunks of source
+  function emitTextUpTo(sourceIdx) {
+    if (sourceIdx > outputIdx) {
+      if (openDecoration && openDecoration !== currentDecoration) {
+        // Close the current decoration
+        html.push('</span>');
+        openDecoration = null;
+      }
+      if (!openDecoration && currentDecoration) {
+        openDecoration = currentDecoration;
+        html.push('<span class="', openDecoration, '">');
+      }
+      // This interacts badly with some wikis which introduces paragraph tags
+      // into pre blocks for some strange reason.
+      // It's necessary for IE though which seems to lose the preformattednes
+
+      // of <pre> tags when their innerHTML is assigned.
+      // http://stud3.tuwien.ac.at/~e0226430/innerHtmlQuirk.html
+      // and it serves to undo the conversion of <br>s to newlines done in
+      // chunkify.
+      var htmlChunk = PR_textToHtml(
+          tabExpander(sourceText.substring(outputIdx, sourceIdx)))
+          .replace(/(\r\n?|\n| ) /g, '$1&nbsp;')
+          .replace(/\r\n?|\n/g, '&nbsp;<br>');
+      html.push(htmlChunk);
+      outputIdx = sourceIdx;
+    }
+  }
+
+  while (true) {
+    // Determine if we're going to consume a tag this time around.  Otherwise we
+    // consume a decoration or exit.
+    var outputTag;
+    if (tagPos < extractedTags.length) {
+      if (decPos < decorations.length) {
+        // Pick one giving preference to extractedTags since we shouldn't open
+        // a new style that we're going to have to immediately close in order
+        // to output a tag.
+        outputTag = extractedTags[tagPos] <= decorations[decPos];
+      } else {
+        outputTag = true;
+      }
+    } else {
+      outputTag = false;
+    }
+    // Consume either a decoration or a tag or exit.
+    if (outputTag) {
+      emitTextUpTo(extractedTags[tagPos]);
+      if (openDecoration) {
+        // Close the current decoration
+        html.push('</span>');
+        openDecoration = null;
+      } 
+      html.push(extractedTags[tagPos + 1]);
+      tagPos += 2;
+    } else if (decPos < decorations.length) {
+      emitTextUpTo(decorations[decPos]);
+      currentDecoration = decorations[decPos + 1];
+      decPos += 2;
+    } else {
+      break;
+    }
+  }
+  emitTextUpTo(sourceText.length);
+  if (openDecoration) {
+    html.push('</span>');
+  }
+
+  return html.join('');
+}
+
+/** pretty print a chunk of code.
+  *
+  * @param {String} sourceCodeHtml code as html
+  * @return {String} code as html, but prettier
+  */
+function prettyPrintOne(sourceCodeHtml) {
+  try {
+    // Extract tags, and convert the source code to plain text.
+    var sourceAndExtractedTags = PR_extractTags(sourceCodeHtml);
+    /** Plain text. @type {String} */
+    var source = sourceAndExtractedTags.source;
+
+    /** Even entries are positions in source in ascending order.  Odd entries
+      * are tags that were extracted at that position.
+      * @type {Array.<Number|String>}
+      */
+    var extractedTags = sourceAndExtractedTags.tags;
+
+    // Pick a lexer and apply it.
+    /** Treat it as markup if the first non whitespace character is a < and the
+      * last non-whitespace character is a >.
+      * @type {Boolean}
+      */
+    var isMarkup = /^\s*</.test(source) && />\s*$/.test(source);
+
+    /** Even entires are positions in source in ascending order.  Odd enties are
+      * style markers (e.g., PR_COMMENT) that run from that position until the
+      * end.
+      * @type {Array.<Number|String>}
+      */
+    var decorations = isMarkup
+        ? PR_decorateMarkup(source)
+        : PR_decorateSource(source);
+
+    // Integrate the decorations and tags back into the source code to produce
+    // a decorated html string.
+    return PR_recombineTagsAndDecorations(source, extractedTags, decorations);
+  } catch (e) {
+    if ('console' in window) {
+      console.log(e);
+      console.trace();
+    }
+    return sourceCodeHtml;
+  }
+}
+
+var PR_SHOULD_USE_CONTINUATION = true;
+/** find all the < pre > and < code > tags in the DOM with class=prettyprint and
+  * prettify them.
+  * @param {Function} opt_whenDone if specified, called when the last entry
+  *     has been finished.
+  */
+function prettyPrint(opt_whenDone) {
+  // fetch a list of nodes to rewrite
+  var codeSegments = [
+      document.getElementsByTagName('pre'),
+      document.getElementsByTagName('code'),
+      document.getElementsByTagName('xmp') ];
+  var elements = [];
+  for (var i = 0; i < codeSegments.length; ++i) {
+    for (var j = 0; j < codeSegments[i].length; ++j) {
+      elements.push(codeSegments[i][j]);
+    }
+  }
+  codeSegments = null;
+
+  // the loop is broken into a series of continuations to make sure that we
+  // don't make the browser unresponsive when rewriting a large page.
+  var k = 0;
+
+  function doWork() {
+    var endTime = (PR_SHOULD_USE_CONTINUATION
+                   ? new Date().getTime() + 250
+                   : Infinity);
+    for (; k < elements.length && new Date().getTime() < endTime; k++) {
+      var cs = elements[k];
+      if (cs.className && cs.className.indexOf('programlisting') >= 0) {
+
+        // make sure this is not nested in an already prettified element
+        var nested = false;
+        for (var p = cs.parentNode; p != null; p = p.parentNode) {
+          if ((p.tagName == 'pre' || p.tagName == 'code' ||
+               p.tagName == 'xmp') &&
+              p.className && p.className.indexOf('programlisting') >= 0) {
+            nested = true;
+            break;
+          }
+        }
+        if (!nested) {
+          // fetch the content as a snippet of properly escaped HTML.
+          // Firefox adds newlines at the end.
+          var content = PR_getInnerHtml(cs);
+          content = content.replace(/(?:\r\n?|\n)$/, '');
+
+          // do the pretty printing
+          var newContent = prettyPrintOne(content);
+
+          // push the prettified html back into the tag.
+          if (!PR_isRawContent(cs)) {
+            // just replace the old html with the new
+            cs.innerHTML = newContent;
+          } else {
+            // we need to change the tag to a <pre> since <xmp>s do not allow
+            // embedded tags such as the span tags used to attach styles to
+            // sections of source code.
+            var pre = document.createElement('PRE');
+            for (var i = 0; i < cs.attributes.length; ++i) {
+              var a = cs.attributes[i];
+              if (a.specified) {
+                pre.setAttribute(a.name, a.value);
+              }
+            }
+            pre.innerHTML = newContent;
+            // remove the old
+            cs.parentNode.replaceChild(pre, cs);
+          }
+        }
+      }
+    }
+    if (k < elements.length) {
+      // finish up in a continuation
+      setTimeout(doWork, 250);
+    } else if (opt_whenDone) {
+      opt_whenDone();
+    }
+  }
+
+  doWork();
+}

Added: incubator/click/trunk/tools/docbook/src/docbook/click/ClickManual.xml
URL: http://svn.apache.org/viewvc/incubator/click/trunk/tools/docbook/src/docbook/click/ClickManual.xml?rev=735361&view=auto
==============================================================================
--- incubator/click/trunk/tools/docbook/src/docbook/click/ClickManual.xml (added)
+++ incubator/click/trunk/tools/docbook/src/docbook/click/ClickManual.xml Sat Jan 17 15:48:36 2009
@@ -0,0 +1,715 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.4//EN"
+"http://www.oasis-open.org/docbook/xml/4.4/docbookx.dtd">
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+<book lang="en">
+  <title>Click Framework</title>
+
+  <bookinfo>
+    <copyright>
+      <year>2008</year>
+
+      <holder>The Apache Software Foundation</holder>
+    </copyright>
+
+    <releaseinfo>V 1.5</releaseinfo>
+
+    <productname>Click</productname>
+
+    <authorgroup>
+      <corpauthor>The Apache Click Framework Developers</corpauthor>
+    </authorgroup>
+
+    <mediaobject>
+      <imageobject>
+        <imagedata fileref="images/click-logo.png" />
+      </imageobject>
+    </mediaobject>
+  </bookinfo>
+
+  <toc></toc>
+
+  <chapter id="chapter-introduction">
+    <title>Introduction to Click</title>
+
+    <section id="section-preface">
+      <title>Preface</title>
+
+      <para>Click is a simple JEE web application framework for commercial
+      Java developers.</para>
+
+      <para>Click is an open source project, licensed under the <ulink
+      url="images/LICENSE.txt"><citetitle>Apache
+      license.</citetitle></ulink>.</para>
+
+      <para>Click uses an event based programming model for processing Servlet
+      requests and <ulink url="velocity/velocity.html">Velocity</ulink> for
+      rendering the response. (Note other template engines such as <ulink
+      url="http://java.sun.com/products/jsp/">JSP</ulink> and <ulink
+      url="http://freemarker.sourceforge.net/">Freemarker</ulink> are also
+      supported)</para>
+
+      <para>This framework uses a single servlet, called <ulink
+      url="click-api/net/sf/click/ClickServlet.html">ClickServlet</ulink>, to
+      act as a request dispatcher. When a request arrives ClickServlet creates
+      a <ulink url="../../click-api/net/sf/click/Page.html">Page</ulink>
+      object to process the request and then uses the page's Velocity template
+      to render the results.</para>
+
+      <para>Pages provide a simple thread safe programming environment, with a
+      new page instance created for each servlet request.</para>
+
+      <para>Possibly the best way to see how Click works is to dive right in
+      and look at some examples.</para>
+    </section>
+
+    <section id="section-hello-world">
+      <title>Hello World Example</title>
+
+      <para>A Hello World example in Click would look something like
+      this.</para>
+
+      <para>First we create a <classname>HelloWorld</classname> page
+      class:</para>
+
+      <programlisting>package examples.page;
+
+import java.util.Date;
+import net.sf.click.Page;
+
+public HelloWorld extends Page {
+
+    public Date time = new Date(); <co id="co-hello-world-date" linkends="ca-hello-world-date"/>
+
+} </programlisting>
+
+      <calloutlist>
+        <callout arearefs="co-hello-world-date" id="ca-hello-world-date">
+          <para>Declaring the Date as public, informs Click to automatically bind
+          the date to the Page model.</para>
+        </callout>
+      </calloutlist>
+
+      <?dbfo-need height="2in" ?>
+      <para>Next we would have a page template
+      <filename>hello-world.htm:</filename></para>
+      <programlisting>&lt;html&gt;
+  &lt;body&gt;
+  
+    &lt;h2&gt;Hello World&lt;/h2&gt;
+    
+    Hello world from Click at <varname>$time</varname>
+    
+  &lt;/body&gt;
+&lt;/html&gt;       </programlisting>
+
+      <para>And finally we have a <filename>click.xml</filename> configuration
+      file which tells our Click application to map
+      <filename>hello-world.htm</filename> requests to our
+      <classname>HelloWorld</classname> page class.</para>
+
+      <programlisting>&lt;click-app&gt;  
+  &lt;pages package="examples.page"/&gt;
+&lt;/click-app&gt;     </programlisting>
+
+      <para>At runtime the ClickSerlvet maps a GET
+      <filename>hello-world.htm</filename> request to our page class
+      <classname>example.page.HelloWorld</classname> and creates a new
+      instance. The HelloWorld page creates a new public
+      <emphasis>Date</emphasis> object, which is automatically added to the
+      pages model using the fields name <varname>time</varname>.</para>
+
+      <para>The page model is then merged with the template which substitutes
+      the <varname>$time</varname> parameter with the
+      <emphasis>Date</emphasis> object. Velocity then renders the merged
+      template which looks something like</para>
+
+      <literallayout>  <emphasis role="bold">Hello World</emphasis>
+
+  Hello world from Click at Tue May 08 19:37:05 EST 2007</literallayout>
+    </section>
+
+    <section id="section-control-listener-example">
+      <title>Control Listener Example</title>
+
+      <para>Click includes a library of <link
+      linkend="chapter-controls">Controls</link> which provide user interface
+      functionality.</para>
+
+      <para>One of the commonly used controls is the <ulink
+      url="click-api/net/sf/click/control/ActionLink.html">ActionLink</ulink>,
+      which you can use to have a HTML link call a method on a Page object.
+      For example:</para>
+
+      <programlisting>public class ControlListenerPage extends Page {
+
+    public ActionLink myLink = new ActionLink();
+
+    public String msg;
+    
+    // ------------------------------------------------------- Constructors
+
+    /**
+     * Create a new Page instance.
+     */
+    public ControlListenerPage() {
+        myLink.setListener(this, "onMyLinkClick");
+    }
+    
+    // ----------------------------------------------------- Event Handlers
+
+    /**
+     * Handle the myLink control click event.
+     */
+    public boolean onMyLinkClick() {
+        msg = "ControlListenerPage#" + hashCode()
+            + " object method &lt;tt&gt;onMyLinkClick()&lt;/tt&gt; invoked.";
+
+        return true;
+    }
+}</programlisting>
+
+      <para>In the Page class we create an ActionLink called
+      <varname>myLink</varname> and define the control's listener to be the
+      page method <methodname>onMyLinkClick()</methodname>. When a user clicks
+      on <varname>myLink</varname> control it will invoke the listener method
+      <methodname>onMyLinkClick()</methodname>.</para>
+
+      <para>In Click a control listener method can have any name but it must
+      return a boolean value. The boolean return value specifies whether
+      processing of page events should continue. This control listener pattern
+      provides a short hand way for wiring up action listener methods without
+      having to define anonymous inner classes.</para>
+
+      <para>Back to our example, in the page template we define a HTML link
+      and have the <varname>myLink</varname> control render the link's href
+      attribute:</para>
+
+      <programlisting>&lt;html&gt;
+  &lt;head&gt;
+    &lt;link type="text/css" rel="stylesheet" href="style.css"&gt;&lt;/link&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  
+  Click myLink control &lt;a href="<varname>$myLink.href</varname>"&gt;here&lt;/a&gt;.
+
+  <symbol>#if</symbol> (<varname>$msg</varname>)
+    &lt;div id="msgDiv"&gt; <varname>$msg</varname> &lt;/div&gt;
+  <symbol>#end</symbol>
+
+  &lt;/body&gt;
+&lt;/html&gt;</programlisting>
+
+      <para>At runtime this page would be rendered as:</para>
+
+      <literallayout>Click myLink control <varname>here</varname>.</literallayout>
+
+      <para>When a user clicks on the link the
+      <methodname>onMyLinkClick()</methodname> method is invoked. This method
+      then creates <varname>msg</varname> model value, which is rendered in
+      the page as:</para>
+
+      <literallayout>Click myLink control <varname>here</varname>.
+
+<computeroutput>ControlListenerPage#12767107 object method onMyLinkClick() invoked.</computeroutput></literallayout>
+    </section>
+
+    <section id="section-simple-table-example">
+      <title>Simple Table Example</title>
+
+      <para>One of the most useful Click controls is the <ulink
+      url="click-api/net/sf/click/control/Table.html">Table</ulink>
+      control.</para>
+
+      <para>An example usage of the Table control in a customers Page is
+      provided below:</para>
+
+      <programlisting>public class SimpleTablePage extends Page {
+
+    public Table table = new Table();
+
+    // -------------------------------------------------------- Constructor
+     
+    public SimpleTablePage() {
+        table.setClass(Table.CLASS_ITS);
+        
+        table.addColumn(new Column("id"));
+        table.addColumn(new Column("name"));
+        table.addColumn(new Column("email"));
+        table.addColumn(new Column("investments"));
+    }
+    
+    // ----------------------------------------------------- Event Handlers
+     
+    /**
+     * @see Page#onRender()
+     */
+    public void onRender() {
+        List list = getCustomerService().getCustomersSortedByName(10);
+        table.setRowList(list); 
+    }
+}</programlisting>
+
+      <para>In this Page code example a Table control is declared, we set the
+      table's HTML class, and then define a number of table <ulink
+      url="click-api/net/sf/click/control/Column.html">Column</ulink> objects.
+      In the column definitions we specify the name of the column in the
+      constructor, which is used for the table column header and also to
+      specify the row object property to render.</para>
+
+      <para>The last thing we need to do is populate the table with data. To
+      do this we override the Page onRender() method and set the table row
+      list before it is rendered.</para>
+
+      <para>In our Page template we simply reference the
+      <varname>$table</varname> object which is rendered when its toString()
+      method is called.</para>
+
+      <programlisting>&lt;html&gt;
+  &lt;head&gt;
+    <varname>$cssImports</varname>
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    <varname>$table</varname>
+
+    <varname>$jsImports</varname>
+  &lt;/body&gt;
+&lt;/html&gt;</programlisting>
+
+      <para>Note above we also specify the <varname>$cssImports</varname>
+      reference so the table can include any CSS imports or styles in the
+      header, and the <varname>$jsImports</varname> reference any JavaScript
+      imports or scripts at the bottom.</para>
+
+      <para>At runtime the Table would be rendered in the page as:</para>
+
+      <para><mediaobject>
+          <imageobject>
+            <imagedata fileref="images/introduction/simple-table.png" />
+          </imageobject>
+        </mediaobject></para>
+    </section>
+
+    <section id="section-advanced-table-example">
+      <title>Advanced Table Example</title>
+
+      <para>The Table control also provides support for:</para>
+
+      <itemizedlist>
+        <listitem>
+          <para>automatic rendering</para>
+        </listitem>
+
+        <listitem>
+          <para>column formatting and custom rendering</para>
+        </listitem>
+
+        <listitem>
+          <para>automatic pagination</para>
+        </listitem>
+
+        <listitem>
+          <para>link control support</para>
+        </listitem>
+      </itemizedlist>
+
+      <para>A more advanced Table example is provided below:</para>
+
+      <programlisting>public class CustomerPage extends Page {
+
+    public Table table = new Table();
+    public PageLink editLink = new PageLink("Edit", EditCustomer.class);
+    public ActionLink deleteLink = new ActionLink("Delete", this,
+        "onDeleteClick");
+
+    // ------------------------------------- Constructor
+     
+    public CustomersPage() {
+        table.setClass(Table.CLASS_ITS);
+        table.setPageSize(10);
+        table.setShowBanner(true);
+        table.setSortable(true);
+
+        table.addColumn(new Column("id"));
+
+        table.addColumn(new Column("name"));
+        
+        Column column = new Column("email");
+        column.setAutolink(true);
+        column.setTitleProperty("name");
+        table.addColumn(column);
+        
+        table.addColumn(new Column("investments"));
+        
+        editLink.setImageSrc("/images/window-edit.png");
+        editLink.setTitle("Edit customer details");
+        editLink.setParameter("referrer", "/introduction/advanced-table.htm");
+        
+        deleteLink.setImageSrc("/images/window-delete.png");
+        deleteLink.setTitle("Delete customer record");
+        deleteLink.setAttribute("onclick",
+            "return window.confirm('Are you sure you want to delete this record?');");
+
+        column = new Column("Action");
+        column.setTextAlign("center");
+        AbstractLink[] links = new AbstractLink[] { editLink, deleteLink };
+        column.setDecorator(new LinkDecorator(table, links, "id"));
+        column.setSortable(false);
+        table.addColumn(column);
+    }
+    
+    // ---------------------------------- Event Handlers
+         
+    /**
+     * Handle the delete row click event.
+     */    
+    public boolean onDeleteClick() {
+        Integer id = deleteLink.getValueInteger();
+        getCustomerService().deleteCustomer(id);
+        return true;
+    }
+    
+    /**
+     * @see Page#onRender()
+     */
+    public void onRender() {
+        List list = getCustomerService().getCustomersByName();
+        table.setRowList(list);
+    }
+}</programlisting>
+
+      <para>In this Page code example a Table control is declared and a number
+      of <ulink
+      url="click-api/net/sf/click/control/Column.html">Column</ulink> objects
+      are added. A deleteLink <ulink
+      url="click-api/net/sf/click/control/ActionLink.html">ActionLink</ulink>
+      control is used as a decorator for the "Action" column. This control
+      will invoke the Page <methodname>onDeleteClick()</methodname> method
+      when it is clicked. Finally we have the Page
+      <methodname>onRender()</methodname> method which is used to populate the
+      Table control with rows before it is rendered.</para>
+
+      <para>In our Page template we simply reference the
+      <varname>$table</varname> object which is rendered when its
+      <methodname>toString()</methodname> method is called.</para>
+
+      <programlisting>&lt;html&gt;
+  &lt;head&gt;
+<varname>    $cssImports</varname>
+  &lt;/head&gt;
+  &lt;body&gt;
+
+<varname>    $table</varname>
+
+<varname>    $jsImports</varname> 
+  &lt;/body&gt;
+&lt;/html&gt;</programlisting>
+
+      <para>At runtime the Table would be rendered in the page as:</para>
+
+      <para><mediaobject>
+          <imageobject>
+            <imagedata fileref="images/introduction/advanced-table.png" />
+          </imageobject>
+        </mediaobject></para>
+
+      <para>In this example if a user click on the Delete link the
+      <methodname>onDeleteClick()</methodname> method will be called on the
+      Page deleting the customer record.</para>
+    </section>
+
+    <section>
+      <title>Simple Form Example</title>
+
+      <para>The <ulink
+      url="click-api/net/sf/click/control/Form.html">Form</ulink> and <ulink
+      url="click-api/net/sf/click/control/Field.html">Field</ulink> controls
+      are also some of the most commonly used controls in the Click
+      Framework.</para>
+
+      <para>The SimpleForm page below provides a demonstration of using these
+      controls.</para>
+
+      <para>In our example code we have the page's constructor adding a <ulink
+      url="click-api/net/sf/click/control/TextField.html">TextField</ulink>
+      field and a <ulink
+      url="click-api/net/sf/click/control/Submit.html">Submit</ulink> button
+      to the form. A page method is also set as a control listener on the
+      form. Also note in this example the page's public
+      <varname>form</varname> field is automatically added to its list of
+      controls.</para>
+
+      <programlisting>public class SimpleForm extends Page {
+
+    public Form form = new Form();
+    public String msg;
+
+    // -------------------------------------------------------- Constructor
+
+    public SimpleForm() {
+        form.add(new TextField("name", true));
+        form.add(new Submit("OK"));
+
+        form.setListener(this, "onSubmit");
+    }
+
+    // ----------------------------------------------------- Event Handlers
+
+    /**
+     * Handle the form submit event.
+     */
+    public boolean onSubmit() {
+        if (form.isValid()) {
+            msg = "Your name is " + form.getFieldValue("name");
+        }
+        return true;
+    }
+}</programlisting>
+
+      <para>Next we have the SimpleForm template
+      <filename>simple-form.htm</filename>. The Click application
+      automatically associates the <filename>simple-form.htm</filename>
+      template with the <classname>SimpleForm</classname> class.</para>
+
+      <programlisting>&lt;html&gt;
+  &lt;head&gt;
+<varname>    $cssImports</varname>
+  &lt;/head&gt;
+  &lt;body&gt;
+
+<varname>    $form</varname>
+
+<symbol>    #if</symbol> (<varname>$msg</varname>)
+      &lt;div id="msgDiv"&gt; <varname>$msg</varname> &lt;/div&gt;
+<symbol>    #end</symbol>
+
+    <varname>$jsImports</varname>
+  &lt;/body&gt;
+&lt;/html&gt;</programlisting>
+
+      <para>When the SimpleForm page is first requested the
+      <varname>$form</varname> object will automatically render itself
+      as:</para>
+
+      <mediaobject>
+        <imageobject>
+          <imagedata fileref="images/introduction/simple-form.png" />
+        </imageobject>
+      </mediaobject>
+
+      <para>Say the user does not enter their name and presses the OK button
+      to submit the form. The <classname>ClickServlet</classname> creates a
+      new SimpleForm page and processes the form control.</para>
+
+      <para>The form control processes its fields and determines that it is
+      invalid. The form then invokes the listener method
+      <methodname>onSubmit()</methodname>. As the form is not valid this
+      method simply returns true and the form renders the field validation
+      errors.</para>
+
+      <mediaobject>
+        <imageobject>
+          <imagedata fileref="images/introduction/simple-form-error.png" />
+        </imageobject>
+      </mediaobject>
+
+      <para>Note the form will automatically maintain the entered state during
+      the post and validate cycle.</para>
+
+      <para>Now if the user enters their name and clicks the OK button, the
+      form will be valid and the <methodname>onSubmit()</methodname> add a
+      <varname>msg</varname> to the Pages model. This will be rendered
+      as:</para>
+
+      <mediaobject>
+        <imageobject>
+          <imagedata fileref="images/introduction/simple-form-success.png" />
+        </imageobject>
+      </mediaobject>
+    </section>
+
+    <section>
+      <title>Advanced Form Example</title>
+
+      <para>The <classname>AdvancedForm</classname> page below provides a more
+      advanced demonstration of using Form, Field and FielsSet
+      controls.</para>
+
+      <para>First we have an <classname>AdvancedForm</classname> class which
+      setups up a <ulink
+      url="click-api/net/sf/click/control/Form.html">Form</ulink> in its
+      constructor. The form's investment <ulink
+      url="click-api/net/sf/click/control/Select.html">Select</ulink> list is
+      populated in the page's <methodname>onInit()</methodname> method. At
+      this point any page dependencies such as the CustomerService should be
+      available.</para>
+
+      <para>Note in this example the page's public <varname>form</varname>
+      field is automatically added to its list of controls. The
+      <varname>msg</varname> field is added to the page's model.</para>
+
+      <programlisting>public class AdvancedForm extends Page {
+
+    public Form form = new Form();
+    public String msg;
+
+    private Select investmentSelect = new Select("investment");
+
+    // -------------------------------------------------------- Constructor
+
+    public AdvancedForm() {
+        FieldSet fieldSet = new FieldSet("Customer");
+        form.add(fieldSet);
+
+        TextField nameField = new TextField("name", true);
+        nameField.setMinLength(5);
+        nameField.setFocus(true);
+        fieldSet.add(nameField);
+
+        fieldSet.add(new EmailField("email", true));
+
+        fieldSet.add(investmentSelect);
+
+        fieldSet.add(new DateField("dateJoined", true));
+        fieldSet.add(new Checkbox("active"));
+
+        form.add(new Submit("ok", " OK ", this, "onOkClicked"));
+        form.add(new Submit("cancel", this, "onCancelClicked"));
+    }
+
+    // ----------------------------------------------------- Event Handlers
+
+    /**
+     * @see Page#onInit()
+     */
+    public void onInit() {
+        CustomerService customerService = getCustomerService();
+        investmentSelect.add(Option.EMPTY_OPTION);
+        investmentSelect.addAll(customerService.getInvestmentCatetories());
+    }
+
+    /**
+     * Handle the OK button click event.
+     *
+     * @return true
+     */
+    public boolean onOkClicked() {
+        if (form.isValid()) {
+            Customer customer = new Customer();
+            form.copyTo(customer);
+
+            getCustomerService().saveCustomer(customer);
+
+            form.clearValues();
+
+            msg = "A new customer record has been created.";
+        }
+        return true;
+    }
+
+    /**
+     * Handle the Cancel button click event.
+     *
+     * @return false
+     */
+    public boolean onCancelClicked() {
+        setRedirect(HomePage.class);
+        return false;
+    }
+}</programlisting>
+
+      <para>Next we have the AdvancedForm template
+      <filename>advanced-form.htm</filename>. The Click application
+      automatically associates the <filename>advanced-form.htm</filename>
+      template with the <classname>AdvancedForm</classname> class.</para>
+
+      <programlisting>&lt;html&gt;
+  &lt;head&gt;
+<varname>    $cssImports</varname>
+  &lt;/head&gt;
+  &lt;body&gt;
+
+<symbol>    #if</symbol> (<varname>$msg</varname>)
+      &lt;div id="msgDiv"&gt; <varname>$msg</varname> &lt;/div&gt;
+<symbol>    #end</symbol>
+
+<varname>    $form</varname>
+
+    <varname>$jsImports</varname>
+  &lt;/body&gt;
+&lt;/html&gt;</programlisting>
+
+      <para>When the AdvancedForm page is first requested the
+      <varname>$form</varname> object will automatically render itself
+      as:</para>
+
+      <mediaobject>
+        <imageobject>
+          <imagedata fileref="images/introduction/advanced-form.png" />
+        </imageobject>
+      </mediaobject>
+
+      <para>In this example when the OK button is clicked the
+      <methodname>onOkClicked()</methodname> method is invoked. If the form is
+      valid a new customer object is created and the forms field values are
+      copied to the new object using the Form
+      <methodname>copyTo()</methodname> method. The customer object is then
+      saved, the form's field values are cleared and an info message is
+      presented to the user.</para>
+
+      <para>If the user clicks on the Cancel button the request is redirected
+      to the applications HomePage.</para>
+
+      <section>
+        <title>Form Layout</title>
+
+        <para>In the example above the Form control automatically renders the
+        form and the fields HTML markup. This is a great feature for quickly
+        building screens, and the form control provides a number of layout
+        options. See the Click Examples for an interactive <ulink
+        url="http://www.avoka.com/click-examples/form/form-properties.htm">Form
+        Properties demo</ulink>.</para>
+
+        <para>For fine grained page design you can specifically layout form
+        and fields in your page template. See the <link
+        linkend="section-template-layout">Template Layout</link> section and
+        <ulink
+        url="click-api/net/sf/click/control/Form.html#form-layout">Form</ulink>
+        Javadoc for more details.</para>
+
+        <para>An alternative approach to page template design is using a
+        programmatic approach. See the <link
+        linkend="section-programmatic-layout">Programmatic Layout</link>
+        section for more details.</para>
+      </section>
+    </section>
+  </chapter>
+
+  <chapter id="chapter-controls">
+    <title>Controls</title>
+
+    <section id="etc">
+      <title>Etc</title>
+
+    </section>
+    
+  </chapter>
+</book>