doc/xslt/webhelp/docs/content/ch03s01.html

   1 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:exsl="http://exslt.org/common" xmlns:ng="http://docbook.org/docbook-ng" xmlns:db="http://docbook.org/ns/docbook"><head>
   4 <meta http-equiv="X-UA-Compatible" content="IE=7" />
   5 <title>Design</title><meta name="generator" content="DocBook XSL Stylesheets V1.76.1" /><link rel="home" href="index.html" title="README: Web-based Help from DocBook XML" /><link rel="up" href="ch03.html" title="Chapter 3. Developer Docs" /><link rel="prev" href="ch03.html" title="Chapter 3. Developer Docs" /><link rel="next" href="ch03s02.html" title="Search" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">
   6             //The id for tree cookie
   7             var treeCookieId = "treeview-897";
   8             var language = "en";
   9             var w = new Object();
  10             //Localization
  11             txt_filesfound = 'Results';
  12             txt_enter_at_least_1_char = "You must enter at least one character.";
  13             txt_browser_not_supported = "Your browser is not supported. Use of Mozilla Firefox is recommended.";
  14             txt_please_wait = "Please wait. Search in progress...";
  15             txt_results_for = "Results for: ";
  16         </script><style type="text/css">
  17             input {
  18             margin-bottom: 5px;
  19             margin-top: 2px;
  20             }
  21
  22             .folder {
  23             display: block;
  24             height: 22px;
  25             padding-left: 20px;
  26             background: transparent url(../common/jquery/treeview/images/folder.gif) 0 0px no-repeat;
  27             }
  28             </style><link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /><link rel="stylesheet" type="text/css" href="../common/css/positioning.css" /><link rel="stylesheet" type="text/css" href="../common/jquery/theme-redmond/jquery-ui-1.8.2.custom.css" /><link rel="stylesheet" type="text/css" href="../common/jquery/treeview/jquery.treeview.css" /><script type="text/javascript" src="../common/jquery/jquery-1.4.2.min.js"></script><script type="text/javascript" src="../common/jquery/jquery-ui-1.8.2.custom.min.js"></script><script type="text/javascript" src="../common/jquery/jquery.cookie.js"></script><script type="text/javascript" src="../common/jquery/treeview/jquery.treeview.min.js"></script><script type="text/javascript" src="search/htmlFileList.js"></script><script type="text/javascript" src="search/htmlFileInfoList.js"></script><script type="text/javascript" src="search/nwSearchFnt.js"></script><script type="text/javascript" src="search/stemmers/en_stemmer.js"><!--//make this scalable to other languages as well.--></script><script type="text/javascript" src="search/index-1.js"></script><script type="text/javascript" src="search/index-2.js"></script><script type="text/javascript" src="search/index-3.js"></script></head><body><div id="header"><img style="margin-right: 2px; height: 59px; padding-right: 25px; padding-top: 8px" align="right" src="../common/images/logo.png" alt="Company Logo" /><h1 align="center">Design<br />Chapter 3. Developer Docs</h1><div id="navheader" align="right"><table><tr><td style="height: 28px; width: 16px;"><a id="showHideButton" onclick="showHideToc();" class="pointLeft" title="Hide TOC tree">.
  29                             </a></td><td><img src="../common/images/highlight-blue.gif" alt="H" height="25px" onclick="toggleHighlight()" id="showHideHighlight" style="cursor:pointer" title="Toggle search result highlighting" /></td><td><a accesskey="p" href="ch03.html">Prev</a>
  30                                         |
  31                                         <a accesskey="u" href="ch03.html">Up</a>
  32                                     |
  33                                     <a accesskey="n" href="ch03s02.html">Next</a></td></tr></table></div></div><div id="content"><div class="section" title="Design"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a id="id36124388"></a>Design</h2></div></div></div><p class="summary">An overview of webhelp page structure.</p><p>DocBook WebHelp page structure is fully built on css-based design
  34         abandoning frameset structure. Overall page structure can be divided in to three main sections
  35         </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p>Header: Header is a separate Div which include company logo,
  36               navigation button(prev, next etc.), page title and heading of parent topic.</p></li><li class="listitem"><p>Content: This includes the content of the documentation. The processing of this part is
  37               done by <a class="ulink" href="http://docbook.sourceforge.net/release/xsl/current/xhtml/chunk.xsl" target="_top">
  38                 DocBook XSL Chunking customization</a>. Few further css-styling applied from
  39               <code class="filename">positioning.css</code>.
  40             </p></li><li class="listitem"><p>Left Navigation: This includes the table of contents and search tab. This
  41               is customized using <a class="ulink" href="http://jqueryui.com/" target="_top">jquery-ui</a> styling.</p><div class="itemizedlist"><ul class="itemizedlist" type="circle"><li class="listitem"><p>Tabbed Navigation: The navigation pane is organized in to two tabs.
  42                   Contents tab, and Search tab. Tabbed output is achieved using
  43                   <a class="ulink" href="http://docs.jquery.com/UI/Tabs" target="_top">JQuery Tabs plugin</a>.
  44                 </p></li><li class="listitem"><p>Table of Contents (TOC) tree: When building the chunked html from the
  45                   docbook file, Table of Contents is generated as an Unordered List (a list
  46                   made from <code class="code">&lt;ul&gt; &lt;li&gt;</code> tags). When page loads in the browser,
  47                   we apply styling to it to achieve the nice look that you see. Styling for TOC
  48                   tree is done by a JQuery UI plugin called
  49                   <a class="ulink" href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/" target="_top">
  50                   TreeView</a>. We can generate the tree easily by following javascript code:
  51
  52 </p><pre class="programlisting">
  53 //Generate the tree
  54 $("#tree").treeview({
  55 collapsed: true,
  56 animated: "medium",
  57 control: "#sidetreecontrol",
  58 persist: "cookie"
  59 });
  60 </pre><p>
  61                   </p></li><li class="listitem"><p>Search Tab: This includes the search feature.</p></li></ul></div></li></ul></div><p>
  62       </p></div><script type="text/javascript" src="../common/main.js"></script><div class="navfooter"><hr /><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch03.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="ch03.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="ch03s02.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></div><div><div id="leftnavigation" style="padding-top:3px; background-color:white;"><div id="tabs"><ul><li><a href="#treeDiv"><em>Contents</em></a></li><li><a href="#searchDiv"><em>Search</em></a></li></ul><div id="treeDiv"><img src="../common/images/loading.gif" alt="loading table of contents..." id="tocLoading" style="display:block;" /><div id="ulTreeDiv" style="display:none"><ul id="tree" class="filetree"><li><span class="file"><a href="ch01.html">Introduction</a></span></li><li><span class="file"><a href="ch02.html">Using the package</a></span><ul><li><span class="file"><a href="ch02s01.html">Generating webhelp output</a></span></li><li><span class="file"><a href="ch02s02.html">Using and customizing the output</a></span><ul><li><span class="file"><a href="ch02s02.html#id36124136">Recommended Apache configurations</a></span></li></ul></li><li><span class="file"><a href="ch02s03.html">Building the indexer</a></span></li><li><span class="file"><a href="ch02s04.html">Adding support for other (non-CJKV) languages</a></span></li></ul></li><li><span class="file"><a href="ch03.html">Developer Docs</a></span><ul><li id="webhelp-currentid"><span class="file"><a href="ch03s01.html">Design</a></span></li><li><span class="file"><a href="ch03s02.html">Search</a></span><ul><li><span class="file"><a href="ch03s02.html#id36124646">New Stemmers</a></span></li></ul></li></ul></li></ul></div></div><div id="searchDiv"><div id="search"><form onsubmit="Verifie(ditaSearch_Form);return false" name="ditaSearch_Form" class="searchForm" id="ditaSearch_Form"><fieldset class="searchFieldSet"><legend>Search</legend><center><input id="textToSearch" name="textToSearch" type="text" class="searchText" /> &nbsp; <input onclick="Verifie(ditaSearch_Form)" type="button" class="searchButton" value="Go" id="doSearch" /></center></fieldset></form></div><div id="searchResults"><center></center></div></div></div></div></div></body></html>