Ext JS 4 makes you construct the UI by writing JavaScript code. You have to write few lines of JavaScript code to construct even a simple textbox or a button. So developers always try to look for a way to squeeze in raw HTML code. Ext JS 4 provides an XTemplate class that can be used (or abused) for this purpose. Most of my assignments in ExtJS 4 or Sencha Touch, XTemplate lands up being a curiously discussed topic.
For the old timers, XTemplate will remind you of the XPath expressions that we use in XSL stylesheets to locate various parts of the XML document. Using XTemplate you can define a HTML UI template that can be applied to your data. The result can be rendered on to the screen.
In the code below, you have a collection of countries in JSON format. The XTemplate has a simple for-loop that will display the name and capital of each country in a paragraph tag. The template is applied to the countries data and displayed in a panel.
var countries = [
{ name: 'India',capital:"New Delhi"},
{ name : "USA",capital:"Washington"},
{ name : "UK",capital:"London"}
];
Ext.application({
launch : function(){
//XTemplate definition
var tpl = new Ext.XTemplate(
'<h6>Countries</h6>',
'<tpl for=".">',
'<p>{#}. {name}: <i>{capital}</i></p>',
'</tpl>'
);
Ext.create("Ext.panel.Panel",{
html : tpl.apply(countries), //apply XTemplate with the data
renderTo : Ext.getBody()
});
}
});
The only problem working with XTemplate is it’s frustrating syntax, particularly when you have to use single quotes and double quotes using escape sequences inside the template syntax. You can write if-else, switch-case conditions, loops etc., in XTemplate. Also a number of developers fall madly in love with XTemplate and abuse it leading to maintenance and browser portability issues. You have it use it judiciously.
Being a great fan of Martin Fowler’s writings the NoSQL Distilled book was in the radar for a long time. The introduction to NoSQL written by him was(is) immensely useful for anybody who wants to get an idea of NoSQL databases. This presentation made a lot of us look forward to the book.
The rough cut version of this book is released now. You can access it from safari books.
Interacting with a bunch of developers this week gave me an idea to try out TicTacToe game using jQuery. An unformatted TicTacToe application implemented using jQuery is hosted in this URL.
The tictactoe.js file implemented using jQuery is shown below:
var currentPlayer = "X";
$().ready(function(){
$("table td").css("width","150px").css("height","65px");
$("#playBTN").on("click",playButtonClicked);
$("table td").each(function(){
$(this).on("click",function(){ play($(this)); });
});
});
function playButtonClicked(){
$("#messageH2").html("");
$(this).attr("disabled","disabled");
currentPlayer = "X";
$("table td").each(function(){
$(this).text("");
});
}
function play(cell){
if(!isGameOver()){
if(cell.text().trim() == "" && currentPlayer == "X")
{
cell.text("X");
if(!isGameOver())
{
currentPlayer = "O";
computerPlay();
}
else
displayResults("X");
}
}
}
function displayResults(winner){
$("#messageH2").text("Game Over. The winner is " + winner);
$("#playBTN").removeAttr("disabled");
currentPlayer = "X";
}
function computerPlay()
{
//Logic can be changed for O
$("table td").each(function(){
if($(this).text().trim() == "" && currentPlayer == "O")
{
$(this).text("O");
currentPlayer = "X";
if(isGameOver())
displayResults("O");
}
});
}
function isGameOver()
{
var row1Over = check("#col11,#col12,#col13");
var row2Over = check("#col21,#col22,#col23");
var row3Over = check("#col31,#col32,#col33");
var col1Over = check("#col11,#col21,#col31");
var col2Over = check("#col12,#col22,#col32");
var col3Over = check("#col13,#col23,#col33");
var dia1Over = check("#col11,#col22,#col33");
var dia2Over = check("#col13,#col22,#col31");
return row1Over || row2Over || row3Over || col1Over || col2Over || col3Over || dia1Over || dia2Over;
}
function check(cells)
{
var gameOver = false;
var valuesArr = [];
$(cells).each(function(){
if($(this).text().trim() != "")
valuesArr.push($(this).text().trim());
});
if(valuesArr.length == 3)
{
if((valuesArr[0] == valuesArr[1]) && (valuesArr[1] == valuesArr[2]))
gameOver = true;
}
return gameOver;
}
Back to bread and butter :), Guessing Game. This time using KnockOut.js and jQuery. The screen shots for the Guessing Game can be found in one of my earlier posts. You can read the introductory post about KnockOut.js here.
The Game.js contains the game JSON object with the logic to play the game.
//Game.js
var game = {
target: Math.floor((Math.random() * 101)),
attempts: 0,
message: "",
gameOver: false,
play: function (guess) {
this.attempts++;
if (guess > this.target)
this.message = "Aim lower";
else if (guess < this.target)
this.message = "Aim higher";
else {
this.message = "You have got it!!!";
this.gameOver = true;
}
},
reinitialize: function () {
this.target = Math.floor((Math.random() * 101));
this.attempts = 0;
this.message = "";
this.gameOver = false;
}
};
The GameViewModel.js created using KnockOut is shown below.
//GameViewModel.js
var gameViewModel = {
guess: ko.observable("0"),
message: ko.observable(""),
attempts: ko.observable(""),
reinitialize: function () {
this.message("");
this.attempts("");
this.guess("0");
},
play: function () {
game.play(this.guess());
this.message(game.message);
this.attempts("Attempts: " + game.attempts);
if (game.gameOver) {
var playAgain = window.confirm("Do you want to play again?");
if (playAgain) {
game.reinitialize();
this.reinitialize();
}
else
window.close();
}
}
};
And the guessingGame.html file that contains the UI and the scripts included. It also contains the code for binding the view model.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.7.2.js"></script>
<script src="knockout-2.1.0.js"></script>
<script src="Game.js"></script>
<script src="GameViewModel.js"></script>
<script>
$().ready(function () {
ko.applyBindings(gameViewModel);
});
</script>
</head>
<body>
<h1>Welcome to the Guessing game.</h1>
Enter your guess <input type="text" id="guessText" data-bind="value:guess"/>
<input type="button" value="Guess" id="guessBtn" data-bind="click:play"/>
<h1 id="attemptsH1" data-bind="text:attempts"></h1>
<h1 id="messageH1" data-bind="text:message"></h1>
</body>
</html>
Few tools had been in my radar for a long time before beginning to use them recently. First one is DropBox. Synchronizing the desktop, laptop(s), iPad and smart phones is a laborious task. Sharing data between them using flash drive and email attachments is not really a sophisticated approach. Enter dropbox, that provides 2 GB of personal storage space on the cloud. You can install a dropbox client in your devices and simply drag and drop the files into the dropbox folder.
If you want to access a PDF document that you downloaded in your notebook from your iPad, drop the document into dropbox. The same PDF can be accessed from the dropbox present in your iPad. Dropbox also generates public URLs for the files present in it. So you want to share a resource to others, no need for attachments anymore.
DropBox can be effectively used to back up your work as well. You can create SVN repositories inside your dropbox and work with the project from your Mac or PC or any other machine. The project is now safe and available on the cloud and can be accessed anytime from any device through an SVN client. Extremely effective for backing up your work.
