Modifying the SemantEco Interface from a JavaScript file | "Wait for initialize()!"

What we are trying to do

When you write a facet for SemantEco, your facet may need to manipulate or work with the DOM / UI of SemantEco.

The DOM / UI of SemantEco is accessed in many ways. There are methods you put in your module's core JAVA files to add items to the facets on the right side of the UI.

In this guide, we are talking about interacting with the UI via JavaScript files.

Looking at the official documentation

Evan's documentation states the procedure to do this very clearly. Be sure to check it out under "Including Resources".

I will document a real world case of it here.

Modifying your Java code

To bring in a external resource, you need to import it from your Module's JAVA code. You will do it through the visit() function.

Here is the code to bring in a JS file for a facet: @Override public void visit(SemantEcoUI ui, Request request) { // TODO Auto-generated method stub // Here we include our polygon JS script for our module into the window Resource res = config.getResource("semantgeo-drawPolygons.js"); ui.addScript(res); }

The path for the JS file is determined by the facet it is tied to. As the documentation says:

To include resources as part of a module, one must create the directory META-INF/res in the maven resource directory (i.e. src/main/resources).

For SemantGeo the file resides at:

SemantEco\facets\semanteco-geo-facet\src\main\resources\META-INF\res\semantgeo-drawPolygons.js

When to Manipulate, when to wait

If your included JS file is trying to modify or access objects within the UI, for instance those created by the core SemantEcoUI.js file, you must wait for those objects to be created before you can play with them.

When the core SemantEco UI is loaded fully into the browser, it will fire a signal to say so. You can bind your code to listen for this signal, and then start doing work once it is fired.

Here is code to do this:

// Brendan Edit:  Wait for the dom to load 
$(window).bind('initialize', function() {
    //Button Code by Irene Khan
    //Draw polygon button        
    var drawPolygonButtonDiv = document.createElement('div');
    var drawPolygonButton = new DrawPolygonButton(drawPolygonButtonDiv, SemantEcoUI.map);
    drawPolygonButtonDiv.index = 1;
    SemantEcoUI.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(drawPolygonButtonDiv);
});

This code is within the semantgeo-drawPolygons.js file we imported above. The key aspect to take away is that this code will not fire until the initialize signal is fired. This signal is fired when the UI is loaded.

In this specific case, the code that fires in the above segment accesses the Google Map map object that is in the SemantEcoUI variable via the call to SemantEcoUI.map. If the map was not created yet, then trying to access SemantEcoUI.map would throw an error saying that doesn't exist. With this code in the $(window).bind('initialize', function() { block, this is no longer an issue.