Alan Hietala’s Core Dump

I’ve been working on a simple javascript MVC pattern that uses jQuery in the view code and have come across an interesting side effect of using jQuery and javascript objects.

MyView(clickCallback){
    this.clickCallback = clickCallback; //callback function in the controller
    this.renderView = function(){
         $("#somedivid").click(function(){
            //do something
            this.clickCallback(); // unfortunately jQuery overrides this
                                           //so this doesn't work
        });
    }
}

In order to work around this problem we have to assign the callback method to a local variable that is accessible from within the jQuery block.

MyView(clickCallback){
    this.clickCallback = clickCallback; //callback function in the controller
    this.renderView = function(){
        var clCallback = this.clickCallback;
         //start the jquery section
         $("#somedivid").click(function(){
            //do something
            clCallback(); // this will now call the appropriate callback
        });
    }
}

Since the local variable contains the callback we can now work around the problem of jQuery overriding the meaning of “this”. Most of the time when you are doing simple things the overridden “this” is very useful. Unfortunately when you want to access an instance variable from within a block of jQuery, you have to resort to a hacky work around.

So I’ve taken the plunge into iPhone development. Picked up the book Beginning iPhone Development which was recently reviewed on Slashdot. Yeah I still read slashdot, so sue me.

I’ve been learning the syntax of objective C and finding that its a bit of a learning curve to get used to reading it with ease. I’m sure that with some more time it will become second nature. Not having done smallTalk I don’t instinctively see [variable method:param:param].

I figured this would be a good time to learn the basics of game development too so the the first app I am going to write is Tetris. There are lots of great pointers over at GameDev.net so it shouldn’t be too large for a first project. Stay tuned for my progress on this.

While at #geeklunch today the subject came up about spreading events via twitter but without having to follow absolutely everyone that might want to post an event. I proposed a solution of creating a mini twitter bot that would retweet anything that was sent to it via direct message from anyone on its white list. I’ve thrown together a little proof of concept and it works nicely. Took some digging as the Twitter4R documentation leaves something to be desired but it works quite nicely.

require('rubygems')
gem('twitter4r', '0.3.0')
require('twitter')
require('time')
 
#array of authorized users
@authUsers = ["alanhietala"]
login = "xxxxxx";
password = "xxxxxx";
#method to check if a user is authorized to post
def isAuthorized?(user)
 return @authUsers.include?(user);
end
 
 
 
# start main script
 
#make the connection to the bots account
 
twitter = Twitter::Client.new(:login => login, :password => password);
 
 
# get the private messages of the bot 
messages = twitter.messages(:received);
 
messages.each {|message|
  #TODO: process the message for commands
 
  #check if the sender is authorized to send messages
  if(isAuthorized?(message.sender.screen_name))
    #retweet the senders message
    status = Twitter::Status.create(
       :text => "RT "+ message.text,
       :client => twitter);
 
 
  end
 
 
  #delete the message from the server because its been processed
  twitter.message(:delete, message.id);
 
}

I’ll hack away at this some more and throw it into cron on a server some time later this week. Feel free to take this code and hack it to death.

In many frameworks, display code is separated from business logic. An MVC pattern is one of the many ways to accomplish this. When writing javascript featuring heavy UX changes such as in a sidebar it is very helpful to split up the data/state code from the pure animation code.

To accomplish this we use the CSS class as the interface between the two. This has the added benefit of letting two different developers work on those aspects separately with a minimum of integration issues in the end. Additionally this gives us the ability to reuse our ajax calls in different contexts.

In the following example we have a simple ajax enabled sidebar that loads data when a section is opened. The “interface” is the structure of the sidebar defined beforehand in xhtml.

 <div class="sidebar">
        <div class="sidebaritemheader">
        </div>
       <div class="sidebaritem">
        </div>
        <div class="sidebaritemheader">
        </div>
       <div class="sidebaritem">
        </div>
</div>

This simple layout defines the interface that the animation and data aspects of the javascript will use. Each part needs simply attach their events to the appropriate element and javascript will fire them when needed. This example uses JQuery but you can use your javascript framework of choice, or even do everything from scratch should you me a masochist.

     /**
      * Animation javascript funtion
      */
     function animate(){
       //animation code here
     }
    // populates the sidebar data into the given container which is a jquery object
    function populateSidebarData(xmlResult,sender){
        //generate sidebar data items xhtml 
          //fill this out yourself         
 
        //calculate the insert container from the sender object
         var sidebarItems = $(".sidebar").find("sidebaritem");
         var index = $(".sidebar").find(".sidebaritemheader").index(sender);
         var container = sidebarItems.eq(index);
 
        //insert it into the container
       container.innerHTML = sidebarInsert;
    }
 
   //getData method
function getData(populateMethod,sender){
   .ajax(.....
    //in the success section
        ,success
              populateMethod(xmlResult,sender);
    }
}
   //main onload method
    $(document).ready(function(){
 
         $("sidebaritemheader").click(animate);
         $("sidebaritemheader").click(function(){
              getData(populateSidebarData,$(this));
 
          });
    });

as you can see the animation code and the data code are nicely separated and could even be tackled by 2 different developers if the complexity demands it. With this decoupling achieved you can be sure that any changes to the data code are not going to have repercussions in the animation code which I’m sure you’ll agree is a very good thing.

If you want to decouple this even farther, you can tell your designer to use a completely separate set of css classes for the visual markup and to not touch the data related ones. This ensures that your designer cannot inadvertently break the other ajax on the page.

When I first heard that palm was releasing another mobile platform I was rather skeptical. Mobile developers have a glut of platforms to build on, and to reach the majority of devices need to write for most of them. You can see why adding yet another mobile platform into the mix might be problematic.

My fears were abated though when I saw how simple, elegant and easy to develop for, the new palm devices are going to be. The entire environment seems to be built on webkit so all of the applications are built using standard xhtml, javascript and CSS. It is no surprise the new OS is called WebOS.

Palm Pre Official Video Tour from Gizmodo on Vimeo.

Does this sound familiar because it should. Firefox exensions are built in the exact same way. This method is nice becuase it lets a designer mock something up in xhtml and it is immediately useable by the phone delveloper. This is a huge benefit to rapidly building applications. The interesting thing is that many of the great firefox extensions may be fairly easily ported over to palm. This is purely speculation on my part but not outside the realm of possibility.

I am definitely looking forward to this device it looks like it will hold its weight agianst the likes of Android, iPhone, Windows Mobile, Symbian et al. Matias Duarte and his team has done a great job in terms of usability, there are a lot of things I here that I wish were on all devices now. Good showing Palm.

I’ve resurected my blog that had been sitting stagnent for a while. I’ve moved it to my own hosting and switched over to WordPress. I hope to post a lot more frequently. Hope you enjoy.