APPLICATION DESIGN


Creating an image resource
You can create a resource library of images to use throughout your application. Image resources let you maintain the image in only one location. If there are any changes to the image, changing and refreshing the source file distributes the changes wherever the image is referenced.

Note Refer also to the Lotus Domino Designer XPages User Guide for more information on using images in Domino Designer.

To create a shared image resource

1. Expand Resources in the Applications Navigator.

2. Select Images from the list of Resources.

3. Click "New Image."

4. Select GIF, BMP or JPG in the "Files of type" list.

5. Select one or more graphic files you want to include as image resources.

6. Click "Open." The graphic files you selected are added to the list of available image resources.

You can now select this image from the Controls palette where you can drag-and-drop it on, for example, an XPage when creating a page design

Adding an image from the Control Palette

Use the following to import an image from the Control palette:

1. Drag an Image control from the Core Controls section of the palette onto the editor. You are presented with the Select Image window.

2. Click the Add... button.

3. In the Open window, navigate to the directory where the image file that you wish to import resides.

4. Click on the filename of the image you wish to import.

5. Click Open to add the image to the list of available image resources.

The imported image also displays in the Resources-Images section in the Applications Navigator. It is now available from the image list every time you dran and drop an image from the Core Controls section of the palette.

To set image resource properties

To set Image properties, select the image from the list of images and select the Properties tab below the work pane.

Basics tab

This tab contains information on the selected image and let you set basic properties and advanced properties at the image file level, for example, name, alias, comment and page placement and display options. You can also preview the image from this tab. You can also specify:


Web Properties tab

This tab contains options for setting properties on how images are handled in Web applications. This includes the following fields:


Info tab

This tab contains file information such as creation date, modification date, size, access, etc.

Design tab

On the Design tab of the Image Resource Properties box, select any of the following design options:
Field or boxDescription
Inherit from the design templateType the name of a template from which the design element might inherit changes.
Prohibit design refresh or replace to modifySelect this to prevent this design element from being modified during a refresh or replace.

If you use a template to refresh or replace the database design, to ensure that this option takes effect, select this option as well as the option "Propagate this prohibition of design change" in the design properties of the template.

Propagate this prohibition of design changeSelect this so that if a database inherits this design element, the "Prohibit design refresh or Replace to modify" box option will be inherited also, and it will still be selected.
Do not show this design element in menus of Notes R4 or later clientsSelect to hide the design element from Web users.
Hide design elements from (Web Browsers)Select to hide the design element from Web users.
Hide design elements from (Notes R4.6 or later clients)Select to hide the design element from IBMR LotusR NotesR Release 4.6 or later clients.

Fields tab

With this tab you can look up a field in a design element and troubleshoot if it is not running properly. To view specific information for each field, select the field name, and refer to the right panel which gives information about the selected field.

To colorize grays

If you want an image to blend with the userfs system colors, select the option "Colorize grays" on the Basics tab of the Image Resource Properties box. When enabled, the grays in an image that use the Lotus palette change to the color scheme of the userfs operating system. This feature lets the image resources blend in with the other elements of the userfs system, such as dialog boxes and menu bars.

To insert an image resource

1. Open a form, document, or page.

2. Place the cursor where you want to add the image.

3. Choose Create - Insert Resource.

4. Under Databases, select the database from which you want to insert the image resource.

5. Under "Resource type," select Images.

6. Under "Additional resources," select an image to insert from the list of images.

7. Click OK to display the image in the form, document, or page.

Tip You can use the images among multiple databases by putting the image into a template. Databases inheriting from that template have easy access to the image.

For more information on creating templates and inheriting design, see the topic "Templates" in the chapter "Completing an Application and Managing Design Changes."

To insert an image resource from a file in the current database

You can insert an image resource from a file that you created and stored in your current database.

1. Open a form, document, or page.

2. Place the cursor where you want to add the image.

3. Choose Create - Image Resource.

4. In the "Insert Image Resource" dialog box, make sure that the Database is set to -Current database-.

5. Click "New."


6. After you have selected a file, in the Insert Image Resource dialog box, click OK.
To rename an image resource

Perform the following steps to rename an image resource that you created.

1. Open a form, document, or page.

2. Choose Create - Image Resource.

3. In the Insert Image Resource box, select the image resource that you want to rename.

4. Click Rename.

5. Type a new image resource name. You should also specify an alias if there is a chance that the image resource could be renamed. To specify an alias, after the image resource name, type a vertical bar (|) followed by the alias name. For example, ImageName|ImageAlias.


To delete an image resource

Perform the following steps to delete an image resource that you created.

1. Open a form, document, or page.

2. Choose Create - Image Resource.

3. In the Insert Image Resource box, select the image resource that you want to delete.

4. Click Delete. The image resource is deleted from the image resource list and from the database.

To reference an image resource with HTML

You can use Pass-thru HTML to reference image resources within a database.

1. Enter the HTML <img src> tag using the name of the image resource. For example:


2. Select text and choose Text - Pass-thru HTML.

3. (Optional) Use other HTML formatting tags to position the image.

To make design changes to an image resource

To make design changes to a graphic used as an image resource, export the image to a graphics program. Once the changes are made, update the image resource and distribute the design changes.

Exporting an image resource

1. Select the image or images you want to redesign.

2. Choose Resource - Export.

3. Select the directory you want to copy the image to.

4. Click Open.

Distributing design changes for an image

When you redesign an image resource, you can distribute the changes wherever the image appears in the database.

1. In the list of images in IBMR LotusR Domino(TM) Designer, select the images that have changed and click Refresh.

2. In the Open dialog box, select the images from your directory.

3. Click "Open."

Designer automatically updates the image in all of the places it is referenced in the application.

Creating a custom letterhead

You can select a graphic to appear as the mail header for all employee mail. Simply add your company's logo to the image resources of your organizations' mail templates. Only employees who have access to the mail template will see the letterhead; other recipients, such as those outside your company or with an Internet mail account, will receive a standard letterhead.

For details on creating a custom letterhead, see "Creating a custom letterhead" on the Lotus Developer Domain.

See Also