Document! X 2017
Getting Started / Getting Started with Javascript Reference Documentation
In This Topic
    Getting Started with Javascript Reference Documentation
    In This Topic

    Document! X fully supports documentation of Javascript libraries. A comprehensive documentation set is generated providing an instant reference documentation set that the users of your Javascript library can use.

    You can use JSDoc tags in order to provide extra structural information and documentation content in the source code. Document! X supports the following JSDoc tags: @constructor, @class, @enum, @interface, @struct, @namespace, @returns, @param, @protected, @private, @extends, @see

    You can also use .NET standard Xml source comments in order to author content in the source code and / or use the Document! X Content File editor to author additional content outside of the source.

    Javascript Reference Documentation Fundamentals

    Create a new Javascript Reference Documentation Project

    1. Click the Application Menu button at the top left of the Ribbon;
    2. Select the New page;
    3. Choose Empty Project from the available Project Types;
    4. On the New Project dialog, type a descriptive Project Name for the new project; 
    5. You can optionally choose a specific directory in which to save your project by editing the Project Directory field; the project will by default be saved to a subdirectory of the default New / Save directory which is configurable in the Options editor (Paths page).
    6. Click Ok;

    The new empty documentation project will be created and opened for edit. You can now add the Javascript Libraries that you wish to document:

    1. Click the Add Javascript Library Ribbon button on the Project Ribbon tab.
    2. In the Javascript Library dialog:
      1. Click the add dependency  toolbar button and select the javascript files that are dependencies for the javascript files that will be documented.
        Any javascript files added as dependencies will not be documented. You will also not need to include JQuery as a dependency as it is loaded by default.
      2. Click the add javascript file  toolbar button and select the javascript files that will be documented.
      3. Click the text in the right hand pane, Document! X will gather some basic type information on the objects in the javascript files. Discovered types are divided into 3 types:
        Before loading the javascript type information you will need to ensure that the javascript files are ordered correctly i.e. as if they were being loaded in a browser instance.

        Non-Constructable

        Types that have been automatically found by Document! X but can't be constructed using a default constructor (without parameters). You can specify a custom constructor for each type in the textbox below the type name. The custom constructor statement can be any valid Javascript statement that returns an object of the required type, for example:

        new MyObject("parametervalue")

        Non-constructable types without a custom constructor will not be included in the documentation.

        Automatic

        Automatically found objects are objects that Document! X has inferred type information for either based on XML / JSDoc tags or by analyzing the runtime javascript object.

        The inferred type can be overriden by selecting a different type in the combobox next to the name of the object.

        Ambiguous

        Ambiguous objects are objects that Document! X cannot automatically infer type information for.

        A specific type can be selected in combobox next to the name of the object.

        Excluded Global Objects

        Excluded global objects are objects that were found in the dependency files and have been excluded from the analysis. You can force Document! X to include these objects in its analysis by checking the checkbox next the object name
        Objects that weren't found can also be added specifically by qualified name (e.g. namespace.type) in the textbox under the Explicit heading.
      4. Click the OK button to add this Javascript Library to the project.

       

    The selected Javascript library will be added to the Project Explorer under the Javascript Libraries node. You can expand down through each child node to tick / untick individual namespaces or types in order to include / exclude them from the generated output.

    A Content File will be created and added to the project under the Content Files node for each Ajax Component you add to the project. You can use this Content File to author additional content in the pages that Document! X will automatically generate.

    Xml / JSDoc comments from your source code will be automatically used in the generated output. Xml / JSDoc comments content is displayed in the Content File Editor so you can see at a glance what content is already available from source comments and what requires further authoring.

     

    Author content is source code

    You can use the .NET standard Xml comments or JSDoc tags in Javascript source code to provide structural and / or documentation content that will be used in the generated output.

    Xml Example

    Xml comments can be either be placed at the top of the a function body or immediately preceeding the definition.
    function myType(p1, p2) {
        ///<summary>constructs a new myType object</summary>
        ///<param name="p1" type="string">p1 summary</param>
        ///<param name="p2" type="number">p2 summary</param>
    }
    
    ///<summary>field summary</summary>
    myType.prototype.field = 0;
    
    ///<summary>method summary</summary>
    ///<param name="p1" type="string">p1 summary</param>
    ///<returns type="number">method returns</returns>
    myType.prototype.method = function(p1) {
    }

    JSDoc Example

    /**
    * constructs a new myType object
    * @constructor
    * @param {string} p1 p1 summary
    * @param {number} p2 p2 summary
    */
    function myType(p1, p2) {
    
    }
    
    /** field summary */
    myType.prototype.field = 0;
    
    /**
    * method summary
    * @param {string} p1 p1 summary
    * @returns {number} method returns
    */
    myType.prototype.method = function(p1) {
    
    }

    Author content outside of the source code

    If you would like to supplement the content of the pages automatically generated by Document! X outside of the source code, you can do so using the Document! X Content File Editor.

    Content File Editor Movies

     

    Add Conceptual Topics

    Conceptual information is a key part of reference documentation, providing a high level introduction, tutorials or other conceptual information. You can easily create conceptual topics in Document! X.

    1. Click the New Topic button on the Project Ribbon tab, or use the Ctrl+T shortcut key.
    2. The new Topic will be created in the currently selected Topic Category on the Project Explorer (or under the (Un-categorized) node if no category is selected) and will be opened for edit.
    3. Type your conceptual content directly in the editable area of the Topic Editor.

    You can find more information on Topic Editing in the Topic Editor topic.

    Conceptual Authoring Movies

    Change Javascript documentation settings

    The settings that govern Javascript documentation generation are defined in the Build Profile editor. In a new project there is a single Build Profile but you can define many build profiles if you want to create multiple outputs with different settings.

    To edit Javascript documentation settings:

    1. Expand the Build Profiles node in the Project Explorer.
    2. Select the Build Profile that you wish to edit.
    3. Right click on the Build Profile and select Edit.
    4. The Build Profile will be opened for edit.

    In the Build Profile editor, you can find the Javascript Settings pages under the Reference Documentation section.

    Identify undocumented items 

    An essential part of delivering a complete documentation set is ensuring that all the items have been documented. Document! X includes the Undocumented Items tool to quickly and easily identify undocumented items.

    To identify undocumented items:

    1. On the Tools Ribbon Tab, click the Undocumented Items button;
    2. If your project contains more than one Build Profile, select the Profile for which you wish to find undocumented items;
    3. Tick the Item Types (e.g. Class, Method, Schema, Column) that you wish to check for undocumented items;
    4. Tick the Content Types that items must have to be considered documented (just Summary by default);
    5. Tick the Content Sources that should be used when checking for content;
    6. Click the Execute button. Any undocumented items will be listed in the results grid.

    See the Undocumented Items topic for more information.

    Find Undocumented Items Movies

     

    Build and deploy Javascript Reference Documentation

    Click the  Build Ribbon button on the Project ribbon tab to build your Javascript Reference Documentation.

    In a new project, the default Build Profile will be configured to generate output in CHM Html Help 1.x format. For generating documentation for integration with Visual Studio you should change this on the Compiled Help page in the Build Profile editor to either Help 2.x (for Visual Studio 2002 - 2008) or Microsoft Help Viewer (for Visual Studio 2010, 2012, 2013, 2015 and 2017 RC ). You can also define new Build Profiles if you want to generate multiple output types.

    Refer to the Deployment topic for more information on how to deploy your documentation to other machines.

     

    Movies