Meet us at PRINT 19. Chicago, IL. Oct. 3 - 5.
This documentation is for the old version. Go to the latest Graphics Mill docs

Client-Side Control Scripting in AJAX Controls

When you create ASP.NET applications besides server-side controls you may use client-side scripting approach (also known as AJAX). Graphics Mill contains AJAX-based controls which allow you to create more responsive web pages and increase the interactivity, load speed, functionality and usability. For example, to change some property of the control without client-side scripting you should call a server-side function to modify it. As a result, a postback will occur and your page will be refreshed. On the other hand, client-side scripting approach is based on HTML elements and JavaScript using that allows you to interact with controls (modify properties, call methods and add or remove event handlers) without postbacks.

Client-Side Code Conventions

All basic server-side properties, methods and events of Graphics Mill AJAX Controls are doubled in client-side API. That allows you to call them from JavaScript in browser, while server-side members are called on server using C# or VB.NET code.

Note

Not all server-side members are doubled in client-side code and some properties are read-only.

Client-side objects names are similar to server-side ones and placed to reduced namespace. For example, BitmapViewer server-side control has Aurigma.GraphicsMill.AjaxControls namespace but BitmapViewer client-side type - GraphicsMill. So, you don't need to write long lines of code.

All client-side members are called in the following notation:

  • Every word in the member name are capitalized except for the first one, the prepended words (such as get, set, etc.) are separated from the member name with underscope ( _ ).

  • Names of the methods based on the server properties are constructed in the following way:

    The property reader method has the word get prepended to the appropriate property name and separated with underscope, i.e. get_propertyName. For example:
    JavaScript
    <script language="javascript">
      var bv=$find("BitmapViewer1");
      var bvWidth = bv.get_width();
      alert(bvWidth);
    </script>
    
    The property writer method has the word set prepended to the appropriate property name and separated with underscope, i.e. set_propertyName. For example:
    JavaScript
    <script language="javascript">
      var bv=$find("BitmapViewer1");
      bv.set_zoom(2);
    </script>
    
  • Events are represented in the following ways:

    The method that attaches an event handler has the word add prepended to the appropriate event name and separated with underscope, i.e. add_eventName. For example:
    JavaScript
    <script language="javascript">
    function workspaceClickHandler(){
      var bv=$find("BitmapViewer1");
      var x = bv.get_workspaceWidth();
      var y = bv.get_workspaceHeight();
      alert(x + "," + y);
    }
      var bv=$find("BitmapViewer1");
      bv.add_workspaceClick(workspaceClickHandler, this);
    </script>
    
    The method that detaches an event handler has the word remove prepended to the appropriate event name and separated with underscope, i.e. remove_eventName. For example:
    JavaScript
    <script language="javascript">
    function workspaceClickHandler(){
      var bv=$find("BitmapViewer1");
      var x = bv.get_workspaceWidth();
      var y = bv.get_workspaceHeight();
      alert(x + "," + y);
    }
      var bv=$find("BitmapViewer1");
      bv.remove_workspaceClick(workspaceClickHandler, this);
    </script>
    
  • Members that accept enumeration as an argument accept a name of the enumeration member with a namespace prefix. For example:
    JavaScript
    <script language="javascript">
      var bv=$find("BitmapViewer1");
      bv.set_viewportAlignment(GraphicsMill.ViewportAlignment.leftTop);
    </script>
    

Client-Side Objects

The BitmapViewer class is designed to display the image represented by the Bitmap object. It allows to:

  • Zoom;
  • Change zoom mode;
  • Align image in the control;
  • Set navigators;
  • Set rubberbands.

For a further information on BitmapViewer class members see BitmapViewer members. General information on concepts of displaying images in the control see in the article Displaying Image in BitmapViewer (AJAX Controls).

All navigators are represented by separate classes and can be set in the BitmapViewer using navigator property. The following navigators are available:

The BitmapViewer has the rubberband property which specifies the rubberband object. There is only one rubberband implemented in Graphics Mill AJAX Controls at this moment. This one is represented by RectangleRubberband class. This rubberband allows user to select a rectangle portion of the image, also the selection can be moved or resized. You can get more information about these classes in the topic Using Navigators and Rubberbands (AJAX Controls).

Client-Side Scripting Code Sample

The following code sample demonstrates how the client-side scripting approach can be applied to change alignment and zoom in/out the image without page reload

Add BitmapViewer, ZoomInNavigator, ZoomOutNavigator and ZoomRectangleNavigator client-side objects:

HTML
<aur:BitmapViewer runat="server" ID="BitmapViewer1" Width="300px" Height="300px" ScrollBarsStyle="Auto" />
<aur:ZoomInNavigator runat="server" ID="ZoomInNavigator1" />
<aur:ZoomOutNavigator runat="server" ID="ZoomOutNavigator1" />
<aur:ZoomRectangleNavigator runat="server" ID="ZoomRectangleNavigator1" />

Load image to the BitmapViewer instance:

Visual Basic
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        BitmapViewer1.Bitmap.Load(Server.MapPath("cat.jpg"))
    End If
End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        BitmapViewer1.Bitmap.Load(Server.MapPath("cat.jpg"));
    }
}

Add the following HTML elements:

  1. two select elements to set zoom and alignment up;
  2. three buttons to choose a navigator.
HTML
<select id="Select1" onchange="Zoom_Change(this.value);">
    <option value="0.25">25%</option>
    <option value="0.5">50%</option>
    <option value="1" selected="selected">100%</option>
    <option value="1.5">150%</option>
    <option value="2">200%</option>
</select>
             
<select id="Select2" onchange="Alignment_Change(this.value);">
    <option value="centerBottom">CenterBottom</option>
    <option value="centerCenter">CenterCenter</option>
    <option value="centerTop">CenterTop</option>
    <option value="leftBottom">LeftBottom</option>
    <option value="leftCenter">LeftCenter</option>
    <option value="leftTop" selected="selected">LeftTop</option>
    <option value="rightBottom">RightBottom</option>
    <option value="rightCenter">RightCenter</option>
    <option value="rightTop">RightTop</option>
</select>

<input type="button" value="In" onclick="Zoom_In()" />
<input type="button" value="Out" onclick="Zoom_Out()" />
<input type="button" value="Rect" onclick="Zoom_Rectangle()" />

Access the BitmapViewer using its ClientID:

JavaScript
<script language="javascript">
	var bv_id = "<%= BitmapViewer1.ClientID %>";
	var bv = $find(bv_id);
</script>

This script demonstrates a common way to get the BitmapViewer object. Additionaly, you can use a simplified script to get the object, you need to get it at the same document hierarchy level:

JavaScript
<script language="javascript">
    var bv=$find("BitmapViewer1");
</script>

Pay attention, the BitmapViewer or any other client-side object is inaccessible on a standard JavaScript window.onload event. If you need to access some members of an object when page is loaded you should use Sys.Application.add_load ASP.NET AJAX event which fires after all scripts are loaded and objects are created and initialized in the application. Take into account, this event fires on every partial page update, so you should check whether a page is partialy loaded additionally. A simple JavaScript below demonstrates how to get the BitmapViewer when page is loaded:

JavaScript
<script language="javascript">
Sys.Application.add_load( function(e, t){

    if (t.get_isPartialLoad()) return;
    var bv = $find("BitmapViewer1");
    bv.add_workspaceClick(workspaceClickHandler, this);

});
</script>

Write JavaScript event handlers which modify the state of the control using zoom, viewportAlignment and navigator client-side properties.

JavaScript
<script language="javascript">
function Zoom_Change(value){
    var bv = $find("BitmapViewer1");
    if (value) {
        bv.set_zoom(value);
    }
    else {
        bv.set_zoom(1);
    }
}   

function Alignment_Change(value){
    var bv = $find("BitmapViewer1");
    if (value) {
        bv.set_viewportAlignment(GraphicsMill.ViewportAlignment.parse(value));
    }
    else {
        bv.set_viewportAlignment(GraphicsMill.ViewportAlignment.leftTop);
    }
} 

function Zoom_In() {
    var bv = $find("BitmapViewer1");
    bv.set_navigator("ZoomInNavigator1");
    return false;
}

function Zoom_Out() {
    var bv = $find("BitmapViewer1");
    bv.set_navigator("ZoomOutNavigator1");
    return false;
}

function Zoom_Rectangle() {
    var bv = $find("BitmapViewer1");
    bv.set_navigator("ZoomRectangleNavigator1");
    return false;
}
</script>

If you run the web application you will see the following site in your browser:

Client-Side Scripting screenshot