Web Development

Script Console Tricks

chamnapchhorn@gmail.com (chamnap) — Wed, 14 Oct 2009 07:16:00 +0000

Script console in rails helps me very much to debug my applications. However, I usually encounter an annoying problem with ActiveRecord. I want to see the generated SQL that has been executed. I never have enough time to figure out this until last week. Just add the following code to your environment.rb, you could see the generated SQL statement.


if "irb" == $0
  ActiveRecord::Base.logger = Logger.new(STDOUT)  # ActiveRecord
  ActiveResource::Base.logger = Logger.new(STDOUT)  # ActiveResource
end

For more information:
http://weblog.jamisbuck.org/2007/1/31/more-on-watching-activerecord
http://railscasts.com/episodes/48-console-tricks

My Presentation at Barcamp Phnom Penh 2009

chamnapchhorn@gmail.com (chamnap) — Thu, 08 Oct 2009 04:26:00 +0000

I did two presentations at Barcampp in last week. One is for people who starts learning about the web. I talked on many basic concepts, the history, and how the web works. Some of friends complained me that my slide is too much. Anyway, I think I missed several main points. I just feel it is a prime concept of the web, and it drives me really well since I started learning it. The other is about JavaScript in OOP way. It is the same topic but very compact as I used to do presentation in my office. I did fairly good with borey since some of the audiences interest my presentation.

Introduction to Web Architecture

View more presentations from cchamnap.

Principles in Refactoring

chamnapchhorn@gmail.com (chamnap) — Sat, 05 Sep 2009 04:33:00 +0000

This week, in my office we did a study group, and vorleak and I were moderators in that session. We studied the book from Refactoring the Existing Code by Martin Fowler. Here is the slide I prepared.

Principles in Refactoring

View more presentations from cchamnap.

Action Caching

chamnapchhorn@gmail.com (chamnap) — Sat, 29 Aug 2009 08:29:00 +0000

Recently, I have been working with RESTful web services. I came to a caching stage where I need to cache some requests that map to my actions. The problem is that I have actions with multiple possible routes, therefore those routes should be cached differently. For example:


/people/1?display=details
/people/1?display=summary
/people/1?display=details&format=xml
/people/1?display=summary&format=json

Fortunately, there is an option inside caches_action called :cache_path. All you need to do is to pass a proc object and return the path you want to cache. It is called with the current controller instance. In this case,


  caches_action :index, :show, :cache_path => Proc.new { |c|
    request_url = { :controller => c.params[:controller], :action => c.params[:action] }.merge(c.request.query_parameters)
    c.url_for request_url
  }

There is another problem when the request is coming without format, the cache returns the result with content-type: text/html. To solve this, add a before_filter inside application controller to assign the headers['Content-type'].


  def set_default_response_format
    response.headers['Content-type'] = 'application/xml; charset=utf-8' if params[:format].nil?
  end

MVC

chamnapchhorn@gmail.com (chamnap) — Sat, 22 Aug 2009 02:30:00 +0000

Many Rails newcomers, even some people who know MVC quite well, often confuse how to code in the right way. The controller are usually fat, and the logic spreads across the whole application. The views still messy because it contains logic and even worse people often code like a controller (query to db). However, the model are usually skinny. I could say there is no restrictions in the way you code. It is a set of disciplines that every developers must know in order to have a cheaper maintenance.

MVC has been successful for many reasons, and some of those reasons are “readability”, “maintainability”, “modularity”, and “separation of concerns”. You’d like your code to have those properties, right? The rules of thumb are:

1. Controller should be skinny. This is what it means to have a controller know what to do without knowing the details of how to do it.
2. Any complexity related to building a business logic will be specified and implemented in the Model.
3. Inside View, access to instance variables that have been defined in Controller. Try not to use if-else condition or loop as much as possible.

By putting everything in the right place, you would benefit from a lot of MVC pattern.

Good example can be found on:
http://www.therailsway.com/2007/6/1/railsconf-recap-skinny-controllers
http://weblog.jamisbuck.org/2006/10/18/skinny-controller-fat-model

Sending mail to developer about exception errors

chamnapchhorn@gmail.com (chamnap) — Tue, 21 Jul 2009 10:08:00 +0000

I want my application to send me a mail about any errors that occurs during production. Basically, I want to see a detail report like in development environment. All I have to do is to override rescue_action_in_public. This method by default calls render_optional_error_file method to render a static page based on status code thrown. rescue_action_locally method by default will render details diagnostics from a controller action. Therefore, I just combine all of these methods into rescue_action_in_public and add some code to send mail.


def rescue_action_in_public(exception)
   render_optional_error_file response_code_for_rescue(exception)

   @template.instance_variable_set("@exception", exception)
   @template.instance_variable_set("@rescues_path", RESCUES_TEMPLATE_PATH)
   @template.instance_variable_set("@contents",
   @template.render(:file => template_path_for_local_rescue(exception)))

    # send mail to developers
   mail = ExceptionNotifier.create_sent(@template)
   mail.set_content_type("text/html")
   ExceptionNotifier.deliver(mail)
end

Here is my ExceptionNotifier class, just extract needed variable to be available inside my view.


class ExceptionNotifier < ActionMailer::Base
  
   def sent(template)
      @subject               = 'Bug Reports'
      @body["request"]       = template.request
      @body["response"]      = template.response
      @body["exception"]     = template.instance_variable_get("@exception")
      @body["rescues_path"]  = template.instance_variable_get("@rescues_path")
      @recipients = ['chamnapchhorn@gmail.com', 'ungsophy@gmail.com']
      @from       = 'noreply@gmail.com'
      @headers    = {}
   end

end

Here is my view, the default view for exception. I just change to locate new variables only.


<h1>
   <%=h @exception.class.to_s %>
      <% if @request.parameters['controller'] %>
         in <%=h @request.parameters['controller'].humanize %>Controller<% if @request.parameters['action'] %>#<%=h @request.parameters['action'] %><% end %>
      <% end %>
</h1>
<pre><%=h @exception.clean_message %></pre>

<%= render :file => @rescues_path["rescues/_trace.erb"] %>

<%= render :file => @rescues_path["rescues/_request_and_response.erb"], :locals => { :request => @request, :response => @response } %>

Handling Exception at the Application Level in Rails

chamnapchhorn@gmail.com (chamnap) — Fri, 10 Jul 2009 09:55:00 +0000

At last the point of the project, I found one more important thing that is quite useful and it could reduce the code 20%. That's when I did a handling service error on both server and client. I find myself have been repeating the code on the way. Luckily, after discussion with my colleague, I came up with idea to handle in application controller. It means that instead of handle exception on all of my controllers, I could just handle in a single place whenever exception has raised from these controllers.
Basically, there are two methods (rescue_action and rescue_action_in_public) that you would need to override based on your needs. By default, these two methods do the best job to handle exception both in development and production mode. rescue_action method will be called with an exception parameter that raises inside an action method. rescue_action_in_public method, however, is used for public exception handling (for requests answering false to local_request?). local_request? method tells which rescue_*** method to call.

http://api.rubyonrails.org/classes/ActionController/Rescue.html

More importantly, we can handle exceptions for specific controller instead of the whole. All you need to do is to override one of these methods inside that controller.


class PostsController < ApplicationController
   def rescue_action_in_public(exception)
      case(exception)
         when ActiveRecord::RecordNotFound then render :file => '/bad_record'
         when NoMethodError then render :file => '/no_method'
         else render :file => '/error'
      end
   end
end

We can even handle them in a much cleaner way rather than if/else statement by using rescue_from. What it does is that it maps an exception type to handler method. This handler method can take either an exception parameter or a non-argument. We can even specify a proc or block.


class PostsController < ApplicationController

   # Declare exception to handler methods
   rescue_from ActiveRecord::RecordNotFound, :with => :bad_record
   rescue_from NoMethodError, :with => :show_error

   def bad_record; render :file => '/bad_record'; end
   def show_error(exception); render :text => exception.message; end

end

http://ryandaigle.com/articles/2007/9/24/what-s-new-in-edge-rails-better-exception-handling

Maintaining Javascript Pop-Up Window Communication Across Window Opener Page Loads

chamnapchhorn@gmail.com (chamnap) — Sat, 27 Jun 2009 11:05:00 +0000

I came across a blog post that talks how to maintain a reference to javascript popup window while the parent window has been navigated away. This scenario doesn't want to reload the child popup window. I just quoted out from 1 Pixel Out. There is a really nick trick.

In the main window:


var popupWin = null;

function openPopup() {
   var url = "popup.htm";
   popupWin = open( "", "popupWin", "width=500,height=400" );
   if( !popupWin || popupWin.closed || !popupWin.doSomething ) {
      popupWin = window.open( url, "popupWin", "width=500,height=400" );
   } else {
      popupWin.focus();
   }
}

function doSomething() {
   openPopup();
   popupWin.doSomething();
}

In the popup:


self.focus();

function doSomething() {
   alert("I'm doing something");
}

http://www.bennadel.com/blog/89-Maintaining-Javascript-Pop-Up-Window-Communication-Across-Window-Opener-Page-Loads.htm
http://www.1pixelout.net/2005/04/19/cross-window-javascript-communication/
http://www.1pixelout.net/2006/12/15/cross-window-javascript-communication-20/
http://www.1pixelout.net/wp-content/downloads/popups20.zip

Cross-window Javascript communication

chamnapchhorn@gmail.com (chamnap) — Sat, 27 Jun 2009 07:10:00 +0000

It reminds me about uploading via iframe that I did a year ago when my colleague asked me to help with login openid in a popup window. It's a similar story with this problem. Actually, login with openid could not place in a iframe because you could the code that prevents this.


<script type="text/javascript">if(top == self) { document.write(""); } else  { top.location.href = "http://www.yahoo.com"; }</script>

Now, let's see a quick summary on this basic communication.

Communication from parent to child window, you need to a reference of the child window so that can call any function in the child window.


// Create a new popup window
var popupWin = window.open(url, "popupWin");

// To call functions defined in the popup:
popupWin.doSomething();

Communication from child to parent window, you need to use this way:


window.opener.doSomethingOnParent();

Here is the problem, the parent window needs to know when the uploading (in iframe) or logging in (in popup window) is done. The only way that the parent window can notified by the child window after finish processing. Usually, for uploading and logging in with openid, the action in your controller would render a view back. The trick is here on the onload of the body, you could notify the parent window.


def login
  @status = "something"
end

#view
<html><head></head>
<body onload="window.opener.handleOpenIDResponse('" + @status + "');window.close();">
</body>
</html>

That would solve the problem, and you could send any information back through your view.

has_and_belongs_to_many or has_many :through?

chamnapchhorn@gmail.com (chamnap) — Thu, 18 Jun 2009 08:46:00 +0000

Well, I had been quite confusing about these two topics before I read some rails books. These are just different ways to do many to many relationships in ActiveRecord.

has_and_belongs_to_many (habtm)
habtm is the very old way since rails 1.2. It creates a link between associated models through an intermediate join table.


class CreateProjectsProgrammers < ActiveRecord::Migration
   def self.up
      create_table :projects_programmers, :id => false do |t|
         t.column :project_id, :integer, :null => false
         t.column :programmer_id, :integer, :null => false
      end
   end
   def self.down
      drop_table :projects_programmers
   end
end
class Programmer < ActiveRecord::Base
   has_and_belongs_to_many :projects       # foreign keys in the join table
end
class Project < ActiveRecord::Base
   has_and_belongs_to_many :programmers    # foreign keys in the join table
end

Note that an id primary key is not needed in the join table and there is no join model, only join table. Here we will face a problem when we want to add extra columns on the join table. If it is in rails 1.2, we would have used push_with_attributes to do this. However, push_with_attributes has been deprecated in favor of a far more powerful technique, where regular Active Record models are used as join tables (remember that with habtm, the join table is not an Active Record object).

To conclude, habtm is a simple way to do a many-to-many relationship using a join table when the join table doesn't have extra columns. You will need to upgrade the relationship to use has_many :through once you need to add additional columns.

has_many :through
Records in the join table of habtm implementation has no independent existence. Later, we will find it very soon that the join table has a life of its own and should have a model when we add extra columns on that join table. Let's talk about relationship between article, user, and the join model is reading.

When a user reads an article, we can record the fact.


class Article < ActiveRecord::Base
   has_many :readings
end
class User < ActiveRecord::Base
   has_many :readings
end
class Reading < ActiveRecord::Base
   belongs_to :article
   belongs_to :user
end

reading = Reading.new
reading.rating = params[:rating]
reading.read_at = Time.now
reading.article = current_article
reading.user = session[:user]
reading.save

Here we lost what habtm solved. We could not ask a user which articles that they has read and vice versa. To solve this, use :through options inside has_many.


class Article < ActiveRecord::Base
   has_many :readings
   has_many :users, :through => :readings
end
class Reading < ActiveRecord::Base
   belongs_to :article
   belongs_to :user
end
class User < ActiveRecord::Base
   has_many :readings
   has_many :articles, :through => :readings
end

Now, you could do query both direction:


readers = an_article.users
articles = a_reader.articles

Unlike a normal has_many, ActiveRecord won’t let us add an object to the the has_many :through association if both ends of the relationship are unsaved records. The create method saves the record before adding it, so it does work as expected, provided the parent object isn’t unsaved itself. To add extra attributes:


user.readings.create(:read_at => Time.now,
         :rating => params[:rating],
         :article => Article.new)

Choosing which way to build a many-to-many relationship is not always simple. If you need to work with the relationship model as its own entity, use has_many :through. Use has_and_belongs_to_many when working with legacy schemas or when you never work directly with the relationship itself.

http://blog.hasmanythrough.com/2006/4/20/many-to-many-dance-off
http://blog.hasmanythrough.com/2006/4/17/join-models-not-proxy-collections

Proper use of session

chamnapchhorn@gmail.com (chamnap) — Wed, 03 Jun 2009 01:23:00 +0000

Consider the following scenario, you want to store information about current user. After successful login, you might do this.


user = User.authenticate(params[:user_name], params[:password])
if user
   session[:current_user] = user.attributes
else
   flash[:notice] = "Email and password do not match."
   redirect_to :controller => "login"
end

Everything would work as you expected except when you try to change the structure of your session. This would make sessions of online users invalid while they are using your web application. For example, they will feel annoying while they are adding items to their wish lists. Another problem is that you want to make that session invalid after you delete that user account, for example. That won't work because you stored the entire record in his session. The only way to do is to add before_filter in application controller to check the existence of the current user. That would make another job to do it.

The best practice is store only simple data in the session: strings, numbers, and so on. Keep your application objects in the database, and then reference them using their primary keys from the session data.


class ApplicationController < ActionController::Base
   before_filter :get_current_user

   private
   def get_current_user
      @current_user = User.find_by_id(session[:user_id])
   end
end

Here you can access @current_user everywhere in your application and solve many issues during development.

Custom Rake Tasks

chamnapchhorn@gmail.com (chamnap) — Thu, 14 May 2009 04:03:00 +0000

I came across to write a custom rake script for my rails application. Because my application is rich client side application and doesn't use id for any of my models. Instead, it used UUID as a primary key. I got some problems while changing this, and one of them is rails rake commands such as rake db:test:prepare, rake test:functionals, .... For my application, these two commands didn't work really well since it makes my test database messed with autonumber id of all tables. Here, my rake script to load to my test database. Pay attention to mysql command, in this case, I need to run several commands inside mysql command.


  task :load_test_db do
    #load data to development
    Rake::Task["db:fixtures:load"].invoke
    
    #clone development to test
    Rake::Task["db:test:clone_structure"].invoke
    
    #pull data from development
    sh "mysqldump > test.sql development_ncdd_templates -u root"

    sh "mysql -u root << EOF
       use test_ncdd_templates;
       source test.sql;
       exit
    EOF"
  end

If you want to run bash command, take this as an example. I'm not a expert of shell script, but it works for me anyway.

sh "#!/bin/bash
      cd lib
      ruby to_yml.rb
      cd .."

Here are some excellent sources:
http://www.railsenvy.com/2007/6/11/ruby-on-rails-rake-tutorial
http://railscasts.com/episodes/66-custom-rake-tasks

JavaScript in Object-Oriented Way

chamnapchhorn@gmail.com (chamnap) — Wed, 13 May 2009 03:59:00 +0000

I conducted a training to some developers in my office about one full day, yesterday. It is quite exhausted anyway, but everyone seems understand really well. This slide covers many advanced features of JavaScript: Function, Object, Closure,.... Some other points I have pointed out in this slide are about how to make private variable, public variable, static variable, privileged variable and how to do inheritance. I took about 20 different sources as my references and three famous authors. It took me two weeks, at every weekend, to finish this slide.

JavaScript in Object-Oriented Way

View more presentations from cchamnap.

JavaScript Mixins

chamnapchhorn@gmail.com (chamnap) — Thu, 07 May 2009 04:41:00 +0000

I have just reviewed JavaScript Design Patterns, and I think it is good to mention this.

It is possible to do a mixin class in JavaScript as in Ruby. This is another way to make our code reuse without inheritance. Consider you have a function, and you wish to use in many classes. In practice, you create a class that contains your general-purpose methods, and then use it to augment other classes. Class with these general-purpose methods is called Mixin class. It is generally not instantiated or called directly, instead it exists to provide methods to other classes.


var Mixin = function() {};
Mixin.prototype = {
   serialize: function() {
      var output = [];
      for(key in this) {
         output.push(key + ': ' + this[key]);
      }
      return output.join(', ');
   }
};

This sort of method could potentially be useful in many different types of classes, but it doesn’t make sense to have each of these classes inherit from Mixin. Similarly, duplicating the code in each class doesn’t make much sense either. The best approach is to use the augment function to add this method to each class that needs it:


augment(Author, Mixin);

var author = new Author('Ross Harmes', ['JavaScript Design Patterns']);
var serializedString = author.serialize();

This can be thought of as a way to implement multiple inheritance in JavaScript.


/* Augment function. */
function augment(receivingClass, givingClass) {
   for(methodName in givingClass.prototype) {
      if(!receivingClass.prototype[methodName]) {
         receivingClass.prototype[methodName] = givingClass.prototype[methodName];
      }
   }
}

A more robust augment allows copying one or two of them over to another class.


/* Augment function, improved. */
function augment(receivingClass, givingClass) {
   if(arguments[2]) { // Only give certain methods.
      for(var i = 2, len = arguments.length; i < len; i++) {
         receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
      }
   }
   else { // Give all methods.
      for(methodName in givingClass.prototype) {
         if(!receivingClass.prototype[methodName]) {
            receivingClass.prototype[methodName] = givingClass.prototype[methodName];
         }
      }
   }
}

You can now write augment(Author, Mixin, 'serialize'); to only augment Author with the single serialize method.

In other times, you don't have to need this augment function in order to do Mixins. You could do this by using apply or call method inside constructor function.


var Author = function(name, books) {
   this.name = name || "";
   this.books = books || [];

   Mixin.apply(this);
};

Often it makes more sense to augment a class with a few methods than it does to make
one class inherit from another. This is a lightweight way to prevent code duplication. Unfortunately, there aren’t many situations where it can be used. Only methods general enough to be used in very dissimilar classes make good candidates for sharing (if the classes aren’t that dissimilar, normal inheritance is often a better choice).

Prototypal Inheritance vs. Classical Inheritance

chamnapchhorn@gmail.com (chamnap) — Thu, 07 May 2009 04:40:00 +0000

While it is possible to emulate classical inheritance like Java or C#, it is clear that we do prototypal inheritance by taking advantages of prototype lookup chains. Each has its own advantages and disadvantages. Here I quoted from JavaScript Design Patterns:

The classical approach to creating an object is to (a) define the structure of the object, using
a class declaration, and (b) instantiate that class to create a new object. Objects created in this
manner have their own copies of all instance attributes, plus a link to the single copy of each
of the instance methods.

In prototypal inheritance, instead of defining the structure through a class, you simply
create an object. This object then gets reused by new objects, thanks to the way that prototype
chain lookups work. It is called the prototype object because it provides a prototype for what the other objects should look like.

Instead of using a constructor function named Person to define the class structure, Person
is now an object literal. It is the prototype object for any other Person-like objects that you want to create. Define all attributes and methods you want these objects to have, and give them
default values.


/* Person Prototype Object. */
var Person = {
   name: 'default name',
   getName: function() {
     return this.name;
   }
};

var reader = clone(Person);
alert(reader.getName()); // This will output 'default name'.
reader.name = 'John Smith';
alert(reader.getName()); // This will now output 'John Smith'.

To create a new Person-like object, use the clone function. This provides an empty object with
the prototype attribute set to the prototype object. This means that if any method or attribute
lookup on this object fails, that lookup will instead look to the prototype object.
To create Author, you make a clone.


/* Author Prototype Object. */
var Author = clone(Person);
Author.books = []; // Default value.
Author.getBooks = function() {
  return this.books;
}

var author0 = clone(Author);
author0.name = 'Dustin Diaz';
author0.books = ['JavaScript Design Patterns'];
var author1 = clone(Author);
author1.name = 'Ross Harmes';
author1.books = ['JavaScript Design Patterns'];

Here is the clone function. First the clone function creates a new and empty function, F. It then sets the prototype attribute of F to the prototype object. Lastly, the function creates a new object by calling the new operator on F. The cloned object that is returned is completely empty, except for the prototype attribute, which is (indirectly) pointing to the prototype object, by way of the F object.


/* Clone function. */
function clone(object) {
    function F() {}
    F.prototype = object;
    return new F;
}

In classical inheritance, each instance of Author has its own copy of the books array. You could add to it by writing author1.books.push('New Book Title'). That is not initially possible with the object you created using prototypal inheritance because of the way prototype chaining works. A clone is not a fully independent copy of its prototype object; it is a new empty object with its prototype attribute set to the prototype object. When it is just created, author1.name is actually a link back to the primitive Person.name. When you write to author1.name, you are defining a new attribute directly on the author1 object.


var authorClone = clone(Author);
alert(authorClone.name); // Linked to the primative Person.name, which is the
                         // string 'default name'.
authorClone.name = 'new name'; // A new primative is created and added to the
                               // authorClone object itself.
alert(authorClone.name); // Now linked to the primative authorClone.name, which
                         // is the string 'new name'.
authorClone.books.push('new book'); // authorClone.books is linked to the array
                                    // Author.books. We just modified the
                                    // prototype object's default value, and all
                                    // other objects that link to it will now
                                    // have a new default value there.
authorClone.books = []; // A new array is created and added to the authorClone
                        // object itself.
authorClone.books.push('new book'); // We are now modifying that new array.

Classical inheritance is well understood, both in JavaScript and the programmer commu-
nity in general. Almost all object-oriented code written in JavaScript uses this paradigm. If you
are creating an API for widespread use, or if there is the possibility that other programmers not
familiar with prototypal inheritance will be working on your code, it is best to go with classical.

JavaScript is the only popular, widely used language that uses prototypal inheritance, so odds
are most people will never have used it before. It can also be confusing to have an object with
links back to its prototype object. Programmers who don’t fully understand prototypal inheri-
tance will think of this as some sort of reverse inheritance, where the parent inherits from its
children. Even though this isn’t the case, it can still be a very confusing topic. But since this
form of classical inheritance is only imitating true class-based inheritance, advanced JavaScript
programmers need to understand how prototypal inheritance truly works at some point any-
way. Some would argue that hiding this fact does more harm than good.

ActiveRecord::Dirty

chamnapchhorn@gmail.com (chamnap) — Wed, 29 Apr 2009 01:33:00 +0000

Another powerful feature of ActiveRecord is dirty objects. This module tracks unsaved attribute changes. This feature is available probably since March, 2008. See examples below:

A newly instantiated object is unchanged:


  person = Person.find_by_name('uncle bob')
  person.changed?       # => false

Change the name:


  person.name = 'Bob'
  person.changed?       # => true
  person.name_changed?  # => true
  person.name_was       # => 'uncle bob'
  person.name_change    # => ['uncle bob', 'Bob']
  person.name = 'Bill'
  person.name_change    # => ['uncle bob', 'Bill']

Save the changes:


  person.save
  person.changed?       # => false
  person.name_changed?  # => false

Assigning the same value leaves the attribute unchanged:


  person.name = 'Bill'
  person.name_changed?  # => false
  person.name_change    # => nil

Which attributes have changed?


  person.name = 'bob'
  person.changed        # => ['name']
  person.changes        # => { 'name' => ['Bill', 'bob'] }

Before modifying an attribute in-place:


  person.name_will_change!
  person.name << 'by'
  person.name_change    # => ['uncle bob', 'uncle bobby']

My Restful Rails Presentation

chamnapchhorn@gmail.com (chamnap) — Tue, 28 Apr 2009 05:53:00 +0000

Last month, I did a presentation to my team about Restful Rails. I just uploaded to http://www.slideshare.net/cchamnap/rest-in-rails. It might be useful for newbie rails developer.

Rest in Rails

View more presentations from cchamnap.

Upload in Gears 0.5

chamnapchhorn@gmail.com (chamnap) — Sat, 11 Apr 2009 07:34:00 +0000

Uploading in Gears is pretty easy since its HttpRequest object supports uploading imagery data. If you want that uploaded file could serve locally (in offline mode), you need to use LocalServer API. Moreover, it is feasible to upload in chunk for large files as well. It involves the use of Blob API as well as good handling on server side. I found two links that is able to achieve this:
http://snippets.dzone.com/posts/show/6175
http://uploadmovietool.appspot.com/. However, I just show a simple implementation both server side script (Rails) and client side script (JavaScript).

Let's start from select a file to upload with the help of Desktop API, openFiles(). You need to pass the callback, and some option attributes like filter and singleFile. After user has selected a file, the callback will be invoked with one parameter that is a File object of that file. Notice that, this file object has two properties: name and blob. Thus, you can use LocalServer API to capture this file by calling captureBlob() and passing blob object, a unique url for accessing this file, and a content type. If you don't provide a content-type, the browser doesn't know how to view this file when it has intercepted by LocalServer. Usually, it will launch a download of this file. Oop! Don't forget to create a localserver object. I assume you understand gears api good enough.


   var desktop = google.gears.factory.create('beta.desktop');
   desktop.openFiles(
      function(files) {
         var file = files[0];
         if(!file) return;

         //capture file for serving locally
         fileName = file.name;
         blobStore.captureBlob(file.blob, fileName, "image/JPEG");
      },
      { filter: ['.jpg'], singleFile: true }
   );

Next, you need to create a HttpRequest object. Then, you do a post to your server side script. You can set some request headers like: 'Content-Disposition', 'Content-Type', and 'Content-Range'. Gears provides an event handler called onprogress. When this event is triggered, you would get ProgressEvent object. This object has 3 properties: total, loaded, and lengthComputable. These 3 properties are useful in updating UI. Last, you need to pass the blob object to send() of HttpRequest object. You can do this by calling getAsBlob() and passing the url that previously called by captureBlob().


   function upload() {
      var xhrUpload = google.gears.factory.create("beta.httprequest");
      xhrUpload.open("POST", '/upload/files');
      xhrUpload.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"');
      xhrUpload.setRequestHeader('Content-Type', 'image/JPEG');
      xhrUpload.setRequestHeader('Content-Range', 'bytes ' + file.blob.length);

    //Update UI
      xhrUpload.upload.onprogress = function(progressEvent) {
         document.getElementById("status").innerHTML = ((progressEvent.loaded/progressEvent.total)*100).toFixed(0) + "%";
      };

      xhrUpload.onreadystatechange = function() {
         switch(xhrUpload.readyState) {
            case 4: //complete
               document.getElementById("status").innerHTML = "done";
               break;
         }
      };
      xhrUpload.send(blobStore.getAsBlob(fileName));
   }

In Rails, it is quite easy to handle actually. You just need to extract file name of request header 'HTTP_CONTENT_DISPOSITION'. Then, you perform an OS check to write a file of the whole request body. It is a method called raw_post of request object.


class UploadController < ApplicationController
   def files
      path = request.env['HTTP_CONTENT_DISPOSITION'][/^attachment\; filename="([^\"]+)"$/, 1]
      if RUBY_PLATFORM.index("win")
         File.open("public/images/#{path}", "wb") { |f| f.write(request.raw_post) }
      else
         File.open("public/images/#{path}", "w") { |f| f.write(request.raw_post) }
      end
   end
end

JSON Handling Request in Rails

chamnapchhorn@gmail.com (chamnap) — Thu, 02 Apr 2009 09:03:00 +0000

I have messed around for almost a day today just to find how to convert from json object to ruby object when posting a REST web service. However, I have known quite well a couple more features of Rails in depth like Migration, Testing, RSpec, ActiveResource,....

There are three data format we can post through AJAX (from JavaScript): serialization, and xml. Serialization is the process that formats a set of data so that the server can easily read
it from javascript object or html form.


// Serialized form
name=Chhorn&last=Chamnap&city=Cambridge&zip=02140


//XML
<name>Chhorn</name>
<last>Chamnap</last>
<city>Cambridge</city>
<zip>02140</zip>

Rails automatically recognizes these format very well. In your controller, you can access from params[:name], params[:last],.... However, you would face difficulties when you do a post request with json object. In your params variable would be {"{\"first_name\":\"chamnap
\",\"last_name\":\"chhorn\"}"=>nil. Therefore, you must parse this string to ruby object. There are two possible solutions. First solution, I got from a discussion.


irb> require 'rubygems'
=> true
irb> gem 'json'
=> true
irb> require 'json'
=> true
irb> raw = "{\"first_name\":\"chamnap\",\"last_name\":\"chhorn\"}"
=> "{\"first_name\":\"chamnap\",\"last_name\":\"chhorn\"}"
irb> puts raw
{"first_name":"chamnap","last_name":"chhorn"}
=> nil
irb> JSON(raw)
=> {"first_name"=>"chamnap", "last_name"=>"chhorn"}
irb> cooked = JSON.parse(raw)
=> {"first_name"=>"chamnap", "last_name"=>"chhorn"}
irb> raw
=> "{\"first_name\":\"chamnap\",\"last_name\":\"chhorn\"}"
irb> cooked
=> {"first_name"=>"chamnap", "last_name"=>"chhorn"}
irb> raw.class
=> String
irb> cooked.class
=> Hash
irb> cooked["first_name"]
=> "chamnap"
irb> cooked[:first_name]
=> nil

Secondly, I found by chance from my book by using ActiveSupport::JSON.decode() method.

Geocoding on Google Maps

chamnapchhorn@gmail.com (chamnap) — Fri, 27 Mar 2009 04:03:00 +0000

Geocoding is the process of converting from address into geographic coordinates which you then can position on the map. It can be accessed directly via an HTTP request or by using a GClientGeocoder object. It is worthwhile to mention two methods of GClientGeocoder object.

1. GClientGeocoder.getLatLng(): this method allows you to get location of a specific location by querying google geoserver. You need to pass two arguments, address and a callback function. That callback function is invoked with one parameter, a GLatLng object of that location, when there is a reply from this service. See example here.

2. GClientGeocoder.getLocations(): this method allows you more ability than the previous one by returning a JSON object consisting of the following information: Status (request, code), Placemark (address, AddressDetails, Accuracy, Point, coordinates,...). Moreover, it supports both standard and reverse geocoding. If you pass this method a GLatLng object instead of a String address, the geocoder will perform a reverse lookup and return a structured JSON object of the closest addressable location. See examples:
geocoding-extraction
geocoding-reverse

Recently, I realized Google has added another information of data returned by this method, ExtendedData which consists of north, east, south, and west of that area. This is quite useful when positioning location on the map with appropriate zoom level. All you have to do, construct a GLatLngBounds object with these data, then call getBoundsZoomLevel() by passing this GLatLngBounds object to determine proper zoom level that fits map view port.


var getLocation = function(address) {
   var geoCoder = new GClientGeocoder();
   geoCoder.getLocations(
      address,
      function(location){
         document.getElementById('txtAddressId').value = address;

         //if this address is found
         if(location.Status.code == 200) {
            var placeMark = location.Placemark[0];
            var latLngBox = placeMark.ExtendedData.LatLonBox;

            //default zoom level is 7
            var latlng, zoom = 7;
            if(latLngBox) {
            //determine zoom level if possible
               var latLngBound = new GLatLngBounds(new GLatLng(latLngBox.south, latLngBox.west), new GLatLng(latLngBox.north, latLngBox.east));
               zoom = map.getBoundsZoomLevel(latLngBound);
            }
            latlng = new GLatLng(placeMark.Point.coordinates[1], placeMark.Point.coordinates[0]);
            map.setCenter(latlng, zoom);
         } else {
            alert('Address is not found.');
         }
      }
   );
}



Load Google Maps Dynamically
chamnapchhorn@gmail.com (chamnap) — Thu, 26 Mar 2009 01:21:00 +0000
Previously, I posted how to load google maps script dynamically for performance reasons. However, when callback function is get called, we could not pass any parameters to this callback, because the callback we passed is the name specified in string. 

There is another way if you use multiple APIs from Google, Google AJAX APIs. This framework allows you to load one API key for all supported Google AJAX APIs (including Google Maps) and also provides a common namespace for each API, allowing different Google APIs to operate together. If you decide not to use the Google AJAX API framework, you can continue to use the existing namespace. There is a method from this framework called load() with 2 parameters: moduleName, and callback function. Hence, I could use the same way to load google map except the url to load and call load(). Here is from google documentation.


function mapsLoaded() {
   var map = new google.maps.Map2(document.getElementById("map"));
   map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

function loadMaps() {
   google.load("maps", "2", {"callback" : mapsLoaded});
}

function initLoader() {
   var script = document.createElement("script");
   script.src = "http://www.google.com/jsapi?key=ABCDEFG&callback=loadMaps";
   script.type = "text/javascript";
   document.getElementsByTagName("head")[0].appendChild(script);
}


To solve the previous problem, you could actually add the script tag of Google AJAX APIs, which describes more precisely at http://code.google.com/apis/ajax/documentation/. The Google AJAX APIs <script> tag loads a single method, while google.load() which loads individual AJAX APIs. With this method, you can load any specific Google API on demand.


function mapsLoaded() {
   var map = new google.maps.Map2(document.getElementById("map"));
   map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

function loadMaps() {
   google.load("maps", "2", {"callback" : mapsLoaded});
}



MySQL Stored Function
chamnapchhorn@gmail.com (chamnap) — Sat, 14 Mar 2009 02:43:00 +0000
I have not touched any database code for about 1 year, and I have tried to help my friend with CREATE FUNCTION syntax. I have spent a couple hours with it in phpMyAdmin; however, I reviewed it very well which makes me much more clearer. Have a look the following code:


CREATE FUNCTION myFunction()
RETURNS int(11)
BEGIN
RETURN 1;
END;


There is a problem with the above code because it doesn't use any DELIMITER statements at all. I found this solution on http://forums.mysql.com/read.php?98,212863,212877#msg-212877

Well, I have tested that again on phpMyAdmin, but it still doesn't work. I found some people said don't use phpMyAdmin to run this type of statement. Hence, I tried MySQL Query Browser, it works well.


DELIMITER $$

CREATE FUNCTION myFunction() RETURNS int(11)
BEGIN
RETURN 1;
END $$

DELIMITER ;


Have a look on full syntax of create stored routine.


SplitButton and MenuButton
chamnapchhorn@gmail.com (chamnap) — Tue, 27 Jan 2009 03:48:00 +0000
Probably, somebody also experiences difficulties with dealing with SplitButton and MenuButton when you add new items, select an item, replace it with new items. To deal with those items, you need to call getMenu().

1. To clear existing items, call clearContent() of getMenu()

   split.getMenu().clearContent();
   split.set("label", "Choose One");


2. To add item(s), call addItem() or addItems(). Remember each item has three properties: "text", "value", and "onclick". After calling this method, you need to call render by passing the container of this button, otherwise it won't appear on the browser. 

   split.getMenu().addItems(splitData);
   split.getMenu().render(split.get('container'));


3. To replace with new data, just combine two previous snippet codes

   split.getMenu().clearContent();
   split.set("label", "Choose One");
   split.getMenu().addItems(splitData);
   split.getMenu().render(split.get('container'));


4. To enable selection when clicking on each item, each item must have onclick property with an object literal as shown below:

splitData = {
   fn: function(type, args, item) {
      split_group.set("label", item.cfg.getProperty("text")); 
   }
}



Handle DateTime field in Gears
chamnapchhorn@gmail.com (chamnap) — Tue, 27 Jan 2009 02:40:00 +0000
SQLite in Gears supports DATETIME data type, but it works differently from JavaScript context. SQLite only support the following formats as shown on SQLite Date and Time Functions. If you provide invalid format, SQLite will not give an error, but the function call (SQLite DateTime function) will return null, or record could not be inserted/updated. There are two ways to handle this situation.

1. If you don't use ORM JavaScript library such JazzRecord or JStORM, you could make this field an Integer field and call getTime() of JavaScript Date object to store. For displaying data back, you can still sort by ascending/descending order. Pass value that get from getTime() to a constructor of Date object to convert a Date object.

var db = google.gears.factory.create('beta.database');
db.open('database-test');
db.execute('create table if not exists Test (Phrase text, Timestamp int)');
//store in db
db.execute('insert into Test values (?, ?)', ['Monkey!', new Date().getTime()]);
var rs = db.execute('select * from Test order by Timestamp desc');

while (rs.isValidRow()) {
  //convert to date object
   var date = new Date(rs.field(1));
   alert(rs.field(0) + '@' + date.getDate() + "/" + (date.getMonth()+1) + "/" + date.getFullYear());
   rs.next();
}
rs.close();

One exception with this is that you can use SQLite DateTime functions when querying back because the format you store is not recognized by SQLite. You have to loop through in JavaScript and an if statement.

2. This way is preferable because it supports full SQLite Date and Time Functions, but it needs some helper method to transform format between SQLite and JavaScript back and forth.


var Util = {
   fromJSDateToSQLiteDate: function(date) {
      var toTwoCharacters = function(number) {
         return (number.toString().length == 2) ? number.toString() : '0' + number.toString();
      };
      var strYear = date.getFullYear();
      var strMonth = toTwoCharacters(date.getMonth() + 1);
      var strDate = toTwoCharacters(date.getDate());
      var strHour = toTwoCharacters(date.getHours());
      var strMinute = toTwoCharacters(date.getMinutes());
      var strSecond = toTwoCharacters(date.getSeconds());
      return strYear + '-' + strMonth + '-' + strDate + ' ' + strHour + ':' + strMinute + ':' + strSecond;
   },

   fromSQLiteDateToJSDate: function(strDateTime) {
      var strDate = strDateTime.split(' ')[0];
      var strTime = strDateTime.split(' ')[1];
      var arrDate = strDate.split('-');
      var arrTime = strTime.split(':');
      return new Date(arrDate[0], arrDate[1]-1, arrDate[2], arrTime[0], arrTime[1], arrTime[2]);
   }
};



Refresh DataSource of DataTable
chamnapchhorn@gmail.com (chamnap) — Fri, 23 Jan 2009 09:33:00 +0000
I have been using YUI as a UI framework for my projects recently. I found the documentation of YUI is very bad since it just tells that you do this, you will get this. It doesn't tell why I need to do this, and it still misses some common examples. Most often, I need to check what are methods and properties do this object have.

In order to reset new data when your data have been updated by somewhere, you need to call reset() from getRecordSet() of datatable object. Then, call setRecords() by passing your new data. If you have paginator, you also have to update it by calling setPage() to its current page and reset the total number of record.


 dataTable.getRecordSet().reset();
 dataTable.getRecordSet().setRecords(newData);
 dataTable.refreshView();
  
 //refresh paginator
 dataTable.get("paginator").setPage(dataTable.get("paginator").getCurrentPage());
 dataTable.get("paginator").set("totalRecords", dataTable.getRecordSet().getLength());