Friday, March 23, 2012

Create GIF image from image sequences using Photoshop


This is my first blog on graphics designing. Although I am not a designer, I tried my hands on Photoshop to create gif image using image sequences. So my designers friends, please excuse me if I am wrong somewhere. Please note that I have used Adobe Photoshop CS4 to make gif image mentioned in the blog. First open a Adobe Photoshop CS 4.

After that Go to File-> Scripts -> Load Files into Stack.

It will open a window where you can browse images you want to add as a sequence. Select the images you want and click on ok.

After that photoshop will arrange all the images as a layer now open an animation window from Window -> Animations menu.

It will open animation window at bottom where all your images are available as a layer. Now click on layer and drag it to create a new frame as shown in image below.  Please see the yellow rectangle in below image.

This will create a new frame.  Now remove earlier layer from it. See the image below. Mark the red circle. Here there must be an icon looks like an eye. When you click it it will remove the layer.

This is how create frame for each layer one bye one you can set interval for each image using time selector in  each frame. See the image below. I marked it as a red circle.

Now got to File-> Save for Web and Devices.

This will open following window. Select GIF and and Save it with name.

That's it and you have your gif image ready. Hope this helps you. Do put your suggestions in comment. 

Saturday, March 17, 2012

Get device token for apple push notifications in sencha touch and phone gap


Recently I was working on Apple push notifications with sencha touch and phonegap project. Requirement was to get device token in JavaScript file so that it can be sent to server for getting push notifications. For that first thing we need to do is register device to get Push notifications.

Please make sure that you have real apple device like iPad, iPhone or iPod touch to test this. This will not work in Simulator.

To register device for push notifications add following in your AppDelegate.m file.  Find method

- (BOOL) application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions

Also add following line to define token variable.

@synthesize token;

and add following code at end of the method.

NSLog(@"Registering for push notifications...");    
    [[UIApplication sharedApplication] 
     (UIRemoteNotificationTypeAlert | 
      UIRemoteNotificationTypeBadge | 

This will register device for getting push notifications. Please make sure that you have added provisioning profile which configured with non wild card app id and app is configured to receive  push notifications in your development portal. Also you need valid developer certificate.

After that you need to add following methods at end of the file.

- (void)application:(UIApplication *)app didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { 

    self.token = [[[[deviceToken description]
                    stringByReplacingOccurrencesOfString: @"<" withString: @""]
                   stringByReplacingOccurrencesOfString: @">" withString: @""]
                  stringByReplacingOccurrencesOfString: @" " withString: @""];
    NSLog(@"My token is: %@", self.token);

- (void)application:(UIApplication *)app didFailToRegisterForRemoteNotificationsWithError:(NSError *)err { 
    NSString *str = [NSString stringWithFormat: @"Error: %@", err];

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {
    for (id key in userInfo) {
        NSLog(@"key: %@, value: %@", key, [userInfo objectForKey:key]);

This will get device token and store it to token. Now to send this token to JavaScript we will create a phonegap plugin. Please make sure that this code will work with Phonegap version 1.5.0. They named this version as Cardova.

First create folder inside plugins folder of your project folder and name it as PushToken and add two files to it PushToken.m and PushToken.h

Open PushToken.h file and add following code to it.

#import <Foundation/Foundation.h>
#import <Cordova/CDVPlugin.h>

@interface PushToken : CDVPlugin{
    NSString* callbackID;  

@property (nonatomic, copy) NSString* callbackID;

- (void) getToken:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;


Now open PushToken.m file and add following code to it.

#import "PushToken.h"
#import "AppDelegate.h"

@implementation PushToken

@synthesize callbackID;

-(void)getToken:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options  {
    self.callbackID = [arguments pop];
    NSString *token = ((AppDelegate *)[[UIApplication sharedApplication] delegate]).token;
    CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:[token stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];
    if(token.length != 0)
        [self writeJavascript: [pluginResult toSuccessCallbackString:self.callbackID]];
    }else {    
        [self writeJavascript: [pluginResult toErrorCallbackString:self.callbackID]];


Now we have to map this plugin. For that open Cordova.plist file and following key value pair to it.

PushToken : PushToken

After that open AppDelegate.h file and add following line to it.

@property (retain, nonatomic) NSString* token;

That's it of phonegap side now we have to create JavaScript file form where we will execute this plugin code. Create JavaScript file with name PushToken.js and add it to www folder. Add following code to it.

var PushToken = {
    getToken: function(types, success, fail) {
        return Cordova.exec(success, fail, "PushToken", "getToken", types);

Add link of this JavaScript file to your index.html page after phonegap JavaScript file. To get device token wherever you want use following code.

                     ["getToken"] ,           
                     function(token) {
                              global.token = token; 
                     function(error) {
                              console.log("Error : \r\n"+error);      

That's it and you have your device token.

Wednesday, March 7, 2012

Whitelist rejection error in Xcode for Sencha touch 2 and Phonegap


If you have developed iPhone application using sencha touch 2 and phonegap and if your application is using Ajax request or JsonP request you might have above error. That's not the issue of cross domain because when you convert your sencha touch application to native app using phonegap, it loads index.html and other js files in browsers using file uris. Something like below

So there is no issue of cross domain. But still if you get above error. That's because of  iPhone security restriction. You must add your domain to whitelist. For that open the file phonegap.plist and you should see following.

See the external host. Here you have to add your domain something like below

Make sure that you don't add http or other protocols. Just a domain name and it should work.

Thursday, March 1, 2012

Sencha touch 2 : Dynamically set title of Navigation bar


If you are using Sencha touch 2 beta 3, you might have encounter this issue. If you have a view that you pushing in navigation view you can set title there. This title will be used as a title of navigation bar when this view is activated.  See the following code.

config: {
        autoDestroy: false,
        title: 'Bill'

What if you have requirement of setting this dynamically. For example you have a list from which you selected a category.

-Category 1
-Category 2
-Category 3

Based on selected record you will load sub category in next view and you want to display Category 1 as a title in next screen. To load next view you will create it first and push it.

if (!this.menuSubCategory) {
                this. menuSubCategory = Ext.create('Application.view.SubCategory');
this.getMain().push(this. menuSubCategory);

Here you can set title if you want when you are first creating item. After that you can set it as you already have view. Either you can destroy view every time and create new one else you apply following trick.

This is how next view is loaded. Now if you have set title in config of above view. It will be applied by default. So to dynamically set it you need to do some tweak. First you need to override a base function. See the following code.

Ext.override(Ext.navigation.Bar, {
    getNavigationBarProxyProperties: function () {
        return {
            title: {
                left: this.proxy.titleComponent.renderElement.getLeft()
            backButton: {
                left: this.proxy.backButton.renderElement.getLeft(),
                width: this.proxy.backButton.renderElement.getWidth()

Create an overrides file and add it after sencha touch js file. This is necessary else title width will be less compared to title

Now add the following code after you pushed your view to navigation view.


That's it and you have dynamic title in navigation view. Please note this trick you need to apply if you are using Sencha touch 2 beta 3 version.