iOS Muncher

Implementing StoryBoard in iOS- part II

2012-12-26T00:26:00.001+05:30

In this part we will continue to build our Todo Application using storyboard.
In our previous part we created a simple Tab Bar based application with two tabs, each having a tableView in it to hold our task list and our done task.

Introduction to Segues

Segue defines navigation in your Storyboard. It indicates how to get from one point to another. You usually create a segue by picking an event source(can be a button or a tableView cell) and choosing a scene to transition to.

We can also choose the type of animation we want to use. All apple built-in animations are available for us to use by making some simple clicks. Additionally we can even create our own custom animations for custom segues.

Lets quickly use segues in out simple Todo application.

Select the root folder in the project explorer, right click and select New file.

Select Objective-C class file and name it as AddTaskViewController.

Now go to your storyboard and drag a new View Controller to it.

Add a textField to it.

Now lets link this View Controller to our AddTaskViewController class file, go to the identity inspector and in the class choose AddTaskViewController.

(If you feel any problem here, refer part-I of this tutorial)

We want our Add task screen to be opened when I I click on the add button on My Task screen. Here we will create a segue which will make this job super simple.

On your My Task screen, select the add button and Ctrl+click and drag it to the Add Task screen, select push from the black modal window.

Select the segue and in the attribute inspector give this segue an Identifier, it will distinguish one segue form another.

We name our segue Identifier as AddTask.

So to open a screen with segue is just simple as that.

now we have added our Add task also which was the last screen for our Application.

Now to show another screen with segue Storyboarding comes with an API. A method called prepareForSegue:sender: on every UIViewController, and it is intended to be overridden. We can write our own code here that will take effect whenever each segue fires.

So in your MyTaskViewController.m we will add this method

- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

{

    if ([[segue identifier] isEqualToString:@"AddTask"]) {

        [[segue destinationViewController] setDelegate:self];

}

}

Your AddTaskViewController.h should look like this, add necessary codes.

#import <UIKit/UIKit.h>

@protocol AddTaskViewControllerDelegate;

@interface AddTaskViewController : UIViewController<UITextFieldDelegate>

@property(weak,nonatomic)id<AddTaskViewControllerDelegate >delegate;

@property (strong, nonatomic) IBOutlet UITextField *AddTaskTextField;

@property(nonatomic,strong)NSString *taskAdded;

@property (weak, nonatomic) IBOutlet UIView *addView;

- (IBAction)closeModal:(id)sender;

@end

@protocol AddTaskViewControllerDelegate <NSObject>;

-(void)AddTaskViewControllerDidDone: (AddTaskViewController *) controller taskAdded:(NSString *)task;

@end

Here we have created a protocol AddTaskViewControllerDelegate and this protocol implements a function AddTaskViewControllerDidDone.

In your AddTaskViewController.m Add these two functions

- (IBAction)closeModal:(id)sender

{

    [self dismissViewControllerAnimated:YES completion:nil];

}

#pragma mark ---- <UITextFieldDelegate> Methods

- (BOOL)textFieldShouldReturn:(UITextField *)textField

{

 // the user pressed the return, so dismiss the keyboard

    self.taskAdded = textField.text;

    [self.delegate AddTaskViewControllerDidDone:self taskAdded:taskAdded];

 [textField resignFirstResponder];

 return YES;

}

In our MyTaskViewController class we will use this protocol.

Now your MyTaskViewController.h should look like this-

#import <UIKit/UIKit.h>

#import "AddTaskViewController.h"

@interface MyTaskViewController : UIViewController<UITableViewDelegate,UITableViewDataSource,AddTaskViewControllerDelegate>

@property (weak, nonatomic) IBOutlet UIBarButtonItem *AddTask;

@property (strong, nonatomic) IBOutlet UITableView *TaskListTable;

@property (nonatomic, strong) NSMutableArray *MyTaskList;

@end

We have added a NSMutableArray *MyTaskList to hold my task.

In your MyTaskViewController.m we will implement the protocol function, our table view delegate functions.

#pragma mark ------------- <UITableViewDelegate> Methods------------------

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

    return 1;

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

    return [self.MyTaskList count];

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil) {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

}

    NSString *task = [self.MyTaskList objectAtIndex:indexPath.row];

 cell.textLabel.text = [NSString stringWithFormat:@"%@",task];

    return cell;

}

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath

{

 if (editingStyle == UITableViewCellEditingStyleDelete)

{

  [self.MyTaskList removeObjectAtIndex:indexPath.row];

  [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];

}

}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

    UIAlertView *confirmTaskDone = [[UIAlertView alloc]initWithTitle:[self.MyTaskList objectAtIndex:indexPath.row] message:@"Choose Action" delegate:self cancelButtonTitle:@"Cancel" otherButtonTitles:@"Done", nil];

    currentRow = indexPath.row;

    [confirmTaskDone show];

}

AddTaskViewControllerDelegate Method 

#pragma mark ---------------- <AddTaskViewControllerDelegate> Methods

- (void)AddTaskViewControllerDidDone:(AddTaskViewController *)controller taskAdded:(NSString *)task
{
[self.MyTaskList addObject:task];

[self resignFirstResponder];

[self dismissViewControllerAnimated:YES completion:nil];

[self.TaskListTable reloadData];

}

And we are done.

The complete code for our Todo Application, where you can see your done task too in the second tab is here on Github

Thanks, happy Storyboarding.. :)

Implementing StoryBoard in iOS- part I

2012-12-26T00:23:00.000+05:30

With the release of iOS 5, Apple updated the iOS SDK with more than 1500 APIs, and Storyboard is one of the most fascinating.

Introduction

Storyboarding allows one to lay out the workflow of your app using the new Storyboards feature built into the design tools of Xcode.

Apps that use Navigation and tab Bars to transition between Views, Storyboard ease the development by managing the View Controllers for you.

You can specify the transitions and segues that are used when switching between the Views without having to code them by hand.

Storyboard enables you to interact with all the screens in your application without the cumbersome code you have to write for the transitions between the screens and the control used to trigger the transitions.

Storyboards have a number of advantages over regular nibs:

With a storyboard you have a better conceptual overview of all the screens in your app and the connections between them. It’s easier to keep track of everything because the entire design is in a single file, rather than spread out over many separate nibs.
The storyboard describes the transitions between the various screens. These transitions are called “segues” and you create them by simply ctrl-dragging from one view controller to the next. With the help of segues you have to less take care of UI development.
Storyboards make working with table views a lot easier with the new prototype cells and static cells features. You can design your table views almost completely in the storyboard editor, something else that cuts down on the amount of code you have to write.

With many advantages storyboards do some limitations. The Storyboard Editor isn’t as powerful as Interface Builder yet, there are a few things IB can do that the Storyboard Editor unfortunately can’t. You also need a big monitor, especially when you write iPad apps.

If you are a person who loves to create entire UI programmatically, then storyboards are probably not for you.

Below Image shows storyboard in action.

We will be creating a simple Todo application with storyboard.

Get Started

Fire up your Xcode, Create a new single View Application, name it as myTodo and don't forget to select use storyboard and use Automatic Reference Counting options.

The .storyboard file in your project explorer is your storyboard file and it looks very similar to the old .xib file.

There are two main concepts in Storyboarding:scene and segue.

Scene is a View Controller that just represents a screen in an app.

and Segue defines navigation in your storyboard. It indicates how to get from point A to B.(we will be covering segues in part II)

The difference you will see is the arrow pointing to a view and a black container below the main view that says "View Controller".

As the storyboard can have many view controllers so there must be a view controller which shows first when the application gets started, hence the arrow points to the view controller which shows first when the application starts.

You can play a little bit with the storyboard by dragging and dropping the different controls on the view. Its same as your old .xib.

Let's start our ToDo application. Our App will be a Tab bar based Application, in one tab we can see the list of our task. We can add a new task, delete a task and mark our task as done.

In our second Tab we can see the list of our task which we have marked as done.

Here is how our app will look at the end.

As this is a Tab Bar application so lets add the tab Bar.

Go to Editor -> Embed ->Tab Bar controller.

This will add the Tab Bar to the storyboard. You can see the arrow is now pointing towards the tab bar and your tab bar is linked to the View Controller.

We need one more Tab for our tab bar, so drag a View Controller on the canvas.

Now from the Tab Bar Ctrl+drag to the newly added View controller, a black popup will appear, choose view controllers.

After selecting view controller your application will be linked with your Tab bar.

Now rearrange your View Controllers as you like.

Drag Navigation Bar control on both your View Controllers. Double click at the center of navigation bar to add a title. Add title as My Task on the first View Controller and task Done on the second View Controller.

Add a BarButtonItem to My Tasks screen and add a TableView to both the views, make sure your screen looks like this.

Select your root folder in the project explorer on the left side, delete the existing ViewController class file from it. Right click it and select add file.
Select Objective-C class file and name it as FinishTaskViewController.
Repeat the same step to add another file named MyTaskViewController.

Now select your Task Done Controller and in the identity inspector assign FinishTaskViewController class to it.

Do the same for the My Task Controller, assign MyTaskViewController to it.

So Till now we have created a Tab Bar with two tabs in it, added a table View in both the tab to show our data.

"Till now we have not wrote a single line of code."
Lets make sure our both classes i.e. MyTaskViewController and FinishTaskViewController looks like this.

MyTaskViewController.h

#import <UIKit/UIKit.h>

@interface UIViewController<UITableViewDelegate,UITableViewDataSource>

@property (weak, nonatomic) IBOutlet UIBarButtonItem *AddTask;

@property (strong, nonatomic) IBOutlet UITableView *TaskListTable;

@end

As we have added the tableView in it so we will add tableView delegates(UITableViewDelegate,UITableViewDataSource ) to our View Controller.

MyTaskViewController.m

Leave this file as it is.

FinishTaskViewController.h

#import <UIKit/UIKit.h>

@interface FinishTaskViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>

@property (strong, nonatomic) IBOutlet UITableView *FinishTaskTable;

@end

TableView delegates will be added here too.

FinishTaskViewController.m

Leave this file as it is.

As for now we are good to go to run our application.

We will see a simple Tab Bar based application with table View in it.

This is how it will look,

What next?

Here we have created our application using storyboard, we will be adding, deleting task in the next part- Implementing StoryBoard in iOS- part II

Now a Titanium Certified Application Developer.

2012-07-19T00:17:00.001+05:30

I am happy to announce that I have qualified the TCAD(Titanium Certified Application Developer) certification.
I want to thank wiki.appcelerator for making me understand the Titanium concepts.

Implementing APNS in Titanium-Start to End Tutorial

2012-06-20T12:38:00.000+05:30

Hi,
Today we will be implementing the APNS(Apple Push Notification Service) using Titanium.
I will guide you from your client code to the server side implementation.

Get Started

Client Implementation

Create a Titanium Mobile Project.
Once it is done, open your app.js and paste this code

Titanium.Network.registerForPushNotifications({  
   types: [  
     Titanium.Network.NOTIFICATION_TYPE_BADGE,  
     Titanium.Network.NOTIFICATION_TYPE_ALERT  
   ],  
   success:function(e)  
   {  
     var deviceToken = e.deviceToken;  
     Ti.API.info("Push notification device token is: "+deviceToken);  
     alert('device token is' +e.deviceToken);  
     Ti.API.info("Push notification types: "+Titanium.Network.remoteNotificationTypes);  
     Ti.API.info("Push notification enabled: "+Titanium.Network.remoteNotificationsEnabled);  
   },  
   error:function(e)  
   {  
     Ti.API.info("Error during registration: "+e.error);  
   },  
   callback:function(e)  
   {  
     // called when a push notification is received.  
    //Titanium.Media.vibrate();  
    var data = JSON.parse(e.data);  
    var badge = data.badge;  
    if(badge > 0){  
     Titanium.UI.iPhone.appBadge = badge;  
    }  
    var message = data.message;  
    if(message != ''){  
     var my_alert = Ti.UI.createAlertDialog({title:'', message:message});  
     my_alert.show();  
    }  
   }  
  });   
 }

In the success function you can write your own code or call a webService where you will be sending your device token to the server.

So this was the easy part. Once this is done, we need to generate push certificate.

Generating Certificates

The first thing you need is your Push certificates. These identify you when communicating with APNS over SSL.

Generating the Apple Push Notification SSL certificate on Mac:

Log in to the iPhone Developer Connection Portal and click App IDs
Ensure you have created an App ID without a wildcard. Wildcard IDs cannot use the push notification service. For example, our iPhone application ID looks something like AB123346CD.com.serverdensity.iphone
Click Configure next to your App ID and then click the button to generate a Push Notification certificate. A wizard will appear guiding you through the steps to generate a signing authority and then upload it to the portal, then download the newly generated certificate. This step is also covered in the Apple documentation.
Import your aps_developer_identity.cer into your Keychain by double clicking the.cer file.
Launch Keychain Assistant from your local Mac and from the login keychain, filter by the Certificates category. You will see an expandable option called “Apple Development Push Services”
Expand this option then right click on “Apple Development Push Services” > Export “Apple Development Push Services ID123″. Save this as apns-dev-cert.p12 file somewhere you can access it.
Do the same again for the “Private Key” that was revealed when you expanded “Apple Development Push Services” ensuring you save it as apns-dev-key.p12 file.
These files now need to be converted to the PEM format by executing this command from the terminal:

openssl pkcs12 -clcerts -nokeys -out apns-dev-cert.pem -in apns-dev-cert.p12  
 openssl pkcs12 -nocerts -out apns-dev-key.pem -in apns-dev-key.p12

9. If you wish to remove the passphrase, either do not set one when exporting/converting or execute:

openssl rsa -in apns-dev-key.pem -out apns-dev-key-noenc.pem

10. Finally, you need to combine the key and cert files into a apns-dev.pem file we will use when connecting to APNS:

cat apns-dev-cert.pem apns-dev-key-noenc.pem > apns-dev.pem

It is a good idea to keep the files and give them descriptive names should you need to use them at a later date. The same process above applies when generating the production certificate.

At this step we are done with our certificate generation. if you are interested in detail info, then I recommend this Link

Server Implementation

This is the .php script that you have to run in order to see push on your device.

<?php  
     $serverId = "0b9214ea";  
     $name = "APNS";  
     $apnsPort = 5223;  
     $passPhrase = "alpha";  
     $fwrite = "";  
     $sslUrl = "ssl://gateway.sandbox.push.apple.com:" . $apnsPort;  
     $apnsCert = "";//give the apns.pem file path on your server  
     $badge = 1;  
     $message = 'My first Push notification';  
     $apnspayload['aps'] = array ('alert' => $message,'badge' => $badge,'sound' => 'default');  
     $payload = json_encode($apnspayload);  
      $tokenId = 'c6xxxxxx b1xxxxbf 1bxxxxxa bxxxxx41 cxxxxxc9 04xxxxxd xxxxxbd0 0xxxxxxx'; //masked due to security reason, you should add your device token ID here  
     $apnsMessage = chr(1) . pack('N', time()) . pack('N', time() + 86400) . chr(0) . chr(32) . pack('H*', str_replace(' ', '', $tokenId)) . chr(0) . chr(strlen($payload)) . $payload;  
   $streamContext = stream_context_create();  
   stream_context_set_option($streamContext, 'ssl', 'local_cert', $apnsCert);  
   stream_context_set_option($streamContext, 'ssl', 'passphrase', $passPhrase);  
   $apns = stream_socket_client($sslUrl, $error, $errorString, 6, STREAM_CLIENT_CONNECT, $streamContext);  
     if($apns){  
   $fwrite = fwrite($apns, $apnsMessage);  
     fclose($apns);  
   @socket_close($apns);  
     }else{  
     echo 'request failed';  
     }  
 ?>

Couple of things I want to make it clear in the above .php code is

You might have to change the apns port, but in most cases this will work.
Make sure you give the correct path for your apns.pem file that you created in the above Generate certificate section
You Should put your device token ID, so make sure you have your device token ID.

Final Touch

After following the above steps, go to your Apple account and create a new provisioning profile, with the App ID you created, add your device to that provisioning profile.

All the steps to create a provisioning profile are here Create Provision Profile.
After creating the Provisioning profile download that profile and install it by double clicking it.
Open up your Xcode organizer and drag and drop the provision profile you downloaded to the device in which you want to test the APNS, for that your device should be connected to your machine and your device should allow development.

Open up your Titanium studio and run the Application on the device, It will ask you for a valid provisioning profile, just locate it to the path where you downloaded the profile from you apple account.
And you are done.

If you have any issues with the implementation, then happy to comment.

Happy Push Notification.

Learning commonJS: Building a custom TableView using commonJS approach

2012-04-05T19:52:00.000+05:30

The new player in the Titanium world is our commonJS module development.
As most of the Titanium developer will be aware of what commonJS module or commonJS approach for building a titanium application is.

For the who dont know exactly what commonJS is, I must recommend to go through the appcelerator wiki website. here is the link for that commonJS

In this tutorial I will be showing you that how to build a custom tableView with commonJS approach.

Here is the snapshot of our custom tableView..

So I will quickly brief you regarding what I am doing..

=> I have created a commonJS module that exports a function which creates this tableView.

=> Now that function takes an argument that has your list of images and the custom text that you want to add the tableView row.

=> The text in the bold is the name of the image. In the module I am fetching the image name from the url of that image.

=> And in the end I am also adding a button in it.

Here is the code snippet of my customTableView.js which is a commonJS module.

exports.customTableView = function(param)  
 {  
   var win = Ti.UI.createWindow();  
   var mydata = [];  
   var imageUrl= [];  
   var rowText = [];  
   imageUrl=param.imageUrl;  
   //Fetching the image name from the imageUrl  
   for(i=0; i< imageUrl.length;i++)  
   {  
     var nameInput = imageUrl[i].replace(/^.*[\\\/]/, ''); // This gives the image name with its extension,  
     // here we are removing the extension and just fetching the name  
     var name = nameInput.substr(0, nameInput.lastIndexOf('.')) || nameInput;  
     rowText[i]= name;  
   }  
   // var customText = [];  
   // customText = param.customText;  
   //Building the custom row  
   for(i=0;i< imageUrl.length; i++)  
   {  
     var cancelBtn;  
     var row;  
     if(Ti.Platform.osname !='android')  
     {  
       cancelBtn = Ti.UI.createButton({  
       image:'images/delete.png',  
       width:'32dp',  
       height:'32dp',  
       style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN,  
       left : '250dp'  
       });  
       row = Ti.UI.createTableViewRow({height:'70dp', backgroundImage:'images/brown.png', backgroundRepeat:'true'});  
     }  
     else  
     {  
       cancelBtn = Ti.UI.createButton({  
       image:'images/delete.png',  
       width:'32dp',  
       height:'32dp',  
       left : '250dp'  
       });  
       row = Ti.UI.createTableViewRow({backgroundImage:'images/brown.png'});  
     }  
     var myimage = Ti.UI.createImageView({  
       backgroundImage:imageUrl[i],  
       top:'5dp',  
       width:'64dp',  
       left: '4dp',  
       height:'64dp',  
       borderColor: '#fff',  
       borderWidth:'2dp',  
       borderRadius:'7dp'  
     });  
     var rowName = Ti.UI.createLabel({  
       text: rowText[i],  
       top:'2dp',  
       color:'#fff',  
       //width:'auto',  
       font:{fontSize:16,fontWeight:'bold'},  
       left:'80dp'  
     });  
     var rowCustomText = Ti.UI.createLabel({  
       text:param.customText[i],  
       top:'30dp',  
       color:'#fff',  
       font:{fontSize:12},  
       left:'80dp'  
     });  
     row.add(myimage);  
     row.add(rowName);  
     row.add(rowCustomText);  
     row.add(cancelBtn);  
     row.className = 'myData';  
     mydata[i]=row;  
   }  
   var myTableView = Ti.UI.createTableView({  
     data:mydata,  
     allowsSelection:'true'  
   });  
   win.add(myTableView);  
   return win;  
 }

you can download the complete working project from my github.

here is the link... commonJStableView

Feel free to edit it and update it..

Hacking Titanium SDK - Modifying Create project Wizard

2012-03-20T11:26:00.000+05:30

I was working on a project in Titanium this weekend, and I crossed the limit of my laziness.
I had certain files(JS) which I almost need in all my project, so every time I create a project I had to include them or add them to my project.

I thought why don't this process be automated, means whenever I create any project "My files" should automatically get added to my project.

So in this tutorial I will tell you "How to hack the Titanium SDK" to achieve the same
Caution: Modifying the SDK files in not a good option unless you are sure what you are doing"

So open up your Titanium SDK directory.
In my MAC it is
Root Directory --> Library --> Application Support -->Titanium --> mobilesdk -->osx

And there you find all your Titanium SDK files.

I choose SDK 1.7.5, so back up your SDK so that in case anything goes wrong.

Open up SDK 1.7.5, you will see below files and folders

From these bunch of files we are interested in folder named "all" and file named "project.py".
project.py is a python based file.

Now create a folder in "all" folder say "MyFiles" and paste all your necessary JS files or images, anything in it.

Lets do the Hack

Open up the project.py file.
Make sure you have a python editor, as python is totally based on indentation, so while changing the python file you might get "indentation error", so dont be panic-"I was for first time".

I edited the project.py file in my Titanium studio. But you can easily see the code in your Xcode also
Now you have file opened-

browse through the code...

The highlighted code is adding "Resource" directory to the project.

So below that highlighted code we will add our code.

Here what your project.py will look after adding the code

Here we are just getting the folder "MyFiles" that we created in "all" folder and copying it to the "Resource" folder of our project.

Now save your project.py file and lets create a new Titanium project using our edited SDK i.e 1.7.5

Here I have created a project named "SDKhack" choosing the Titanium 1.7.5 SDK, which we edited.

And now after creating the project I have my "MyFiles" folder with all the files automatically added to my Project.

Thats All for Now, Thank you..

Calling Drupal WebService through Titanium using Json

2012-02-13T15:56:00.000+05:30

In this tutorial I will tell you how to call a drupal webService using Json with and without any parameter.

So lets start with Calling a webService without any parameter.

If you are not aware then let me tell you that for calling a drupal webService, w have an endpoint or we can say it as a url to which you will point and call a specific method (which will be your webService name).

The most common webService that is called in drupal is system.connect, lets call that.

To call any webService we neet to create an httpClient.

var xhr = Titanium.Network.createHTTPClient({
    
    onload : function(e) {         //1


       Titanium.API.info(this.responseText);
         },
     
     onerror : function(e) {         //2
         Ti.API.debug(e.error);
         alert('error');
     },
     timeout : 5000
});
xhr.open("POST","http://myTestUrl.net/services/json"); //3
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); //3
xhr.send("method=system.connect"); //4
}

Lets understand the commented lines:
1. onload : This Function to be called upon a successful response.
In that function this.responseText will Log your response that you got from the server.
2. onerror : This Function to be called upon a error response.
3. xhr.open() : This Opens the request and readies the connection. here I am sending a POST request and my endpoint is http://myTestUrl.net/services/json
4. xhr.setRequestHeader() : Sets the value for the specified request header. This function must be called after open but before send.
5. xhr.send () : This method sends the request, as you can see the method name which is system.connect which I am passing.
So the above code will call the webService name "system.connect" and this webService does not accepts any parameter.
You can get your server response in onload() function. You can parse the response using "JSON.parse".
Calling webService with parameter
Now what if you want to send some parameter to the webService that you want to call.
We will follow the same step as above but the only difference will be that we will pass the parameter with our send() request.
here how we do it:

var xhr = Titanium.Network.createHTTPClient({
   
   onload : function(e) {
       Titanium.API.info(this.responseText);
       
       //do whatever you want to do with your response
   }, 
   
   onerror : function(e) {
       alert('error');
   },
   timeout : 5000
    
});

xhr.open("POST","http://myTestUrl.net/services/json");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
var param = {          //1
  "method" : "getData.list",
  "dataID" : "243"
  
};
xhr.send(param);

Here you can see that the only difference you can see is in the send() function.
As now we dont have to send only our API name i.e method name, but we are passing an extra parameter here i.e "dataID".
NOTE: The names of your parameter should be same as you define in your webService API.
Hence In the above code we are calling a webService named "getData.list" which accepts one parameter "dataID".
we can send as many parameter by this way as required by our API.

Extending titanium project with iOS module development-Implementing Bitly API

2012-01-16T15:08:00.000+05:30

I spend my weekends reading about titanium and exploring its power. And being an iOS developer, I really loved the way we can create iOS modules for my existing titanium project and extend it to a great extend.
The modules created can be easily created and deployed.
Today I will tell you how we can easily integrate an iOS module and use its power in our titanium project.

Overview
We will be creating a simple application with the titanium studio, which will accept a long url and give us a short url.
In short, we will be implementing Bitly API.
Here the UI will be designed in our Titanium studio and out Bitly API implementation will be done in our iOS module that we will develop.

Then we gonna include that module in our project and use it to convert our long URL to short one.

So, Lets get Started.

Creating Our Titanium Project

As you will be familier with the titanium development so I will skip that project creation wizard. :)
I will name my project as ShortUrl.
Now edit the default code in the app.js(you will find it in Resource folder under your Application folder) file with this code.

var window = Ti.UI.createWindow({

backgroundColor:'white'

});

var txtLongUrl = Ti.UI.createTextField({

top: 10,

left: 10,

width: 300,

height: 30,

borderStyle: 1,

hintText: 'Enter your long url...'

});

window.add(txtLongUrl);

var btnShorten = Ti.UI.createButton({

title: 'Shorten it with Bit.ly!',

width: 200,

right: 10,

height: 30,

top: 50

});

btnShorten.addEventListener('click', function(e)

{

// here we will add the code that will call our module later

});

window.add(btnShorten);

var txtShortUrl = Ti.UI.createTextField({

top: 100,

left: 10,

width: 300,

height: 30,

borderStyle: 1,

hintText: 'Your short url appears here...'

});

window.add(txtShortUrl);

window.open();

When you run your project you will see the similar screen below.

Now we have our UI, lets build our iOS Module.
Setting Up your Module Environment

Note: The below steps are taken from the Appcelerator documentation and guides. In case you face any problem refer below given link:
https://wiki.appcelerator.org/display/guides/iOS+Module+Development+Guide
To set up your Module environment on OSX, you'll need to place a helper script on your path or set up an environment alias to the file. In this document, we recommend you create an alias.

Note: You'll need to determine where your Titanium 1.4.0 SDK (or more recent version) is installed. It may be installed in /Library/Application\ Support/Titanium, or it may be in ~/Library/Application\ Support/Titanium. The steps below assume that it is below /Library. If it is below ~/Library instead, you'll need to make the appropriate change to the line in step 3.

Open the Console application. The Console application is located under /Applications/Utilities/Console.
Edit the file named .bash_profile in your $HOME directory.
In this file, add the following line at the end of the file:

alias titanium='/Library/Application\ Support/Titanium/mobilesdk/osx/1.7.5/titanium.py'

This will create an alias to the titanium.py helper script. You should substitute the version above (1.4.0) with the version of Titanium mobile SDK you're using.
Save the file.
Type the following command in the console:

source ~/.bash_profile

Type the following command in the console:

titanium

You should see the following output (or substantially similar):

Appcelerator Titanium

Copyright (c) 2010 by Appcelerator, Inc.

commands:create  - create a project

run              - run an existing project

help             - get help

Keep open the console as you'll need it in subsequent steps.

Building Our Bitly Module

Create the module with the following script:
In your terminal type:

titanium create --platform=iphone --type=module --dir=~/Projects --name=BitlyModule --id=com.ajeet.BitlyModule

Now open the /Projects/BitlyModule directory in Finder, and what you will see is a list of mostly standard looking XCode project files. Double click the BitlyModule.xcodeproj file to open it up in XCode for editing.

Before you can use the module, you'll need to sign up for a Bitly API Key, which you can do for free at: https://bitly.com/a/sign_up?rd=/a/your_api_key.

Additionally, we're going to need the open source SBJSON framework for Objective-C, which is capable of natively reading and writing JSON formatted data streams. You can download the SBJSON framework from https://github.com/stig/json-framework/.

Now we have our SBJSON framework and our Bitly API key, so now lets start with our Module.

First, unzip the SBJSON framework, and drag all of the files from the Classes folder in Finder to the Classes folder in your module's XCode project.

Open up ComAjeetBitlyModuleModule.h and ensure it looks like the following (ignoring the header comments at the top of the file):

#import "TiModule.h"

#import <Foundation/Foundation.h>

@interface ComAjeetBitlyModuleModule : TiModule

{

}

@end

Now open the ComAjeetBitlyModuleModule.m file and ensure it looks like the following source code (ignoring the header comments at the top of the file).
Remember to replace the login and key values in the QueryString section of the URL with those you were assigned by the Bit.ly API:

In your .m file you will have many function prewritten for you, so for now dont touch them.

include the Sbjson files in your .m files.
so that it looks like below,

#import "ComAjeetBitlyModuleModule.h"

#import "TiBase.h"

#import "TiHost.h"

#import "TiUtils.h"

#import "SBJson.h"

#import "SBJsonParser.h"

@implementation ComAjeetBitlyModuleModule

// all your other code

#pragma Public APIs

//here we will create a public method that will interact with our titanium project.

//add this function here

- (id)getShortUrl:(id)args

{

NSString *baseURLString = @"http://api.bit.ly/shorten?version=2.0.1&longUrl=";

NSString *longUrl = [TiUtils stringValue:args];

longUrl = [longUrl stringByReplacingOccurrencesOfString:@"(" withString:@""];

longUrl = [longUrl stringByReplacingOccurrencesOfString:@")" withString:@""];

longUrl = [longUrl stringByReplacingOccurrencesOfString:@"\"" withString:@""];

longUrl = [longUrl stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];

baseURLString = [baseURLString stringByAppendingString:longUrl];

baseURLString = [baseURLString stringByAppendingString: @"&login=username&apiKey=yourKey"]; // your username and API key

NSURL* baseURL = [[NSURL alloc]initWithString:baseURLString];

NSMutableURLRequest *req = [[NSMutableURLRequest alloc] initWithURL:baseURL];

NSHTTPURLResponse* urlResponse = nil;

NSError *error = [[[NSError alloc] init] autorelease];

NSData *data = [NSURLConnection sendSynchronousRequest:req returningResponse:&urlResponse error:&error];

if ([urlResponse statusCode] >= 200 && [urlResponse statusCode] < 300)

{

NSLog(@"Got a response from bit.ly");

SBJsonParser* jsonParser = [SBJsonParser new];

NSString* jsonString = [[NSString alloc]initWithData:data encoding:NSUTF8StringEncoding];

NSDictionary* dict = (NSDictionary*)[jsonParser objectWithString:jsonString];

[jsonString release];

[jsonParser release];

NSString *statusCode = [dict objectForKey:@"statusCode"];

if([statusCode isEqualToString:@"OK"])

{

// retrieve shortURL from results NSLog([dict description]);

NSString *shortURL = [[[dict objectForKey:@"results"] objectForKey:longUrl] objectForKey:@"shortUrl"];

return shortURL;

}

else

{

return @"Unable to shorten this URL, please check its format.";

}

return baseURLString;

}

@end

Now at this point we have created a function getShortUrl, save you .m file.

Now we will package our module, so on the terminal

type the following: ./build.py

the terminal will throw bunch of lines and in the end you will see build succeed .

If you have any error first resolve it.

To install your Module so that it can be used in a real application, you will need to install it. In the console, run the following:

you will find this .zip file in your module folder.

> cp com.ajeet-iphone-0.1.zip /Library/Application\ Support/Titanium/

This will copy your Module distribution file into your Titanium directory. The Titanium compiler is smart enough to automatically expand your module into the correct directory when referenced in your application.

Your module will be expanded into the following directory:

/Library/Application Support/Titanium/modules/iphone/com.ajeet/0.1

Now we are done with our Module development, lets attach it to our titanium project.

Open up your Titanium project that we created earlier, i.e. shortUrl

1. open the tiApp.xml file and in the end add this line in place of this <modules/>

<module version="0.1">com.ajeet.BitlyModule</module>

</modules>

Here we added our module, It means our app will be needing it.

2. In your app.js, on the top add this line

var mybitly = require('com.ajeet.BitlyModule');

Ti.API.info("module is => " + mybitly);

3. Now in our btnShorten function we will call our getShortUrl function defined in our .m file.

btnShorten.addEventListener('click', function(e){

Titanium.API.info("longUrl is----> "+ txtLongUrl.value);

var result = mybitly.getShortUrl(txtLongUrl.value);

Titanium.API.info("result is----> "+ result);

txtShortUrl.value = result;

});

By doing this we completed our module integration.

just run the application, and enter any url in the long url textbox and by clicking on the button

we get our short bitly url..

Hope you enjoyed the tutorial..:)

Here is the output:

Beginning Twitter integration iOS 5: Part 1

2011-12-19T13:18:00.000+05:30

iOS 5 came with a bang and with tons of surprises. 1500 new API, sounds very interesting.

One of the good thing is that iOS 5 ships with the Twitter framework. So it means no hectic code, oauth implementation by the developer. All of it is done and taken care by this framework.
And the best part is that it supports multiple accounts.

So Today we gonna sneak peak in this framework and will implement a simple twitter Application that will be sending your tweet.

Get Started
As we are using new feature of iOS 5, so i am assuming that you have Xcode 4+.

> Fire up your Xcode and name the project as LetsTweet.
Make sure that ARC(Automatic reference counting) is enabled.

>Select the Single View Application.

Adding Twitter Framework

This is accomplished by clicking on your project in the Navigator sidebar, selecting your project’s target, and going to Build Phases. This should pull up a table with a few items. Click the arrow next to Link Binary With Libraries to expand the options and click the + button to add a new library. Find the library named Twitter.framework in the popup menu and select add button.
In the end it will be like:

As we are only going to implement the very basic functionality i.e to tweet, So our view controller will be simple too.

> Now go to your ViewController.xib, drag a UIButton to the View, and edit the text on it to be Tweet.

> Click on the file ViewController.h, here we are going to declare a function that will handle the tweet button click.

> In your ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {

}

-(IBAction)letsTweet: (id) sender ;

@end

> Now connect the function "letsTweet" to Sent events (Touch up) of tweet button.

> Lets program the ViewController.m file.

For using the Twitter framework you have to import it to your Class.

so include this

#import "Twitter/Twitter.h"

So in your .m file implement the -(IBAction)letsTweet:(id)sender function as below.

-(IBAction)letsTweet:(id)sender {

//Create the tweet sheet

TWTweetComposeViewController *tweetSheet = [[TWTweetComposeViewController alloc] init];

//Customize the tweet sheet here

//Add a tweet message,

[tweetSheet setInitialText:@"This is iOS Muncher sending first tweet. :)"];

//Set a blocking handler for the tweet sheet

tweetSheet.completionHandler = ^(TWTweetComposeViewControllerResult result)

{

[self dismissModalViewControllerAnimated:YES];

};

//Show the tweet sheet!

[self presentModalViewController:tweetSheet animated:YES];

}

Lets understand the code:

1. TWTweetComposeViewController *tweetSheet = [[TWTweetComposeViewController alloc] init];

This allocates a new tweetSheet for us, this is the in-build ViewController that will be seen when you tap on tweet button.

2. [tweetSheet setInitialText:@"This is iOS Muncher sending first tweet. :)"];

We can set initial text for the tweet, you can edit it later also when you are on the tweetSheet.

3. tweetSheet.completionHandler = ^(TWTweetComposeViewControllerResult result)

{

[self dismissModalViewControllerAnimated:YES];

};

Here we have to set a blocking handler for the result. This is to ensure that we don’t mess up the rest of the app while tweeting until we dismiss the modal view (that is our tweet sheet)

4. [self presentModalViewController:tweetSheet animated:YES];

This shows up your tweet sheet.

Running the Application:

Hit Build and Run button, you will the see the app running in your simulator.

Tap on tweet Button. If you see this screen as below, dont panic.

All iOS 5 devices have a feature in their setting page, where user can set their twitter account.

You have to set the account only one time, and it will not ask you again and again to authorize while posting tweets. cool ha..!!

> Just click on settings and add your twitter account.

>After adding your account. Launch the App again and just tweet.

So you are ready to send your own tweet from your own App.

There are lots customization that you can do with this framework, like you can tweet pictures, url, can see your friends tweet, search something on twitter,get tweets from particular accounts and lot more.

Well this was just a basic, in the coming post we will fully customize our LetsTweet Application

Stay Tuned.. :)

All you need to know about RhoMobile

2011-12-16T23:55:00.000+05:30

Rhomobile, selected Best Startup at Interop 2009, lets developers use HTML and Ruby to create native iPhone, BlackBerry, Windows Mobile, Symbian, and Android applications.

Rhodes is a free and open source MVC-based framework written in Ruby under the MIT license for building native cross-platform mobile development applications. Rhodes enables developers to harness their traditional web skills such as HTML, HTML5, CSS, and JavaScript, instead of in Objective-C or other complex native device OS language, to create a native app, and porting the app in cross operating systems such as Android, Apple’s iPhone and iPad, BlackBerry, Windows Mobile, Symbian and HP/Palm's Linux-based WebOS.

These native device applications leverage device capabilities such as GPS, accelerometer, Multimedia, PIM(Personal Information Management) data, Bluetooth, geolocation, camera, native mapping, push notifications, alerts, calendar, barcode reading, jQTouch and signature capture in app.

RhoSync is the fastest and most scalable sync server produced by Rhomobile that enables access and edit data irrespective of connectivity. RhoSync is useful for mobile apps dealing with data from a web app that requires a two-way sync with offline activity support. RhoSync 2.0 is optimized to automatic synchronization of backend enterprise app data to the mobile device.

RhoHub is a Rhomobile service for mobile applications that integrates Rhodes platform and RhoSync, a standalone sync server for enterprise data. RhoHub is the first development-as-a-service offering that allows developers to deploy mobile application apps, builds, and sync servers to the cloud across multiple smartphone operating systems. RhoSync server provides faster access to synced local data and optimized native styling for all smartphones. It also offers easy access to offline and disconnected data for the users of applications. iPhone developers can leverage the RhoHub RhoSync server to test and deploy sync-enabled Rhodes applications.

RhoGallery is Rhomobile’s Enterprise App Store that offers enterprise mobile app management solution. RhoGallery provides easy access for employees to provision mobile apps on their smartphones and easily manage it with updates.

Rhodes developer

Rhomobile allows Rhodes developers to leverage their existing web skills using HTML to create powerful native Rhodes mobile apps that work across all major smartphones, Leveraging the latest technology, standards and best practices in Rhodes development, our proficient Rhodes developers are highly committed and proficient in Rhodes programming language to build mobile applications that have a native look and feel.

Rhodes framework allows developers to build mobile applications with HTML and Ruby rather than Objective C across cross-platform OS such as iPhone, Blackberry, Windows Mobile, Symbian, and Android. Our team of dedicated Rhodes developers can build and deploy mobile apps in multiple operating systems. Our skilled Rhodes mobile developers can develop native applications that access and create events in its native device calendar, with Bluetooth connectivity to their apps.

Features of Rhomobile:

1. Portability- write once, deploy on all major devices.
2. Enterprise Security Compliance- Use Rhomobile’s secure model to secure your mobile solutions from end to end.
3. Dead Simple App Integration- Easily extend your backend web services to native clients.
4. Synced offline Data- Give end users the ability to use apps with or without a connection through their own local copy of data.
5. Native Access- Exploit the native device capabilities such as: GPS, PIM Contacts, Camera, etc.
6. App and Data Management: Easily provision and manage apps and data to your end users, including an ability to remotely wipe apps and data.

My Opinion:
Building an application using rhoMobile can be done easily using HTML and javascript, But to support the MVC architecture Ruby to be used.
RhoMobile is very good for the application that are Data Centric.
RhoMobile has a great support for all major mobile platforms. The only problem is here learning Ruby, well but that can be resolved too, As learning a new language is always fun.
The other problem is that the cost issue as mentioned above creating a simple app is of no charge, but for enterprise based application will cost Commercial Licenses of Rhodes, which includes updates and commercial grade support for one year, is available for $1,000 per app for an unlimited number of users.

Running Appcelerator project in Xcode.

2011-12-16T19:53:00.000+05:30

Couple of days earlier, I was more busy in finding the best mobile framework suitable for building iOS Apps, without diving into native code.

I came across this Appcelerator Titanium. I found this pretty interesting, But searching for while I could not found that how it could be beneficial for an iOS developer like me.

I was more interested in running the appcelerator project in Xcode. After juggling for a while I managed to do that.
Lets start Munching:

Step 1: Download the Titanium Studio from : http://www.appcelerator.com/products/titanium-studio/

Now install it on your Mac.

Step 2: Launch the Titanium for the Application folder.
Below is the Titanium IDE

Step 3. Now Go to File>New>Titanium Mobile Project.

You will see the similar screen as below:

Step 4: Click on Next , Here you can either choose a pre-build template or can go without a template.

I have selected the Geolocation mobile client template.

Step 5: Hit Finish and you are done.

What you see now is your project in the IDE. On the left pane double click to the tiapp.xml file.
It will open it for you in the right pane.
This is where you do your project settings, below is the similar screen that you will get.

As you can see under the Resource folder you have your app.js file, which is the main file where you code your javascript.

As you can see on the right side you have TiApp Editor open and you have your "MyFirst App settings in front of you".

The beauty of this Appcelerator is that you code only once and can deploy for iPhone,iPad,Android, Mobile web.

We are not diving into the programming but as we have selected the GeoLocation mobile client template. Lets see what this template has done for us.

Lets build this project

In between the toolbars you can see the Run button. Click on the small arrow next to it.

>Select the option Run Configurations.

You will see the below screen. Select the Project that you wan to run, for us is MyFirstApp.

Choose the iOS SDK as 4.0 or above not SDK 5 (As for me while choosing iOS SDK 5 it gives error).

After doing this, Click on the Run button.(bottom right)

> You can see all the logs in the bottom console window.

Now when the build done. You might be thinking that where is the Xcode in this.

I will say here comes the Xcode.

Navigate to the workspace directory that you set while installing or running the Titanium studio.
The path will be like.

yourWorkspaceFolder>MyFirstApp>build>iphone>MyFristApp.xcodeproj

So this is your Xcode project file.
Run it and it will open the Xcode for you.

> Now you have your favorite IDE Xcode in front of you and a project loaded in it.
Then what are you waiting for hit the Build and Run button

Below is what you will see.

> So you can see that we have only used a single template for Geolocation and we have this beautiful app showing your current location. (dont worry simulator does not show the actual location, it will always show the Apple headquarters)

Final Words:

You can build a whole app using Titanium Studio using just JavaScript.(good for web developers) and can deploy it to the various mobile devices.

If you want to extend your project using the native language i.e using Objective-C, then you have to write modules and then attach it to your existing project.

Here is a tutorial link for that iOS module Development