This guide describes how to develop HCL Domino® Designer applications using XPages, forms, views, and other elements such as controls.
Specified here are the XPages properties.
HCL Domino® Designer supports applications development for the HCL Domino platform using XPages, forms, views, and other elements such as controls.
An XPages application is XML interpreted by a Domino® server or Notes® client and rendered in a web browser or a Notes client. You can interact with controls on the page to send requests to the server.
In Domino®, a form defines how documents are displayed to the user and how the form's data items are stored. A view reports documents in columns and rows.
HCL Domino® Designer is installed as Eclipse perspectives arranged into easy-to-access views, palettes, and editors. You can perform tasks using the main menu, right-click menus, and icons in the view, palette, and editor title bars.
Available design elements are displayed by the Applications Navigator.
The Design editor is where you edit XPages and other design elements, and view lists of design elements.
Use the Source editor to directly edit XPages source code.
Palettes and views provide the tools for working with the design elements.
You can customize Domino Designer so that it runs and displays just the way you want it to.
You can customize many of the general settings of Domino® Designer so that the tool functions the way you that want.
You can customize the Designer Application Navigator display preferences to display only the design elements that you wish.
You can customize the settings of the Java™ Editor in Domino® Designer so that it runs the way you want it to.
You can customize many of the settings of the LotusScript® Editor in Domino® Designer so that it functions the way you want it to.
You can customize Domino Designer source control features to make your application development process and source control tasks more efficient.
You can modify XPages settings in Domino® Designer so that you can use this unique design element in custom ways in your application development.
The immediate resource for getting information is the installed help system.
A search scope limits the help topics that are searched.
HCL Domino® Designer provides some assistive aids to those with restricted mobility or limited vision.
This section contains tutorials and information about tutorials.
This tutorial demonstrates the ease with which you can create a Web application in HCL Domino® Designer using XPage elements. Using this tutorial you create and preview three XPages. You place controls on the XPages for accessing and viewing data, navigating to other pages, refreshing the same page, and performing other actions. You will even use JavaScript™.
During the course of the tutorial, you create three XPages named Site, SiteFinder, and SiteList. When you first open the sample application, you see existing XPages with similar names. Three of them are final solutions and are named SiteFinal, SiteFinderFinal, and SiteListFinal. Two of them are intermediate solutions and are named Site1 and SiteList1.
This lesson teaches you how to create a basic XPage.
An XPage view control is used to display information from a defined view. The control that you create in this lesson lets you display data from the SiteList view.
Forms can also be used to design Web pages, but XPages allow more UI options and greater control of appearance with less effort. It's helpful to also have a form to provide a list of fields for binding data. Also the form can be used to calculate computed fields with field formulas rather than putting code on the XPage.
The SiteList XPage lets you see and edit documents in the application, but we need to add controls to create and delete documents.
The user uses this page to specify search parameters and see the results. The search parameters are values for the city, state, country, and zip code. The user can fill in any of these parameters and click a button. The page is refreshed and results are displayed as a view. A search property for the view limits the display to documents that match the search parameters.
HCL Domino® Designer provides features for administering and managing your work and related files while developing your application projects.
Source control operations are possible with Domino® Designer. The section provides all the information needed for using the source control enablement feature which makes this functionality available.
Source control enablement feature has been introduced to let you store NSF based design elements into a source control repository and perform common source control operations using Domino® Designer.
This topic describes how to first setup a version source control system so that you can use the source control enablement feature.
The following topics provide information on initial set up tasks that need to be completed in order to begin using the Domino® Designer source control enablement feature as part of your day-to-day source control operations.
The source control enablement feature requires you to create an association between an on-disk project managed by the source control and the virtual NSF based project that Designer uses.
The source control enablement feature lets you create an association between an existing on-disk project managed by the source control and the virtual NSF based project that Designer uses.
This topic explains the directions available for the initial synchronization operation that occurs when creating the association between an NSF and an on-disk project.
The source control enablement feature lets you create an association between a new on-disk project and an NSF.
This topic explains the preferences you can set to customize your source control enablement feature operations.
This topic describes the ways to represent the design elements on disk.
The basic steps of a general workflow are provided to give you an idea of how it works with the Domino® Designer source control enablement feature.
This topic describes how to add an existing Domino® Designer application into source control
This topic describes how to bring an application in from source control.
This topic describes how to associate an on-disk project with a new NSF.
This topic describes how to associate an on-disk project with an existing NSF.
This topic provides an example of associating an existing NSF with an on disk project.
This topic describes how to handle a file synch conflict with the source control feature.
This topic describes how to manually synching the NSF and a local source control project.
This topic describes how to remove NSF/project associations in source control.
The single command method is one method you can use for command line building in Designer.
The command file method is another method you can use for command line building in Designer.
HCL Domino® Designer provides the means to populate an XPage with controls and other artifacts, and to associate an XPage with data stores.
XPages run in Domino® server and Notes® client environments. From Domino Designer, you can preview XPages in both environments.
You can preview an XPage in a Domino® server or Notes® client environment.
You can open an XPage upon application launch.
From an XPage, users can open other XPages through navigation rules, a simple action, XSPContext methods, and opening the URL.
For Web access only, you can open an XPage instead of a view.
XPages are signed with the ID of the current Domino® Designer user upon saving the XPage design element, and/or upon generating its implementation (i.e .class) file(s).
You can run XPages applications in the HCL Notes® rich client.
XPages applications in the Notes® client have their own toolbar, which is visible whenever an XPage has focus in the embedded browser.
Security is provided for XPages applications.
You can control how an XPage application prompts the user when the user requests an action that closes a page with modified fields.
For better performance, server-based XPages applications that run in the Notes® client can instead run on the Domino® HTTP server.
When translating XPages and Custom Controls, do not make new copies for each language, since the XPage translation mechanism is different from the mechanism for the non-XPage HCL Notes® design elements.
You can store XPage design elements in one database and redirect other databases there at run-time.
For Domino® developers creating Web applications, XPages is the recommended accessible solution.
Making sure that an XPages application and controls are accessible.
Controls are visual elements such as edit boxes, buttons, images, and text that allow users to manipulate data on an XPage.
You can add controls and text to an XPage using the Design or Source editor. The Controls palette provides a source for controls.
An extension point is provided to let you override design time tooling for the Core and Extension Library controls that are shipped with Designer.
Properties define XPages and controls.
Events are actions that a user might perform such as clicking a button or removing focus from an edit box. Event handlers are actions that you (the designer) perform in response to events.
A facet defines a region in a control for the placement of other controls.
Dojo widgets are prepackaged JavaScript™ code, HTML, and CSS declarations that enhance the appearance and use of controls in both a browser and the Notes® client.
Dojo resources must be made available before being applied to controls.
Once Dojo resources are available on an XPage, you can apply them to controls.
Specified here are the XPages controls.
Inserts a break in text.
Displays a button that the user can click to perform an action.
Provides a custom control with an area that can be edited when embedded in an XPage.
Displays a box that can be selected or cleared.
Displays multiple boxes that can be selected or cleared.
Displays a list of items one of which can be selected.
Contains cells arranged as rows and columns associated with a data source. Each cell can contain other controls (including tables) and text.
Displays a picker for selection of date and time values in an edit box.
Acts as a division or block of content in HTML. Contains other controls and text.
Responds to user actions such as clicking a control.
Downloads a file to the local file system.
Uploads a file from the local file system.
Displays an image.
Inserts a reference to another XPage.
Hides data from the user.
Displays an input field for entering data formatted as rich text.
Displays an input field for entering one line of data.
Displays an input field for entering multiple lines of data.
Displays text.
Opens a URL, a control (anchor link), or another XPage.
Displays a list of items one or more of which can be selected.
Displays error messages for one control.
Displays error messages for all controls on a page.
Pages data for a container control where its data cannot be displayed in one window.
Specifies a pager control within the common pager.
Serves as a container for other controls and text with common data sources and properties.
Combines text in a paragraph format.
Handles a platform event.
Displays a button that can be selected or cleared. When grouped only one button in the group can be selected.
Displays multiple buttons that can be selected or cleared. Only one button in the group can be selected.
Repeats embedded controls by iterating through a data source.
Outputs a client script.
Serves as a collapsible container for other controls and text
Provides an item for user selection, for example, in a check box.
Provides one or more items for user selection, for example, in a check box.
Combines text, typically for the application of properties.
Serves as a collection of containers for other controls and text.
Contains cells arranged as rows and columns. Each cell can contain other controls (including tables) and text.
Displays a value.
Automatically fills in its parent control as users type a succession of characters that match a specified suggestion.
Defines the top-level container control, that is, the XPage itself.
Displays data from documents in rows and columns.
Lists an acceptable MIME type for the uploaded file.
Specifies a character used in conjunction with the ALT key to put focus on a control.
Defines an access control list for a page or control.
Specifies the MethodBinding application action to invoke when the user activates the control.
Specifies the MethodBinding action listener to be notified when the user activates the control.
Specifies a collection of action listeners.
Activates an event handler after a page loads.
Activates an event handler after the Render Response phase of the JSF cycle.
Activates an event handler after the Restore View phase of the JSF cycle.
Aligns content in a container.
Allows users to delete attached files or not.
Specifies text to display when an image cannot be rendered.
Always calculates the last document in a container.
Specifies descriptive text for an assistive technologies label for a control.
Adds attributes to a control. Use this property only where attributes are not available as properties.
Enables or disables the browser feature for remembering and automatically completing user input.
Activates an event handler before a page loads.
Activates an event handler before the Render Response phase of the JSF cycle.
Specifies the background color.
Specifies an expression that binds the control to a control property.
Specifies the width in pixels of the border around a table or group of controls.
Displays a caption above a container control.
Specifies a list of CSS classes to be applied to a table caption.
Specifies the space between a table cell border and its content in pixels.
Specifies the space between a table border and cells, and between cells in pixels.
Specifies the character encoding of the retrieved resource.
Specifies the value of a data element bound to a selected (as opposed to cleared) control.
Specifies an image for a collapsed section.
Specifies the number of columns to display.
Specifies the number of columns spanned by the current cell.
Specifies a list of CSS classes to be applied to view or table columns.
Specifies the name of the underlying view column in the data source.
Specifies the identifier of a control on an included page.
Activates an event handler when a document is computed or recomputed.
Specifies a list of CSS classes to be applied when a container control is rendered.
Specifies a list of CSS classes to be applied to tab content if it does not have a style.
Specifies the content type, text or HTML.
Defines the data format if it is not string.
Specifies the position and shape of a hot spot on the screen for use in client image maps,
Specifies a list of CSS classes to be applied to a Created On column.
Specifies an alternate title for a Created On header.
Overrides the value of the creation date.
Creates a form element or not.
Specifies a list of CSS classes to be applied to the current page control if it does not have a style.
Defines data sources for a page or control.
Defines data contexts.
Specifies a list of CSS styles to be applied to a view data table.
Specifies a list of CSS style classes to be applied to a view data table.
Specifies whether a control is initially selected or cleared.
Specifies how a target page opens by default on the Notes® client.
Specifies an initial value for a bound data element.
Indicates that the script does not output document content, for example, with a document.write statement.
Specifies the text that appears when the user mouses over the delete icon.
Specifies the body of the dialog that verifies deletion of the attached file.
Specifies a list of CSS classes to be applied to a Delete column.
Specifies text direction for a control that does not inherit its direction.
Disables or enables client side validation.
Disables a control or not.
Specifies the CSS style class to apply to the label for the disabled list.
Disables or enables modified notifications for a control.
Disables the theme or not.
Disables execution of validators or not.
Displays a selected item as plain text or a link to the underlying document.
Displays the creation date or not.
Displays the modification date or not.
Displays the file size or not.
Displays the file type or not.
Specifies a list of dojo arguments for output to the script tag.
Specifies a list of Dojo attributes.
Specifies a dojo event or function name for output to the script tag.
Creates or does not create a dojo form element for the page.
Starts or does not start the dojo parser when the page is loaded.
Overrides the default dojo type used to create the data store for a control.
Uses or does not use a dojo theme.
Specifies the default Dojo type for creating a control.
Specifies the CSS style class to apply to the label for the enabled list.
Allows saving a modified page if the user navigates away.
Specifies a list of CSS classes to be applied to the end tab if it does not have a style.
Specifies a list of CSS style classes to be applied to messages with a severity of error.
error
Specifies a list of CSS styles to be applied to messages with a severity of error.
Indicates whether to escape characters that can be mistaken for XML and HTML markup.
Specifies the name of this event.
Specifies scripts and simple actions to be executed when a control event occurs.
Specifies the name of a platform event.
Lists an excluded MIME type for the uploaded file.
Specifies the fragment of the page to execute.
Determines the execution mode: complete or partial.
Specifies an image for an expanded section.
Identifies a facet region.
Specifies a list of CSS style classes to be applied to messages with a severity of fatal.
fatal
Specifies a list of CSS styles to be applied to messages with a severity of fatal.
Specifies the name of an uploaded file.
Overrides a file name reference with a URL to the file.
Specifies an alternate title for a File Name header.
Specifies an alternate value for a File Name column.
Specifies the number of the first row to be displayed.
Specifies a list of CSS classes to be applied to the first page control if it does not have a style.
Specifies a list of CSS style classes to be applied to footers.
Specifies a control for which to display error messages.
Directs pager actions to a data control.
Redirects focus to another control on the XPage.
Specifies how a table is framed.
Specifies the minimum time in seconds before triggering a server request.
Displays only messages not associated with a control or displays all messages.
Assigns a radio button to a group.
Specifies a collection of event handlers to be executed.
Specifies a visible label for the top of a section.
Specifies a list of CSS style classes to be applied to headers.
Specifies a list of CSS classes to be applied to a section header.
Specifies the height of a control.
Hides a file download control when no attachments are available for download.
Redirects the user to a specified location.
Specifies the language and country code of a retrieved resource.
Displays a warning when a document is saved with conversion from HTML to rich text.
Specifies an Active Content Filtering (ACF) processor for sending data.
Specifies an Active Content Filtering (ACF) processor for receiving data.
Specifies the path for an icon.
Specifies descriptive text for an icon.
Displays an icon before the content of a column.
Identifies a control uniquely among all controls on a page.
Indicates whether type ahead honors or ignores case.
Specifies an image.
Specifies alternate text for an image when the image cannot be displayed.
Notifies listeners or converts and validates data immediately during the Apply Request Values phase rather than later during the Invoke Application or Process Validation phase.
Indents response documents or not.
Specifies the name of a variable to make the row index available for children.
Specifies a list of CSS style classes to be applied to messages with a severity of info.
info
Specifies a list of CSS styles to be applied to messages with a severity of info.
Initially closes a section or not.
Uses a server-side image map or not.
Describes a selection item.
Displays text for a selection item.
Specifies a value to return to the parent control when the user selects an item.
Specifies the visible label for a control.
Specifies a language and country code.
Specifies an alternate title for the Modified column header.
Modified
Specifies an alternate value for the Modified column.
Specifies a list of CSS classes to be applied to the last page control if it does not have a style.
Specifies the direction of grouped controls, horizontal or vertical.
Specifies the layout for displaying multiple error messages.
Specifies how buttons appear in a pager control.
Provides a screen readable group description for a control.
Creates a control when the page is loaded or not.
Specifies the URI of a long description for a resource.
Specifies a maximum number of characters that the user can enter into a control.
Specifies a maximum number of selections to display.
Specifies a list of CSS classes to be applied to each middle tab if it does not have a style.
Forces the MIME type of the uploaded file.
Specifies the minimum characters that the user must type to trigger type ahead.
Specifies the retrieval mode for the dropdown list for type ahead.
Specifies the control whose action to execute if the user navigates away from a modified page and elects to save the page.
Specifies the message to display if the user navigates away from a modified page.
Specifies a list of CSS classes to be applied to a Modified column.
Allows multiple items to be selected.
Specifies the character that separates elements of input for a control bound to a multi-value element.
Removes leading and trailing white space from each element of multi-value input.
Specifies a list of CSS classes to be applied to a Name column.
Indicates if the result of an action is used to navigate to another page.
Specifies rules for navigating from a page.
Activates an event handler when a control loses focus.
Activates an event handler when a control loses focus and its value changed since last gaining focus.
Activates an event handler when a mouse click occurs.
Activates event handlers when a page or panel loads to the client.
Executes a client script after a server request.
Activates an event handler when a mouse double click occurs.
Executes a client script if an error occurs on a server request.
Specifies a client script that responds to a platform event.
Activates an event handler when a control gains focus.
Activates an event handler when a control receives a key press.
Activates an event handler when a control receives a key press and release.
Activates an event handler when a control receives a key release.
Activates an event handler when a control receives a mouse press.
Activates an event handler when a control receives a mouse movement.
Activates an event handler when a control receives a mouse away movement.
Activates an event handler when a control receives a mouse over movement.
Activates an event handler when a control receives a mouse release.
Activates an event handler when existing text in a control is selected.
Executes a client script before a server request.
Prohibits an underlying document opened through a link from being edited.
Specifies a list of CSS outer classes to be applied when a control is rendered.
Generates an icon for a page.
Specifies the number of pages in a group control.
Specifies an HTML5 manifest attribute to add to the HTML for the XPage.
Opens a selected document using a specified page.
Specifies the name of an included page.
Generates a title for a page.
Opens a URL when the user clicks a link.
Specifies the location of a pager in a container.
Specifies parameters passed to a retrieved resource.
Executes only the parent control.
Refreshes only the parent control upon a partial refresh, for example, collapsing or expanding a view.
Masks user input to a control by echoing asterisks.
Activates an event handler after a document is created.
Activates an event handler after a document is opened.
Activates an event handler after a view is opened.
Activates an event handler after a document is saved.
Prevents filtering a list of values using the submitted user value.
Specifies parameters and values.
Activates an event handler before a document is created.
Activates an event handler before a document is opened.
Activates an event handler before a view is opened.
Activates an event handler before a document is saved.
Specifies a list of CSS style classes to be applied to read view entries.
Makes a control read-only or editable.
Generates a span element instead of a label element.
span
label
Renders any existing value bound to the control.
Specifies the fragment of the page to refresh.
Determines the refresh mode: complete, partial, or none.
Specifies the relationship between the current document and the referenced anchor.
Removes the repeat after repeating its content.
Makes a control visible or not.
Specifies a renderer to encode and decode a control.
Creates controls multiple times or iterates over the single set of controls.
Enforces the submission of a value for a control.
Specifies resources for a page.
Specifies a reverse link from the referenced anchor to the current document.
Provides a role for the use of assistive technologies.
Adds attributes to a row. Use this property only where attributes are not available as properties.
Specifies a list of CSS style classes to be applied to view or table rows.
Specifies the maximum number of rows to display.
Specifies the number of rows spanned by the current cell.
Specifies rules between table cells.
Indicates if a save should occur after an action.
Specifies a client script.
Identifies the tab that gets initial focus in a tabbed panel.
Specifies a list of CSS classes to be applied to the selected tab if it does not have a style.
An alias for the value property.
value
Specifies the shape of a hotspot on the screen for client image maps.
Displays a check box before the column content.
Displays the column headers or not.
Displays the detail portion of a message or not.
Displays a read-only control as disabled.
Displays the summary portion of a message or not.
Displays unread marks or not.
Specifies the number of characters that the user can enter into a control at once.
Specifies a list of CSS classes to be applied to a Size column.
Specifies an alternate title for a File Size header.
Specifies an alternate value for a Size column.
Skips a specified number of named containers to assign a group.
Makes a column sortable by the user at run time.
Imports a script from a different application or domain.
Specifies a list of CSS classes to be applied to the start tab if it does not have a style.
Specifies font styles for a control.
Specifies a list of CSS classes to be applied when a control is rendered.
Indicates if a request should be submitted to the server after an action.
Provides a screen readable description of a control.
Specifies the order in which a control gets focus when the user presses the Tab key.
Specifies a markup tag for the control.
Specifies how a target page opens.
Attaches a visible label to a control.
Specifies a theme for setting component properties.
Specifies the amount by which a clickable time element increases.
Specifies the amount by which a visible time element increases.
Specifies the range of a time picker.
Provides a screen readable title for a control.
Specifies client separators in the case where the user machine specifies suggestions.
Displays the detail portion of a message as a tool tip or not.
Describes the function of a button.
Specifies the type of input control.
Specifies the type of navigation control.
Specifies the formatting for a section.
Specifies the scripting language.
Specifies a list of CSS classes to be applied to a Type column.
Specifies an alternate title for a File Type header.
Specifies an alternate value for a File Type column.
Specifies the value of a data element bound to a cleared (as opposed to selected) control.
Specifies a list of CSS style classes to be applied to unread view entries.
Specifies a list of CSS classes to be applied to each unselected tab if it does not have a style.
Specifies the path to an external resource.
Uses a client-side image map.
Retains the original name of a file for an attachment or not.
Specifies a validator method called during Process Validations of MethodBinding to perform check the value of the control.
Enforces requirements for data entry.
Aligns content vertically in a container.
Binds a control to a data element or other value.
Assigns a label or target to a control.
Specifies a listener method that is notified when a new value is set.
Specifies a collection of value change listeners.
Specifies suggestions returned when its initial characters are entered.
Specifies ta character that separates suggestions in the suggestions string.
Indicates whether a value list contains an XML markup fragment rather than a list.
Specifies the name of a variable to make row data available.
Specifies the name of a request scope variable being used by the control.
Defines how the view state is maintained.
Specifies a list of CSS styles to be applied to a view panel.
Specifies a list of CSS style classes to be applied to messages with a severity of warn.
warn
Specifies a list of CSS styles to be applied to messages with a severity of warn.
Specifies a list of CSS classes to be applied to a view panel.
Specifies the width of a control.
A custom control is a collection of controls that are stored as a single object. Similar to the way a subform can be placed on more than one form, a custom control can be created once and added to multiple XPages. When you update a custom control, every XPage that uses that custom control automatically gets updated with the changes. This saves you design time because you do not have to update each XPage separately.
Create a new custom control to use in XPages.
Set properties for the custom control as an independent design element. Properties include options for configuring data sources, applying styles, specifying validation and visibility settings, and more.
Set general properties for custom controls. You can add a description, and set options for displaying the custom control in the Controls palette.
Define your own properties for the custom control. You can specify default editors and values to use when setting properties for custom controls inside XPages. You can also write scripts that determine when properties are visible and considered valid inside XPages.
Add user interface (UI) controls to the custom control. Then, you can select each UI control individually and set properties for it just as you would for a UI control inside an XPage.
Define the editable areas that you want to include in the custom control. Editable areas are regions that users can modify when the custom control is placed on an XPage. All other regions that fall outside of editable areas are read-only and cannot be modified.
Set properties for editable areas in the custom control. You can set properties for the name of the editable area as well as the facet name. You can also configure how and if the editable area is visible inside the custom control at run time.
Add the custom control to an XPage.
Set properties for the custom control as it relates to the XPage that contains it. You can set properties for its name and visibility status as well as for any additional properties that you defined when setting properties for the custom control design element.
Add controls to editable areas in the custom control. You can set properties for these controls in the Properties view, just as you would set properties for any other controls that you add to XPages. You can also change the facet name of controls in editable areas if you are computing the value at run time.
Organize custom controls in the Controls palette. You can put them in categories for easy access.
The XPages Extension Library provides additional controls ready to use. The controls include an application layout object, an improved dialog, pickers, in place forms, Dojo components, dynamic content, and much more. The controls support enhancements to the Domino(r)® templates.
Here are guidelines for using some of the controls in the XPages Extension Library.
Extended versions of the discussion and team room templates are provided.
Specified here are the XPages Extension Library @functions.
Specified here are the XPages Extension Library simple actions.
Specified here are the XPages Extension Library controls.
Specified here are the XPages Extension Library properties.
The data store for XPages is Domino®. You can access the data store through Domino forms and views.
An XPage can contain data sources based on Domino® forms and views.
XPages controls can be bound to elements of data sources.
Bound data items can be submitted to their data sources as new and replacement documents.
Domino® lets documents be encrypted on the web using XPages.
Domino® lets documents be encrypted on the web using XPages. Let's look at the details of how this can be done
To better understand how the Secret Key Picker control works with encrypting and decrypting XPages, let's look at some sample markup.
The encryption and decryption of documents using XPages requires access to the ID Vault.
The dominoIDVaultBean is an object used to maintain the information needed to access the Domino® ID Vault.
When using XPages with the Relational Database Management Support (RDBMS) feature (found in the Extension Library as a plugin), you can directly connect to any relational database that supports a JDBC driver.
XPages uses a connection pool to make the most efficient use of database connections. This method allows for a pluggable architecture that can be used for different implementations.
The XPages RDBMS feature is installed as part of the product installation process. This topic describes how to do the initial setup required to connect your application to the RDBMS feature.
An extension mechanism is part of the RDBMS feature so that you add new connection pools in a more flexible and easy way.
The logging feature in the RDBMS plugin lets you test the actual switching being made between connection pools.
You can enhance your design with images, styles, and themes.
XPages use the image resources within your application for image control and other image settings. As such, working with images in XPages is actually working with image resources. Also, when you want to designate an area for an image but do not have a copy of the image yet, you can create a image placeholder and add the image later. In most locations, an image property of an XPage control can be computed so that the image can be determined at runtime. You can import images from your local machine, add them to XPages and custom controls, and copy them in one application and paste them into another application. You can delete and rename images in applications. Finally, you can also choose a PNG, GIF, JPEG, or BMP file to use as a high quality application icon image for your applications or you can use the classic "16 color" images.
You can import JPEG, BMP, and GIF images into applications from your local file system. After you import images, you can add them to XPages and custom controls. Images that you have imported display in both the Resources > Images section in the Applications Navigator and also as available resources for the Image UI control on the Core Controls palette.
Import images from your local file system into your application. You can import images in any of the following file formats: PNG, JPEG, BMP, and GIF. Once you have imported the image you can also rename or delete it.
Add images that you have imported into the application. You can also add image placeholders if you want to reserve space on the XPage or in the control but do not have a copy of the image yet.
Set and display properties that define how image resources are handled in your application. By selecting the image in the Applications Navigator, you can view file information and set basic and advanced properties including Web Properties, Design options and more.
If you want to override the default styles provided with the target platform, you can create new styles or import existing styles from your local file system. You can add style sheets to applications and then add them to the XPages within the applications. You can also create custom formatting, export it to a style sheet as a class, and then reuse it across multiple XPages and controls.
By default, XPages and user interface (UI) controls use the default cascading styles sheets (CSS) provided with Domino® Server. However, you can override Domino Server styles with your own style sheets and custom settings.
Create new style sheets and add them to applications.
Import style sheets from your local file system and add them to applications.
Set and display properties that define how style sheet resources are handled in your application. By selecting the style sheet in the Applications Navigator, you can view file information and set basic and advanced properties including Web Properties, Design options and more.
When you create or import a style sheet and add it to a application, you are ready to add it to XPages within the application. Then, you can apply style classes to XPages and controls. You can also create custom formatting and export style attributes to the style sheet.
After you create or import style sheets to the application, apply style classes to design elements or compute the class value based on a formula.
Create your own custom styles for XPages and controls.
Apply font styles to design elements, for example, the font family, size, color, alignment, and more.
Apply background and border styles to design elements, for example, color and image properties for backgrounds and border style and width properties for borders.
Apply margin and padding styles to design elements, for example, spacing between controls and their containers or padding between design elements and the edge of the XPage.
When setting custom style properties for design elements, you can export the style attributes into a style sheet as a new style class. Then you can apply the style class to other design elements. Later, if you decide to edit the style class, your changes will take effect in all design elements that are associated with it without having to modify each design element individually.
A theme is used to define the look and feel of an application.
Create new themes and add them to applications.
Themes are defined in XML files using specific tags.
Control entries are identified by themeIds. At runtime, the correct style attributes are determined by matching control names.
By using a theme you can assign values to any JSF control properties when the XPage is created.
Themes can assign the value of JSF expressions to properties when the XPage is created.
Properties of a theme can be targeted to apply specifically to pages created by XPages or Domino® Web Engine technology.
Themes can inherit properties from a parent theme.
By using a theme, you can access resources which are automatically inserted into XPages when viewed.
Use themes to define global or application properties.
Edit an existing theme in the Database Resources.
Save a theme as a database resource.
Copy existing themes to use as templates in applications.
Delete theme resources and remove them from applications.
The XPages Extension Library supports Bootstrap, a Responsive Web Design (RWD) framework. This support comes in the form of an XPages Responsive Bootstrap plugin that you can use in your XPages applications.
The XPages Responsive Design plug-in adds a renderer for the Application Layout control and a new Application Configuration complex type for the control.
To assist with using the responsive design Bootstrap theme, the Application Layout control provides a two page Application Layout wizard.
Instead of graphics and image files, the responsive design feature uses glyphs from the glyphicon font file for icons wherever possible in the XPages and Extension Library controls
jQuery is a JavaScript Library that simplifies HTML document navigating, event handling, animating, and Ajax interactions used in web application development.
The Select2 control lets you limit the number of items that can be selected in a multi-select control. You can use the Select2 control in combination with the responsive design feature.
If you wish to use the responsive design feature and support Internet Explorer 8, you will need to add some extra resources to your server.
To assist with creating applications that support a responsive design, Domino Designer provides exclusive responsive design controls, properties, and layouts.
You can create composite applications from XPages.
Components based on XPages can be developed with Domino® Designer.
Creating a component requires work in both the component and XPage interfaces.
You can use Publish and Receive events to communicate among components in an application.
On the Events tab in the component, click the Add button to create an event.
On the XPage, you can use a client-side script to publish a defined component event.
On the XPage, you can use a client simple action to publish a defined component event.
On the XPage, create an event to receive information from another component.
Parameters require work in both the component and XPage interfaces.
You can run an XPage as a component in a composite application.
XPages uses JavaScript™ for programming while the forms-based design elements use the formula language, LotusScript®, Java™, and JavaScript.
The scripting contexts are event handlers and formulas. The scripting language is JavaScript™ supplemented by simple actions and expression language (EL).
Listed here are the available events.
A simple action performs a pre-programmed activity that can be modified by arguments. Simple actions apply to event handlers. Simple actions can be grouped.
You can handle a server or client event with a simple action or groups of simple actions.
The triggering of a Client event sends its JavaScript™ code plus the XPage context to an interpreter on the user's client.
Client
The triggering of a Server event sends its JavaScript code plus the XPage context to an interpreter on the Web server.
Server
Use the JavaScript™ editor to create and maintain scripts.
An embedded window appears as part of the current context and allows immediate editing. The window can be maximized and minimized, then restored with controls at the top right of the window.
A modal editor appears in its own window. Edits are not applied until the window closes.
You can set preferences to control the JavaScript™ editor.
The editor provides styles, indentation, brace completion, and quotation mark completion.
Content assist proposes coding alternatives based on the objects available in the current context.
The Reference tab provides a list of global objects and system libraries.
The Outline tab provides a hierarchical outline of the variables and functions defined in the script.
The Schema tab provides a list of data elements organized by data source.
Syntax errors are detected for server scripts.
Use the JavaScript™ debugger to examine server-side JavaScript code during execution on a Domino® server or a Domino preview server (which runs on the Domino Designer client).
These steps show you how to adjust the notes.ini file on the run-time machine, create a debug configuration in Domino® Designer, and connect the debugger.
notes.ini
The JavaScript™ debugger runs automatically when JavaScript code is encountered. You control the debugger from the Domino® Designer debug interface.
A JavaScript™ library allows you to store classes, functions, and variables for common use within an application. A JavaScript library is either a client library or a server library.
You can create a library starting with a clean coding area.
Script libraries are signed with the ID of the current DDE user upon saving the script library design element, or by selecting an entry in the script libraries view and invoking the sign button.
You must import script libraries into XPages to reference them from those XPages.
You can add or import a client or server script library to an XPage.
You can import a server script library into JavaScript™ using the import statement.
import
The LotusScript® editor in Eclipse (LSEE) is an alternative to the Notes-based LotusScript editor. LSEE takes advantage of the many editing features of Eclipse while retaining most of the Notes® features. You can switch back and forth between the Eclipse and Notes editor by selecting or clearing the related Designer editor Preferences.
The LotusScript® editor in Eclipse (LSEE) works somewhat differently from the Notes® LotusScript editor.
This version of the LotusScript® editor in Eclipse (LSEE) works for LotusScript agents, script libraries, and database scripts.
You can use the LotusScript editor in Eclipse (LSEE) to create a library of LotusScript scripts.
The LotusScript editor in Eclipse (LSEE) lets you create and edit templates to be inserted when you create new code elements. The templates can include variables that are replaced with real values when the new code element is created.
A code template is text that is automatically inserted into the body of new code element definitions. Code templates are extremely useful for enforcing or simplifying programming standards in a team or organization. You can specify uniform error handling, logging, or tracing code, and the LotusScript editor automatically inserts it each time you create a new code element, saving time and preventing accidentally ignoring the standard or making mistakes in its implementation.
The editor automatically generates comments for new libraries, classes, types, functions, subs, property gets, and property sets. You can control the content of these comments, disable automatic comment generation, and manually trigger the creation of a comment.
When you create code and comment templates, you can insert variables that are resolved dynamically at runtime. You can use a variety of date/time, application, object name, and author variables.
The LotusScript® editor in Eclipse (LSEE) permits you to work on all sections at once, or one section at a time.
Automatic compilation of LotusScript libraries is a preference and is on by default. You can also manually compile all LotusScript in the current application.
The LotusScript editor in Eclipse (LSEE) provides continuous error reporting and support for using Erl() in a user-defined class.
You can optionally save scripts that contain errors. For compilation and execution, the latest script without errors is used. For editing, the latest script is used.
The LotusScript editor in Eclipse (LSEE) provides three kinds of immediate help in the user interface.
Content assist in the LotusScript® editor in Eclipse (LSEE) is similar to auto-completion in the Notes® editor, but not exactly the same.
Hovering over certain elements displays the associated help topic or developer comment if it is available.
Hovering over the name of certain elements makes available a link to the element.