> Lucid Spec > Tutorial

• Home
• About Us
• Site Map

Elegance Technologies, Inc.

• Home
• Lucid Spec
  • Quick Tour
  • Tutorial
  • Video Demos
  • User Comments
  • Trial Version
  • Purchase
  • FAQ
  • Support
• C-Sharpener For VB
  • Overview
  • Tutorial & Screens
  • User Comments
  • Converted Code
  • Trial Version
  • Edition Comparison
  • Purchase
  • FAQ
  • Support
  • ROI Calculator
  • Open Source
• Fast Formatter
  • Overview
  • Tutorial & Screens
  • Trial Version
  • Purchase
  • FAQ
  • Support
• Software Consulting
  • Overview
  • Expertise
  • Clients
  • FAQ
• Blog
• About Us
• Site Map

Lucid Spec helps you increase user satisfaction, improve software quality, and reduce development costs. This tutorial will help you get started using Lucid Spec. If you prefer, you can also see a quick tour, video tour, or online help.

Lucid Spec documents contain 2 types of items:

1. Screens describe the layout and functions of GUI screens and widgets, such as buttons, checkboxes, grids, and text fields.
2. Sections include any other relevant information, such as descriptions of actors and use cases. Sections can contain Screens and other Sections, and are used to structure your requirements document.

In Lucid Spec, you iterate among 3 activities:

1. Design screens and their contents, by positioning widgets on the screen, and adjusting screen and widget properties.
2. Simulate applications, particularly the flow from screen to screen.
3. Describe behavior that isn't clear from the layout. Descriptions can be tied to specific widgets or screens, or can be in sections.

When you work on a screen, you use tabs to select a view for each activity.

General Application Layout

In this tutorial, we will develop a functional specification for a web-based temperature conversion program with two screens. The first screen will prompt the user to enter a temperature, an input scale, and an output scale. The second screen will display the converted temperature, and allow the user to start over.

Step 1a: Start the Lucid Spec application. You should see another tutorial, but ignore it for now.
Step 1b: Click on the File menu, and select ”New...”.
Step 1c: Click on ”Simple”, and then click ”OK”.

The Lucid Spec window should look like this:

The top of the Lucid Spec window contains the usual main menu bar and toolbar. In the middle of the window is the main document view; it shows the current screen or section.

Lucid Spec also has four panels to help you design user interface specifications. At the upper left is the Specification panel, which displays the screens and sections in the current document. You can click on an entry to display it in the middle of the window. If you click on a screen, you can design, simulate, or describe it. If you click on a text section, like “Overview” or “Appendix”, you can edit the text. If you click on a section (including the top-level entry, which has the same name as the file), you can see a summary of everything in that section. You can also add, edit, and rearrange items in the Specification panel.

The other three panels are only enabled when they are applicable. At the lower left is the Details panel, where you can enter formatted text to describe the behavior or properties of a screen or widget. At the upper right is the Widgets panel; you can drag or double-click on widgets to add them to a screen. You can use standard widgets, which are always available or custom widgets which you define or load from templates. At the lower right is the Properties panel, where you can view or set properties for the current screen or selected widget.

Designing Screens

The first major activity that Lucid Spec supports is designing screens. The goal is to represent the major elements and how they are organized.

Step 2a: In the Specification panel, click on “Screen 1”.
Step 2b: Click on the Design tab.
(Step 2 may not be necessary, if this was already the view in Lucid Spec.)

Notice that all four panels are now active. The window should look like this:

For the first screen, we need a text box for the input temperature, combo boxes for the input and output scales, a button to initiate the conversion, and some labels.

Step 3a: Drag 2 labels, a text box, 2 combo boxes, and a button onto the screen from the Widgets panel.
Step 3b: Position the widgets on the screen by dragging them.

Notice that the Properties panel shows properties for the currently selected widget, or for the screen if no widget is selected. The window should look like this:

Next, we will make the widgets look more realistic.

Step 4a: Double-click on the upper label to edit its text, and change it to “Temperature Convertor”; you can also edit the label’s Text property.
Step 4b: Click on the label’s Font property, and then click on the button to open a dialog where you can change the label’s font, style, and size. Resize and reposition the label so it is centered over the other widgets.
Step 4c: Change the lower label to “converted to:”.
Step 4d: Double-click on the button to edit its text, and change it to “Convert”, or and change its Text property to “Convert”.

The window should look like this:

Next, we will put meaningful entries in the combo boxes.

Step 5a: Click on the upper combo box, click on the Combo Box Items property in the Properties Panel, and then click on the button to open an editor that should look like this:

Step 6a: Replace the existing entries with “Celsius”, “Fahrenheit”, and “Kelvin” (one per line), and click the “OK” button to close the dialog.
Step 6b: Repeat these steps for the other combo box, or delete it and then copy and paste the first combo box.

The window should look like:

Step 7: Repeat this process for “Screen 2”, using a label, a text field, and a button.

The window should look like this:

Next, we will add a background color and image to make the screen look more like a real web application.

Step 8a: Click on the screen (away from any widgets) so that you see the Details and Properties for “Screen 2”.
Step 8b: Click on the BackgroundColor property, and then click on the button to see a list of valid colors. Select “LightGray”.
Step 8c: Click on the Image property, and then click on the button to open a file dialog.
Step 8d: Navigate to the Lucid Spec installation directory (such as C:\Program Files\Elegance Technologies\Lucid Spec). Open the “Images” directory, then the “Backgrounds” directory, and select “Mozilla Firefox 600x600.gif”.
Step 8e: Click the “Open” button to open the file and close the dialog.
Step 8f: If necessary, reposition the widgets on the screen.

The window should look like this:

Step 9: Repeat this process for “Screen 1”.

Simulating Applications

The second major activity that Lucid Spec supports is simulating applications. The goal is to demonstrate the flow between screens, without the time and expense of a functional software prototype.

Step 10a: In the Specification panel, click on “Screen 1”, click on the Design tab, and click on the “Convert” button to select it.
Step 10b: In the Properties panel, click on JumpTo, click on the button, and select “Screen 2”. (You can also type the name of a screen directly.)

The window should look like this:

Step 10c: Repeat this process for the ”Restart” button in ”Screen 2”.

Now that the screens are connected, you can simulate the application.

Step 11a: Click on the Simulate tab. Notice that the Widgets panel and Properties panel are disabled. (You could close any of the panels by clicking on the “X” in their title bars.)
Step 11b: Enter a number in the textbox, select a temperature scale from each combo box, and click on the “Convert” button. The other screen will appear on the screen.
Step 11c: Click on the “Restart” button, and the first screen will load.

Describing Behavior

The third major activity that Lucid Spec supports is describing behavior which will help produce a concise software specification. The goal is to capture non-graphic specifications, such as validation and business logic that occur behind the scenes.

Step 12a: In the Specification panel, click on “Screen 1”, click on the Design tab, and click on the “Convert” button.
Step 12b: In the Details panel, use the Description text area to describe what the button should do. Notice that a footnote appears next to the button when you enter a description.

The window should look like this:

Step 13: In the Details panel, use the combo box to select “Screen 1”, and use the Description text area for an overview of the entire screen.

The window should look like this:

Step 14: Click on the Describe tab to see a summary of the entire screen, including the description, an image of the screen, and a list of widget descriptions.

The window should look like this:

You can also use sections (such as “Overview” and “Appendix” in the Specification tab) for information that is not tied to specific screens or widgets. For example, you could create a section to describe key actors, and another section for the key use cases.

In the Specification panel, you can click on any section (including the root node) to see a summary of all screens and sections within that section.

Step 15: Click on “Simple”, the root node.

The window should look like this:

Next Steps

If you haven't done so already, download Lucid Spec and try this tutorial! If you have any questions or suggestions, please contact us.