This site can be navigated using several methods:
To select from the first 5 navigation methods, use the buttons at the bottom of the screen.
The rest of this help page, contains detailed information about the structure of the site.
Example 1 - Modify the top Toolbar 1
Example 2 - Modifying the main diagram and tree pages
The web will contain the knowledge model at the last time the web was published. If you have made significant changes to the model you must ensure it is republished and all stakeholders are notified.
The layout of the web display is divided into 5 areas.
This toolbar here allows you to switch between diagram and traditional tree-like views of the model (and sub sections of the model) and to change the proportions of the main areas of the screen.
The toolbar for the default configuration is:
Clicking Diagram will use the diagrams you generated in PC PACK to navigate around the system and will display the top level diagram contents' page.
Clicking TOC will allow you to use a more traditional, expandable tree-like view to navigate around the system and will display the top level tree contents' page.
Three sizes of view are available. These views will change the proportions of Content 2 and Knowledge 4:
You can change the proportions of the view at any time to suit your requirements.
This area allows you to navigate the model. You can be in diagram mode or tree mode. Clicking on an item in this area will display the associated knowledge in the knowledge area.
If you are in diagram mode and using the Abobe SVG plug-in then the following additional controls are offered::
In diagram mode, ladders with contents beneath are shown with a rectangle to the right of an object. Click on the associated rectangle to expand or collapse the ladder. For very large diagrams this may take a second or two.
This area lists any related links found in the knowledge page current showing in the knowledge area.
Links in this area may be selected to navigate to the page.
This area is used to show:
When the top level content page is showing simply click on a item to display its associated diagram or tree in the content area.
Restarts the knowledge web as if you had entered it from the front page.
Displays the search dialogue in the contents area.
The search dialogue allows you to find pages in the web that contain words or phrases.
Type the word or phrase you are looking for and click "Go". Any pages that contain the word phrase will be displayed in the list box as shown above. To view the page double click on an entry. The entries are displayed by title of the page and the first phrase that was found. If a page does not have a title then the file name or URL will be displayed instead.
Options on the search page allow you to:
The search engine supplied will look on a local web, but does require a "Java -enabled" browser.
This option displays the terminology used in the knowledge web in alphabetical order. Simply click on one of the letter tabs to show only the section starting with that letter. Use the "*" tab to show the complete terminology.
Click on a terminology item to go to its associated documentation.
This option allows you to comment on the contents of the published knowledge. Your comments are appreciated and will taken notice of.
Fields that are required are marked with an asterisk ("*").
Displays all the knowledge contained in the web.
Click on a linked item to go to the items main page.
Allows the current content of the knowledge area to be displayed in a new browser window. This is useful if you want a larger area to view the page. Once you have used this option the "related links" area can no longer be updated. In addition all links off the expanded page will appear in the newly created browser window.
Displays these pages (I hope).
The exemplar web as supplied should be considered a template from which to build a personalized-web. Providing the restrictions described are obeyed you can use your own template to publish with.
As far as is possible the content has been separated from the viewing markup.
You will require a browser that supports SVG (scaleable vector graphics). A suitable plug-in for most browsers is available from Adobe.
Your browser must support XML, XSLT, Java and JavaScript and these options should be enabled.
This exemplar template has been included for you to modify to create your own stylised webs. The example used here it a template used to deliver knowledge models produced using the MOKA methodology.
The remainder of this document describes how to modify the template to personalise the webs produced.
When PC PACK publishes your model it will take the template you select and populate it will the knowledge model. The structure of the web may not be the same as described here as you may have used this information to significantly change the structure.
For this template web the structure is described below.
This folder will contain at a minimum:
The search page and its associated code must be located at the top level of the web as security restricts will not allow it to search at a level above itself (see Search configuration).
Below this root level the folder structure will depend on how you personalise the web. At a minimum the following folders must exist:
Note these folder names are case-dependent. This is particularly important if you intend to move the web to a non-windows server.
Other names may vary depending on how you customise the web template. In this example the additional sub folders are:
This folder contains three files:
These files must be present and their names cannot be changed easily without affecting the behaviour of the web.
This folder contains images used by the default web:
company.jpg - the logo used on the bottom tool bar
view???.jpg - the images used on the top tool bar to resize the main frames
These folders hold a web page for each of the diagrams generated in PCPACK. The name of the page is the same as the name of the diagram with any spaces removed. In the Diagrams folder there will also be an SVG file of the same name which contains the Scalable Vector Graphics. In the Trees folder there will also be an XML file of the same name which holds the tree structure.
This folder holds the annotated knowledge pages. These pages are produced by PCPACK and use the template set up in PCPACK to use for publishing. The pages are named after their unique identifier used in PCPACK.
When publishing the web from PCPACK you can include these identifiers in the published KnowledgeModel.xml. The xml file will then contain both id and name and can be used to lookup names from ids.
This folder simply holds a a page that allows users to comment on the web. What it looks like and how the information is relayed to the knowledge team is entirely up to you. The page is accessed from the "Discussion" option on the bottom tool bar. If you do not want this facility then remove the button on the toolbar, though feedback on the published web is important.
The folder containing this help system. The help system can be customised to suit the potential users of the web. This example help system is provided to allow you to design and build your own help system.
This folder holds the frame page (index.htm) used to display the Terminology used in the model. The top toolbar (aztab.htm) simply holds the alphabetic buttons to access the terminology alphabetically.
The cascading style sheet Css/company.css can be changed to suit your personal preferences as it is used throughout the web to control the visual appearance of the pages and controls. The style sheet is very simple and is used throughout the web and is listed below.
h1 { }
h2 { }
h3 { }
h4 { }
body { background-color: #FFFFFF }
.bOver {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: white;
padding-top: 3px;
padding-left: 5px;
padding-bottom: 3px;
padding-right: 5px;
background-color: #99ccff;
cursor: hand;
}
.bOut {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: white;
padding-top: 3px;
padding-left: 5px;
padding-bottom: 3px;
padding-right: 5px;
background-color: #3C217C;
cursor: hand;
}
Classes "bOut" and "bOver" are used to give the buttons their behaviour. "bOut" is also used whenever a a dark blue background is required.
The appearance of buttons are controlled by a very simple Javascript function held in css.js which is listed below.
function swapClass(obj, cls) {
obj.className = cls
}
This code changes the style of the item the mouse is over.
The only criteria is that you retain the frame names as some of the behaviour of the Javascript, Java and SVG rely on certain frames existing. If you omit a frame or rename it then where a specific target is set it may pop up in a a new browser window.
The frames code is shown below:
h1 { }
h2 { }
h3 { }
h4 { }
body { background-color: #FFFFFF }
.bOver {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: white;
padding-top: 3px;
padding-left: 5px;
padding-bottom: 3px;
padding-right: 5px;
background-color: #99ccff;
cursor: hand;
}
.bOut {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: white;
padding-top: 3px;
padding-left: 5px;
padding-bottom: 3px;
padding-right: 5px;
background-color: #3C217C;
cursor: hand;
}
The names of frames and their ids are very important here as they are used throughout as the target of certain operations:
When an annotation page is loaded into the web it is processed and all hyperlinks it contains and duplicated in the Related links page. To do this each page produced by PCPACK contains a reference to the script related.js in the Css folder of the form
<script language="JavaScript" src="../Css/related.js">
This script and the use of an onload event in the body of the document processes the links.
<body onload="linkGetter()">
The script used is
function linkGetter() {
var relWindow=top.related;
if (relWindow == null)
return;
relWindow.document.open();
relWindow.document.write("<h1>Related links</h1>");
for (var i = 0; i < document.links.length; i++)
{
relWindow.document.write("<p><a href='" + document.links[i] + "' target='main'>" + document.links[i].innerHTML + "</a></p>");
}
}
The script uses the document.links property to find the links and write them as hyperlinks in the related window.
If you do not wish to use this faclity then simply set this to a null function by
funtion linkGetter()
{
}
and overwrite the original file related.js.
If you want the related links to be a cumulative/historical window then remove the lines
relWindow.document.open();
relWindow.document.write("<h1>Related links</h1>");
and the links will be added at the end of the current list.
These pages exist as Diagrams/diagrams.htm and Trees/trees.htm respectively. These pages are the table of contents pages for your ontology and simply hyperlink to your diagrams and trees. Diagrams and trees map on a one to one basis and are loaded by the same htm file in their respective directory.
Initially, the nodiagram.htm or notree.htm file is loaded into Contents 2.
The Toolbar 1 file contains two javascript functions to load files into the Contents 2 frame as well as the hyperlink to your contents pages.
All webs published with this new template will now use your new top toolbar.
that you retain the name of the frames used in the main frames page (mokaframe.htm). You can redesign any page providing you retain the hyperlink and any Javascript event handlers.
The cascading style sheet Css/company.css can be changed to suit your personal preferences as it is used throughout the web to control the appearance of the pages.
At the time of publishing your template will be used to generate the web.
The appearance of the knowledge pages is controlled by the template you set up in PC PACK.
The overall appearance of the web is set at the time of publishing by the publisher tool.
The search dialog is a Java applet embedded in the page mokasearch.htm. The page is loaded into the contents frame by the toolbar button. For the search to work on a local web the search page must be at root of the web, the Java HomePageSearch.zip must be at the same level as well. Javascript is used to generate the content of the search page so it will work with any web along with an onload event for the page. The Javascript generated the embed instruction and any parameters required.
function WriteSearchPage() {
var FilePath = new String(window.location);
var MyString;
var Position;
Position = FilePath.lastIndexOf("/");
MyString = FilePath.substring(0, Position + 1);
FilePath = MyString.substring(0, Position);
FilePath = MyString.replace(/%20/gi, " ");
document.write("<applet code=\"HomePageSearch.HomePageSearch.class\" codebase='.' archive='HomePageSearch.zip' height=400 width=650>");
document.write("<param name=\"indexName\" value=\"mokaframe.htm\">");
document.write("<param name=\"server\" value=\"" + FilePath + "\">");
document.write("<param name=\"maxSearch\" value=\"1000\">");
document.write("<param name=\"narrow\" value=\"true\">");
document.write("<param name=\"frameName\" value=\"main\">");
document.write("<param name=\"bgColour\" value=\"3C217C\">");
document.write("<param name=\"fgColour\" value=\"FFFFFF\">");
document.write("<em> Sorry but the Home Page Search Applet requires a Java-enabled Web browser.</em>");
document.write("</applet>");
}
You can change the parameters used by modifying their param values. The parameters used above are:
The terminology page is generated by transforming the the file Terminology.xml with the file Terminology.xsl. A single alphabetically ordered page is produced. The alphabetic buttons simply hides all entries not beginning with their letter by using an onclick event associated with the button. This is performed by the following Javascript:
function go_letter(e) {
var relWindow=parent.searchmain;
if (relWindow == null)
return;
if (e == '*') {
for (var i = 0; i < relWindow.document.links.length; i++)
{
var l = relWindow.document.links[i];
l.style.display = "block";
}
return;
}
for (var i = 0; i < relWindow.document.links.length; i++)
{
var l = relWindow.document.links[i];
var j = l.innerHTML.toUpperCase();
if (j.charAt(0) == e)
l.style.display = "block";
else
l.style.display = "none";
}
}
Again we are using the document.links collection which has been generated by Transform.xsl.
The contents of the terminology window (searchmain) has been generated by the following XSL:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<link rel='stylesheet' type='text/css' href='Css/company.css'/>
</head>
<body>
<xsl:for-each select="/knowledge_model/domain_schema/declarations/concept[position()>1]">
<xsl:sort select="@NAME"/>
<xsl:variable name="parent_node" select="sub_types/sub_type_of/@NAME"/>
<xsl:if test="$parent_node='Product'
or $parent_node='Assembly'
or $parent_node='Part'
or $parent_node='Composite Feature'
or $parent_node='Feature'
or $parent_node='Entity'">
<xsl:call-template name="annotations">
<xsl:with-param name="annotated_object" select="."/>
</xsl:call-template>
</xsl:if>
</xsl:for-each>
</body>
</html>
</xsl:template>
<!-- =============================================================== -->
<!-- -->
<!-- TEMPLATE -->
<!-- -->
<!-- =============================================================== -->
<xsl:template name="annotations">
<xsl:param name="annotated_object"/>
<p>
<!-- list the annotated entities -->
<xsl:choose>
<xsl:when test="$annotated_object/terminology/description">
<xsl:variable name="parent_node" select="sub_types/sub_type_of/@NAME"/>
<xsl:element name="A">
<xsl:attribute name="HREF"><xsl:value-of select="$annotated_object/terminology/description/@HREF"/></xsl:attribute>
<xsl:value-of select="$annotated_object/@NAME"/>
</xsl:element>
</xsl:when>
<xsl:otherwise>
<xsl:element name="A">
<xsl:value-of select="$annotated_object/@NAME"/>
</xsl:element>
</xsl:otherwise>
</xsl:choose>
</p>
</xsl:template>
</xsl:stylesheet>
In this example the annotate template is called on the ordered concepts of the
model. The output has been restricted by the xs:if block. In this example only
nodes with parents of the six items shown are included. More top level concept
can be added to suit the onotology you use by extending this xsl:if block.
<xsl:if test="$parent_node='Product'
or $parent_node='Assembly'
or $parent_node='Part'
or $parent_node='Composite Feature'
or $parent_node='Feature'
or $parent_node='Entity'">
<xsl:call-template name="annotations">
<xsl:with-param name="annotated_object" select="."/>
</xsl:call-template>
</xsl:if>
To show all concepts replace the block with just the inner call to the template.
<xsl:call-template name="annotations">
<xsl:with-param name="annotated_object" select="."/>
</xsl:call-template>