Home
HCL Domino Designer XPages User Guide
This guide focuses on the aspects of creating applications using XPages technology.
Designing XPages applications
HCL Domino® Designer provides the means to populate an XPage with controls and other artifacts, and to associate an XPage with data stores.
Adding images, styles, and themes
You can enhance your design with images, styles, and themes.
Adding styles in XPages
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.
Working with custom styles
Create your own custom styles for XPages and controls.
Setting custom margin properties
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.

HCL Domino Designer XPages User Guide
This guide focuses on the aspects of creating applications using XPages technology.
- Product overview
  HCL Domino® Designer supports applications development for the HCL Domino platform using XPages, forms, views, and other elements such as controls.
- Tutorials
  This section contains tutorials and information about tutorials.
- Administering applications
  HCL Domino Designer provides features for administering and managing your work and related files while developing your application projects.
- Designing XPages applications
  HCL Domino® Designer provides the means to populate an XPage with controls and other artifacts, and to associate an XPage with data stores.
  - Previewing and running XPages
    XPages run in Domino® server and Notes® client environments. From Domino Designer, you can preview XPages in both environments.
  - Adding controls
    Controls are visual elements such as edit boxes, buttons, images, and text that allow users to manipulate data on an XPage.
  - Adding controls from the XPages Extension Library
    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.
  - Binding and submitting data
    The data store for XPages is Domino®. You can access the data store through Domino forms and views.
  - Adding images, styles, and themes
    You can enhance your design with images, styles, and themes.
    - Designing with images in XPages
      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.
    - Adding styles in XPages
      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.
      - Designing with styles
        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.
      - Creating style sheets
        Create new style sheets and add them to applications.
      - Importing style sheets
        Import style sheets from your local file system and add them to applications.
      - Setting style sheet properties
        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.
      - Adding style sheets to Xpages
        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.
      - Applying style classes
        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.
      - Working with custom styles
        Create your own custom styles for XPages and controls.
        Setting custom font properties
        Apply font styles to design elements, for example, the font family, size, color, alignment, and more.
        Setting custom background properties
        Apply background and border styles to design elements, for example, color and image properties for backgrounds and border style and width properties for borders.
        Setting custom margin properties
        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.
        Exporting custom formatting to style sheets
        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.
    - Designing with themes in XPages
      A theme is used to define the look and feel of an application.
  - Responsive web design support in XPages
    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.
- Designing composite applications
  You can create composite applications from XPages.
- Programming
  XPages uses JavaScript™ for programming while the forms-based design elements use the formula language, LotusScript®, Java™, and JavaScript.

Setting custom margin properties

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.

About this task

To set margin properties, do the following steps:

Note: Refer to the following descriptions of units of measure:

Pixels: a unit of measure based on the number of "dots" that make up a design element
Ems: the size of the design element's relevant font, for example, small, medium, and large
Percent: a part of 100, where 100 is the full width of the design element's container
Auto: the design element takes up just enough space to display its contents

Procedure

Select the design element in the XPages editor.
In the Properties view, click the Margins tab.
If you are setting custom styles for a view or a section control, you can click the diagram to select an area of the control. For a section control, you can select the entire section or the section header. For a view control, you can select the entire view or the data table.
Note: You can also click a view column or view column header in the Design tab of the editor and then set its properties.
In the Padding section, do the following steps:
1. In the Left field, indicate the amount of space to leave between text and the left margin of the design element.
2. In the Right field, indicate the amount of space to leave between text and the right margin of the design element.
3. In the Top field, indicate the amount of space to leave between text and the top margin of the design element.
4. In the Bottom field, indicate the amount of space to leave between text and the bottom margin of the design element.
In the Margins section, do the following steps:
1. In the Left field, indicate the amount of space to leave between the design element and the left margin of the parent container.
2. In the Right field, indicate the amount of space to leave between the design element and the right margin of the parent container.
3. In the Top field, indicate the amount of space to leave between the design element and the top margin of the parent container.
4. In the Bottom field, indicate the amount of space to leave between the design element and the bottom margin of the parent container.
Click File > Save to save your changes.