Skip to main content

Posts

Showing posts from August, 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() {                         F.__my_init.apply(this,arguments);                         SC.mixin(this, SC.Observable);             };         }         C = F.initialize;     } else {         C = function() …

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 Spr…

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] = ['http://www.openlayers.org/api/OpenLayers.js'] …