Exploring Domino® Designer

Building a great application requires the correct tools. You can think of Domino® Designer as your workshop -- it contains all the tools you need to build a powerful application. Before you start building, examine the work area.

Item

Purpose

Applications Navigator

(called the Design pane in previous releases)

Displays the design elements and resource types that an application can contain. If you double-click an element, such as Pages for example, a list of the pages stored in the current database displays in a Design list on the Work pane. The Design action button at the beginning of the Design list for Pages enables you to create a new page.

By default, the Applications Navigator is located on the left side of the Domino® Designer window. You can also create new applications, expand or collapse the list of applications by clicking the first bar, expand or collapse individual applications by clicking the application's beginning bar, and expand and collapse design element categories by clicking on the plus and minus signs. You can also organize your applications into working sets for easy access.

If you right-click the Navigator, you can open and create applications and refresh views and elements you are working on.

Design action buttons

These convenient buttons trigger common tasks, such as creating new design elements. These generally appear when you double click a design element in the Applications Navigator. Examples include the New XPage button, New Frameset button. These buttons appear in the design element list/Work pane area in the middle of the interface.

Design element list

Displays a list of the design elements or resources that are stored in the current application. This list displays in the Work pane. When you click a list item, the Work pane changes to display the work area for the selected element or resource.

The element list has the ability to filter elements for custom viewing via the Filter box in the panel. This panel is the middle panel in the Domino® Designer perspective when a design element is selected. The Filter box is at the beginning of the panel.

You can specify which elements you wish to view by entering a filter string in the Filter edit box. Filtering is done on the data in the Names and Alias columns of the design element list. If you wanted to view all form elements that have the string "form" in the Name or Alias, you would enter "form" into the Filter box and all entries with "form" in the Name and Alias would be displayed in the element list. All entries NOT having the filter criteria would not be shown. For example, "Form1" and "myAppForm" would be displayed in the list where "CustomerProfile" and "TopicName" would not.

To clear the results of the current filter being applied, click on the Clear button next to the Filter edit box and enter a new filter string to get new results.

Application bookmarks

Listed on the Applications Navigator, bookmarks help you to quickly access and organize your applications. You can expand or collapse the application bookmark by clicking the first bar of the bookmark

Menu bar

Presents context-sensitive menus of Designer commands.

Preview design element button

Launches Notes® or a browser to preview your work.

Window tabs

Let you navigate among the open windows in your workspace.

Work pane or canvas

When a design element or resource type is selected in the Applications Navigator, displays the Design list. When an element or resource is selected from the Design list, displays two sections. The first section contains the Work area for the element or resource. The last section contains the Programmer's pane and Properties view.

Controls palette

Contains the UI controls, custom controls, and other controls used for designing the layout of pages and determining how data will be entered and stored in the database. You can drag and drop controls from the Controls palette onto pages. This is launched on the border of the user interface.

It is active only when the editor is active, for example, if you are editing a page or a custom control. The Controls palette contains two drawers of controls:Core Controls and Container Controls. It also contains drawers for Custom Controls, if you have added any to the current Domino® Designer application, and, optionally, Other Controls. A drawer is an embedded pane that allows you to scroll through the options by using the up and down arrows located at the beginning and end of each drawer. You can expand or collapse each drawer, configure drawer options, and hide the palette altogether.

Outline view

Provides a hierarchical representation of the XML source code in pages. You can click on the individual nodes in the Outline view to navigate through the page and update properties in the Properties view. You can also drag and drop elements in order to rearrange sections and change the sequence of elements.

Properties view

Lets you set properties for pages and controls. The Properties view interacts with the editor that is currently open. For example, if you are designing a page, and you move focus to a specific control in the page, the properties for that control become available in the Properties view.

The Properties view is located at the end of the Domino® Designer window and contains individual tabs that you can click to display a set of options. Since each page and UI control has it own unique set of properties, the tabs and options within those tabs change according to what is currently selected. For example, when viewing a list of pages, if you click the name of an individual page, the Properties view displays general information about the page, such as the name of the page, the author, and the date it was created. If you double-click the name of the page, the page opens in edit mode in the Domino® Designer editor, and a new set of tabs appear in the Properties view.

Right-click the title bar of the Properties view to do the following tasks:

  • hide the view
  • detach the view as a separate window
  • restore the view to its default settings

Events view

The Events view is where you create events for components, pages, and controls. You can use the Events view to attach simple actions or scripts to events. Events are organized into categories for easy access.

When writing scripts, you can create server-side or client-side events. You can specify options for updating pages after events occur, including performing partial updates for a portion of page elements based on Asynchronous JavaScript and XML (AJAX) technology. When writing simple actions, you can write actions that perform a pre-programmed activity that can be modified by arguments. You can also create groups of simple actions.

Problems view

Displays errors, warnings, and other information about Domino® Designer resources. These messages are generated when you build the Eclipse workspace. For example, if you save a page that contains syntax errors, the Problems view will display those errors.

Data palette

Lets you view data sources associated with the selected page or panel in the editor, and create controls by dragging elements into the page. To display the Data palette, click Window > Show Eclipse Views > Data.

The next section describes the Programmers pane.

Item

Purpose

Info List

Scrollable window that displays the objects and coding reference information for the design element currently displayed in the Work area.

Objects tab

Lets you navigate between objects and events in the Programmer's pane. To work on an object, select it to expand its list of properties and events. If you select a property or event, the script area of the Programmer's pane changes to show the code that describes it. Events and properties that are already programmed appear in a darker color.

Reference tab

The Reference tab of the Info List is language sensitive; the contents of the Reference tab change depending on the language selected. If you are editing in the Formula language, the window contains @commands, @functions and fields. If you are editing in LotusScript®, the window contains LotusScript® information. If you are editing in JavaScript, the window contains information about the Document Object Model. If you are editing in Java, the window contains Java-related information.

Script area

Lets you enter formulas in the Script area. Formulas can be written in Formula language, LotusScript®, JavaScript, or simple actions.

Note that you can print source code by selecting File - Print when you are in the Programmer's pane. You can print any code you can view in the Programmer's pane.

Properties boxes

Properties boxes are tools you use to select or modify settings for a design element. Properties boxes have tabs and each tab presents different attributes or options. If you hold the cursor over the icon on a tab, the name of the tab appears. In most windows, double-clicking a design element opens the Properties box for the element. You can also choose Design -- <element> Properties from the menu.

Properties boxes are context-sensitive so you can leave them open on your workspace and they will change to reflect the element that you are working with. If you do not have the ability to change items in the Properties box, those items will be either grayed out or hidden.

Tip: You can also collapse some Properties boxes into context-sensitive tool bars by double-clicking the beginning of the box.