May 11, 2011

Visual Studio 2010 HelpViewer 1.0 Custom Help Creation

Recently I've been working with our legacy HTML help files, trying to add them the the new Visual Studio 2010 HelpViewer. This is not a simple task.
  1. We wanted the styling of our html to be the same as .NET help files
  2. We would also like there to be little or no maintenance required to keep them up to date with the latest Visual Studio Help Styles etc.
  3. We have a custom development language so the code snippets require their own color coding and the Language should be "Gravity" and not C# or VB.
  4. The content itself should be easily maintained.
  5. Our own applications logos and copyright should appear instead of Visual Studios.
The requirements above proved to be not a simple to implement as you might think. Below I'll mention the snags I came across and describe how I overcame them.

1. Styling:
The styling information was not simple to find, there are documents on http://www.helpware.net/mshelp3/intro.htm which explain some of the content of the help files, this is useful but where do you start to get a custom page up and running which looks like a .NET help file? The solution I found is by looking in the Help Store "C:\ProgramData\Microsoft\HelpLibrary\content\Microsoft\store". In here you'll find the help mshi files etc.
The .msha files are actually Zip files which have been renamed, these contain .html help files.
The trick is to find the correct .msha file unzip it and look through the HTML file for the content you require. I found the Int32.CompareTo help file and the Windows.Form help file of great use. These help files contain the bare HTML with CSS links before the HTML has been rendered, it's useless to start looking at the rendered HTML with "view source" from the browser, it's too large.
A Web Form class help file I found of great use was in the "Development_Frameworks_21823146_VS_100_en-us_9.msha" file. I renamed this to .zip and extracted it's contents (this can also be done with an application called FAR, it can read the contents of the .msha file and will give you the option to unzip the contents). I extracted the contents to "C:\Users\me\Documents\Development_Frameworks_21823146_VS_100_en-us_9" and in here searched the .html files for the content I wanted. The file with title <title>MenuStrip Class (System.Windows.Forms)</title>
was the file I chose. I've made a copy of this and used it as my template for most things.

3 & 5. Color coding and logos, Branding.
   There are issues here, it looks like you cannot mix and match, what I mean is you either go with the complete look and feel of Visual Studio's help including the logos and copyright or else you loose it all and provide your own styling. This is all controlled by one simple metadata tag provided in each html help file

<meta name="SelfBranded" content="false" >meta>

    Changing this to "true" results in you losing all the styles and logos etc that msdn gives you, you must then provide your own styles, this solution is not really feasable as the styling and layout of the msdn help is complex and also I'd imagine it's better to keep with the sytles provided by msdn and if they update them then they get pulled in hopefully without and work.
If you do change this setting to "true" applying styles for the color coding snippets is simple with adding html spans to the keywords etc, giving the Span a style class and adding the correct style to a linked stylesheet.
e.g.

  <span class="kwrd">
            controlspan> Button BtnHelloWorld
           {
            <span class="kwrd">eventspan> Click
            {
             UI.ShowMessage(<span class="str">"Hello World"span>);  
            }
            <span class="kwrd">propertyspan> Text := <span class="str">"Say Hello"span>;
            <span class="kwrd">propertyspan> ToolTip := <span class="str">"Say Hello!"span>;
              <span class="kwrd">propertyspan> NextControl := <span class="kwrd">nullspan>;
           }
the class "kwrd" has a style like so

.kwrd
{
 color#0000ff;
}


4. Easily maintained.
I've used XSL and XML to store my help content. The idea behind this is the XSL stores the HMTL, the .NET help files are chunky with alot of styling, so I have one large XSL file "gravity.xslt" which all the XML files reference.
The XML files are simple the text content and some links. This keeps the content files size to a minimum, they contain the title name, the description, the Help Meta information (keywords, id, parent, TocOrder) etc. When new content is required all that needs to be added is a new XML file, copy the content from another and change the text.
I've made the XSL file have as many <xsl:if> statements as possible
In order for XML to become (X)HTML it needs to be transformed using some application (usually a browser) and the XSL file. I wanted to do this in one go from command line so I've written a small application which takes the XSL file and a directory containing the XML files, this outputs a HTML file for each XML file. It's these HTML file's that I later add to my Zip and remame to a .msha file, my help file.



No comments: