<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<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">
//The id for tree cookie
var treeCookieId = "treeview-1102";
var language = "en";
var w = new Object();
//Localization
txt_filesfound = 'Results';
txt_enter_at_least_1_char = "You must enter at least one character.";
txt_browser_not_supported = "JavaScript is disabled on your browser. Please enable JavaScript to enjoy all the features of this site.";
txt_please_wait = "Please wait. Search in progress...";
txt_results_for = "Results for: ";
</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">
#noscript{
font-weight:bold;
background-color: #55AA55;
font-weight: bold;
height: 25spx;
z-index: 3000;
top:0px;
width:100%;
position: relative;
border-bottom: solid 5px black;
text-align:center;
color: white;
}
input {
margin-bottom: 5px;
margin-top: 2px;
}
.folder {
display: block;
height: 22px;
padding-left: 20px;
background: transparent url(common/jquery/treeview/images/folder.gif) 0 0px no-repeat;
}
span.contentsTab {
padding-left: 20px;
background: url(common/images/toc-icon.png) no-repeat 0 center;
}
span.searchTab {
padding-left: 20px;
background: url(common/images/search-icon.png) no-repeat 0 center;
}
/* Overide jquery treeview's defaults for ul. */
.treeview ul {
background-color: transparent;
margin-top: 4px;
}
#webhelp-currentid {
background-color: #D8D8D8 !important;
}
.treeview .hover { color: black; }
.filetree li span a { text-decoration: none; font-size: 12px; color: #517291; }
/* Override jquery-ui's default css customizations. These are supposed to take precedence over those.*/
.ui-widget-content {
border: 0px;
background: none;
color: none;
}
.ui-widget-header {
color: #e9e8e9;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #bbc4c5;
border-top: 4px solid #e5e5e5;
border: medium none;
background: #F4F4F4; /* old browsers */
background: -moz-linear-gradient(top, #F4F4F4 0%, #E6E4E5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E6E4E5)); /* webkit */
font-weight: none;
}
.ui-widget-header a { color: none; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: none; background: none; font-weight: none; color: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: black; text-decoration: none; }
.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; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: none; background: none; font-weight: none; color: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: black; text-decoration: none;
background: #C6C6C6; /* old browsers */
background: -moz-linear-gradient(top, #C6C6C6 0%, #D8D8D8 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C6C6C6), color-stop(100%,#D8D8D8)); /* webkit */
-webkit-border-radius:15px; -moz-border-radius:10px;
border: 1px solid #f1f1f1;
}
.ui-corner-all { border-radius: 0 0 0 0; }
.ui-tabs { padding: .2em;}
.ui-tabs .ui-tabs-nav li { top: 0px; margin: -2px 0 1px; text-transform: uppercase; font-size: 10.5px;}
.ui-tabs .ui-tabs-nav li a { padding: .25em 2em .25em 1em; margin: .5em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
/**
* Basic Layout Theme
*
* This theme uses the default layout class-names for all classes
* Add any 'custom class-names', from options: paneClass, resizerClass, togglerClass
*/
.ui-layout-pane { /* all 'panes' */
background: #FFF;
border: 1px solid #BBB;
padding: 05x;
overflow: auto;
}
.ui-layout-resizer { /* all 'resizer-bars' */
background: #DDD;
top:100px
}
.ui-layout-toggler { /* all 'toggler-buttons' */
background: #AAA;
}
</style><!--[if IE]>
<link rel="stylesheet" type="text/css" href="../common/css/ie.css"/>
<![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
</a></td><td><a accesskey="p" class="navLinkPrevious" tabindex="5" href="ch03.html">Prev</a>
|
<a accesskey="u" class="navLinkUp" tabindex="5" href="ch03.html">Up</a>
|
<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>
<p class="summary">An overview of webhelp page structure.</p><p>DocBook WebHelp page structure is fully built on css-based design abandoning frameset
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
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 done by <a class="ulink" href="http://docbook.sourceforge.net/release/xsl/current/xhtml/chunk.xsl" target="_top"> DocBook
XSL Chunking customization</a>. Few further css-styling applied from
<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
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
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
file, Table of Contents is generated as an Unordered List (a list made from
<code class="code"><ul> <li></code> tags). When page loads in the browser, we apply
styling to it to achieve the nice look that you see. Styling for TOC tree is done
by a JQuery UI plugin called <a class="ulink" href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/" target="_top">
TreeView</a>. We can generate the tree easily by following javascript code:
</p><pre class="programlisting">
//Generate the tree
$("#tree").treeview({
collapsed: true,
animated: "medium",
control: "#sidetreecontrol",
persist: "cookie"
});
</pre><p>
</p></li><li class="listitem"><p>Search Tab: This includes the search feature.</p></li></ul></div></li></ul></div><p>
<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
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> <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>
| # | Change | User | Description | Committed | |
|---|---|---|---|---|---|
| #1 | 12728 | eedwards |
Upgrade ANT doc build infrastructure to assemble PDFs: - remove non-namespaced DocBook source and add namespaced DocBook source. - add Apache FOP 1.1 - copy fonts, images, XSL into _build, establishing new asset structure. The original structure remains until all guides using it can be upgraded, and several other issues can be resolved. - updated build.xml to allow for per-target build properties. - upgraded the P4SAG to use the new infrastructure. - tweaked admonition presentation in PDFs to remove admonition graphics, and resemble closely the presentation used in the new HTML layout, including the same colors. With these changes, building PDFs involves using a shell, navigating into the guide's directory (just P4SAG for now), and executing "ant pdf". Issues still to be resolved: - PDF generation encounters several warnings about missing fonts (bold versions of Symbol and ZapfDingbats), and a couple of locations where the page content exceeds the defined content area. - Due to issues within Apache FOP, PDF generation emits a substantial amount of output that is not easily suppressed without losing important warning information. - Apache FOP's interface to ANT does not expose a way to set the font base directory. The current configuration does work under Mac OSX, but further testing on Windows will need to be done to determine if the relative paths defined continue to work. The workaround is for Windows users to customize the fop-config.xml to provide absolute system paths to the required fonts. - HTML generation needs further browser testing, and exhibits broken navigation on iOS browsers within the TOC sidebar. - A number of PDF and HTML presentation tweaks still need to be made, for example: sidebars, gui* DocBook tags, whitespace, section separation, etc. |