Client-Side Control Scripting in AJAX Controls

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.

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:

• ZoomInNavigator allows user to zoom the image in on left mouse button click.
• ZoomOutNavigator allows user to zoom the image out on left mouse button click.
• ZoomRectangleNavigator allows user to zoom selected rectangle portion of the image in.
• PanNavigator allows user to drag the image while the mouse button is pressed.

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:

<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:

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

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.

<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:

<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:

<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:

<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.

<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: