Shortlink

Emulating .val() function in jQuery

Delving into the implementation details of a JavaScript library has always been an enjoyable experience. A group of us were emulating the $(“#id”).val() method provided by jQuery. jQuery provides a val() function on input elements. A val() function returns the value of the input element and a val(“value”) sets the value of the input element.

	function $(expression) {
            if (expression.indexOf("#") != -1) {
	                var id = expression.split("#")[1];
        	        return document.getElementById(id);
            }
        }
	HTMLInputElement.prototype.val = function (text) {
            if (text)
                this.value = text;
            else
                return this.value;
        }
	//You can use it as $("#idOfTheElement").val("hello");

The $ method resolves the expression “#id” and returns the DOM object associated with the id. You can wire up a val function using “prototype” keyword on the HtmlInputElement class.

Shortlink

Data binding using KnockOut.js

In the lines of Backbone.js and Node.js, there’s yet another JavaScript library ‘KnockOut.js’ that’s been making noise in the development circles. KnockOut is a JS library that implements a Model-View-View Model(MVVM) pattern.

KnockOut helps you bind the data to the View components in our pages. For instance, if you want to update the UI when data is modified and vice-versa you don’t have to write code to implement that. Bind the UI components under observation with the data and KnockOut does rest of the job for you.

Let’s create a simple page that uses KnockOut. You will have a textbox where you enter the name of a country and click a button. The capital and continent of the country will be displayed in header tags. The screen shot is shown below.

The HTML UI code for the above is given below.

<html>
<head>
    <title>KO example</title>
    <script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
    <script>
        function init() {
           //KO code goes here
        }
    </script>
</head>
<body onload="init();">
    Country <input type="text" data-bind="value: name"/>
    <input type="button" value="Get info" data-bind="click: getInformation"/>
    <h2 data-bind="html: capital"></h2>
    <h2 data-bind="html: continent"></h2>
</body>
</html>

The heart of KnockOut is the “data-bind” attribute. You can see the data-bind attribute used in the <input> and <h2> elements. This attribute binds the data (name,capital,continent) with the properties(value,text) of the component. You will also notice the event registration of the Get info button using the data-bind attribute.
The init function is shown below.

function init(){
    var country = {
                name: ko.observable(""),
                capital: ko.observable(""),
                continent: ko.observable(""),
                getInformation: function () {
                    if (this.name() == "UK") {
                        this.capital("London");
                        this.continent("Europe");
                    }
                    else if (this.name() == "India") {
                        this.capital("New Delhi");
                        this.continent("Asia");
                    }
                    else {
                        this.capital("Unknown");
                        this.continent("Unknown");
                    }
                }
            };
            ko.applyBindings(country);//LINKS THE UI AND THE DATA
}

We have created a JSON object country with name, capital, continent and getInformation properties. The name, capital and continent properties have been declared as observables. The textboxes and header elements will observe these properties. Any changes to these properties will be reflected in the UI and vice-versa. The getInformation function is called when the button is clicked. It has a simple logic to compute the capital and continent. The line “ko.applyBindings(country);” takes care of updating the UI and the data with the values.

The “data-bind” attribute can be added dynamically to the HTML elements to keep the UI clean. KnockOut when used with jQuery can save time and effort in writing lot of code that deals with data display.

Shortlink

Grails, Scala, Node js on the cloud

The urge to create a number of utility applications for personal and official use led to the use of Google App Engine. But Google App Engine forced us to stick to writing Java/Python code. After having worked in Groovy and Grails, working with Java makes you feel very old. But you have to resort to writing Java code if the cloud facilities of Google App Engine have to be used.

Working with Node.js took me to Cloud Foundry. Cloud Foundry is a cloud service provided by VMware that can be used to host Rails, Grails, Scala, Spring and Node JS applications. It’s in the beta version and available for free as of now.

You can create an account in Cloud Foundry and if you are working in Grails/Spring/Scala you will have to simply install a Cloud Foundry extension for the Spring Source Tool Suite (STS 2.9) and follow the instructions to deploy your application in cloud foundry.

I created a simple Grails application HealthyCoder, that I plan to use extensively for a number of assignments. After creating the Grails application you will have to install the grails plugin ‘cloud-foundry’ and use the cf-* commands to push/modify your application to the cloud foundry.
My sample application is available in this URL.

Shortlink

Interesting read-Spoon feeding programmers

Interacting with a number of developers every week keeps reminding me of an article about Spoon feeding programmers in Java Programming Forums. You can easily categorize the developers into the smart ones and the ones that need to be spoon fed. The former are those who want to understand the approach to solving problems and the latter require quick-fix solutions to problems.The article talks about the scenarios when you can spoon feed the developers and when not to.

Few points in the article are really worth mentioning.

Problem solving is not only fun, it’s one of the fundamental skills required to be a good programmer, and it’s one of the hardest to teach. Anybody can memorize syntax, but how do you learn how to work through a problem? The answer is by working through different kinds problems, over and over again. Offering a full solution before a person has worked through the problem is robbing the person of that process, and that prevents the person from becoming a good programmer. A better option is to help the person work through the process by suggesting breaking the problem up into smaller pieces or thinking about how a human would solve the problem in his or her head or with a pencil and a piece of paper.

You can read this article here.

Shortlink

Mobile development and Node.js

In an earlier post on Node.js, you saw how it can really improve the productivity by using it’s standalone JavaScript runtime to execute the scripts. The Node.js home page provides a six liner example of creating a simple Web server that can process HTTP requests, using it’s API. The piece of code is shown below.

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

Execute this script and you have a web server up and running in few seconds.

This ready made, extremely light-weight web server has been very useful while developing and testing mobile applications. Number of times, you have to communicate with the server and exchange data, from a mobile device or an Android/iOS device simulator. Setting up a server like tomcat/IIS just for this purpose has been really painful and a tedious process.
Node.js has made this job, easy. Creating a web server, tweaking it to behave the way you want, make it deliver the response that your application needs, all these have become very agile.

I have started using this Node.js server for playing with new stuff and it has made learning more enjoyable as you can get to the point faster than before.