My first Android application on Play store, The Address.

theAddress
This is exciting to get my first Google Play store application. Previously I worked on some Android applications, but nothing was up there in the Play Store. For me its really a different experience pushing it to the Play store. Unlike pushing to Apple App store, the Play Store push feels like no brainer.
Now, talking about the application, its a personal note taking application for an absolute necessary address. This application does not require internet connection at all. Its a pure standalone application on its own. Its private to the user.
Open up the application, fill out the form to add an address and save it. Thats all it does. Once you come back to get the address, it shows upfront the saved address. Incase you are done with the currently stored address, update the form with a new address and save it. It does not store history of your previous addresses.
Now the implementation is done with Cordova (phonegap) 2.7 , jQuery 2.0 , jQuery Mobile 1.3 , lawnchair and GASP JS(GreenSock Animation Platform for Javascript). Its completely opensource and the code can be found at Github.

Looking forward to listen from you all.

Fork me on GitHub

Cordova(Phonegap), jQueryMobile and making a popup

This may seem obvious to make a pop-up with jQuerymobile with its popup API, but its a little more than just calling the api.
The problem is closing the popup. When working in a single page application in jQuerymobile and phonegap, the closing of the popup will take you to different jQueryMobile pages depending upon your setup.
The solution is to make the popup ready to be open just at the current page and while closing it should not make the application go to different pages. The trick is to while initialising the popup widget, initialise it with "{history: false}", and thats all.
Here is a popup created with jQueryMobile API.

 
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="true" class="ui-corner-all">
	<div data-role="header" data-theme="a" class="ui-corner-top">
		<h1>My PopUp</h1>
	</div>
	<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
		<h3 class="ui-title" id="myTitle">Title</h3>
		<input type="hidden" name="alertIdHidden" id="id_alert_hidden" value="" placeholder="alert id"  />
		<input type="text" name="idFName" id="id_FName" value="" placeholder="First Name" />
		<input type="text" name="idLName" id="id_LName" value="" placeholder="Last Name" />
		<a href="#" data-role="button" data-inline="true" data-theme="c" id="id_save">Save</a>
		<a href="#" data-role="button" data-inline="true" data-theme="b" id="id_cancel">Cancel</a>
	</div>
</div>
 

Here is the javascript code to initialise the widget and open it.

 
//making a popup which will not take you back to the previous page.
$('#popupDialog').popup({history: false});//awesomeness
$('#popupDialog').popup('open');
 

Happy coding :)

First book review : Aptana Studio Beginner’s guide

This came to me as a surprise that I have been asked to review a book and write something about it. I started of with excitement as to finish the book as soon as possible and write something about it. So here it goes.
The book : Aptana Studio Beginner's Guide
A nice book, as it states from its title. Which is unlikely, is its not only for "beginners only". This is all you need to get started with Aptana studio but in general Eclipse IDE of any kind.
Aptana Studio itself provides a very solid IDE which is both free and opensource. I love this IDE as I do HTML and JS projects with this IDE. The most appealing thing about this IDE is its cross-platform, so one IDE, one experience everywhere. I must say its a must have for anyone who is serious about Javascript development in general.
Now to get the most out of this nice IDE, this companion book is a must have I would say to get you started and to know what can you do with the IDE.
This book starts with very basic things as to menus and workspace and then move on to deeper topics as to configure it to suite your working style. After working with this IDE for such a long time, I found this book reveals a lot more which came as surprise to me. Things like saving your own customised look and preferences, making shortcuts, the command-line interface inside the IDE and lot more are covered in detail, from a beginner's perspective.

All in all a nice book to have if you want to get used to Aptana IDE in particular or Eclipse IDE in general.

Thanks a lot to Kenny Dias from Packt Publishing, who gave me this opportunity to review this book.

Settings Check for Apple Push Notification

While developing an iOS application with Push Notification, there might be a time, one comes across the following error message.

- no valid 'aps-environment' entitlement string found for application

Well, that means the APN (Apple Push Notification) server is denying to register your application. This situation arises when the signing certificate for the application differs from the one you generated for Push Notification.

The fix is to select the proper certificate in the settings for the project.
codeSigningCert

Happy coding.

Cordova (Phonegap) , alert message.

This might seem, very easy task. But then while making a customisable alert message, one need to think as to how to do it. While working on Cordova(phonegap), one can easily assume and which is true is the javascript alert script.

alert("Hello!");

The javascript alert will work. Then we do not have a customisation option except for the message. The solution Cordova provides is a function with the name as alert. The syntax is as below.

 
navigator.notification.alert(message, alertCallback, [title], [buttonName]);
 

In the very basic form, where one need to have a specific title, message and button name, the code I use is

 
navigator.notification.alert("My message", undefined,"My Alert", "ok");
 

Thats the simplest kind and if one need more generic, wrap the whole thing inside one of your own custom function as example below.

function showAlertWithTitle(title,message){
	navigator.notification.alert(message, undefined,title, "ok");
}

Hope coding.

iOS notifications from developer’s view

Notifications in iOS devices such as iPhone and iPad are a way to tell the user about some important thing has happened. From a users perspective it is just a message reminding thing.
For a developer, one must note the difference between the type of notifications. Well, to be at its simplest form, there re two kinds of notifications. One is local notification and one is push notification (think this as server is telling the iOS device to show the notification).
Well, why should I bother about these two as a developer ?! That might be the question if you are doing the notification programming in iOS for the first time. The answer is, iOS gives very certain instructions as to what and how to do the notification implementation.
Here is the official link to the Apple documentation.

There are only three types of UX for either of the notification (local or push). They are
1. Displaying an alert message
2. Badge the application icon
3. Play a sound

The settings to control these notification types are located in the global settings menu of iOS. Remember it, the settings of all the applications, which use notifications are at one place in all iOS devices and that is the "settings" menu.
Well, another subtle but important option is "notification center". Its the place, where all the notifications from all the applications reside. The settings, whether to keep the "notification" in "notification center" or not is also inside the global "settings" menu. Being a developer, the good thing about Apple and for that matter the iOS is, one does not code for adding settings item for notifications. It is done automatically for you by the OS (Operating System). All this magic happens, when you as a developer, makes a "certificate" for the application in Apple developer's portal for the application saying "this application used notification". Simple and elegant.

The major difference from developer's point, between local notification and push notification is local notification is scheduled. That means, we can not show a notification if certain things happen in the application. Once application goes to background, we lost power as a developer to do anything at all with that application. So local notifications can only be scheduled for a normal application (for music streaming applications we do get a little more control). If at all we have to notify the user on certain data change, we have to fall back to push notifications. This one is pushed by Apple Push Notification server. Though, there are third party services which can push data, but all of the data push to an users device route through Apple Push Notification server.
The last thing to note is Push notifications are created on the server and pushed to the device, at max, upon tapping the notification, the underlying application can be brought to foreground and thats all one can do as a developer.

Tips for phonegap developers :
1. There are two different official plugins (one for local and one push notification), but then these plugins are not always up to date or might not support your version of the phonegap(cordova), do some reading before you settle down with the plugins.
2. The third party service providers (for push notification) might have their own plugins (a lot of do have), its better to use their plugins if you are developing upon their infrastructure.

Tip for push notification :
Make sure you are creating proper certificate with "push notification service" enabled at "Apple developer portal" and then using a profile on XCode which uses that certificate.

Some push notification servers are
1. http://www.pushwoosh.com
2. http://www.xtify.com
3. https://pushwizard.com

Would like to know if anything I am missing here, I am putting things here as I am doing hands-on with this iOS "notifications" for the first time.

Things to consider for Cordova (phonegap) development

This came to me as a learning from my first Cordova(phonegap) application development.
The first thing one comes across while developing in Phonegap is "the need for a GUI lib" and the first thing to get in a search result is jQuery, its mobile version and the UI lib. There are many other good libs out there, but this one seems quite ok. While one may choose to use a UI lib or build own lib its up to the developer. In my experience its easy to get started with jQueryMobile and its UI, which uses "Theme roller" to theme the UI.
If one is using jQueryMobile then the trick is to try and solve all the UI problems with this lib itself (not hacking the CSS and JS all over the place in the project). That way the performance will be more and pain to solve all the UI problems is less.

One can just start to make one Cordova application without any libraries, but to be productive soon, the minimum required libraries are
1. jQuery
2. jQueryMobile
3. cordova

Now the most important library which might not be required for the project as a project dependency but is a real time saver is
1. UnderscoreJS
After some playing around with the library and from the suggestion from the community I found Lo-Dash library, which is a drop-in replacement for UnderscoreJS with performance enhancements. So I would recommend using
1. Lo-Dash

Now to coding tips, if one knows the "scope" and "this" in javascript, then writing javascript applications are just fun. So prepare yourself with javascript and how it works, so as to make your life easier developing the application.

Target platform and the library support :
The current Cordova lib might not support your required target platform !! Yeah, that is another thing which might take up sometime to know in the beginning. With each release these libraries kind of deprecate support for old platforms, so check that out in the beginning itself.
The same goes for jQuery and jQueryMbile. Check out whether the latest version of the library supports your target platform.

Native Notifications in Cordova is not supported :
Cordova (phonegap) does not support native notifications. It only supports "alerts","confirm" (kind of alert only),"beep"(sound) and "vibrate" (device vibration). But then if you expect to do "alert" notification as iOS and Android devices do (like showing the alerts to user when the application is running in background), then Cordova (phonegap) does not help. One has to write native libraries in native languages and call them from javascript through Cordova.

jQuery tips :
Adding an element to a page and displaying it :
jQuery "append()" and "prepend()" does not update the UI (or DOM), so the added elements are not visible by default. we can hack it by dispatching a jQuery event called "create", the code will look as below

$("#p_4_content").prepend("hello World").trigger( "create" );

That will tell jQuery to render the UI again, resulting in displaying the added item.

Defining EventHandler Scope :
Another nice thing is calling the event handler in required "scope". The jQuery library provides a handy method for adding event event handlers as

$('#id_btn').on( 'tap', onBtnTapped );

But then it will be scoped to the same scope as where its being written. If you are writing things in an Object, you might want to get the "scope" in the handler(which is "this"), in order to do that, jQuery provides a "third" parameter option, and one can pass the scope in there. The optional parameter is at the middle instead of at the end (as comparing to other object oriented programming convention)!! But then its the way to go. So the modified code will look as below

$('#id_btn').on( 'tap', this, onBtnTapped ); //Look at the middle parameter
//and the handler code looks as below
onBtnTapped :function(event){
    	//just saving the scope, may be we need it in future here
    	var that = event.data; //here event.data=this (which we passed as second param)
    }

That way inside the handler we can get the "scope" as below

var that = event.data;

The second parameter sent while binding the handler to the event, can be got inside the event handler as "event.data". Since we are just passing "this", we can get that in the handler as the example shown above.

Writing the EventHandler :
Well, now the trick writing an eventhandler without making the application behave unreasonably is a challenge. It might sound silly but it is not. If you write an event handler as

onBtnTapped: function(event){
    	//Do something
    }

Then its bound to get in your way of the behavior of your application. The jQuery fix is to do a "return false" in all the handlers. But then that might not be the case of your handler as that might return in between the code itself. So the fix is make a call to "preventDefault" as soon as you are inside the handler method. the modified code will look as below

onBtnTapped: function(event){
        event.preventDefault();
    	//Do something
    }

That is the start, I will post more tips as I fight through the scenarios.

BackboneJS : the basics

This is my first javascript framework for application development and this post is supposed to be for anyone who is just beginning with this framework. While I am still learning this framework, the points here should make one comfortable at least to get started in learning the framework itself.
First things first, here is a slide show of a talk I had given to a group regarding BackboneJS. The source code for the same slideshow (which is made with backboneJS itself) is available here.
Well, to start with BackboneJS in itself provides a structure to the web application development. It is heavily dependent on UnderscoreJS and RequireJS. RequireJS allows us to use javascript modules and load script files at one point in a .js file rather than the script tags in an html document. UnderscoreJS provides very nifty utility to ease our javascript development.
BackboneJS is supposed to be a model-view-controller framework and while we can call it like that but the real "C" here stands for "Collection".
The view class here in BackboneJS is kind of controller. Once got the data, it can make other views or can decide which view to render at what position on the html page. There is a concept called "template" and Underscore gives that facility to us as we are developing in BackboneJS. These templates are kind of placeholders for content and once we got data, we can render html with the help of these templates.
Collection class actually is a glue between frontend and backend as its responsible to get data from server and set data in server.
I would say it a quite straight forward framework, though it takes some time to get used to the behavior of the framework. Who come to javascript frameworks for the first time will take sometime to get used to it. Though the documentation is quite good in the official website, there are things which are not documented, so it will take some time to search and undertand the concept. Overall I would say an elegant framework.
Happy coding