Back to Concepts and HOW TOs

Contents 1 Description 2 Prerequisites 3 Procedures 3.1 Adding a ResourceProject 3.2 Adding an ImageButton 3.3 Adding an ImageRadio Button 3.4 Adding a DynamicImageAction Control 4 Error Handling 5 Examples 6 Next Steps 7 Tags

[edit] Description

This document describes how to use images in your applications.

[edit] Prerequisites

Working with Images
Introduction to Bungee Builder
Overview : Building a Bungee-powered Application
Understanding Control Bindings
Binding a Control to an Object

[edit] Procedures

[edit] Adding a ResourceProject

To add a ResourceProject:

1. Connect to a WebDAV (Web-based Distributed Authoring and Versioning) folder on the Bungee Connect server and upload your images.
   1. In Windows:
      1. Open My Network Places.
      2. Click Add a network place.
      3. When the wizard appears,
         1. Click Next.
         2. Select Choose another network location and click Next.
         3. Type the name of the WebDAV folder, https://webdav.bungeeconnect.com, and click Next.
         4. Type your user name and password.
         5. When the WebDAV folder opens, drag your images from a local folder into the WebDAV folder. Your images are now located on the Bungee Connect server.
   2. In KDE:
      1. Open Konqueror to remote:/, then activate the Add a Network Folder icon
         or
         Run knetattach
      2. When the Network Folder Wizard appears,
         1. Select WebFolder (webdav) and click Next.
         2. In Name, type a descriptive name (for example, BungeeConnect).
         3. In User, type your BungeeConnect user name.
         4. In Server, type  https://webdav.bungeeconnect.com.
         5. In Folder, type /.
         6. Select Use encryption.
         7. Click Save & Connect.
         8. An Authorization dialog is displayed. Type your password.
         9. When the WebDAV folder opens, drag your images from a local folder into the WebDAV folder. Your images are now located on the Bungee Connect server.
2. In Bungee Builder, add a ResourceProject to your solution.
   1. Right-click on your solution and select Add Project.
   2. In the dialog box that's displayed,
      1. For Type, select ResourceProject.
      2. In Project Name, type the name for the ResourceProject.
      3. Click OK. The ResourceProject is listed under the solution along with the other project types.
   3. Right-click on the ResourceProject and select Import Image Directory.
   4. In the file browser, locate the directory containing your images.
   5. Select the images you want to import into the ResourceProject and click OK. This copies the image files from the WebDAV folder into your ResourceProject.
   6. In your solution, expand the ResourceProject to see the image object for the images you imported.

[edit] Adding an ImageButton

An ImageButton displays one of four images, depending on its state (Enabled, Disabled, Down, and Over), instead of text. To implement an ImageButton, you first need to add a ButtonImageSet to your ResourceProject (the ButtonImageSet defines the image for each of the four states). The ImageButton uses the ButtonImageSet to determine which image to display for the various states of the button.

To create a ButtonImageSet:

1. Right-click on the ResourceProject and select Add ButtonImageSet.
2. For each state (Enabled, Disabled, Down, and Over), click the ellipsis button and select the image you want to use to represent the state.
3. Click OK.

Once you have a ButtonImageSet defined, you can add the ImageButton control to your form and assign the ButtonImageSet.

To add and and configure the ImageButton control:

1. From the Toolbox, drag ImageButton onto your form.
2. In the Property Editor, for ButtonImageSet, click the ellipsis button.
3. In the dialog box that's displayed,
   1. For ButtonImageSet, click the ellipsis button.
   2. In the dialog box that's displayed, expand the ResourceProject and select the ButtonImageSet you added earlier.
   3. Click OK.

Note From this dialog box you can also add a new ButtonImageSet by selecting Create New ButtonImageSet. This option allows you to add an ImageButton control without having to first create a ButtonImageSet.

[edit] Adding an ImageRadio Button

An ImageRadio button displays one of eight images, depending on both the state (Enabled, Disabled, Down, and Over) and whether or not the button is pressed. Consequently, the ImageRadio button uses two ButtonImageSets instead of one (like the ImageButton, described above).

To add and configure an ImageRadio button:

1. From the Toolbox, drag ImageRadio onto your form.
2. In the Property Editor, for Button Image, click the ellipsis button. In the dialog box that's displayed, Click the ellipsis button for ButtonImageSet.
   1. In the dialog box that's displayed, expand the ResourceProject and select the appropriate ButtonImageSet.
   2. Click OK.
3. Click OK.
4. In the Property Editor, repeat Step 2, above, for Button Image Pressed.

Note From the first dialog box opened above, you can also add a new ButtonImageSet by selecting Create New ButtonImageSet. This option allows you to add an ImageRadio control without having to first create a ButtonImageSet.

[edit] Adding a DynamicImageAction Control

A DynamicImageAction control lets you change an image dynamically based on a value. The value could be a string, Boolean, or integer.

To implement a DynamicImageAction control, you must first add a ValueImageSet to the ResourceProject, which is a set of images with assigned values.

To add a ValueImageSet:

1. Right-click on your ResourceProject and select Add ValueImageSet.
2. In the dialog box that's displayed,
   1. Click Add.
   2. For Value, type the value for the image (an integer, a string in double quotes, or, to use a Boolean value, type either the word true or the word false).
   3. For Image, click the ellipsis button and another dialog box is displayed.
      1. Expand your ResourceProject.
      2. Select the appropriate image.
      3. Click OK.
   4. To add additional images, click Add and repeat the above steps.
   5. When you've added all the images you want, click OK.

After you have created a ValueImageSet, you can add a DynamicImageAction control to your form and assign the ValueImageSets.

To add a DynamicImageAction control:

1. From the Toolbox, drag DynamicImageAction onto your form.
2. In the Property Editor, for Images, click the ellipsis button.
3. In the dialog box that's displayed, expand your ResourceProject and select the appropriate ValueImageSet. Click OK.
4. At the top of the Property Editor, click Behavior.
5. For Path, click the ellipsis button.
6. In the dialog box that's displayed, select the field that will be used to control the value for changing the image. Click OK.

Note You can use a ValueButtonImageSet for assigning values to images instead of the ValueImageSet described above.

[edit] Error Handling

 

[edit] Examples

Hello Bungee Connect Tutorial

[edit] Next Steps

Simulating or Testing Your Project or Application

[edit] Tags

Log in if you would like to rate this page.