Wednesday, August 31, 2011

Adding Sproutcore KVO to OpenLayers - More Automation - Part 3

I have showed in the previous post how to add KVO to OpenLayers objects and then connect these objects to inputs, etc.
The approach was unfortunately troublesome because each OpenLayers object had to be programmatically augmented through a SC.mixin call. In this post I will show how the OpenLayers source can be patched to make the augmentation process built-in. The only modification that needs be done is in Class.js where the OpenLayers.Class function must be modified as follows:

OpenLayers.Class = function() {
    var len = arguments.length;
    var P = arguments[0];
    var F = arguments[len-1];

    var C=null;
    if(typeof F.initialize == "function") {
        if (!F.__my_init) {
            F.__my_init = F.initialize
            F.initialize = function() {
                        SC.mixin(this, SC.Observable);
        C = F.initialize;
    } else {
        C = function() { P.prototype.initialize.apply(this, arguments); SC.mixin(this, SC.Observable); };

    if (len > 1) {
        var newArgs = [C, P].concat(
      , len-1), F);
        OpenLayers.inherit.apply(null, newArgs);
    } else {
        C.prototype = F;

    return C;

Remember to rebuild OL defore deployment in production environments.

Saturday, August 27, 2011

Adding Sproutcore KVO to OpenLayers - Part 2

You can also Read Part 1  or  Read Part 3

In the previous post of this series I have showed how easily an OpenLayers object can be extended with Sproutcore KVO.

The main driver behind integrating KVO into OL is that of beauty and simplicity. When KVO is available texfields, checkboxes, layers, features, you name it can all have their state transparently and continuosly synchronized without writing any code at all.

The first post was more of a proof of concept. In this post instead I am going to show a more practical use and rewrite one the OpenLayers examples (from the dev examples). The original example shows how to create and add features to a map from javascript. With the help of KVO I am going to expand the original and also make the features editable. As we will see the changes will propagate immediately into the map.

The full source is available on github. To run the example simply download/clone/fetch the repo and open index.html with a browser. The example was written with Sproutcore 2.0 and tested on Google Chrome. The Sproutcore 2.0 starter kit was downloaded from here.

Let's start from index.html. First of all I have added OpenLayers.js to the file so that the OpenLayers code is correctly loaded into the browser.
After that I have added the div where OL will render the map.

To make OL actually load and initialize I copied the javascript code over from the original example into a separate file which I have then included into index.html.

At this point I created a Sproutcore Object with the sole purpose of making it a lightweight controller and use it to share data between the OpenLayers object and the input controls. The controller is in the app.js file together will all the other SC code we are going to write. That's remarkably little code isn't it?

var App = SC.Application.create();

App.featureController = SC.Object.create({
  // attributes of our point
  content: SC.Object.create({
		name: "toto",
        age: 20,
        favColor: 'red',
        align: "cm"
  // coordinates
  geometry: SC.mixin(
  	new OpenLayers.Geometry.Point(-111.04, 45.68),

After that I went on to edit the OL init code in app_ol_init.js.
The most important changes are at lines 24-15 were I extended the original OL class with a function that will be our observer's target action:

// update function
OpenLayers.Feature.Vector.prototype._sc_update=function() { if(this.layer) this.layer.redraw(); };

When invoked this function will simply ask the layer containing the feature to redraw itself.

Between lines 51 and 64  is all the KVO glue:

// create a point feature
    var point = App.featureController.geometry;
    pointFeature = SC.mixin(new OpenLayers.Feature.Vector(point), SC.Observable);
    //             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    //             Adding Observable to OpenLayers.Feature.Vector

    // KVO instrumentation
    pointFeature.attributes = App.featureController.content;
    	if(!k.startsWith("_")) { // _ properties are usually internals, so we avoid observing them
    		pointFeature.addObserver("attributes."+k, pointFeature, '_sc_update');
    pointFeature.addObserver("geometry.x", pointFeature, '_sc_update');
    pointFeature.addObserver("geometry.y", pointFeature, '_sc_update');

As is clearly marked the OL object is extended with SC.Observable functionality via SC.mixin as I showed in the previous post. From that point on all the addObserver code should be quite familiar to anyone who's dipped his toes in SC.

After refreshing the page in the browser we can now change the attributes or coordinates values in the App.featureController and see the map immediately updating. For instance try this in the Javascript console of your browser:


To complete the example I then added four input controls to the web page so that we can more comfortably edit our object.

Refresh again the browser and then try to edit any field. As if it was by magic the map will immediately refresh according to the new values. If the editing causes the map to flickr or use too much cpu in rendering operation it is always possibile to group the edits with a beginPropertyChanges/endPropertyChanges.

Monday, August 15, 2011

Adding Sproutcore KVO to OpenLayers - Part 1

The truth is that after you start using Sproutcore KVO you become addicted to its beauty and simplicity.

Where in other frameworks you spent most time keeping each part of the app in sync, in Sproutcore you get it for free. Sure Sproutcore isn't perfect and is not for all, but KVO is simply automagical!

In this post I will show how easy it is to implement KVO on top of OpenLayers and take advantage of KVO to bind features, wfs queries and UI controls to otherwise stubborn Openlayers objects.

In this example we will create a Vector layer, add KVo to it and then verify KVO bindings by manually adding an observer. I have run all this code from Google Chrome console and you can do it too.

First thing to do is to create a scratch SC project:
sc-init kvool
then let's edit the Buildfile and add the following lines at the end so that the OpenLayers library is loaded with the app:
config :all do |c|
        c[:javascript_libs] = ['']
Run the project with sc-server and browse to localhost:4020/kvool. Now open the javascript console (CTRL-SHIFT-I) and type the following (give return after each line):
v = new OpenLayers.Layer.Vector('kvodemo')
v_kvo = SC.mixin(v, SC.Observable);
myobserver = function(){console.log("A Value for a property changed!");}
v_kvo.addObserver('drawn', this, myobserver);
As expected the console will report that a property has changed its value, meaning that KVO is working as expected.
Just to make sure we check that v_kvo is still an OL object:
v_kvo instanceof OpenLayers.Layer.Vector
should return true.

In another post I am preparing I will rewrite an OpenLayers example from their web site using this KVO technique.