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.

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

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) {

}

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

Content File Editor Movies

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 and HelpStudio.

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

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.

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

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

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