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: , ,

pdf thingy

By: Jacob - February 2nd, 2010  Filed under: Coding Add Comment

Update 2010-10-16:

I took pdf-thingy offline from github.

Update 2010-05-08:

Google has decided to discontinue Google wave, so  I  will stop updating pdf-thingy.

I’ve spent a couple of hours tinkering with pdf export from wave. I put the result here :
pdf-thingy@appspot.com . You can invite the bot to your wave, when you do it will present a link to a pdf version of the root blip. No fancy colors yet ;)

Somebody pointed me to PDF Wave Exporter, but I could not find the source code for it to tinker with. (I admit that I did not look that hard).

I implemented pdf thingy to learn more about python,wave and google appengine.

I based pdf-thingy on exporty by Pamela Fox , available from google code . This tutorial helped me learn about reportlab on google app engine.

You can find the code here: http://github.com/jacobandresen/pdf-thingy

There are some obvious points of improvement:
- handle text overflow
- supporting annotations
- fancy color templating

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:

gemcutter: the missing manual

By: Jacob - October 21st, 2009  Filed under: ruby 1 Comment

Thanks to Jakob Kruse I now know how to operate RubyGems and gemcutter on windows. Here’s what I did:

1:I downloaded the 1.8.6 ruby installer here

2: I installed gemcutter like this:

gem update --system
gem install gemcutter
gem tumble
gem install jspec

this let me use gemcutter on windows using the current one-click installer ;)

adventures with mingw , ruby,java, rhino and jspec

By: Jacob - October 21st, 2009  Filed under: ruby, testing 4 Comments

update 2010-10-05: jspec has been deprecated in favour of jasmine

update 2009-10-21: This post is a writeup of my early experiences with gemcutter and rubygems. The strange runtime error I did not understand was probably related to that I needed to update rubygems to 1.3.5. I now know how to use gemcutter from ruby1.8.6 using the oneclick installer .

I have been using jspec on macosx for a while and decided to give it a try on windows vista today. Installing jspec on macosx and linux can be done using the instructions here .

I want to run the automated jspec tests available via rhino at a client site. Sadly , I am forced to use windows there, so I have given some thought on how to make jspec run on windows.

First of all you need to install ruby. I used the automated 1.8.6 One-Click Installer available here . After installing i ran


gem update

the instructions in the README file for jspec currently states that I should install gemcutter and install jspec via that . I was not able to do that on windows ( my system decided to report an obscure runtime error that I did not understand). So i decided to do this instead:


gem sources -a http://gems.github.com
gem install visionmedia-jspec

I let gem install the required dependencies visionmedia-commander and visionmedia-bind. After this I had the jspec script available. Sadly this gave me version 2.7.2 (I noticed \ruby\lib\ruby\gems\1.8\gems\visionmedia-jspec-2.7.2 ) The listing on gemcutter told me that a version 2.11.10 is a avaiable , so I decided to dig deeper. Maybe I could make gemcutter work anyway?

After a little browsing on github.com I found the oneclick installer

I cloned this repo using git

using the following command:

git clone git://github.com/oneclick/rubyinstaller.git

and pressed


rake ruby19

This project creates a sandbox that compiles a working ruby environment using mingw.

After contemplating the insanity of what I was doing for a couple of minutes (remember : installing a working ruby on linux is a single shell command) I grabbed some coca cola and started browsing through the source code for ruby distro while the rubyinstall was compiling. I looked a bit at ruby.c and vm_exec.c and had grim flashbacks to my c days. Luckily the compile finished and I copied ruby19_mingw to my c:\ drive and set it up on my PATH variable. Then I could check which version I was using:


C:\>ruby -v
ruby 1.9.1p243 (2009-07-16 revision 24175) [i386-mingw32]

Now I was able to do:

gem install gemcutter
gem tumble
gem install jspec

(Note that there is information sent to the terminal during these steps)

Now for the interesting part(!) jspec was working , so I could do this:


jspec init SolitaireCipher --freeze

This created a directory where I can train doing the SolitaireCipher using javascript. I renamed lib/yourlib.core.js to lib/SolitaireCipher.js and spec/spec.core.js to spec/spec.SolitaireCipher.js and spec/spec.dom.html accordingly.

After 20 mins of fiddling I managed to get some running tests in a browser by opening spec.dom.html. Then I decided I want to automate the tests using mozilla rhino. After installing rhino , I could run automated tests like this


cd c:\projects\SolitaireCipher
jspec --rhino

This opens up a proces that listens to file changes in the lib and spec folders. All very well – untill I discovered that jspec currently uses ANSI codes to render colors to the terminal screens. ANSI codes are not supported on windows vista (something with ANSI.SYS being obsoleted), so if I want the nice colors then I need an alternative terminal than my command prompt in vista.

I found rxvt available from PortableGit on google code. This renders the colors just nicely – but has some other drawbacks. If I just use rxvt for rendering feedback from the jspec tests, then it seems to work though.

One thing to note is that rhino needs the java sdk to be installed and js.jar needs to be on your CLASSPATH. when starting jspec from rxvt on the msys from PortableGit, then CLASSPATH could be set like this (assuming rhino is installed in c:\tools ):


export CLASSPATH=/c/tools/rhino1_7R2/js.jar

I probably want to avoid using rxvt on PortableGit too much . There are some major flaws listed here .

Maybe I should look into doing a adobe air frontend for jspec?

Tags: ,

unclebob does the prime factor kata

By: Jacob - October 11th, 2009  Filed under: ruby Add Comment

update 2009-11-12: There is an updated version here

unclebob doing the prime factor kata:

Tags: ,

Paris Hilton and Behaviour Driven Development

By: Jacob - September 27th, 2009  Filed under: Coding, testing 1 Comment

Recently, I have been giving Behaviour Driven Development some thought.

Let’s take a an example of how to develop and test a music video search and storage system. A traditional way of developing this would require formulating a object oriented system architecture, thinking about streaming and metadata enabled search. The system architecture could consist of a well chosen database server, a streaming server and a metadata enabled search engine – combining these technologies with a modern UI and encapsulating theme in carefully designed object oriented structures. During all these important choices , and all during development we would make sure to write tests before we write a single line of code.

All these things put together would lead to a well thought out system architecture , but all the effort put into the system architecture can be in vain – if we don’t have a solid business understanding of what a video storage system should do. What will the users expect?

While browsing on facebook this other day I found the “The Paris Hilton & Jacques Derrida Appreciation Society” – this group explores the connections between the works of Paris Hilton and Jacques Derrida. When we deconstruct the “pretty blonde” facade of Paris Hilton, then you can actually find some deep insights. Take “Nothing in this world” for instance:

Take the phrase “when you are with somebody else, that’s me in your eye”. There is the obvious interpretation of the sentence . But thinking about that sentence also let’s you reflect on the real meaning . When you look at Paris Hilton in this video, what do you see? Do you see the pretty blonde or the millionaire , hard working young girl . In this video I am seeing the image of the pretty blonde – but I am also thinking about the millions of dollars she is earning portraying herself in this way. So in a sense – I am reading the original message out of context. I am admiring what Paris Hilton in some other way than she intended – the original meaning of the words seem to have disappeared – but my understanding of the sentence is more useful to me. I wish I could do what Paris Hilton does – but in a way that would make sense in my world .

The producers of the “Nothing in this world” video are not likely to convey information about the business empire of Paris Hilton in the metadata supplied for the video. So a system formulated as a “video storage system” would not let me exploit the information I found in the facebook group.

BDD introduces the use of a Domain Specific language to express the users expectations in a manner more directly focused on the behavioural aspects of the system. This lifts the clouds from the system aspects and focuses on intent.

A better way to formulate my expectations for the system would be:

Describe the music video storage system:
  I should be able to search for videos using metadata
  it should play videos  in my browser
  I should be able to query facebook for information about it

If I had those expectations formulated to me , then I would choose to implement this system as a mashup between youtube and facebook as a facebook application. This would be a radically different system architecture than the one describe above.

Furthermore , by leveraging one of the several BDD test frameworks available, then the expectations could be formulated in way that can be used as tests.

Tags:

A wave is coming

By: Jacob - September 13th, 2009  Filed under: Java 1 Comment

Last week I attended a  day of outstanding geek fun . At the Google wave hackathon I had the chance to sink my teeth into the Google wave API after seeing presentations on gwt and google wave  by Tommy Pedersen and a presentation on wave gadgets by  Joakim Recht.

After a couple of hours of presentations and brainstorming  we started hacking.  I teamed up with  skakanka to experiment with sending the contents of a wave to a Proof of concept Document storage system . But we ended up doing a simple Echo Bot (but hey! we illustrated how to extract content from a wavelet and send it somewhere).

I brought a mac and used the Google eclipse plugin for galileo for coding. It helped that I allready had a Google app engine account from some earlier experiments – but I spent some time learning the different key combinations on the mac – it was great fun though (and now I know how to use eclipse on  a mac!). Deploying on google app engine is as simple as pressing a button in eclipse (I also tried using som ant tasks in my earlier experiments).

We managed to have a google wave running sometime before lunch – so it is very easy to get a basic understanding what a wave bot is all about. (You could think of it as an ircbot on steroids ! )

The overall idea of building a google wave bot is to listen to incoming events defined in the protocol. Let’s say we want to perform something when somebody enters the wave or write something – then we can define the capabilities like this:




0.0.4





Then the robot should act on the defined events in a manner similar to this :


@Override
public void processEvents(RobotMessageBundle robotMessageBundle) {
Wavelet wavelet = robotMessageBundle.getWavelet();
String rootText = wavelet.getRootBlip().getDocument().getText();
for ( Event e: robotMessageBundle.getEvents()){
Blip b= e.getBlip();
String text= e.getBlip().getDocument().getText();
if (e.getType().equals(EventType.BLIP_SUBMITTED)){
e.getBlip().getDocument().append( makeEcho(text));
}
}
}

The Wave client api offers something like the DOM api for the xml being sent back and forth. During the hackathon I learnt that there is no way to ask for the contents of the entire wave from a single blip – so it will require some thinking to save the entire contents of the wave – but it should be doable.

Sometime during the afternoon things started to slow down on the wave test server. I noticed that some of the other guys doing a multiuser interactive drawing gadget for wave. It looked like they recorded a delta to send every time the mouse moved! This made me want to look a bit under “the hood”:

Sounds like the team are handling the multiuser issues using “operational transforms” . Maybe they could somehow ‘batch’ deltas from interactive gadgets ? I have yet to fully understand how “operational transforms” work  – but it sounds like an exciting challenge to make this work on a large scale!

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:

closures -oh yeah?

By: Jacob - July 16th, 2009  Filed under: javascript 5 Comments

Hvad mon der sker her :


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