Version-checking function

The global function onICHostReady() will be called by the front end when the web component interface is ready. The version passed in the parameter allows you to check that your component is compatible with the API.

<SCRIPT LANGUAGE="JavaScript">

// This function is called by the Genero Client Container
// so the web component can initialize itself and initialize
// the gICAPI handlers

onICHostReady = FUNCTION(version) {
    IF ( version != 1.0 )
        alert('Invalid API version');

At this point the API is ready; the gICAPI object is now created.

The next lines define the functions that must be called by the API to transmit data from the program to the component:

    // Initialize the focus handler called by the Genero Client
    // Container when the DVM set/removes the focus to/from the
    // component

A focus border will be added when the component has the focus.

    gICAPI.onFocus = FUNCTION(polarity) {
        IF ( polarity ) { 
            document.body.style.border = '1px solid blue';
        } ELSE {
            document.body.style.border = '1px solid grey';
        }
    }

    // Initialize the data handler ...
    // This component does not care about the data set by the DVM ...
    // so there is nothing to do.
    gICAPI.onData = FUNCTION(dt) {
    }

    // Initialize the properties handler ... 
    // update the component when a property changes

A div section is used as the title. When the property "title" is changed from the program, the div is updated. The JSON string is evaluated using the eval built-in JavaScript™ function.

    gICAPI.onProperty = FUNCTION(property) {
        var myObject = eval('(' + property + ')');
        document.getElementById("title").innerHTML = myObject.title;
    }  
}

Now the following functions will be used to transmit the data or focus request to the program. These functions will be called by the component itself, and will use the gICAPI object.

// When the user clicks on the document we ask the DVM to
// get the focus	     
askFocus = FUNCTION() { 
    gICAPI.SetFocus();    
} 
 
// This function is called when the user clicks 
// on an area of the map     
execAction = FUNCTION(stateName) {   
    gICAPI.SetData(stateName); // Set the widget value so DVM knows it
    gICAPI.Action("state");    // Raise an action
}  
</SCRIPT>

The component itself can now be loaded. In this example, the component is an image map. When one of the areas is clicked, the name of the area (in this case, a state of the USA) will be transmitted as the value (using gICAPI.SetData), and an action indicating the user clicked on a state will be sent (using gICAPI.Action)

<body onclick="askFocus()" STYLE="border: 1px solid grey;margin: 0px;">
   <center>
       <H1 Id="title">default title</H1>
       <IMG SRC="USAMAP.gif" USEMAP="#USAMAP" WIDTH="598" HEIGHT="364" BORDER="0" >
       <MAP NAME="USAMAP">
           <AREA SHAPE="POLY"
                      COORDS="230,35,294,38,299,57,299,79,228,79" 
                      onclick="execAction('North Dakota')" 
                      ALT = "North Dakota">
           ...
           <AREA SHAPE="POLY"
                      COORDS="486,146,529,136,536,155,536,161,515,156,511,144"
                      onclick="execAction('Maryland')"
                      ALT = "Maryland">
       </MAP>
   </center>
</body>