Sharing Images Within a Database
Developers often need to reuse images in the design of a database. For instance, you could place a company logo on multiple forms or pages, or on subforms for reuse. In Release 4, many people stored images in their own database and called them through an @ dblookup command. Although this was helpful for providing a central repository for images outside the file system, images that were referenced in this manner were not cached by the browser. This meant that the image had to be retrieved each time a page that referenced the image was opened or refreshed. Creating an image resource in Releases 5 and 6 enables you to store the image file within the database as an element object, which also enables you to avoid having to make calls to the file system for the image files, as done in typical non-Domino Web development.
The good news is that shared image resources are cached, so subsequent reloads of the same image are much faster. Image resources can be used on pages, subforms, action buttons , forms, and outline entries. They can also be used as background images on actions, outlines, tables, pages, subforms, and forms.
Creating a Shared Image
You create a shared image by storing a GIF, BMP, or JPEG file within the database. Images are stored as GIF, BMP, or JPEG files, respectively. To create a shared image, you must open the Images section of the Shared Resources category in the Domino Designer outline (see Figure 7.1).
Figure 7.1. Shared images in a database are reused by other design objects such as forms, pages, and subforms.
The New Image Resource button provides the means for adding images to your database. With it, you can add images from any drive or directory that you have access to. By default, a shared image resource can be a GIF, JPEG, or BMP file. This is shown in Figure 7.2. Domino also allows you to select multiple images, each of which is separately created and stored as a shared image resource.
Figure 7.2. Multiple image files can be used as shared image resources.
TIP
You can enter in a file's name manually or type *.* in the File Name box provided to see all the files in your directory or to upload one specific file (see Figure 7.3). You can store any type of object in Domino this way and reference it as a database object inside your code. The image types are ignored.
Figure 7.3. Enter a specific filename or *.* in the File Name box to add any file type as a shared image resource.
When an image is selected, the shared image resource is created and listed as an available resource in the database. After it is added, you can set its image properties. To do so, double-click an image listed. This displays the properties box for the image selected, as displayed in Figure 7.4.
Figure 7.4. The Image Resource properties box provides very few options that you can change.
As indicated in Figure 7.4, you can assign the name of the file and an alias to an image. You can then use that name or alias in a formula to specify which image to display based on a condition. The Comment field is useful in providing an explanation of when this image is used in the database. Use the Advanced section of this tab to define an image set. An image set is a graphic file with up to four multiple images that can display each of the four images based on state. If you choose a horizontal image set, by choosing the number of images in the horizontal box, the first image appears by default and each of the other three displays based on the mouseover event, selection, and so on, as shown in Table 7.1.
To create a horizontal image set from an image editor program, make four copies of the image horizontally in the same file, with 1 pixel dividing each copy. Then change the image colors to differentiate each image copy. You can also create a vertical image set of inline images, which you can then use as a database icon. This technique is covered later in the chapter. You also can select a maximum of only two images across and two images down.
Two image set properties are new to Designer 6: Needs Refresh and Web Browser Compatible:
- Needs Refresh ” Adds a refresh symbol next to an image resource name in the list of images, and targets it as an image to be refreshed from the source file. All instances in which the file is used in code inside the database automatically are refreshed by Domino Designer.
- Web Browser Compatible ” Appears if you are creating a horizontal image set (Images Down) and need the images to work on the Web.
Table 7.1. Horizontal Image Set
| Image Number | State |
|---|---|
| 1 | Normal |
| 2 | Mouseover |
| 3 | Selected |
| 4 | Clicked |
CAUTION
Horizontal and vertical images do not work on the Web unless you use the new Web Browser Compatible Designer 6 feature. If you do not select this option, the multiple image file displays all the images in the set on the Web. Be aware that images are handled differently for Notes and Web clients .
Inserting a Shared Image Resource
How you insert an image into a design element depends on the element you choose. The methods are described in Table 7.2.
Table 7.2. Inserting a Shared Image
| Object | Method |
|---|---|
| Form | Choose Create, Image Resource from the menu bar. |
| Page | Choose Create, Image Resource from the menu bar. |
| Subform | Choose Create, Image Resource from the menu bar. |
| Outline Entry | Select an image resource from the properties box. |
| Table Cell | Select the Table Cell Background tab from the Table properties box. |
| Actions | Choose Custom Graphic from the Info tab of the Actions properties box. |
| Form Background | Choose the image resource from the Form Background properties box. |
| Page Background | Choose the image resource from the Form Background properties box. |
| HTML |
Using the tag with the name of the image resource, as in http://server/db.nsf/imagefile.gif?OpenImageResource |
Setting Other Image Properties
The Image properties box for the image resource also allows you to set the property for not replacing or refreshing the design of the element and propagation of the design element. Additional image settings are determined by the design element in which the image is placed.
If an image is placed in a form, page, or subform, the picture properties become available to the embedded image, as shown in Figure 7.5. These properties are further defined in Tables 7.3 and 7.4. To access the Table properties box, right-click inside the table work area and choose Table Properties from the menu.
Figure 7.5. The Picture properties box.
Table 7.3. Info Tab
| Property | Definition |
|---|---|
| Source | You can select and change the image from this property. You can also programmatically assign it with a formula specification. |
| Text Wrap | Define here how text wraps around an image, as shown in Figure 7.5. |
| Scaling | This sets the size of the image as displayed in this instance. |
| Alternate Text | In cases when the image will not be displayed, alternative text is displayed instead. |
| Caption | This text is displayed below the image or is centered in the image. |
| Hotspots | This allows the user to add a hotspot (image map) to an image and shows how many hotspots exist on the image. The number is computed and cannot be changed. |
Table 7.4. Picture Border Tab
| Property | Definition |
|---|---|
| Border Style | Defines the type and color of the border |
| Border Effects | Defines whether a drop shadow is used |
| Thickness | Defines the thickness of each of the border edges |
Text can also be wrapped around an image several ways using the Text Wrap features found in the picture's properties box, as shown in Figure 7.6.
Figure 7.6. Wrapping text around an image is easy to do using the picture's text-wrapping features in the properties box.
The remaining picture property tabs define paragraph alignment, paragraph margins, hide-when, styles, and HTML properties.
Adding Hotspots to Images
When adding an image to a page, form, or subform, you can create an image map by adding hotspots to the image. To add hotspots, select the image and right-click the mouse to reveal the hotspot options (see Figure 7.7).
Figure 7.7. Image with hotspots, including a polygon that segments a portion of the background.
A default hotspot places the hotspot outline around the entire image. All others allow you to select the area where the hotspot will appear by dragging the hotspot around that area. When the hotspot is placed, you can move it by selecting and dragging it to the appropriate place on the image. Figure 7.7 displays an image with a default hotspot and a polygon hotspot.
In the Hotspot Polygon properties box, you, you can assign a name to the hotspot for programmatic use. Additional settings determine what occurs when the hotspot is selected. The hotspot can be linked to another object, execute a URL, or open another named element, as shown in Figure 7.7. A named element or URL can be programmatically assigned using an @Function formula.
The Advanced tab of the properties box can be used to define the tab position of the hotspot and alternative text when the image cannot be displayed.