Shortlink

Simple MVC application using Sencha 2.0

My first video post on creating a simple MVC application using Sencha Touch 2.0. Have fun!!!

Shortlink

GuessingGame with Backbone.js

I have a set of examples that I always love to implement whenever I learn a new framework/language/technology. One of them is a Guessing Game. The application will generate a random number between 1 and 100. The user will play the game till he guesses the number correct. The screenshots for the game looks like below:


The UI of the application present inside the body tag is given below.

	<body>
	   <h1>Welcome to the guessing game. Enter a number between 1 and 100.</h1>
	   <p>
		Enter your guess <input type="text" id="guessTB">
		<br/>
		<input type="button" value="Guess" id="guessBTN">
		<br/>
		<h3 id="messageH3"></h3>
		<h3 id="attemptsH3"></h3>
	   </p>
	</body>

Let’s implement this game using Backbone.js. In my earlier post on Backbone I had discussed the basics of model, collection and view. We’ll use them to implement the guessing game.

Let’s define a model called GuessingGame with target, attempts and message attributes. ‘target’ attributes will get initialized to a random number between 1 and 100. The GuessingGame model will have a play method that has the core logic of the application. The GuessingGame model is shown below.

var GuessingGame = Backbone.Model.extend({
	defaults : {
		      target : 0,
		      attempts : 0,
		      message : null
		   },
	initialize : function(){
				var target = Math.floor(Math.random()*100);	
				this.set({"target":target});
		     },
        play : function(guess){
	                        var target = this.get("target");
                    	        var attempts = this.get("attempts");
  	                        var message = null;
	                        attempts++;
	
	                       if(guess > target)
  		                  message = "Aim Lower";
	                       if(guess < target)
		                  message = "Aim Higher";
	                       if(guess == target)
		                  message = "You have got it!!!";
	                       this.set({"message":message});	
	                       this.set({"attempts":attempts});
                }
        });

In the document load function let’s create an instance of GuessingGame model. You’ll also create a View ‘GameView’. The GameView will have the event handler for the button click event. The onload function with the above logic is shown below:

$(function(){
		var game1 = new GuessingGame();	
		var GameView = Backbone.View.extend({
				el : $("body"),
				events : {
					  "click #guessBTN" : "play"
					},
				play : function(){
						game1.play(parseInt($("#guessTB").val()));
						$("#messageH3").html(game1.get("message"));
						$("#attemptsH3").html("Attempts: " + game1.get("attempts"));
					}
				});
				var gameView = new GameView();
 			 });		

There we go!!! I have not done things like validations etc., to keep it simple. GuessingGame is a kind of application that gives you the confidence to proceed to the next level of learning a new tool.

Shortlink

Dive into Android development – VII

In the earlier post we discussed the use of intents to perform call up and sms operations. In this post let’s discuss invoking camera and voice recorders using Intents. You’ll have two buttons Camera and Voice record clicking which will perform the appropriate actions.

On clicking the camera button you’ll create an Intent with the ACTION_IMAGE_CAPTURE action present in the MediaStore class as shown below.

Intent cameraIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
startActivity(cameraIntent);

The above code will launch the camera application and you can click a picture now.

On clicking the voice record button you’ll create an Intent with the RECORD_SOUND_ACTION action present in the Media class as shown below.

Intent recordIntent=new Intent(android.provider.MediaStore.Audio.Media.RECORD_SOUND_ACTION);
startActivity(recordIntent);

The above code will launch the Voice Recorder application. You can start recording the voice now.

One of the challenges I have faced in working with Camera and Voice recorder is the control coming back to our application. It varies with the application. I have a Samsung Galaxy S device, where the default voice recorder application doesn’t return back to my application after the job. I have to press the back button to get back to my application.

Shortlink

Interesting read

Came across this interesting article on InfoQ about a survey on the adoption of various cross-platform tools by the developers. PhoneGap and Sencha Touch seem to be the top two tools actively used by developers. At the same time, PhoneGap doesn’t seem to be really a favourite tool.

It’s also not surprising to find people wanting to move away from Flex.
One cannot jump to any conclusions based on this survey but definitely interesting to read.
You can read the complete survey here

Shortlink

Modularize JavaScript with Backbone

The jQuery code that I have used in projects have always had modularity issues. The code looks clumsy and messy making it very difficult to maintain. My work with Ext JS4 and Sencha Touch made me looking for a MVC implementation with jQuery code. I landed up with Backbone.

Backbone is a JavaScript library that provides an excellent facility to modularize the client-side JavaScript code. It provides a solution to implement MVC pattern. You can modularize the code by creating models and views resulting in highly reusable code.

I have a very simple application implemented where I display a list of countries in a ul tag using jQuery. I wrap up this whole exercise using Backbone.

To begin with you need to have the scripts Backbone.js, jquery.js and a dependency library UnderScore.js included in my file as shown below.

 <script src="jquery-1.6.1.js"></script>
 <script src="underscore-min.js"></script>
 <script src="backbone-min.js"></script>

I define a Model class called Country and a collection of Models called ‘Countries’. I use the Backbone.Model.extend and Backbone.Collection.extend syntax as shown below.

var Country = Backbone.Model.extend({
	defaults : {
			name : "--",
			capital : "--"
	    	   }
});
var Countries = Backbone.Collection.extend({
	model : "country"
});
var countriesInAsia = new Countries([
	  new Country({name:"India",capital:"New Delhi"}),
	  new Country({name:"SriLanka",capital:"Colombo"}),
	  new Country({name:"Japan",capital:"Tokyo"})
]);

Let’s display the countriesInAsia in an unordered list using jQuery. You can define a view class using Backbone.View.extend syntax. This class has an initialize and render method that renders the countriesInAsia in an UL tag. The UL tag is rendered inside the body element. Backbone view holds the container inside which you want to render the UI in an “el” element. In this case “el” is the body element. The code is shown below.

$(function(){
  var CountryView = Backbone.View.extend({   
        el : $("body"),		
        initialize: function(){
       	       this.render(); 
    	}, 
	render: function(){
      	     $(this.el).append("<ul id='countries'></ul>");
	     for(i=0;i<countriesInAsia.length;i++){
		$("ul#countries").append("<li>" + countriesInAsia.at(i).get("name") + "</li>");
	     }
        },
	changeColorToRed : function(event){
		$(event.currentTarget).css("background-color","red");
	},
	changeColorToWhite : function(event){
		$(event.currentTarget).css("background-color","white");
	},
       events : {
		"mouseover li" : "changeColorToRed",
		"mouseout li" : "changeColorToWhite"
       }
  });		
					 
  var countryView = new CountryView();
});			

What’s amazing is the event handling facility. The events property just lists down the possible events and their listeners. It cannot get better than this.
One of the finest frameworks to write highly maintainable JavaScript(particulary jQuery) code. I am planning to write few more posts on this framework.