Browsing: / Home
Shortlink

Dive into Android development – I

By Prabhu Sunderaraman on January 31, 2012 in ,
After a series of posts on jQuery plugin I thought I should write a few on developing apps for the android platform. There are plenty of articles/books on android development, apart from the very good documentation on android provided by Google.
So, I want to keep the theory very minimal and just focus on implementing a variety of lightweight applications.  People who know Java (or even C# or any OO language) should be in a comfort zone.
Alright let’s get the recipe out for developing android apps. Here is what you need.
  • JDK 6 or above
  • Eclipse IDE for JEE developers. You can download it from http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/indigo/R/eclipse-jee-indigo-win32.zip. Needless to say, extract it and open it after you have downloaded it.
  • Android SDK. You can download it from http://dl.google.com/android/android-sdk_r16-windows.zip.   
  • Eclipse plugin for Android so that you can play with android applications from/within Eclipse. 
    • Open eclipse, go to Help->Install new software->Click ‘Add’->Type ADT in the Name textbox and https://dl-ssl.google.com/android/eclipse/ in the location textbox.
    • Select the Developer Tools checkbox and click Next, again Next, Accept the licence agreements and finally hit Finish
    • Now that’s going to take 10-15 minutes of your time depending on the speed of your connection. You may have to restart eclipse after this process.
  • After restarting eclipse it may ask you to configure the android SDK. You can either choose to download a fresh copy of android SDK or give the location of Android SDK that you have downloaded earlier.
  • Android SDK is a fundamental starter package. Say, you’re developing an application that will run on    Android 3.0, then you need to have the Android 3.0 platform and tools installed.  Go to Window->Android SDK Manager you will see the screen below. You can select Android 3.0 or anything that suits your requirement and install. This is a time consuming process.
  •  The application that you will build will be run in an android device, but what if you have a different version of android phone or sometimes don’t even have it(yes, it’s quite common!!!)? You can configure an android emulator or Android Virtual Device. Go to window->AVD Manager. You can create new Android virtual device(s) targeting any platform. So the applications can be run in any of these during development. I have configured a Virtual Device called ‘HoneyComb‘ for Android 3.0 platform as shown below.

There you go!!! We are all set to develop simple android apps.
Btw what is HoneyComb? 

Mixx Delicious Digg Facebook Twitter
Shortlink

Grails, Sencha Touch and MVC

By Prabhu Sunderaraman on January 30, 2012 in ,
It’s pretty tedious implementing MVC pattern in Sencha Touch applications. Sencha Touch provides facilities for modularizing the JavaScript code using MVC, but not as easy as Grails does. Grails enforces MVC seamlessly.

The structure of a Grails application looks like below.

The structure of a Sencha Touch MVC application is given below.

Take a close look at the file structure in both the cases. You will find that the conventions used in both Grails and Sencha Touch MVC are very similar, thereby improving the understanding of both the frameworks much better.

Mixx Delicious Digg Facebook Twitter
Shortlink

jQuery Plugin – III

By Prabhu Sunderaraman on January 26, 2012 in
“fn” property in $ is used to attach new functions in jQuery. You can also develop plugins by using global functions. You can directly assign a new method to $ function as given below:
$.xxx = function(){
…
} 
Say you want to capitalize a String you can write
$.capitalize = function(value){
 return value.toUpperCase();
}
You can use it by calling alert($.capitalize(“plugin”));
One useful method that I have always written,  is  while working with dates.
$.daysFromNow = function(days){
  var date = new Date();
  date.setDate(date.getDate()+days);
  return date;
}
You invoke it as $.daysFromNow(7) it will return the next week’s date. 
I found the “daysFromNow” example from Venkat Subramaniam‘s  Programming Groovy book. He has implemented a “daysFromNow” function in Groovy using it’s meta-programming capability.
You can also implement a lot of functionalities that involve arrays, in this fashion. 
So crack some code and have fun!!!
Mixx Delicious Digg Facebook Twitter
Shortlink

jQuery Plugin – II

By Prabhu Sunderaraman on January 24, 2012 in
In my previous post, I discussed creating a simple plugin in jQuery using the “fn” property. Let’s extend it further.
jQuery  provides a method chaining mechanism that makes coding easy. Say, you want to change the color of a text and change its’ value, you can write it as follows,
$(“#id”).text(“newValue”).css(“color”,”red”)
How do you get this facility for our changeColor plugin?
$.fn.changeColor = function(color){
    $(this).css(“color”,color);
    return $(this);
}
Returning the invoked object using $(this) gives the ability to pad up more methods.

If you call changeColor with more than one element like $(“#id1,#id2”).changeColor(“red”) then you can modify the code as below
$.fn.changeColor = function(color){
         return $(this).each(function(){
              $(this).css(“color”,color);
        });
} 
changeColor returns an array of the ‘invoked’ objects.
So our plugin can be chained now as shown below.

$(“#id1,#id2”).changeColor(“red”).text(“Chained”); 

Mixx Delicious Digg Facebook Twitter
Shortlink

jQuery Plugin – I

By Prabhu Sunderaraman on January 23, 2012 in
jQuery is used in lot of projects these days, and one of the challenges is to write reusable, modularized code. jQuery Plugin is an approach to extending core jQuery API and creating reusable code. There a number of ways of creating a jQuery plugin. I want to discuss the easiest approach to developing a plugin in this post.

jQuery provides a property ‘fn’ in the core jQuery or $ class(!#$%). You can attach your own function to the “fn” property.

Let’s say you have a header with id as ‘info’ and you want to display the current date by writing
$(“#info”).date()
You can attach a date function in the core jQuery API like below:

$.fn.date = function(){
   $(this).text(new Date()+””);
} 
Pretty simple!!! Isn’t? Let’s try another one.

Say, you want to change the text color of an element by having your own function changeColor.

$.fn.changeColor = function(color){
   $(this).css(“color”,color);
} 
Huh!!!Even better.

Usually plugins are created in a JS file jquery-xxx.js. But to keep things simple, I have used the code inline. The complete code is given below.
<!DOCTYPE html>

<html>
<head>
<script src=”jquery-1.6.1.js”></script>
<script>
$.fn.changeColor = function(color){
$(this).css(“color”,color);
}
$.fn.date = function(){
$(this).text(new Date()+””);
}
$().ready(function(){
$(“#info”).date();
$(“#welcome”).changeColor(“red”);
});
</script>
</head>
<body>
<h2 id=”welcome”>jQuery Plugin</h2>
<h5 id=”info”></h5>
</body>
</html>


We will discuss few more points of plugin in the subsequent posts. Have fun!!!

Mixx Delicious Digg Facebook Twitter