Learning some Sencha touch MVC code fu at sourcedevcon 2011

By: Jacob - May 8th, 2011  Filed under: javascript 4 Comments

This week I had pleasure to attend sourcedevcon 2011 at the awesome resort  Le meridien Split together with  @virdun ,@jakobkruse and @stureandersen . I have been lurking for a couple of years in the ExtJS community  since attending  the extjs conference in Orlando back in 2009, keeping up to date on things at our local Öresund ExtJS meetup , so it was nice to get in touch with some of the regular faces in the ExtJS community.

Near the Dicoletian’s Palace

sourcedevcon 2011 was in the lovely town of Split, near Dicoletian’s Palace.

 

Flying into Split I had some doubts on how many ExtJS devs would take their time to fly to split, this being the first community-driven sencha conference in Europe. After arriving I quickly put all my doubts aside – since the venue and conference organization was carefully laid  out.  Split itself is a very charming city, and we had an easy time arriving (leaving was another problem though). I was impressed by the fact that 200+ attendees had chosen to show up (that figure somewhat resembles the first Orlando conference in the US).

At the venue , the first thing we noticed was the outstanding bar with an overview of the local marina and the ExtJS swedes @FredricBerling , @EmilPenlov (and @bryntum when he was not to busy hanging out in some other bars).

Learning some  Sencha touch MVC  Code fu.

At some point Johan (@virdun)  decided that he wanted  to get a Sencha Touch application up and running  . So we kind of lost him for a moment there in the bar.  I don’t remember if it started before @jamespearce introducing sencha touch  – but Johan started hacking furiously on this app for his site http://citypolarna.se somewhat right about  that session.

Johan playing with his mobile phone

Being Johan, he just wouldn’t let go, so I had to answer a lot of questions  about how sencha touch applications worked.

When I discovered that Johan was not being satisfied by the answer “but hey, I haven’t coded a line of sencha touch yet” we walked through the basic shopping list example for sencha touch and Johan modified it a bit, so it could serve as as base for implementing an event viewer for citypolarna. Combining the info found on http://sencha.com and info from the sessions by @_jdg and @edspencer this was an easy task, so modifying the shopping list example to a working application could be done during the conference. Oh yes, it also helped that we remember  to use extraParams instead of baseParams .

A good thing  about exploring sencha touch and mobile user interfaces is that it can be done in the bar while drinking Mojitos

Learning to migrate to ExtJS 4

Besides learning more about sencha touch I learned a lot from @bmoskeau‘s session on migrating from to ExtJS 4.

Here I especially noted that using the MVC pattern can be postponed to a last optional step and that during migration to ExtJS 4, the old “new” constructor syntax should be able to work (but that the new Ext.define and Ext.create constructs is the preferred way to go).  Brian laid out a migration strategy using the   4 R’s  “Rendering , Running, Ready, Refactor” describing the 4 stages the migration should go through.

@bmoskeau talking about migration

ExtJS Scheduler and Calendar

The session by @bmoskeau and bryntum on Ext Calendar and Ext Scheduler  was supposed to be a showcase of the two products, but to me the main value of the session was seing how easy it was to integrate such complex ExtJS  components. My jaw dropped when I saw Brian demonstrate him using his component updating the data model simultaneously in ExtJS scheduler. This is a testament to two very well designed components .

Wrapup

All in all sourcedevcon 2011 left me with the impression of a very vibrant ExtJS community  – I also got the impression of the strong commercial focus Sencha has. Sencha presented   Sencha.IO as a product – I look forward to exploring that  more indepth in the future. I chose to focus more on learning about Sencha touch and the MVC parts of ExtJS 4 during the conference..

“The Irish guys” has posted some writeups of their experiences at sourcedevcon . Well worth a read:

The lowdown of sourcdevcon

http://www.joelennon.ie/2011/05/05/source-dev-con-day-1/

@nielsdehl has posted pictures from the conference at flickr here :

http://www.flickr.com/photos/nils-dehl/sets/72157626648487744/ (sourcedevcon day1)

http://www.flickr.com/photos/nils-dehl/sets/72157626533490549/ (sourcedevcon day2)

http://www.flickr.com/photos/nils-dehl/sets/72157626544637927/ (sourcedevcon day3)

http://www.flickr.com/photos/nils-dehl/sets/72157626672433598/ (sourcedevcon day4)

http://www.joelennon.ie/2011/05/05/source-dev-con-day-1/

Tags: , ,

icanhas javascript OOP?

By: Jacob - December 12th, 2009  Filed under: javascript Add Comment

In javascript we can express objects using the prototype notation:

  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");
           }
     }
    });
  }
});

Tags:

openlayers 2.8 supports WFS-T

By: Jacob - September 2nd, 2009  Filed under: GIS, javascript Add Comment

if you are in a organisation where you store data with geographical information associated with it , then you have the option of sharing your data using the following standards specified by OGC:

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 :

Tags: