ch03s01.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head>
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  5. <title>Design - - README: Web-based Help from DocBook XML</title><meta name="generator" content="DocBook XSL Stylesheets V1.78.1"></meta><link rel="home" href="index.html" title="README: Web-based Help from DocBook XML"></link><link rel="up" href="ch03.html" title="Developer Docs"></link><link rel="prev" href="ch03.html" title="Developer Docs"></link><link rel="next" href="ch03s02.html" title="Search"></link><meta name="Section-title" content="Design"></meta><script type="text/javascript">
  6. //The id for tree cookie
  7. var treeCookieId = "treeview-1102";
  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 = "JavaScript is disabled on your browser. Please enable JavaScript to enjoy all the features of this site.";
  14. txt_please_wait = "Please wait. Search in progress...";
  15. txt_results_for = "Results for: ";
  16. </script><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></link><link rel="stylesheet" type="text/css" href="common/css/positioning.css"></link><link rel="stylesheet" type="text/css" href="common/jquery/theme-redmond/jquery-ui-1.8.2.custom.css"></link><link rel="stylesheet" type="text/css" href="common/jquery/treeview/jquery.treeview.css"></link><style type="text/css">
  17. #noscript{
  18. font-weight:bold;
  19. background-color: #55AA55;
  20. font-weight: bold;
  21. height: 25spx;
  22. z-index: 3000;
  23. top:0px;
  24. width:100%;
  25. position: relative;
  26. border-bottom: solid 5px black;
  27. text-align:center;
  28. color: white;
  29. }
  30. input {
  31. margin-bottom: 5px;
  32. margin-top: 2px;
  33. }
  34. .folder {
  35. display: block;
  36. height: 22px;
  37. padding-left: 20px;
  38. background: transparent url(common/jquery/treeview/images/folder.gif) 0 0px no-repeat;
  39. }
  40. span.contentsTab {
  41. padding-left: 20px;
  42. background: url(common/images/toc-icon.png) no-repeat 0 center;
  43. }
  44. span.searchTab {
  45. padding-left: 20px;
  46. background: url(common/images/search-icon.png) no-repeat 0 center;
  47. }
  48. /* Overide jquery treeview's defaults for ul. */
  49. .treeview ul {
  50. background-color: transparent;
  51. margin-top: 4px;
  52. }
  53. #webhelp-currentid {
  54. background-color: #D8D8D8 !important;
  55. }
  56. .treeview .hover { color: black; }
  57. .filetree li span a { text-decoration: none; font-size: 12px; color: #517291; }
  58. /* Override jquery-ui's default css customizations. These are supposed to take precedence over those.*/
  59. .ui-widget-content {
  60. border: 0px;
  61. background: none;
  62. color: none;
  63. }
  64. .ui-widget-header {
  65. color: #e9e8e9;
  66. border-left: 1px solid #e5e5e5;
  67. border-right: 1px solid #e5e5e5;
  68. border-bottom: 1px solid #bbc4c5;
  69. border-top: 4px solid #e5e5e5;
  70. border: medium none;
  71. background: #F4F4F4; /* old browsers */
  72. background: -moz-linear-gradient(top, #F4F4F4 0%, #E6E4E5 100%); /* firefox */
  73. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E6E4E5)); /* webkit */
  74. font-weight: none;
  75. }
  76. .ui-widget-header a { color: none; }
  77. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  78. border: none; background: none; font-weight: none; color: none; }
  79. .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: black; text-decoration: none; }
  80. .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: none; background: none; font-weight: none; color: none; }
  81. .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: none; background: none; font-weight: none; color: none; }
  82. .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  83. color: black; text-decoration: none;
  84. background: #C6C6C6; /* old browsers */
  85. background: -moz-linear-gradient(top, #C6C6C6 0%, #D8D8D8 100%); /* firefox */
  86. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C6C6C6), color-stop(100%,#D8D8D8)); /* webkit */
  87. -webkit-border-radius:15px; -moz-border-radius:10px;
  88. border: 1px solid #f1f1f1;
  89. }
  90. .ui-corner-all { border-radius: 0 0 0 0; }
  91. .ui-tabs { padding: .2em;}
  92. .ui-tabs .ui-tabs-nav li { top: 0px; margin: -2px 0 1px; text-transform: uppercase; font-size: 10.5px;}
  93. .ui-tabs .ui-tabs-nav li a { padding: .25em 2em .25em 1em; margin: .5em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
  94. /**
  95. * Basic Layout Theme
  96. *
  97. * This theme uses the default layout class-names for all classes
  98. * Add any 'custom class-names', from options: paneClass, resizerClass, togglerClass
  99. */
  100. .ui-layout-pane { /* all 'panes' */
  101. background: #FFF;
  102. border: 1px solid #BBB;
  103. padding: 05x;
  104. overflow: auto;
  105. }
  106. .ui-layout-resizer { /* all 'resizer-bars' */
  107. background: #DDD;
  108. top:100px
  109. }
  110. .ui-layout-toggler { /* all 'toggler-buttons' */
  111. background: #AAA;
  112. }
  113. </style><!--[if IE]>
  114. <link rel="stylesheet" type="text/css" href="../common/css/ie.css"/>
  115. <![endif]--><script type="text/javascript" src="common/browserDetect.js"></script><script type="text/javascript" src="common/jquery/jquery-1.7.2.min.js"></script><script type="text/javascript" src="common/jquery/jquery.ui.all.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="common/jquery/layout/jquery.layout.js"></script><script type="text/javascript" src="search/l10n.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><noscript><div id="noscript">JavaScript is disabled on your browser. Please enable JavaScript to enjoy all the features of this site.</div></noscript><div id="header"><a href="index.html"><img style="margin-right: 2px; height: 59px; padding-right: 25px; padding-top: 8px" align="right" src="common/images/logo.png" alt=" Documentation"></img></a><h1>README: Web-based Help from DocBook XML<br></br>Developer Docs</h1><div id="navheader"><table class="navLinks"><tr><td><a id="showHideButton" href="#" onclick="myLayout.toggle('west')" class="pointLeft" tabindex="5" title="Hide TOC tree">Sidebar
  116. </a></td><td><a accesskey="p" class="navLinkPrevious" tabindex="5" href="ch03.html">Prev</a>
  117. |
  118. <a accesskey="u" class="navLinkUp" tabindex="5" href="ch03.html">Up</a>
  119. |
  120. <a accesskey="n" class="navLinkNext" tabindex="5" href="ch03s02.html">Next</a></td></tr></table></div></div><div id="content"><div class="section"><div xmlns="" class="titlepage"><div><div><h2 xmlns="http://www.w3.org/1999/xhtml" class="title" style="clear: both"><a id="idp268368"></a>Design</h2></div></div></div>
  121. <p class="summary">An overview of webhelp page structure.</p><p>DocBook WebHelp page structure is fully built on css-based design abandoning frameset
  122. structure. Overall page structure can be divided in to three main sections </p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: disc; "><li class="listitem"><p>Header: Header is a separate Div which include company logo, navigation
  123. 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
  124. part is done by <a class="ulink" href="http://docbook.sourceforge.net/release/xsl/current/xhtml/chunk.xsl" target="_top"> DocBook
  125. XSL Chunking customization</a>. Few further css-styling applied from
  126. <code class="filename">positioning.css</code>. </p></li><li class="listitem"><p>Left Navigation: This includes the table of contents and search tab. This is
  127. customized using <a class="ulink" href="http://jqueryui.com/" target="_top">jquery-ui</a> styling.</p><div class="itemizedlist"><ul class="itemizedlist" style="list-style-type: circle; "><li class="listitem"><p>Tabbed Navigation: The navigation pane is organized in to two tabs. Contents
  128. tab, and Search tab. Tabbed output is achieved using <a class="ulink" href="http://docs.jquery.com/UI/Tabs" target="_top">JQuery Tabs plugin</a>. </p></li><li class="listitem"><p>Table of Contents (TOC) tree: When building the chunked html from the docbook
  129. file, Table of Contents is generated as an Unordered List (a list made from
  130. <code class="code">&lt;ul&gt; &lt;li&gt;</code> tags). When page loads in the browser, we apply
  131. styling to it to achieve the nice look that you see. Styling for TOC tree is done
  132. by a JQuery UI plugin called <a class="ulink" href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/" target="_top">
  133. TreeView</a>. We can generate the tree easily by following javascript code:
  134. </p><pre class="programlisting">
  135. //Generate the tree
  136. $("#tree").treeview({
  137. collapsed: true,
  138. animated: "medium",
  139. control: "#sidetreecontrol",
  140. persist: "cookie"
  141. });
  142. </pre><p>
  143. </p></li><li class="listitem"><p>Search Tab: This includes the search feature.</p></li></ul></div></li></ul></div><p>
  144. <a id="idp281632" class="indexterm"></a></p></div><script type="text/javascript" src="common/main.js"></script><script type="text/javascript" src="common/splitterInit.js"></script><div class="navfooter"><hr></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 id="sidebar"><div id="leftnavigation" style="padding-top:3px;"><div id="tabs"><ul><li><a href="#treeDiv" style="outline:0;" tabindex="1"><span class="contentsTab">Contents</span></a></li><li><a href="#searchDiv" style="outline:0;" tabindex="1" onclick="doSearch()"><span class="searchTab">Search</span></a></li></ul><div id="treeDiv"><img src="common/images/loading.gif" alt="loading table of contents..." id="tocLoading" style="display:block;"></img><div id="ulTreeDiv" style="display:none"><ul id="tree" class="filetree"><li><span class="file"><a href="ch01.html" tabindex="1">Introduction</a></span></li><li><span class="file"><a href="ch02.html" tabindex="1">Using the package</a></span><ul><li><span class="file"><a href="ch02s01.html" tabindex="1">Generating webhelp output using the Ant build.xml
  145. file</a></span></li><li><span class="file"><a href="ch02s02.html" tabindex="1">Using and customizing the output</a></span><ul><li><span class="file"><a href="ch02s02s01.html" tabindex="1">Recommended Apache configurations</a></span></li></ul></li><li><span class="file"><a href="ch02s03.html" tabindex="1">Search indexing</a></span></li><li><span class="file"><a href="ch02s04.html" tabindex="1">Adding support for other (non-CJKV) languages</a></span></li><li><span class="file"><a href="ch02s05.html" tabindex="1">Adding images</a></span></li></ul></li><li><span class="file"><a href="ch03.html" tabindex="1">Developer Docs</a></span><ul><li id="webhelp-currentid"><span class="file"><a href="ch03s01.html" tabindex="1">Design</a></span></li><li><span class="file"><a href="ch03s02.html" tabindex="1">Search</a></span><ul><li><span class="file"><a href="ch03s02s01.html" tabindex="1">New Stemmers</a></span></li></ul></li></ul></li><li><span class="file"><a href="ch04.html" tabindex="1">FAQ</a></span></li><li><span class="file"><a href="ch05.html" tabindex="1">Test section</a></span><ul><li><span class="file"><a href="ch05s01.html" tabindex="1">Some search words for testing</a></span></li><li><span class="file"><a href="ch05s02.html" tabindex="1">Some search words for testing (inflected)</a></span></li></ul></li><li><span class="file"><a href="ix01.html" tabindex="1">Index</a></span></li></ul></div></div><div id="searchDiv"><div id="search"><form onsubmit="Verifie(searchForm);return false" name="searchForm" class="searchForm"><div><input id="textToSearch" name="textToSearch" type="search" placeholder="Search" class="searchText" tabindex="1"></input> &nbsp; <input onclick="Verifie(searchForm)" type="button" class="searchButton" value="Go" id="doSearch" tabindex="1"></input></div></form></div><div id="searchResults"><center></center></div><p class="searchHighlight"><a href="#" onclick="toggleHighlight()">Search Highlighter (On/Off)</a></p></div></div></div></div></body></html>