Introduction

Since we have added a data source for ADAM in version 4.4, you got an easy way to consume ADAM objects in standard ASP.NET controls, like e.g. a System.Web.UI.WebControls.GridView.

Next to this, we have added at that time the FieldBinder mechanism to easily show the content of a Field when using the data sources framework.

But did you know that you have also an easy solution for showing images of a record? They are called image binders and out-of-the-box, we provide you six of them:

1. ClassificationImageBinder
   
2. FileTypeImageBinder
   
3. LanguageImageBinder
   
4. RecordImageBinder
   
5. UserImageBinder
   
6. WatermarkImageBinder
   

Usage

Using them is similar to a FieldBinder. In the template of a data bound control, add a control that is capable of showing an image. Next, add e.g. an Adam.Web.UI.WebControls.RecordImageBinder, in the case you are binding to records of cource. On the RecordImageBinder, specify in the TargetControlID the ID of the control that must show the image. Basically, that’s it - as demonstrated in the sample below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<asp:GridView ID="recordGrid" runat="server" 
              AutoGenerateColumns="false" 
              DataSourceID="recordDataSource" 
              PageSize="5" 
              AllowPaging="true">
  <Columns>
    <asp:TemplateField HeaderText="Image">
      <ItemTemplate>
        <asp:Image ID="recordImage" runat="server" />
        <awc:RecordImageBinder ID="recordImageBinder" runat="server" 
                               TargetControlID="recordImage" />
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

<awd:AdamDataSource ID="recordDataSource" runat="server"
                    DataProviderType="Adam.Web.UI.DataSources.DataProviders.RecordProvider, Adam.Web"
                    DataOptionsProviderID="recordLoadOptions"
                    SelectExpressionMode="All" />
<awd:RecordOptionsProvider ID="recordLoadOptions" runat="server">
    <LoadOptions PreLoadFiles="FilesVersionsPreviews" />
</awd:RecordOptionsProvider>

These image binders are not limited to Image controls only. If you have another (custom) control with a different property than the Image.ImageUrl property, you can specify the TargetPropertyName on the image binder. This enables you to set for example the NavigationUrl of an HyperLink control, as demonstrated below.

1
2
3
4
5
6

<asp:HyperLink ID="imageLink" runat="server" 
               Text="show preview" />
<awc:RecordImageBinder ID="imageLinkBinder" runat="server" 
                       ImageType="Preview" 
                       TargetControlID="imageLink"
                       TargetPropertyName="NavigateUrl" />

Some of these image binders have even more options that allow you to control what is shown. On a RecordImageBinder, you can e.g. specify whether you want to display the thumbnail or the preview of the record. Or specify whether a watermark must be applied. Have a look at the controls to get a complete view.

As a bonus

Next to these image binder controls in the Adam.Web assembly, you'll find an additional control, the ImageBox control. This control generates an image HTML element, but allows the developer to set more behavior options.

If you set a Width and a Height on the control, you can specify how the image must be resized to fit the specified dimensions. This is controlled by the SizeMode property, which has 4 possible values:

1. Normal
   The ImageBox is sized equal to the size of the image that it contains.
    
   
2. StretchImage
   The image within the ImageBox is stretched or shrunk to fit the size of the ImageBox.
    
   
3. Clipped
   The image is placed in the ImageBox depending on the ImageLocation property. The image is clipped if it is larger than the ImageBox it is contained in.
    
   
4. Zoom
   The size of the image is decreased maintaining the size ratio. When the image is larger than the ImageBox, the ImageLocation property is used to determine the location of the image in the box boundaries.