To boldly go where no tech writer has gone before (one can dream, right?)

Creating Eclipse Context-Sensitive Help (CSH) from DITA

At IXIASOFT, our CCMS runs on Eclipse, so our user and admin guides are provided as Eclipse documentation (generated using the DITA-OT Eclipse plugin), in addition to HTML and PDF files available on our website. In our latest release, we decided to add context-sensitive help (CSH) to the CCMS so that our users could get help as they were doing their tasks.

Sounds simple, right? Not exactly.

As Dan Elfanbaum mentioned in his article, it’s almost impossible to find information on how to integrate CSH from DITA into Eclipse. Yan Periard, our Chief Artisan, and I sat down to determine how we would approach this and we came up with our own method. (Okay, Yan did most of the technical research and coding, but I encouraged him every step of the way :). I’m sharing our solution here in the hope that it might be useful to others.

Our requirements were simple:

  • No new documentation; we wanted to reuse our current DITA topics to generate the CSH, as we’re doing for the PDF, HTML, and Eclipse outputs
  • The CSH should be unobstrusive
  • The CSH should link to the complete Eclipse documentation for more information

To display CSH, Eclipse expects a context file that looks as follows:

<contexts>
   <context id="panic_button" title="Panic Button Title">
      <description>This is the panic button.</description>
      <topic href="reference/panic_button.htm" label="Panic Button Reference"/>
   </context>
   ...
</contexts>

Eclipse requires the following information in the context file:

  • id: ID that identifies the element of the UI. This ID must be declared in the CCMS Eclipse code.
  • title: Title of the CSH window displayed when users click F1 while hovering over the UI element.
  • description: Short description of the UI element.
  • topic: One or more topics that will be listed in the CSH window to provide more information to the user. The href must link to one of the topics in the documentation plugin.

So our challenge was: How do we go from DITA source code to the context file required by Eclipse? We first thought about creating a specialization that would map exactly to the context file, but we try to stay away from them for usability. We wanted our solution to be as generic as possible.

So we came up with the following approach:

  1. Create a standard DITA context map that includes the information required by the Eclipse context file.
  2. Transform the context map into a context file recognized by Eclipse.

 

1. Create the context map


Mapping the information required by Eclipse into a DITA map was fairly straightforward, but we had one complication. Our product can be used with oXygen and XMetaL, and the user guide is XML-editor specific, so it’s packaged in two different Eclipse plugins:
– DITA CMS User Guide for oXygen (com.ixiasoft.eclipse.help.userguide.oxygen)
– DITA CMS User Guide for XMetaL (com.ixiasoft.eclipse.help.userguide.xmetal)

Most customers use one of these XML editors, but some use both. This meant that when clicking F1 on an area of the UI, some customers had to be shown the oXygen version of the documentation, some customers the XMetaL version, and other customers needed both versions. We therefore had to find a way to conditionalize the <topic href> required by Eclipse. After some discussion, we ended up with the following map:
 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE map PUBLIC "-//IXIA//DTD IXIA DITA Map//EN" "IxiaMap.dtd">
<map id ="lar1410796284657" xml:lang ="en-us">
   <title> DITA CMS User Guide Context Map</title >
   <topicmeta id="help.plugins.root" >
      <resourceid appname ="com.ixiasoft.eclipse.help.userguide.oxygen" id="Oxygen"/>
      <resourceid appname ="com.ixiasoft.eclipse.help.userguide.xmetal" id="XMetal"/>
   </topicmeta >
   <topicgroup id ="referable_content_view">
      <topicmeta>
         <navtitle> About the Referable-Content view</ navtitle>
         <shortdesc> The Referable-Content view lets you search for reusable components 
                     and insert them into documents.</ shortdesc>           
      </topicmeta>
      <topicref href ="lar1396892881040.xml"/>
      <topicref href ="lar1399915347457.xml"/>
      <topicref href ="lar1399921717895.xml"/>
      <topicref href ="lar1397657467945.xml" product="XMetal"/>
      <topicref href ="lar1397657445991.xml" product="Oxygen"/>
   </topicgroup>
</map>

We mapped the information required by Eclipse to DITA elements or attributes as follows:

  • The map-level <topicmeta> defines the Eclipse documentation plugins to which this CSH applies:
    • The id defines the location of the help plugin to Eclipse.
    • The resourceid defines the name of the Eclipse plugin (in the appname attribute) as well as an id to determine whether this is the oXygen or XMetaL plugin.
  • The <topicgroup> contains the information to create the <context> element required by Eclipse:
    • The id defines the id of the UI object. This must match the id put in by developers in the CCMS code.
    • The <topicmeta> then provides the title and description of the window for the CSH. I typed in the text directly, but I could have pulled the <shortdesc> from my original topics using a conref (planned for Phase 2 of the project).
    • Each <topicref> then defines the topic to display for this UI object. For example, for the Referable-Content view above, I determined that five topics from the user guide were interesting enough to be displayed. The first three are common to both XMetaL and oXygen but the last ones are editor-specific, so we used the product condition to identify them.

The map above shows only one topicgroup, for simplicity, but obviously I created one topicgroup for each area of the UI that would benefit from additional information.

 

2. Transform the context map into the Eclipse context file


For this, we created our own transformation, which basically takes the DITA context map and transforms it into an Eclipse context file (contexts.xml) using an XSLT transformation. We implemented this transformation using the Output Generator, which is the IXIASOFT DITA CMS module that outputs DITA source into the required output type, but you could easily reproduce this as a DITA-OT script. It uses Ant code, as follows:

<target name="dita2eclipsecontexthelpwrapper">
   <xslt processor="trax"
         in="input_map.ditamap"
         out="contexts.xml"
         style="ixiasoft_eclipse_csh_transfo.xsl">
         <xmlcatalog id="ixia.dita.catalog"/>
   </xslt>
</target>

(For your convenience, you can find the XSLT file here; right-click the link to download the file).

The output contexts.xml looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<contexts>
<context id="referable_content_view" title="About the Referable-Content view">
      <description>The Referable-Content view lets you search for reusable components and insert them into documents.</description>
      <topic href="PLUGINS_ROOT/com.ixiasoft.eclipse.help.userguide.oxygen/lar1396892881040.html"
             label="Working with the Referable-Content view">
         <enablement>
            <with variable="platform">
               <test property="org.eclipse.core.runtime.isBundleInstalled"
                     args="com.ixiasoft.eclipse.help.userguide.oxygen"/>
            </with>
         </enablement>
      </topic>
      .....
   </context>

Once the contexts.xml file is generated, it’s packaged with the two DITA CMS documentation plugins for XMetaL and for oXygen. And voilà! You have CSH that looks something like this when users press F1:

Sample CSH

Sample CSH

The help window is opened as an Eclipse view (shown below), so it’s unobtrusive and gets updated as the user moves around the UI.

Unobstrusive help
 
This was a fairly long post, but I’m hoping it will help other writers/developers trying to create Eclipse CSH from DITA. As usual, comments and questions are welcome!
 


DITA and user assistance: Real-world implementation

In a post that I published last year, I said that I would document how we implemented Ray Gallon’s double-embeddedness theory for a project we were developing. Here I am, a year later, with the details of this implementation. Better late than never, right? :)

The theory


Let’s start by summarizing Ray’s theory.

The concepts: Cognition and context

There are two main concepts in this theory:

  • Users learn best when the information they need to perform a task is available as they are performing the task.
  • Users learn best when they understand why they are performing a task. They need to know quickly if they need to perform a task. They need concepts as they are performing their tasks.

The solution: Double embeddedness

The solution is what Ray calls “double embeddedness”:

  • Embed the user assistance directly in the user interface.
  • Embed simple concepts directly into the user assistance.

…with progressive disclosure:

  • Initially, show users only a few of the most important options.
  • Offer a larger set of specialized options upon request, and disclose these secondary features only if a user asks for them, meaning that most users can proceed with their tasks without worrying about this added complexity.

In summary, we want user assistance that:

  • Gives users all the information they need and only the information they need
  • Delivers that information when they need it
  • Includes a sentence or two of conceptual information in context
  • Is embedded in the UI in such a way that:
    • The user can find it immediately, without excessive searching
    • If the user doesn’t need the help, it stays out of the way

Real-life implementation: Web Author user assistance


I sat down with the developers at IXIASOFT to discuss how we could implement this theory in our new product, called Web Author. The Web Author is a web editor that allows casual contributors and reviewers to edit and review DITA topics from an Internet browser. Because users would not be familiar with DITA and would not use this tool every day, it was a perfect candidate for the type of user assistance that Ray talked about.

We started by defining three levels of help.

Level 1: Tooltips

When users hover over an element of the UI, a pop-up is displayed with a short overview of the function. The tooltip provides some conceptual information to put users in context as they are performing the task.

The following diagram shows a sample tooltip. When a user logs in, the Web Author lists the documents that are assigned to the user. The number of documents assigned is displayed in the Number of assignments area. When users hover over this area (the purple square with a number in it), the following tooltip is displayed:

Level 1: Tool tip

Level 1: Tool tip

The tooltip contains a More… link so if users need more information about the area, they click the link and level 2 help is displayed.

Level 2: Help area details

Level 2 help provides more detailed information about the area as well as links to what you can do in this area (i.e., the actual procedures). For example, if a user clicks More in the Number of assignments tooltip, the following window is displayed:

Level 2: Help details

Level 2; Help details

The level 2 help is not displayed in a pop-up window, it’s embedded in the user interface, in the lower left corner of the main window, as shown above.

Another requirement of Ray’s theory is that help should be unobtrusive and be out of the way if users don’t need it. For this, we added the hide tips/show tips toggle button on top of the help details window (shown above). When users are familiar enough with the user interface and no longer want the help, they can simply disable it by clicking hide tips. Should they need to see the help again later on, they simply click the show tips button.

If a user still needs more information, clicking one of the related links will open the level 3 help.

Level 3: HTML Help

This is a standard HTML help system available in another tab of the browser. When users click the links in the help details area, they are taken to the corresponding procedure in the online help, shown below:

Level 3: Help system

Level 3: Help system

DITA implementation


To implement the user assistance, we decided to use the DITA <resourceid> element and outputclass attribute.

To link the DITA topic to the appropriate user interface area, we use the <resourceid> element in the <prolog>. For example, to specify the topic that applies to the Number of assignments area, we added the following code to the topic:

 <prolog>
   <resourceid appname="cms.webauthor" id="com.ixiasoft.help.assignments.number"/>
 </prolog>

The appname specifies the product name (in this case, the Web Author) and the resourceid specifies the resource id of the area as specified in the Java code. This ensures that when a user hovers over an area, the Web Author knows from which topic to pull the documentation.

Using the <resourceid> element for context-sensitive help is a pretty standard approach. What’s different about our implementation is that we decided to use the outputclass attribute to identify what to display at each level of help.

We defined three values for outputclass:

  • outputclass="help_tooltip": Defines level 1 help
  • outputclass="help_context": Defines level 2 help
  • outputclass="help_related_information": Defines the related links that will open the HTML help

For example, the following code shows the DITA file for the Number of assignments topic:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE concept PUBLIC "-//IXIA//DTD IXIA DITA Composite//EN" "../../system/dtd/ixia/IxiaDitabase.dtd">
<concept id="per1389986405854" xml:lang="en-us">
	<title>Number of assignments area</title>
    <shortdesc outputclass="help_tooltip"><ph id="number">Displays the number of documents assigned to you in the
        role selected.</ph> </shortdesc>
    <prolog>
        <resourceid appname="cms.webauthor" id="com.ixiasoft.help.assignments.number"/>
    </prolog>
   <conbody>
       <section outputclass="help_context">
           <p>When you select a role in the <uicontrol>Roles</uicontrol> drop-down list, all the
                documents assigned to you and active for that role are displayed in the Assignments
                pane, and the number of documents is updated in the <uicontrol>Number of
                    assignments</uicontrol> area.</p>
            <p>To refresh the list and the number of active documents, click the
                    <uicontrol>Refresh</uicontrol> icon in the <wintitle>Number of
                    assignments</wintitle> area.</p>
       </section>
   </conbody>
    <related-links outputclass="help_related_information">     
        <link href="per1389986405575.xml#per1389986405575" outputclass="help_related_information_link"/>
        <link href="per1389986404838.xml#per1389986404838" outputclass="help_related_information_link"/>
        <link href="per1389986405139.xml#per1389986405139" outputclass="help_related_information_link"/>
    </related-links>
</concept>

When a user hovers over the Number of assignments area, the user assistance looks for the element with the outputclass="help_tooltip". This is usually the <shortdesc> element. If a user clicks the More… link, the user assistance then looks for the element with the outputclass="help_context". In the example above, the attribute is set on the <section> element, so this whole element is included in the help details. The related links specified with the outputclass="help_related_information" are displayed at the bottom of the help details. If a user clicks one of these links, then the user assistance opens up the complete HTML help.

This is shown in the following diagram (you might want to click the diagram to enlarge it and see the details):

Summary of user assistance

Summary of user assistance

One of the advantages of using the outputclass is that it’s valid on any DITA element, so it’s very flexible; the user assistance only needs to look for the defined outputclass, no matter the type of topic. We can use any element in any type of topic to produce the user assistance.

Another advantage of using the outputclass attribute is that the same source content can be used for the user assistance, the HTML online help, as well as a PDF User Guide that was requested by our customers. But this will be the subject of another post, since this one is getting long enough already.

Summary
As you can see from this approach, a lot of magic happens behind the scenes (i.e., in the software) to enable this user assistance. I am lucky enough to work with developers who think that documentation and user assistance are very important, so they decided to treat the user assistance as a feature of the product. They developed a custom XSLT transformation scenario that generates an .hlp file with the user assistance. They also added code to the Web Author that extracts the right level of help according to user actions.

So yes, this method requires custom code from developers, but I think it’s a great example of how DITA can be used to create context-sensitive help.

Again, special thanks to Ray Gallon for his research and very inspiring webinar.