In this article we will discuss some of the design elements and associated
editors in Domino Designer 8.5. This article can be considered as a brief
top level overview of Editors in Designer.
Themes, XPages, Custom Controls are new design elements that are introduced
in Designer 8.5. Previous versions of Domino Designer 8.0 supported
the style sheet design element as well as the Java Script Library. However
the Editors used to open and edit them were different, or not a part of
Designer itself (in the case of style sheets and files). With Domino Designer
8.5, we are leveraging the underlying usage of Eclipse and open source.
As Designer runs on top of Eclipse we can use any of the editors provided
by Eclipse, any of the Eclipse projects such as Web Tools Project, or internally
developed Eclipse editors such as the XML Visual Editor. It is also
very easy to hook up a new editor for better features, support and usability
and you can bring in any Eclipse compatible editor from any source through
an update site should you want to use one not included in either Designer
or in Eclipse itself.
1) XPages and Custom Controls
To start with, let’s discuss the design elements XPages and Custom Controls.
XPages and Custom Controls open in the XVE/WST editors.
XML Visual Editor (XVE).
Features provided by XVE include
i) To open a XVE editor, create a new XPage or Custom Control. Click on
ii) Easy Drag and Drop of controls on XPages and Custom Controls.
iii)Easy editing of the controls i.e. increase/decrease width/height can
be done by clicking on or dragging on the control boundaries.
iv)Property Panels show the Properties of the control. Changes can be done
directly in the editor or Property Panel. User can set Properties in the
Property Panels. Two forms of Property Panels are available. These are
Property Sheet View (All Properties), logical view(tabbed panels).
v) Supports Right click options like CUT, COPY, PASTE, and DELETE, SELECT,
vi) Can also just type text on the page.
or the Eclipse Web Standard Tooling Project (http://www.eclipse.org/webtools)
provides extensible tools for the development of Web Applications and
support development, testing and debugging with various servers. We include
this project in Designer, and it brings a number of useful editors of the
i) Opens up on clicking the Source tab
after opening an XPage or
a Custom Control. Whenever a user drags and drops a control on an XPage,
the text in the source tab gets populated.
iii) Users can easily type XML in the source area. Content Assist (CTRL
Space) option is available for checking syntax and attributes supported
by the editor.
iv) Support for all Eclipse Editor Options. Preferences can be set in the
File -> Preferences -> Web, Web Services, and XML. These options
are useful for editing design elements.
v) Any XML formatting errors or XPages errors on the Source Tab are shown
in the Problems View on save of the XPages. Clicking on the error in the
Problems view brings the highlight onto the correct line on the XPage source.
Switching between the Design and Source Tab:-
XML Visual Editor. Easy Drag and Drop of Controls and Setting Properties
Web Standard Tools Editor. User can type in text here.
Markers on Syntax errors are available
2) CSS Editor
Using the CSS Editor is very simple and convenient. The CSS editor supports
features like content-assist, Document/Element Formatting Structured Selection,
Delimiter Highlighting (bracket matching), Property Sheet, Outline View
and Highlighting. The content-assist is the most preferable option if you
are novice to writing or creating a CSS file.
You can open the CSS file and type CTRL Space,
It will show you the list of options available, Hit Enter.
Again, within that block, do a CTRL Space, a complete list of available
attributes, functions will be shown. So a user doesn’t need to remember
any properties, values, attributes. Here is an example of an empty
CSS page. Doing a CTRL Space, brings up all the tags available.
Attributes inside Body Tag
List of colors for border bottom color
CSS code can thus be easily written, with plenty of assistance from the
development environment within.
The Files design element has been a part of earlier releases of Domino
Designer, but we have never had any built in editors for them. In
Domino Designer 8.5 a user can create an .html, .wsdl, .css or an .xml
file and use the in built editors provided by the WTP. The editors
are simple to use and provide content assist options. Attached below
are snapshots of these editors
When you open a newly created HTML file and use Content Assist (i.e. do
a CTRL Space). The first snapshot shows the assistance available for an
empty file – it allows you to create the entire template of an html file.
A HTML Editor
Once the template is ready, users can add different blocks of HTML again
using Content Assist.
Here is another simple way of creating a WSDL file, perhaps for a web service.
Create a new file with a .wsdl extension. The WTP WSDL editor opens
up. You can right click to add a service, binding port types.
Check Out the source that got generated in the wsdl file. Pretty
The theme design element is new in Domino Designer 8.5. A Theme is used
to define the look & feel of an application, but can also be used to
set any XPage control property at a more level. Themes can be set globally
(all applications) or per application. Different themes can be applied
depending on the context. A Theme is handled on the server side It drives
the page creation. It controls the HTML generation. A Theme assigns values
to properties when the page is generated at runtime.
Values can be simple strings or JSF
A theme can be created by expanding the Resources category under your database
and navigating to themes. You can right click, or use the New Theme button
to create one. When you create a new theme, you would see the resources
and the property blocks commented. They provide a template of setting a
resource and properties on controls in a theme. You can uncomment them
and add your values. Here is an example
The theme design element uses the XML editor from WST – and you can either
edit the source of the XML as shown above by clicking the Source tab, or
you can use the Design tab to edit the contents in a tree-like fashion.
A property value is applied to the control if none has been set by the
user. Custom values in the page take precedence. Themes can also be disabled
for any control by checking the Disable runtime-applied default styles
option, shown below.
Domino Designer 8.5 introduces a new kind of script library design element
. For client
side we have a new editor in 8.5. Client side is what's happening on your
would be an example of something client side. You don't need the server
to help with the functionality of the script. If you can run it on your
computer (without a server being installed) and it works, it's client side.
Server side is when the server is being used to process something. This
capability is new in the Domino 8.5 server, and is leveraged by XPages
and Custom Controls. Script or code that is run on the server does NOT
appear on or in the web page that is sent to your browser -- the web page
that your browser receives is only the RESULT of the script or database
code or processing that happened on the server.
You can go to the Code -> Script Libraries category under the Applications
Navigator. Double click on the Script Libraries. You should see five buttons
in the middle editor.
On creation of the libraries, you should see an editor opened, that has
a layout like this.
The References tab on the left shows a list of libraries that can be used
Simply double-clicking on the classes adds them to the editor on
the right. After that you can do a content assist (CTRL Space) to get the
The article explains easy usage of different editors available within Domino
Designer. At the same time, users can plug-in new editors and start
using them inside Domino Designer and Eclipse.