Page View Panels

The Capture Selector and Capture Toolbar

Here you can select the capture that is currently displayed. The capture toolbar lets you perform the following actions:

  • Make a new capture: adds a new capture (or replaces the current one)

  • Lock/Unlock capture: useful for locking the selected capture during recognition

  • Delete capture: delete the current capture

  • Edit capture properties:

    • Change the capture comment shown as a tooltip on the Capture tab in the Capture selector

    • Select the capture(s) shown in the Application view

The Display Selector

Here you can you choose the way the selected capture is displayed in the Display panel:

  • A screen display

  • A tree display

  • A split display showing both screen and tree displays

  • A source display

The Display Panel

What is shown here depends on what you have chosen in the display selector.

Screen Display

This display shows the selected screen capture.

It consists of the following panels:

  • A resize panel (1)

  • An action toolbar (2)

  • A correction toolbar (3)

  • A display panel (4)

Display Panel (4)

The display panel displays the page capture. You can select any component simply by clicking on it. The selected component is then surrounded by a blue rectangle.

Right-clicking a component displays a context menu that lets you:

  • Associate the component with a new item

  • Associate the component with an existing item

  • Add the component to an item components pattern

  • Create a new subpage from the component

  • Associate the subpage with the selected page

A component can be surrounded by:

  • A blue rectangle when selected

  • A green or a red rectangle. This colored rectangle is set by Studio Recognition

For a complete description of recognition with Desktop Studio, see About the Recognition Mechanism.

Resize Panel
The resize panel lets you change the zoom level of the screen capture:

  • Using the Slider (1) of the resize panel (or using the mouse wheel with the CTRL key pressed)

  • Using the Zoom to fit (2) button to fill the display panel with the screen capture

  • Using the Reset view (3) button to restore the native size of the screen capture

You can scroll through the screen capture using:

  • The Scroll button (4) at the top of the Resize panel

  • The scrollbars

  • The mouse wheel

The resize panel can be hidden/shown using the Hide button (5).

Correction Toolbar

When the captured page is displayed, you can click each item on the page, which is then surrounded by a green rectangle. If the rectangle position is incorrect due to a general offset or a ratio error in the screen capture, you can adjust it via the Offset and Ratio values. To do this, uncheck then check the desired value, then enter the corrected value or use the Spin button.

Action Toolbar

The action toolbar lets you:

  • Copy the entire screen capture to the clipboard

  • Display an image selector

Image Selector

The image selector (1) lets you:

  • Crop the screen capture

  • Copy a part of the screen capture to the clipboard

  • Create items from a rectangle or from an image

In order to do this:

  • Show the image selector by checking the Hide/Show Image Selector button (2)

  • Move and size the image selector rectangle (drag&drop over the rectangle or on the sides of the rectangle)

  • Right-click the image selector to display the context menu. The following menu items are displayed:

    • Copy image selection

    • Create new item from image selection

    • Crop image to selection

Tree Display

The tree display shows the DOM tree (internal structure) of the capture.

It consists of the following panels:

  • An action toolbar (1)

  • The display panel itself (2)

The action toolbar (1) lets you:

  • Show the full tree or only the rooted tree (for subpage captures)

  • Show/hide the recognized items and subpages

The rooted tree is the Document Object Model (DOM) subtree under the root component. You cannot associate a component that is outside of the rooted tree with an item of the page.

The display panel shows the DOM tree. Each component can be displayed in one of the following ways:

A regular component

An “out of the rooted tree” component. Only visible if the button is selected.

A recognized item

An associated , unrecognized item

A badly recognized/unrecognized item

  

A recognized page

An associated, unrecognized page

A badly recognized/unrecognized page

As in the screen display, right-clicking a component displays a context menu that lets you:

  • Associate a component with a new item

  • Associate a component with an existing item

  • Add the component to an item components pattern

  • Create a new subpage from the component

  • Associate the subpage with the selected page

The tree display is useful if you want to:

  • Access invisible components, such as menu items

  • Display the recognized subpages

  • See a technical view of the capture

This view is synchronized with the screen display: If you select a component in one display, it is also selected in the other display.

Source Display

The source display shows the source of the capture, where available (that is, the HTML source).

It consists of the following panels:

  • An action toolbar (1)

  • The display panel itself (2)

The action toolbar (1) lets you:

  • Search for text in the source using the Find button

  • Manage the word-wrap option.

The source display can help to view page elements not shown in the DOM, like JavaScript code for Web pages.