Changes between Initial Version and Version 1 of CodeSamples/JavaScript/AJAXViewerEventHooking


Ignore:
Timestamp:
Nov 20, 2007, 2:16:12 PM (16 years ago)
Author:
jbirch
Comment:

Restructuring

Legend:

Unmodified
Added
Removed
Modified

  • CodeSamples/JavaScript/AJAXViewerEventHooking

    v1 v1  
     1== Hooking to events in the AJAX viewer ==
     2
     3The AJAX viewer in its current form is quite limited in terms of customizability. It would be nice if you could listen to capture certain events in the ajax viewer and add on your custom javascript. This page will show how to do the following:
     4
     5 * Checking when the map has been loaded.
     6 * Handling viewer selection.
     7
     8It is assumed you know what anonymous functions are and how they work.
     9
     10== Checking when the map has been loaded ==
     11
     12Before we can hook on to events in the ajax viewer, we need to check that the DOM for the ajax viewer has been loaded. This sample shows how to do it.
     13
     14Assume your viewer page looks something as follows:
     15
     16{{{
     17
     18<html>
     19<head>
     20        <title>Viewer Sample Application</title>
     21</head>
     22<frameset rows="30,*" frameborder="no" framespacing="0">
     23        <frame id="titleFrame" frameborder="no" marginwidth="0" marginheight="0" scrolling="no" src="title.html">
     24        <frame id="viewerFrame" frameborder="no" marginwidth="0" marginheight="0" scrolling="no" src="[URL TO AJAX VIEWER]">
     25</frameset>
     26</html>
     27
     28}}}
     29
     30Insert the following script block in the head of the page:
     31
     32{{{
     33<script type="text/javascript">
     34
     35// Map loaded handler
     36function OnMapInitialized() {
     37    // Map has been initialized now we're off to the races.
     38    alert("Map has been initialized");
     39}
     40
     41window.onload = function() {
     42    //Timer variable
     43    var timer;
     44
     45    // This is our "watch" function. What we are doing here is
     46    // repeatedly checking the mapInit value of the Map Frame. When
     47    // mapInit is true, then the map has been loaded.
     48    var watch = function() {
     49       
     50        // What we are doing here is attempting to access the mapInit
     51        // variable of the Map frame. The reason the code is in a try-catch
     52        // is because chances are that this code access the DOM
     53        // of the map frame before its DOM has been initialized.
     54        try {
     55            var mapFrame = viewerFrame.mapFrame;
     56            if(mapFrame.mapInit) {
     57 
     58                // Remove the timer so this watch function stops executing
     59                clearInterval(timer);
     60                 
     61                // Call our custom handler
     62                OnMapInitialized();
     63            }
     64        }
     65        catch(e) {
     66        }
     67    };
     68   
     69    // Start the "watching" process. We basically invoke the watch function
     70    // every 200ms until the map has been loaded.
     71    timer = setInterval(watch, 200);
     72};
     73
     74</script>
     75}}}
     76
     77
     78== Handling viewer selection ==
     79
     80This sample will show how to handle the selection in the ajax viewer. This assumes the html is the same as the previous example.
     81
     82The code "overrides" the OnSelectionChanged function of the map frame (this is called by the map frame when selection changes) and replaces it with our own.
     83
     84Insert the following script block in the head of the page:
     85
     86{{{
     87<script type="text/javascript">
     88
     89//Function variable to store the original OnSelectionChanged
     90var origOnSelectionChanged = null;
     91
     92//Our custom selection handler
     93function MySelectionHandler()
     94{
     95    //This is important. We don't want to replace the original function, rather
     96    //we want to attach our code into the execution sequence. So we call the original
     97    //function first.
     98    origOnSelectionChanged();
     99
     100    //Now our code goes here. For our example, we'll just show the number of objects selected.
     101    var count = viewerFrame.GetMapFrame().GetSelectedCount();
     102    alert(count + " features selected");
     103}
     104window.onload = function() {
     105    //Timer variable
     106    var timer;
     107
     108    // This is our "watch" function. What we are doing here is
     109    // repeatedly checking the mapInit value of the Map Frame. When
     110    // mapInit is true, then the map has been loaded.
     111    var watch = function() {
     112       
     113        // What we are doing here is attempting to access the mapInit
     114        // variable of the Map frame. The reason the code is in a try-catch
     115        // is because chances are that this code access the DOM
     116        // of the map frame before its DOM has been initialized.
     117        try {
     118            var mapFrame = viewerFrame.mapFrame;
     119            if(mapFrame.mapInit) {
     120 
     121                // Remove the timer so this watch function stops executing
     122                clearInterval(timer);
     123                 
     124                // Replace the OnSelectionChanged function with our own function.
     125                // It is safe to do this now because the DOM for the map frame is fully initialized.
     126               
     127                // Store old function
     128                origOnSelectionChanged = mapFrame.OnSelectionChanged;
     129                // Now replace with our own.
     130                mapFrame.OnSelectionChanged = MySelectionHandler;
     131            }
     132        }
     133        catch(e) {
     134        }
     135    };
     136   
     137    // Start the "watching" process. We basically invoke the watch function
     138    // every 200ms until the map has been loaded.
     139    timer = setInterval(watch, 200);
     140};
     141</script>
     142}}}
     143
     144when you make a selection on the map, the code will display a dialog showing how many features were selected.
     145
     146Note: Our custom handler executes when a selection has changed. So clearing the selection, for example will also call the handler even though we haven't actually made a selection.
     147
     148