Introduction
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.

Background
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 the Design
 tab.
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, UNDO, REDO.
vi) Can also just type text on the page.


WST 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 table.

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.
iI) Used by CSS  and JavaScript Library Design Elements in Domino Designer.
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.



3) Files

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 cool !





4) Themes

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 expressions.

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.






5) Client Side JavaScript / Server Side JavaScript Library

Domino Designer 8.5 introduces a new kind of script library design element for JavaScript referred to as Server side JavaScript. For client side we have a new editor in 8.5. Client side is what's happening on your computer in your browser. JavaScript that runs in a web page in the browser 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.




To create a Client Side JavaScript Library, Click on the New JavaScript Library button.  To create a new Server side JavaScript Library, Click on the New Server JavaScript Library button.

On creation of the libraries, you should see an editor opened, that has a layout like this.
Client Side:-





Server Side:-





The References tab on the left shows a list of libraries that can be used on the JavaScript and the various classes associated with that library.  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 methods/functions available.

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.