![\"docwbs-35\"](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/05\/docwbs-35.png\")
<\/a><\/p>\n<\/p>\n
with different areas:<\/p>\n
- \n
- Banner<\/li>\n
- Searching area<\/li>\n
- Table of content toolbar<\/li>\n
- Items tree<\/li>\n
- View tabs<\/li>\n
- Content toolbar<\/li>\n
- Content area<\/li>\n
- Breadcrumbs<\/li>\n<\/ol>\n
Item tree displays list of documentations. When you select an item, the content and breadcrumbs of the selected item will be displayed respectively on the right area. We can find a tutorial provided on Eclipse Help<\/a> guiding you how to deploy the infocenter as a Web Archive here<\/a>. eXo Platform has succeeded in creating an infocenter package named infocenter-webapp-${version}.war<\/em> deployable to server that you can download from eXo Platform repository<\/a>. Documentations Website of eXo Platform http:\/\/docs.exoplatform.com\/<\/a> uses this package to deploy documentation of Platform 4.0 and Platform 3.5. This post represents how to customize the default look and feel and behavior provided by Eclipse Help Infocenter as you desire.<\/p>\n
Customize Eclipse infocenter webapp<\/h2>\n
By extracting infocenter-webapp-${version}.war<\/em>, you will find a jar package org.eclipse.help.webapp_${version}.jar<\/em> under this path infocenter-webapp\/WEB-INF\/plugins<\/em> which contains a bundle of editable files and compiled java classes. All cool stuff will be done by customizing jsp, stylesheet and javascript files in advanced<\/b> folder in this package.<\/p>\n
Global layout<\/h3>\n
Infocenter uses Framesets and Frames to separate areas on whole page (searching area, reading area, tree panel, etc.). Each frame has a dedicated name. The global layout of the website page is represented in detail on the following schema:<\/p>\n
![\"layout\"](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/05\/layout.png\")
<\/a><\/p>\nwhich:<\/p>\n
- \n
- BannerFrame: link to banner file. It allows you to change the banner of website with your company logo, navigation menu, etc.<\/li>\n
- SearchFrame: here we call the searching area that includes search input, search button, link to set scope of search action, etc.<\/li>\n
- NavFrame: It’s the left part that includes a toolbar with a series of small buttons (Print selected topic, Search topics, Collapse all, Link with contents, and Maximize), a tree of items to navigate, and a toolbar at the bottom with three tabs allowing you to display appropriate content (Contents, Index, Search Results).<\/li>\n
- ContentFrame: It’s the right part that includes a toolbar with another series of small buttons (Go Back, Go Forward, Home, Show in TOC, Print Page, and Maximize) and an area to display breadcrumbs and content of selected topic.<\/li>\n<\/ol>\n
All these components can be customized directly in files in org.eclipse.help.webapp_${version}.jar\/advanced<\/em> folder. We will indicate which file matches which part in the following sections, and the customization will depend on your design. From now, all files that we mention can be found in the advanced<\/b> folder of org.eclipse.help.webapp_${version}.jar<\/em> package.<\/p>\n
The banner<\/h3>\n
The entry point in which a whole page is rendered is index.jsp<\/b> file. It declares our three main frames, as in the schema above. Each frame has an attribute named src<\/i>. Put your banner file in the advanced folder, and then you can point src<\/i> attribute of BannerFrame to your banner file. E.g.: src=”advanced\/banner.html”<\/i><\/p>\n
Searching area<\/h3>\n
If you want to customize the look and feel of a search form (search input, search button, scope link, etc.), you can do it via searchScoped.jsp<\/b> file.<\/p>\n
When you click on a search button to do a search action, js code in searchScoped.jsp<\/b> file will be called (entry point is doSearch()<\/em> function). Based on input text and selected scope, a query will be created and passed to java code to handle. The tree panel will be switched to view “Search Result,” and the rendering and switch tabs are managed in tabs.jsp<\/b> and nav.jsp<\/b>. Search results are rendered by searchView.jsp<\/b> and use style sheet from searchList.css<\/b>. When you click on Scope link on searching area, a small window that appears allows you to manage the scope of your search action. The default scope is “All topics.” You can customize its look and feel and behavior via workingSetManager.jsp<\/b> and workingSet.jsp<\/b>. Here is the result after we did some customizations of css and html of search form and search result panel:<\/p>\n
Before<\/span>:<\/p>\n
![\"Searching](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/05\/Searching-Area-1.png\")
<\/a><\/p>\nAfter<\/span>:<\/p>\n
![\"Searching](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/05\/Searching-Area-2.png\")
<\/a><\/p>\nNOTE<\/b><\/i>: You can modify style sheet of components in css files (searchLisht.css<\/b>, breadcrumbs.css<\/b>, tocTree.css<\/b>, etc.) or css embedded in header of jsp files, or you can also reorganize them to grouping all style sheets to one common place. It’s easier to maintain and improve later.<\/p>\n
Toolbars<\/h3>\n
We have two toolbars on the left and right panels, respectively. Although they are on two different frames, they use some common files to be rendered and to behave. There are three necessary files for each toolbar: the toolbar on the left (tocToolbar.jsp<\/b>, toolbar.jsp<\/b> and navActions.js<\/b>), the toolbar on the right (contentToolbar.jsp<\/b>, toolbar.jsp<\/b> and contentActions.js<\/b>). tocToolbar.jsp<\/b> and contentToolbar.jsp<\/b> provide a list of buttons with basic information (name, icon, param, state). toolbar.jsp<\/b> file is responsible to take these lists and render them. Two js files contain javascript code to handle click events on each button (Show in TOC, Print, Previous, Next, Home, Collapse All, Search Topics). Only the maximize function used to collapse frames calls the toogleFrame(title)<\/em> function in help.jsp<\/b>. The last item to note is that the toolbar on the left is linked from view.jsp, and the one on the right is linked from content.jsp<\/b>. This is useful if you want to remove these toolbars.<\/p>\n
Tree panel<\/h3>\n
The entry point for the items tree is tocView.jsp<\/b> file, and the style sheets are in tocTree.css<\/b>. The table of contents in the tree panel is constructed and updated each time the page is loaded. It’s generated top-down from root to leaf node by functions in helptreechildren.js<\/b> file. All events triggered on the tree panel will be handled by helptree.js<\/b> and tocTree.js<\/b> files. By using these files for the Documentations Website of eXo Platform, we made some changes for the tree panel; we added a select box allowing you to choose which book to display. When a book is selected, the tree panel will be updated to display chapters and sections of that book, whereas the former behavior of the tree panel was to display all books, chapters, and sections each time a whole page was loaded.<\/p>\n
![\"Tree](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/05\/Tree-panel.png\")
<\/a><\/p>\nReading area<\/h3>\n
The breadcrumbs and the content displayed on the reading area are rendered by java code. Even if Eclipse Help is “open-source,” it’s still hard to customize java files, recompile and package them into a new org.help.eclipse.webapp.jar<\/em>. What we can do for customization is to inject javascript code into the header of content.jsp<\/b> file, which is the entry point to render the reading area. For example, javascript supports calling method after a whole page was loaded so that we can manipulate elements on the reading area after the page is finished loading. We moved the default breadcrumbs from the reading area to the searching area and created a new look and feel for it via breadcrumbs.css<\/b> file.<\/p>\n
Before<\/span>:<\/p>\n
![\"Reading](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/05\/Reading-area-1.png\")
<\/a><\/p>\n