var Cat = function () {
     this.furry = true;
  }
 Cat.prototype.greet = function () {
   return "meeow";
 }

using class mimicking from prototype-js it would be :

 var Cat = new Class({
  initialize: function (){
    this.furry = true;
    },
  ask: function (item) {
   return "icanhas "+item+" ?";
 });

This example should be pretty clear. But when we get into real-life application scenarios we need to interact with users and databases.

Let’s say we had a panel and a button for interacting with lolcats:

var CatInformationPanel = Class.create({
   initialize: function (container) {
     $(container.id+'_furry').checked = true;
     $('petButton').observe('click',  this.ask.bindAsEventListener(this));
  },
  ask:  function (item) {
    $(container.id+'_text').value ="icanhas "+item+" ?";
  }
});

Note that we need to bind “this” to the the function scope for “ask”. this is one of the intricacies of object oriented javascript. Here are some badass ninja examples to explain why.

Now, after interacting with user , you probably want to save the result to a database. let’s assume that you have a resource /lol/cat/questions you can issue a HTTP post to (you can create this using rubyonrails or something similar).

var CatInformationPanel = Class.create({
   initialize: function (container,name) {
     this.name = name;
     $(container.id+'_furry').checked = true;
     $('petButton').observe('click',  this.ask.bindAsEventListener(this));
  },
  ask:  function (item) {
    var question = "icanhas "+item+" ?"
    $(container.id+'_text').value =question;
   var request = new Ajax.Request ({
      "/lol/cat/question", {
        method:'post',
        params:{ name:name, question:question },
        onSuccess: function (json) {
           alert("saved question");
           }
     }
    });
  }
});

• WMS (Web map service)
• WFS (Web feature service)

One way to leverage these standards is to use the geoserver project for data storage and the openlayers project web for showing and editing maps.update 2009-09-03: When integrating with the extjs framework , then it is worth using the geoext project.

An example snippet from geoserver shows the use of WFS-T for inserting geometric data with associated metadata for an alley in Tasmania. I’ll just bring it here:


xmlns:wfs="http://www.opengis.net/wfs"
xmlns:topp="http://www.openplans.org/topp"
xmlns:gml="http://www.opengis.net/gml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd http://www.openplans.org/topp http://localhost:8080/geoserver/wfs/DescribeFeatureType?typename=topp:tasmania_roads">







494475.71056415,5433016.8189323 494982.70115662,5435041.95096618





alley





Note that oracle has a well supported ways of extracting GML from spatial datatypes if you need to construct the wfs transactions yourself ( oracle locator )

At the first glance wfs can seem a bit complicated. Luckily openlayers has nice wrappings for it that is easily accessed from code as shown in one of their examples running here :


map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS(
"State",
"http://sigma.openplans.org/geoserver/wms",
{layers: 'topp:tasmania_state_boundaries'}
);
wfs = new OpenLayers.Layer.WFS(
"Cities",
"http://sigma.openplans.org/geoserver/wfs",
{typename: 'topp:tasmania_cities'},
{
typename: "tasmania_cities",
featureNS: "http://www.openplans.org/topp",
extractAttributes: false,
commitReport: function(str) {
OpenLayers.Console.log(str);
}
}
)
map.addLayers([wms, wfs]);
var panel = new OpenLayers.Control.Panel({
displayClass: "olControlEditingToolbar"
});

var draw = new OpenLayers.Control.DrawFeature(
wfs, OpenLayers.Handler.Point,
{
handlerOptions: {freehand: false, multi: true},
displayClass: "olControlDrawFeaturePoint"
}
)
var save = new OpenLayers.Control.Button({
trigger: OpenLayers.Function.bind(wfs.commit, wfs),
displayClass: "olControlSaveFeatures"
});
panel.addControls([
new OpenLayers.Control.Navigation(),
save, draw
]);
map.addControl(panel);
map.zoomToExtent(new OpenLayers.Bounds(140.64,-44.42,151.89,-38.80));
}



var a=1;
function foo() {
var a;
function bar() {
a=2;
return a;
}
return bar;
}

a=3;
var b=foo();
var c=b();
alert(c);
alert(a);


http://pedant.dk/archive/CRUD_in_extjs_3_0.pdf

Basalt set kan man nu på en nem måde foretage sig de fleste operationer man kunne forvente sig i en webapplikation der snakker med en database. Det er der jo sådan set ikke noget banebrydende i – nu kan man det også fra extjs . Jeg eksperimenterer i øjeblikket med hvordan man bruger denne nye funktionalitet nemmest – det gør jeg iøjeblikket i :

http://github.com/jacobandresen/yase/tree/master

Morgan Roderick har givet en introduktion til “Lowpro” . Morgan har bemærket at selv om Dan Webb kommer fra den rigtige side af bæltet, så staver han “Behavior” forkert . Hvis du har de tilbøjeligheder så kan du hente en ny udgave af Ben Nolans “Behaviour” , der er tilrettet af Jakob Kruse her : http://www.kruse-net.dk/behaviour/.

Begge biblioteker gør nogenlunde det samme. Det ser dog ud til at man kan pille event callbacks væk fra “lowpro” efter at man har puttet dem på. Det kan man vist ikke i “Behaviour”.

Bemærk at begge biblioteker er gode at anvende sammen med prototypejs.

Der er mange flotte farver og kode i !

extjs 3.0 RC1 er tilgængelig  fra http://extjs.com/products/extjs/download.php

Den største nyhed for extjs 3.0 er introduktionen af Ext.direct , der introducerer en sammenhængende model for at opdatere data vha forskellige serverside teknologier . Ifbm launch af 3.0 vil der blive præsenteret Routers for Ruby/merb , java, C# og php.  Jeg snakker iøjeblikket med Data access om at de bør introducere en ext 3.0 router  for visual dataflex..

En af de mere visuelt imponerende ting er introduktionen af en RowEditor , der introducerer inplace redigering i et extjs grid vha extjs DataStore arkitektur .

Mit indtryk herfra er at extjs firmaet har gode forbindelser til Adobe , Sun  og Dell samt en større liste af amerikanske virksomheder (bestbuy som et eksempel) . Det virker som at  folk begyndte at bruge extjs for omkring et år siden ifbm extjs 2.0..

Hvis vi antager flg klasser :


class A{
public int B;
public int C;
public D F;
public D G;
};

class D {
public String E;
}


og at de var initialiseret således:

A a=new A();
a.B=1;
a.C=2;
a.F=new D();
a.F.E="test";
a.G=new D();
a.G.E="test2";


Så kunne man kigge på selve java objekterne vha reflection for at generere JSON output til bruge i javascript således:


public class JsonEmit{
public static String emit(Object target) throws Exception{
StringBuilder sb=new StringBuilder();
sb.append("{");
Class targetClass=target.getClass();
Field[] publicFields = targetClass.getFields();
for (int i=0;i String sFieldName = publicFields[i].getName();
Class typeClass = publicFields[i].getType();
String sFieldType = typeClass.getName();
Object value = publicFields[i].get(target);
if(value!=null){
sb.append(sFieldName+":");
if(typeClass.isPrimitive()
||sFieldType=="java.lang.String"){
sb.append("""+value.toString()+""");
}else{
sb.append(JsonEmit.emit(value));
}
}
if(i!=(publicFields.length-1))
sb.append(",");
}
sb.append("}");
return(sb.toString());
}


På den facon vil man kunne genere JSON ved et simpelt kald til

JsonEmit.emit(a)


hvorefter man vil se

{B:"1",C:"2",F:{E:"test"},G:{E:"test2"}}


Problemet kan omgåes ved at benytte “bind” fra prototypejs på flg. facon:


ComboBox.prototype.loader= function (){
if(this.dataStore[this.paramName]===undefined){
new Ajax.Request (
this.url,{
method: 'post',
asynchronous: true,
parameters: this.parameters,
onSuccess: function (transport){
var response=transport.responseText;
this.dataStore.data[this.paramName]=response.evalJSON();
this.render();
}.bind(this),
onFailure: function (transport){
alert('failed to retrieve '+this.paramName+' data');
}.bind(this)
}
}



function animal () {
this.name = "nothing yet";
this.legs=4;
};
tiger = new animal;
tiger.name="tiger";
pig = new animal;
pig.name="pig";

animal.prototype.classify = function (){
alert( ' I am a ' + this.name );
};
pig.classify();


Bemærk brugen af prototype her, der tilføjer en ny funktion classify, der benytter den allerede eksisterende værdi “name”.

Du kan også bruge klasser vha prototypejs som beskrevet her (Så skal du dog benytte prototype js biblioteket)