Adding Images to Your Project

In this section:

How to:

You can use images to improve the appearance and usability of WebFOCUS Maintain applications. This section explains how to:


Top of page

x
Procedure: How to Add a New Background Image to Your Form
  1. Open Form1.
  2. Make sure all of the controls are deselected so that you can see the properties for the form.
  3. In the property sheet for the form, double-click the BackgroundImage property.

    WebFOCUS Maintain opens the Image Source dialog box.

    Image Source dialog box

  4. Click New.

    WebFOCUS Maintain opens the Resource Wizard so that you can define this image as a resource in your project.

  5. When the Resource Wizard asks you to specify the path to the image, click the ellipses Ellipses button button to use an Open box to find the image, select spiralbg.gif, and click the Open button.

    Note: Spiralbg.gif is one of the sample Tutorial files that was placed on your hard drive at installation. It should be located in \ibi\apps\Maintain\images.

    Resource Wizard dialog box

  6. Click Next.
  7. In the final window of the Resource Wizard, you specify a name for your image. By default, WebFOCUS Maintain uses the name of the image.

    Resource Wizard dialog box

  8. Click Finish.

    WebFOCUS Maintain displays a dialog box informing you that a copy of this file must be created in the project directory.

  9. Click OK.

    You return to the Image Source dialog box, where your image is now selected as the background image.

    Imge Source dialog box

  10. Click OK.

    Your form resembles the following:

    Form1 example

    You may need to move the controls on your form to the right so that they are not overlapping the spiral. In the Edit menu, click Select all and move them.


Top of page

x
Tiling Images

If you recall, Spiralbg was a short, wide image, but in your form it seems to take up the entire left side. Spiralbg is being tiled, that is, displaying multiple copies of itself. If you want a repetitive design on your form, it is better to use a small image and tile it instead of using a large image with the full picture you want. This conserves memory and ensures that the image looks good no matter how big or small the window of the end user is.

The Image Source dialog box automatically tiled Spiralbg by selecting 0 - Full in the Tiling style list.


Top of page

x
Using Folders in the Explorer

How to:

WebFOCUS Maintain has now added this graphic to your project.

Create a Graphics folder to display all of the graphics you add to the project.

Now that WebFOCUS Maintain has added Spiralbg to the FanClub project, it now knows where to find this image and you can easily add it to other forms in your project. Add it to ShowFan.



x
Procedure: How to View Graphics Folders
  1. In the Explorer, right-click FanClub, click New, and then click Virtual Folder in the submenu.
  2. In the New Virtual Folder dialog box, type Graphics in the Name box.
  3. Select GIF Image as the contents of this folder.

    New Virtual folder dialog box

  4. Click OK.

WebFOCUS Maintain adds the Graphics folder to the folders under FanClub. If you open it, you see SpiralBg.



x
Procedure: How to Add an Existing Background Image to Your Form
  1. Open the ShowFan form.
  2. Make sure all objects on the form are deselected so that you can see the properties for the form.
  3. In the property sheet for the form, double-click the BackgroundImage property.

    WebFOCUS Maintain opens the Image Source dialog box.

  4. Select Spiralbg from the list of available images.
  5. Click OK.
  6. If necessary, move the HTML table to the right.
  7. Deploy and run your application to see how it looks.
  8. Click the Exit button to close the application before continuing the tutorial.


x
Procedure: How to Add an Image to Your Form
  1. Open Form1.
  2. Select all the controls on your form by pressing CTRL+A and move them down so that you have roughly one inch at the top of your form.

    Note: Use your rulers to determine how much room to leave at the top. If your rulers are not visible, select Rulers from the View menu or click the Toggle rulers button on the Layout toolbar.

  3. Select the Image image control button control button.
  4. Draw a box in the empty space at the top of the form.

    WebFOCUS Maintain opens the Image Source dialog box.

  5. Repeat the steps you followed in How to Add a New Background Image to Your Form to add Addafan.gif to your form.
  6. Add the Fan.gif image to your form to the right of the entry boxes. (Repeat steps 3 through 5.)

    Your form resembles the following:

    Form1 example

  7. Open ShowFan and add the image Currfan.gif. (Repeat steps 3 through 5.)
  8. Deploy and run your application to see how it looks.
  9. When you are done, exit your application by clicking Exit and closing Internet Explorer.

WebFOCUS