---

Write UI Spec and Generate UI Spec Report

This tutorial will guide you to write UI Spec and generate UI Spec Report.

1. Write Document UI Spec
2. Write Page UI Spec
3. Write UI Spec Control
4. Generate UI Spec Report
5. UI Spec Report Structure
6. More Information

Write Document UI Spec

1. Select Reports | UI Spec | Edit Document UI Spec... menu item from the main menu.
2. UI Spec Edit Dialog will be shown.
3. Add Id, Name, Description and properties for the entire document or project.

Write Page UI Spec

1. Select Reports | UI Spec | Edit Page UI Spec... menu item from the main menu.
2. UI Spec Edit Dialog will be shown.
3. Add Id, Name, Description and properties for the the current page.

Write Control UI Spec

Add UI Spec control wherever you want to describe about GUI components/section such as Menubar, Navigation Panel, Search Panels, Tables etc.

1. Drag and Drop UISpec control from Shapes Explorer.
2. When this control is selected, Double click or Enter or Select Reports | UI Spec | Edit Control UI Spec... menu item from the main menu.
3. UI Spec Edit Dialog will be shown.
4. Add Id, Name, Description and properties for the selected UI Spec control.
5. You can add any number of UI spec controls for each page.

Generate UI Spec Report

You can compile UI Specifications together and generate a HTML report. You can include/exclude Page GUI Designs in the report.

1. Select Reports | UI Spec | Generate UI Spec Report... menu item from the main menu.
2. Generate UI Spec Report dialog will be shown.
3. Select a folder to save HTML report files.
4. Click OK.
5. UI Spec Report will be shown in default Browser such as Internet Explorer.

UI Spec Report Structure

The UI Spec Report structure as follows.

More Information

1. You can write UI Spec for document, page and controls.
2. You can turn on/off visibility of UI Spec display(Visible property). May be useful while saving pages as images without UI Spec legends.
3. You can include/exclude UI Spec for controls in the report.
4. You can include/exclude Page GUI Designs(Image) in the report. May be useful if you want to keep documentation and images separately.
5. Each UI spec has an ID, Display Name and description. IDs are useful to define UI Spec with certain order such as A,B,C etc. or 1,2,3 etc. or 1.1, 1.2, 1.3...etc.
6. You can add custom properties such as Project name, Created Date, Designer Name, OnMouseClick, Scenario-1, Ctrl+A shortcut etc.
7. You can add custom categories such as Project Details, Page Details, Events, Keyboard Shortcuts etc.

The End