Tuesday, October 19, 2010

UITableView with Safari

In this post i will show you how to use tableview and safari together, for that here's what i am planning to do, i will have some website link on my table view and when the user selects any one of the website then the user will traverse to that particular website which will be displayed in safari (I am not using webview component here).

Heres a look at our final output

Step 1: Create a window based application and create a .h and .m file which inherits from table view controller, (click here if you are getting confused). Now give your file an appropriate name. 

Step 2: Into the .h file declare a String object named urlcatcher and a function which will add the text into the table cell. heres how you do that into the .h file

@interface Mytableviewcontroller : UITableViewController {

NSString *urlcatcher;
UILabel *title1,*title2,*title3;
-(void) tablecell:(UITableViewCell*)acell SiteTitle:(NSString*)title SiteLink:(NSString*)link Comments:(NSString*)comment; 


In the above code as you can see i am having a function called


now ofcourse you must be thinking what sort of stupid function name is that but as we proceed you will come to know.

Step 3: Go into the .m file and set the height of your table row into the init method

self.tableView.rowHeight = 100.f;

after that we will code for our function, in this function as you can see that earlier i have took 3 labels i will set the frame,font and color of the labels and add those labels into the table cell as text. Here's my code for that

-(void) tablecell:(UITableViewCell*)acell SiteTitle:(NSString*)title SiteLink:(NSString*)link Comments:(NSString*)comment
//settings for main text
CGRect tRect1 = CGRectMake(0.0f5.0f320.0f40.0f);
title1 = [[UILabel allocinitWithFrame:tRect1];
[title1 setText:title];
[title1 setTextAlignment:UITextAlignmentCenter];
[title1 setFont: [UIFont fontWithName:@"American Typewriter" size:36.0f]];
[title1 setBackgroundColor:[UIColor clearColor]];
//settings for URL
CGRect tRect2 = CGRectMake(0.0f45.0f320.0f20.0f);
title2 = [[UILabel allocinitWithFrame:tRect2];
[title2 setText:link];
[title2 setTextAlignment:UITextAlignmentCenter];
[title2 setFont: [UIFont fontWithName:@"Helvetica" size:18.0f]];
[title2 setBackgroundColor:[UIColor clearColor]];
//settings for comments
CGRect tRect3 = CGRectMake(0.0f70.0f320.0f20.0f);
title3 = [[UILabel allocinitWithFrame:tRect3];
[title3 setText:comment];
[title3 setTextAlignment:UITextAlignmentCenter];
[title3 setFont: [UIFont fontWithName:@"Helvetica" size:18.0f]];
[title3 setBackgroundColor:[UIColor clearColor]];
//adding labels to the table cell
[acell addSubview:title1];
[acell addSubview:title2];
[acell addSubview:title3];
//releasing the labels
[title1 release];
[title2 release];
[title3 release];

Step 4: set the number of section as one and number of rows in section as 3

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 3;

After doing this just jump to the tableView cellForRowAtIndexPath method have a look at this code the code will do the explanation itself

- (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] autorelease];
int x = [indexPath row];
switch (x) {
case 0:
[self tablecell:cell SiteTitle:@"Apple" SiteLink:@"http://www.apple.com" Comments:@"Apple's official site"];
case 1:
[self tablecell:cell SiteTitle:@"iPhone by Radix" SiteLink:@"http://iphonebyradix.blogspot.com" Comments:@"iPhone App development learning"];
case 2:
[self tablecell:cell SiteTitle:@"Google" SiteLink:@"http://www.google.com" Comments:@"Google site"];

    // Set up the cell...
    return cell;

Step 5: As the user may select any site from the table row write so for this we have a method provided to us by the tableviewcontroller subclass which is called as the tableView didSelectRowAtIndexPath here's the code for that method

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
int currentindex = [indexPath row];
switch (currentindex) {
case 0:
urlcatcher = @"http://www.apple.com";
case 1:
urlcatcher = @"http://iphonebyradix.blogspot.com";
case 2:
urlcatcher = @"http://www.google.com";
//store the url in an object of the NSURL class
NSURL *url = [NSURL URLWithString:urlcatcher];

//this will open the selected URL into the safari
[[UIApplication sharedApplication]openURL:url]; 

Step 6: Alright now lets do some packing into the app delegate .m file

#import "TableDemoAppDelegate.h"
#import "Mytableviewcontroller.h"

@implementation TableDemoAppDelegate
@synthesize window;
- (void)applicationDidFinishLaunching:(UIApplication *)application {    
Mytableviewcontroller *obj = [[Mytableviewcontroller alloc]initWithStyle:UITableViewStylePlain]; //create object of the view
  [window addSubview:obj.view]; //add view to main window
    [window makeKeyAndVisible];

Step 7: Build and Go to see the following outputs

I hope this post helped you, Happy iCoding

1 comment: