Thursday, August 16, 2012

Object Oriented Programming in JavaScript with DCS

In the process of learning JavaScript there always comes a point when you really want to implement Object Oriented Programming in a very easy way. There are lots of libraries to accomplish this task, and they are really straightforward. But sometimes you really need something even simpler or maybe you want to implement it yourself so that you really understand the concepts behind it, and this is my case; I wanted to implement a very simple class system so that I could understand more about how JavaScript prototype system works and how to emulate inheritance in a very simple way.

After surfing the web a bit I run in to John Resig's blog post in which he explains how to implement OO programming in JavaScript in an easy and clean way. So after reading it I decided to implement my own class system, just for fun, and called it Dummy Class System or DCS.

DCS is a very simple/dummy class system for JavaScript. DCS lets you implement Object Oriented Programming with ease. As I mentioned before DCS is influenced by the simple JavaScript inheritance mechanism implemented by John Resig and is also a bit influenced by the class system defined by Ext JS.

Here is an example of what you can do with DCS:

  Define the class Person

    DCS.define('Person', { 
        property: { 
            name: '', 
            lastname: '' 

        constructor: function(name, lastname) { 
   = name; 
            this.lastname = lastname; 

        toString: function() { 
            return 'Name: ' + + ' Lastname: ' + this.lastname; 

The config object (the second parameter of the DCS.define method) contains the methods and properties that will be part of the new class prototype, except for the property config object that you can use to specify default values for instance variables. The property config also tells DCS to generate getters/setters for each instance variable specified in this object. Therefore you can use these generated methods as usual:

    // create a new instance of Person
    var p1 = new Person("John", "Doe");
    console.log(p1.getName());      // prints "John"
    console.log(p1.setName("foo")); // sets the name to "foo"
    console.log(p1.getName());      // prints "foo"

  Define the Class Worker which extends from Person

    DCS.define('Worker', { 
        extend: 'Person', 

        property: { 
            jobTitle: '' 

        constructor: function(name, lastname, jobTitle) { 
            this._super(name, lastname); 
            this.jobTitle = jobTitle; 

        toString: function() { 
            return this._super() + ' Job Title: ' + this.jobTitle; 

One thing to notice here is that you can still have access to an overriden method by using the _super reference, this reference have temporary access to its parent's overriden method.

As you can see is quite simple to do OO programming with DCS. For more information about the project visit the source code repository at github. Feel free to download and play with it.

Saturday, March 17, 2012

Syntax highlighter for SL programming language

A few days ago  Eliseo Ocampos posted on Google plus a hello world example that shows a bit of his project named gSL which is a very interesting project that still in early states.

gSL is a GNU interpreter for SL, a language which is used in the academic field to teach Introductory courses to programming. The SL language interpreter is distributed freely but the code is proprietary, that's why the gSL project started.

Since there is no open source IDE or text editor that supports SL language, I decided to do a syntax highlighter for GtkSourceView-based editors, such as gedit, named

sl-highlight which simple declares a language spec that GtkSourceView uses.

The project source code can be found at sl-highlight 
Feel free to download and use it.

Sunday, March 11, 2012

Stateful Checkbox Selection for Ext JS 4 grid

Hello everybody.

It is time to blog something. Like I said in my first post, I am focusing in web development and related technologies. The web technologies I am currently working with are Ext JS 4, PHP, CSS, HTML 5.

Ext JS 4 is a pure JavaScript application framework that works everywhere and is base on web standards. It allows developers to write very cool web apps.

Since Ext JS allows you to build custom components, in this post I am going to show you a small grid plugin called Ext.ux.grid.plugin.StatefulCheckboxColumn that I developed since I needed for a personal project that I'd had.

The Project consist in a grid plugin that injects a checkbox column into the grid and handle the selection of the items through checkbox selection. It also adds an event to the grid, that is fired after items checked has changed.

This plugin uses a Ext.state.Provider to mantain the currently selected items after page loads or paging.

The project source code can be found at StatefulCheckboxColumn
Feel free to download and use it.