Dimensions

iPhone Development: Custom Cells

2009-04-28T06:45:00.000-07:00

Ohhk, quite a lot of things done but this one is something which I have used most often. Custom cells can sometimes greatly push ahead the usability of the application. In this post I am going to create a test project which will demonstrate how to create custom cells and use them appropriately to provide better usability. The application will finally look like this:

So to start open xcode and create a new project, chose the template as "Navigation Based" and name it as "CustomCellTestProject". What template you chose does not matter, refer my previous posts to find how you can start working on any template.

First thing we will do is create a customCell. Right click on Classes and add a new UITableViewCell subclass. Name it as "CustomCell". Now open CustomCell.h and add the following code:

#import

@interface CustomCell : UITableViewCell {

UILabel *primaryLabel;

UILabel *secondaryLabel;

UIImageView *myImageView;

}

@property(nonatomic,retain)UILabel *primaryLabel;

@property(nonatomic,retain)UILabel *secondaryLabel;

@property(nonatomic,retain)UIImageView *myImageView;

@end

Here we have simply added a primary label to display the primary text, a secondary label and an imageView. These elements will be created and added into the content view of our custom cell. So open CustomCell.m and add the following code

- (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier {

if (self = [super initWithFrame:frame reuseIdentifier:reuseIdentifier]) {

// Initialization code

primaryLabel = [[UILabel alloc]init];

primaryLabel.textAlignment = UITextAlignmentLeft;

primaryLabel.font = [UIFont systemFontOfSize:14];

secondaryLabel = [[UILabel alloc]init];

secondaryLabel.textAlignment = UITextAlignmentLeft;

secondaryLabel.font = [UIFont systemFontOfSize:8];

myImageView = [[UIImageView alloc]init];

[self.contentView addSubview:primaryLabel];

[self.contentView addSubview:secondaryLabel];

[self.contentView addSubview:myImageView];

}

return self;

}

We create the three elements and added them to the contentView of our cell. Also don't forget to synthesize all the three elements as we are going to access these elements from other classes.

@synthesize primaryLabel,secondaryLabel,myImageView;

Now, we have already added the UI elements into our cell but you must have noticed, we have not yet defined how these elements will appear inside cell. Go ahead and add the following code for that:

- (void)layoutSubviews {

[super layoutSubviews];

CGRect contentRect = self.contentView.bounds;

CGFloat boundsX = contentRect.origin.x;

CGRect frame;

frame= CGRectMake(boundsX+10 ,0, 50, 50);

myImageView.frame = frame;

frame= CGRectMake(boundsX+70 ,5, 200, 25);

primaryLabel.frame = frame;

frame= CGRectMake(boundsX+70 ,30, 100, 15);

secondaryLabel.frame = frame;

}

You can do anything in this method to define the lay out of cell. I have simply assigned frames to all the elements.

You can also find a method in CustomCell.m

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {

[super setSelected:selected animated:animated];

// Configure the view for the selected state

}

This method can be used to define how your cell should react when it is selected. You can describe what should be the highlight color or may be you want to flash one of the labels anything of your choice. I am leaving this method as it is.

We are done with creating our custom cell and now we have to use it. Open RootViewController.m and import CustomCell.h at the top.

#import "CustomCell.h"

I am going to create 5 cells here, you can just use your own logic of specifying number of cells and data. So change the following method to look like this:

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

return 5;

}

Now we are going to use our custom cell. If you look at the cellForRow method, you will find that a UItableViewCell has been created and re used. Now all we have to do is to replace this cell with our new cell. Change the code inside this method to look like this:

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

static NSString *CellIdentifier = @"Cell";

CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[[CustomCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];

}

// Set up the cell...

switch (indexPath.row) {

case 0:

cell.primaryLabel.text = @"Meeting on iPhone Development";

cell.secondaryLabel.text = @"Sat 10:30";

cell.myImageView.image = [UIImage imageNamed:@"meeting_color.png"];

break;

case 1:

cell.primaryLabel.text = @"Call With Client";

cell.secondaryLabel.text = @"Planned";

cell.myImageView.image = [UIImage imageNamed:@"call_color.png"];

break;

case 2:

cell.primaryLabel.text = @"Appointment with Joey";

cell.secondaryLabel.text = @"2 Hours";

cell.myImageView.image = [UIImage imageNamed:@"calendar_color.png"];

break;

case 3:

cell.primaryLabel.text = @"Call With Client";

cell.secondaryLabel.text = @"Planned";

cell.myImageView.image = [UIImage imageNamed:@"call_color.png"];

break;

case 4:

cell.primaryLabel.text = @"Appointment with Joey";

cell.secondaryLabel.text = @"2 Hours";

cell.myImageView.image = [UIImage imageNamed:@"calendar_color.png"];

break;

default:

break;

}

return cell;

}

I have added some dummy data. You can use your data source to provide data for primaryLabel and secondaryLabel. Please note that I have used three images here. You can use any image of your choice. All you need to to do is copy the images and paste it into your project root folder (which in this case is CustomCellTestProject folder). After pasting the files, in xcode right click on Resources (or any group), select Add >> ExistingFiles and then select all the images you want to add in you project. Once added you can simply use them by their names.

Thats it, go ahead and run the project. You will find something wrong when you compare you simulator screen with mine. If you noticed in the CustomCell.m, I have given some frames to the UI elements. You need to make sure that the height of your cell large enough to accomodate all the elements. So add this following code and you fixed the issue:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

return 50;

}

Let me know if I have been missing something here.

iPhone Development: Creating Native Calendar Like View

2009-04-09T03:37:00.000-07:00

In this post I will be creating a calendar, which could reused in an any native application.

I used the calendar source from here and modified it a little bit to suit my requirements.

You can find the modified code from my project here: DOWNLOAD PROJECT

The final screen should look like this:

You can download the complete project from the link given, I will only discuss how we can reuse this calendar and modify it to fit our specific requirements.

Open the project CalendarTest in xCode. You will find a folder Calendar containing some 20 files.

You can reuse this folder as such in any project you want show the calendar. I will be using these files to display a modified calendar in CalendarTestView header and implementation files.

Open CalendarTestView.m and find the following code:

- (void)loadView {

[super loadView];

calendarView = [[[KLCalendarView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 360) delegate:self] autorelease];

myTableView = [[UITableView alloc]initWithFrame:CGRectMake(0,260,320,160) style:UITableViewStylePlain];

myTableView.dataSource = self;

myTableView.delegate = self;

UIView *myHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0,0,myTableView.frame.size.width , 20)];

myHeaderView.backgroundColor = [UIColor grayColor];

[myTableView setTableHeaderView:myHeaderView];

[self.view addSubview:myTableView];

[self.view addSubview:calendarView];

[self.view bringSubviewToFront:myTableView];

}

Here I have initialized a tableView and the calendarView with appropriate frames. You can change the frames if you want to change the respective size of tableView and/or calendarView.

Now find the Calendar Delegate methods:

- (void)calendarView:(KLCalendarView *)calendarView tappedTile:(KLTile *)aTile{

NSLog(@"Date Selected is %@",[aTile date]);

[aTile flash];

if(tile == nil)

tile = aTile;

else

[tile restoreBackgroundColor];

tile = aTile;

}

Here you need to write the code that should be executed when a tile is tapped. Typical usage of this method would be to load data for the tableView from database corresponding to the date of the tile.

- (KLTile *)calendarView:(KLCalendarView *)calendarView createTileForDate:(KLDate *)date{

CheckmarkTile *tile = [[CheckmarkTile alloc] init];

//tile.checkmarked = YES;//based on any condition you can checkMark a tile

return tile;

}

This method is called for each tile. Just like cellForRow is called for each cell. Please note that although this method will not be called more than once for a tile, but when you change the month of calendar, all tiles are redrawn, so this method will again be called for each tile.

You can find a commented line in this method! This is very important code which you can use to tell the user that they have some data corresponding to a date.

For example I have a meeting on 4th of current month. You can check if tile.date == 4th then check-mark the tile.

- (void)didChangeMonths{

UIView *clip = calendarView.superview;

if (!clip)

return;

CGRect f = clip.frame;

NSInteger weeks = [calendarView selectedMonthNumberOfWeeks];

CGFloat adjustment = 0.f;

switch (weeks) {

case 4:

adjustment = (92/321)*360+30;

break;

case 5:

adjustment = (46/321)*360;

break;

case 6:

adjustment = 0.f;

break;

default:

break;

}

f.size.height = 360 - adjustment;

clip.frame = f;

CGRect f2 = CGRectMake(0,260-adjustment,320,160+adjustment);

myTableView.frame = f2;

[self.view bringSubviewToFront:myTableView];

tile = nil;

}

This method is called every time you change the month in calendar. I have done some adjustments for fixing the free space between tableView and calendar when there are less number of weeks in a month. You can wrote your own logic for that.

Now the tableView delegate methods. You can write anything you want depending on your requirement. I have written some dummy code to take screen shots

#pragma mark tableViewDelegate Methods

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

return 1;

}

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

return 5;

}

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

static NSString *MyIdentifier = @"MyIdentifier";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];

}

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

[cell setText:@"No Data For Now"];

return cell;

}

You can read data from the source which maintains data according to the last tile tapped.

Let me know if I am missing something.

iPhone Development: Creating Native Contacts like screen

2009-04-09T02:05:00.000-07:00

Hello again. This time I will be creating a native contacts like screen. If you are not familiar with it, here is how it looks like:

This view is very important for many business applications. There can be several ways of implementing this view, depending upon your specific need you can write one. I will discuss the simplest one in which I will be creating a dictionary to access names. I will be adding code to same DatabaseTest project which I created earlier.

You can find DatabaseTest here

So lets start and open the project DatabaseTest. We need not change anything in AppDelegate. Open RootViewController.h and add the following code:

@interface RootViewController : UITableViewController {

//NSMutableArray *tableData;

NSMutableArray *arrayOfCharacters;

NSMutableDictionary *objectsForCharacters;

}

@end

You will notice that I have commented tableData and declared an additional array and a dictionary. We wont be using tableData anymore instead data will be now stored in dictionary objectsForCharacters. You will understand how in some time now.

Open RootViewController.m and in -(void)initializeTableData comment all the code written and add this code:

arrayOfCharacters = [[NSMutableArray alloc]init];

objectsForCharacters = [[NSMutableDictionary alloc]init];

sqlite3 *db = [DatabaseTestAppDelegate getNewDBConnection];

for(char c='A';c<='Z';c++)

{

NSMutableString *query;

query = [NSMutableString stringWithFormat:@"select name from user where name LIKE '%c",c];

[query appendString:@"%'"];

char *sql = [query cString];

sqlite3_stmt *statement = nil;

if(sqlite3_prepare_v2(db,sql, -1, &statement, NULL)!= SQLITE_OK)

NSAssert1(0,@"error preparing statement",sqlite3_errmsg(db));

else

{

NSMutableArray *arrayOfNames = [[NSMutableArray alloc]init];

while(sqlite3_step(statement)==SQLITE_ROW)

[arrayOfNames addObject:[NSStringtringWithFormat:@"%s",(char*)sqlite3_column_text(statement, 0)]];

if([arrayOfNames count] >0)

{

[arrayOfCharacters addObject:[NSString stringWithFormat:@"%c",c]];

[objectsForCharacters setObject:arrayOfNames forKey:[NSString stringWithFormat:@"%c",c]];

}

[arrayOfNames release];

}

sqlite3_finalize(statement);

}

I will explain what we are doing here. For each alphabetical character we are querying database to get all the names starting with that character. If we get 1 more or more names for a character, we add that character in an array arrayOfCharacters. Names are stored in a separate array arrayOfNames. This is a temporary array which will added to dictionary objectsForCharacters. At the end we have arrayOfCharacters holding all those characters which have at least one name starting with them respctively and we have objectsForCharacters holding an array of names for each character in arrayOfCharacters.

Now we need to fix the view. For this we will now be using 3 new tableView methods:

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section

The first method asks for an array of strings which it will use as index titles. You can find indexes A-Z vertically arranged on the rightmost side of tableView. Here you can decide either to give all the characters or just the ones in arrayOfCharacters.

In the second method you specify what should be the section number for the given index title.

In third method you provide the title for each section header. You can find in the first figure, a gray bar with a character appearing in it just above each section.

So lets implement these methods, add the following code:

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {

NSMutableArray *toBeReturned = [[NSMutableArray alloc]init];

for(char c = 'A';c<='Z';c++)

[toBeReturned addObject:[NSString stringWithFormat:@"%c",c]];

return toBeReturned;

}

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index {

NSInteger count = 0;

for(NSString *character in arrayOfCharacters)

{

if([character isEqualToString:title])

return count;

count ++;

}

return 0;// in case of some eror donot crash d application

}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {

if([arrayOfCharacters count]==0)

return @"";

return [arrayOfCharacters objectAtIndex:section];

}

I think I have already explained the code.

Before we build and run the project, we need to change the other tableView methods we created last time. Make sure these three methods look like these:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

return [arrayOfCharacters count];

}

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

return [[objectsForCharacters objectForKey:[arrayOfCharacters objectAtIndex:section]] count];

}

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

static NSString *MyIdentifier = @"MyIdentifier";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];

}

// Set up the cell

cell.text = [[objectsForCharacters objectForKey:[arrayOfCharacters objectAtIndex:indexPath.section]] objectAtIndex:indexPath.row];

return cell;

}

I will try explaining a few thing here. [[objectsForCharacters objectForKey:[arrayOfCharacters objectAtIndex:section]] count]

Here we have first derived the character for the section. Then we used that character to obtain its corresponding array of names. And the count of names in the array will be numberOfRows in that section.

Rest should be clear.

Go ahead and run the project and you should see the screen similar to figure 1.

Also try adding more data into database and see how it looks.

iPhone Development: SQLite3 - populating table from database

2009-03-03T05:20:00.000-08:00

In this post I will be discussing how to create and use database on iPhone. The application will finally look like this:

So to start, create a new project, chose the template "Navigation Based" and name it as "DatabaseTest". We will be using SQLite3 database and for that we will need the libsqlite framework. Right click on frameworks->Add Existing. In the search bar type "libsql" and it will show you some 4 frameworks with same name. You have to choose "libsqlite3.0.dylib" whose size is 1.7MB.

Now we will create a database that we will be importing into our project later. Open the terminal and navigate into your project directory. Execute ls to verify that you are in correct folder. You should see the following screen on your terminal.

Now to create database in your project, type the following command:
sqlite3 data.sqlite
This will create a database with name data.sqlite. Now create a table with name "user" in your database. Execute the following command: sqlite> create table user (id varchar(10), name varchar(100));

Now we insert some dummy data into the table. Execute following commands:
sqlite> insert into user values('001','John Mclain');
sqlite> insert into user values('002', 'Joey Triviani');
sqlite> insert into user values('003', 'Spider Man');

Check to see everything went fine.

Now we will import the database into our project. Right click on Resources->Add->Existing File and select data.sqlite.
This will add data.sqlite file into Resources folder.

Now we are ready to write code. Open DatabaseTestAppDelegate.h and import sqlite3.h

Open DataBaseTestAppDelegate.m file and add the following code:

- (void)createEditableCopyOfDatabaseIfNeeded {

NSLog(@"Creating editable copy of database");

// First, test for existence.

BOOL success;

NSFileManager *fileManager = [NSFileManager defaultManager];

NSError *error;

NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);

NSString *documentsDirectory = [paths objectAtIndex:0];

NSString *writableDBPath = [documentsDirectory stringByAppendingPathComponent:@"data.sqlite"];

success = [fileManager fileExistsAtPath:writableDBPath];

if (success) return;

// The writable database does not exist, so copy the default to the appropriate location.

NSString *defaultDBPath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"data.sqlite"];

success = [fileManager copyItemAtPath:defaultDBPath toPath:writableDBPath error:&error];

if (!success) {

NSAssert1(0, @"Failed to create writable database file with message '%@'.", [error localizedDescription]);

}

We have done nothing but created an editable copy of database into local document. Now add the following code in the same file:

+(sqlite3 *) getNewDBConnection{

sqlite3 *newDBconnection;

NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);

NSString *documentsDirectory = [paths objectAtIndex:0];

NSString *path = [documentsDirectory stringByAppendingPathComponent:@"data.sqlite"];

// Open the database. The database was prepared outside the application.

if (sqlite3_open([path UTF8String], &newDBconnection) == SQLITE_OK) {

NSLog(@"Database Successfully Opened :)");

} else {

NSLog(@"Error in opening database :(");

}

return newDBconnection;

}

Here we have created a class method which will be used by other classes to obtain the instance of database. We will see how this will be used in a short while. Mean while in the applicationDidFinishLaunching method add the following code:

- (void)applicationDidFinishLaunching:(UIApplication *)application {

// Configure and show the window

[self createEditableCopyOfDatabaseIfNeeded];

[window addSubview:[navigationController view]];

[window makeKeyAndVisible];

}

So, we have initialized the database. Now we have to use it. For this open RootViewController.h file and add the following code:

Now open RootViewController.m file and add following code:

Here we have used the initialize database method to obtain a reference to the database. Using that we created a statement and executed it. Always remember to finalize the statement to avoid unexpected database errors. Now in the viewDidLoad method we will be calling this method. Add the following code:

So we have read the data from database and also initialized tableData array. Time to display same into the table. Add the following code into the tableView delegate methods:

There you go! build and run the project and you should get the screen we saw in first image.
I have not covered very basic details, if you still need some I would suggest you to read my previous posts.
In next post I will be showing you how you can edit the table we created and also add new records to it and persist them into database.

iPhone Development: Adding Search Bar in Table View

2009-02-24T02:46:00.000-08:00

In this post I will be creating a Search screen, which will have a table view with a search bar. Table should display all the records if search field is empty other wise it should show all the records that have matching strings with the search field.

At the end, it should look like this:

So to start create a new ViewBased Project and name it as MySearchScreenApp. You can start with any template you want but you can find in my previous posts why I always start with the most basic template.

The Search screen that you can see in the above images are implemented in MySearchScreenAppViewController class. So open the header file MySearchScreenAppViewController.h and add the following code:

@interface MySearchScreenAppViewController : UIViewController {

UITableView *myTableView;

NSMutableArray *dataSource; //will be storing all the data

NSMutableArray *tableData;//will be storing data that will be displayed in table

NSMutableArray *searchedData;//will be storing data matching with the search string

UISearchBar *sBar;//search bar

}

@property(nonatomic,retain)NSMutableArray *dataSource;

@end

Here we have only defined the UIElements and some data sources. There are three mutable arrays. dataSource will be containing all the data and will be initialized before loading the searchScreen. searchedData will be holding a subset of dataSource based on search string. It will be contents of tableData which you will be viewing in the table below searchBar.

To implement all these elements, open MySearchScreenAppViewController.m file and add the following code in loadView:

- (void)loadView {

[super loadView];

sBar = [[UISearchBar alloc]initWithFrame:CGRectMake(0,0,320,30)];

sBar.delegate = self;

[self.view addSubview:sBar];

myTableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 31, 300, 400)];

myTableView.delegate = self;

myTableView.dataSource = self;

[self.view addSubview:myTableView];

//initialize the two arrays; dataSource will be initialized and populated by appDelegate

searchedData = [[NSMutableArray alloc]init];

tableData = [[NSMutableArray alloc]init];

[tableData addObjectsFromArray:dataSource];//on launch it should display all the records

}

The only code worth explanation here is the last line [tableData addObjectsFromArray:dataSource]

As already discussed, dataSource will be holding all of data and tableData will be holding data to be shown in table. This code copies all elements of dataSource into tableData so that when the search screen is visible first time, all the data is displayed.

Now we implement all the tableViewDelegate methods: In the same file add the following code:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

return 1;

}

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

//NSLog(@"contacts error in num of row");

return [tableData count];

}

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

static NSString *MyIdentifier = @"MyIdentifier";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];

}

cell.text = [tableData objectAtIndex:indexPath.row];

return cell;

}

If you do not understand the code above, you should refer my earlier posts. These methods will be displaying data in tableData array into our table view.

Now we have to implement search bar delegate methods, which will be controlling the contents of tableData. In the same file add the following code:

#pragma mark UISearchBarDelegate

- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar

{

// only show the status bar's cancel button while in edit mode

sBar.showsCancelButton = YES;

sBar.autocorrectionType = UITextAutocorrectionTypeNo;

// flush the previous search content

[tableData removeAllObjects];

}

- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar

{

sBar.showsCancelButton = NO;

}

In the first method, we are only changing the appearance of search bar when a user taps on search bar. Refer the first two images to find the difference. The main code will be written now:

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText

{

[tableData removeAllObjects];// remove all data that belongs to previous search

if([searchText isEqualToString:@""]||searchText==nil){

[myTableView reloadData];

return;

}

NSInteger counter = 0;

for(NSString *name in dataSource)

{

NSAutoreleasePool *pool = [[NSAutoreleasePool alloc]init];

NSRange r = [name rangeOfString:searchText];

if(r.location != NSNotFound)

{

if(r.location== 0)//that is we are checking only the start of the names.

{

[tableData addObject:name];

}

counter++;

[pool release];

}

[myTableView reloadData];

}

This method will be called whenever text in the search bar is changed. We should update tableData array accordingly. So the first line[tableData removeAllObjects]; removes all the searched records from previous search string.

Then we check if the search string is null so that we should return immediately with and empty tableData.

If the searchString is not null then we will go through each object in dataSource and select those objects which have the occurrence of search string in beginning. You can modify the code to have any kind of search though.

The last line[myTableView reloadData]; refreshes the table view. What ever be the content of tableData will be shown now.

We should also show all the records if the search string is cleared or cancelled. For that add the following code:

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar

{

// if a valid search was entered but the user wanted to cancel, bring back the main list content

[tableData removeAllObjects];

[tableData addObjectsFromArray:dataSource];

@try{

[myTableView reloadData];

}

@catch(NSException *e){

}

[sBar resignFirstResponder];

sBar.text = @"";

}

// called when Search (in our case "Done") button pressed

- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar

{

[searchBar resignFirstResponder];

}

In the first function, we have flushed all the searched records and simply copy all the records from dataaSource. In the second function we are telling the text pad to resign. You can skip this method to see what happens.

Thats it!! We are done with the search screen. But we have to initialize it from AppDelegate. So open MySearchScreenAppAppDelegate.m and add the following code:

- (void)applicationDidFinishLaunching:(UIApplication *)application {

// Override point for customization after app launch

viewController.dataSource = [[NSMutableArray alloc]init];

for(char c = 'A';c<='Z';c++)

[viewController.dataSource addObject:[NSString stringWithFormat:@"%cTestString",c]];

UINavigationController *nvc = [[UINavigationController alloc]initWithRootViewController:viewController];

viewController.title = @"Search";

[window addSubview:nvc.view];

[window makeKeyAndVisible];

Here we have only added dummy data into dataSource to test. You can always store data from database or anywhere .

Now build and run the application. Try typing characters in SearchField, you will find that the search is case sensitive. You will also notice that the search works only if you type the beginning characters only. If you want that the searched records should have search string occurance at any place, here is an alternative implementation of (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText

{

[tableData removeAllObjects];// remove all data that belongs to previous search

if([searchText isEqualToString:@""]||searchText==nil){

[myTableView reloadData];

return;

}

NSInteger counter = 0;

for(NSString *name in dataSource)

{

NSAutoreleasePool *pool = [[NSAutoreleasePool alloc]init];

NSRange r = [name rangeOfString:searchText];

if(r.location != NSNotFound)

[tableData addObject:name];

counter++;

[pool release];

}

[myTableView reloadData];

}

I hope this post was useful. I will suggest you shou should read Predicates to optimize the search if you have very large data source to be searched.

Comments will be appreciated.

iPhone Development: Setup Wizard

2009-02-04T21:53:00.000-08:00

In this post I am going to access all the preferences from the code. Also I have made a setup wizard which allows you to change the preferences from the application it self.

Following are some of the things covered:

Reading Preferences
Editing Preferences
Custom UITableView
Wizard

The Wizard will finally look like this:

Before we start, lets have a look at NSUserDefaults. This is the class which will be used to access our preferences. All you need to do is get an instance of this class, after that it is much like a dictionary. For example:

NSUserDefaults *user = [NSUserDefaults standardUserDefault];

[user boolForKey:]

[user stringForKey:]

[user setBool:(BOOL) forKey:]

So lets start by adding a new UIViewController subclass in the classes folder. Right click on classes and add new UIViewController subclass, name it as SetupWizard.m.

Before accessing preferences, we need to setup the view for the wizard. So open SetupWizard.h and add the following code:

Here we have created some UI elements which are similar to the ones we have in our application preferences if you remember.

Since we will be using a table view , we have included the tableview delegate and datasource in interface declaration, which also includes UITextFieldDelegate . We will see later why we have used it.

Also we have made 2 cells, here we are diverting from the conventional coding practices, but there is a reason for that which will be clear as we proceed.

For now open SetupWizard.m and add the following code inside loadView method:

This code is simple enough, just a few UI elements being added on the view. If you are not clear what we did in this code then you need to refer my previous posts.

Important things to note in this code are: we need to have a method named "save" which we have added as a target to the button.

This is the method where we will be saving the preferences from our application into the Settings so that next time user launches the application, he has the same preferences he had last time. We will understand that in a while.

Before implementing save method, we should not forget we have a tableView added into the view so we have to implement it's protocol methods. Add the following code in SetupWizard.m:

Here we need some description. Why do we need to have 2 cells declared in .h? See the table view in the Wizard image at the beginning of this post. You will notice that this is similar to the one in preferences we made last time. See the image below, it is the multivalue preference we made last time.

If you tried using it then you must have noticed that when you select a cell, it gets checkmarked and only one cell at a time gets checkmarked. To make this happen in our table view, we had to have the access to both the cells all the time. You will understand this after you see what we are going to write in didSelect method of tableViewDelegate. So go on and write the following code:

Did that help? If we went on with the conventional coding style, how do we get access to the cell in didSelectMethod to change the accessory types? You will say that I will make a call to cellForRowAtIndexPath and receive the cell where ever I want. That's correct but you only get the cell corresponding to the indexpath you have, if you want to get other cells by this method, you need to create your own index path. Since we had only 2 cells, we can make our lives simple by avoiding it.

Now we are going to implement the most awaited "Save" method where we will be accessing preferences. Add the following code in SetupWizard.m

I think the code is self explanatory. If you now build the code and run it, you should be expecting to see what you made just now, right? Wrong! you will see the same hello world screen again and the tableview if you pressed the button. What we are going to do now is push this SetupWizard view from an appropriate place. For now, we will be doing it from MyTableView class we created earlier. So open MyTableView.m and add the following code:

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

SetupWizard *wizard = [[SetupWizard alloc]init];

[self.navigationController pushViewController:wizard animated:YES];

}

Now if you run build and run the project, you can see the wizard by clicking on any row in the table.

You can download the whole code till now from here

Now, we still have one thing to do. When the user sees the wizard, he should be shown all the previous configurations he chose. For that we will be reading all the preferences and reflecting it in our view. Just add the following code in SetupWizard.m :

-(void)loadPreferences

{

NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];

[textField setText: [userDefaults stringForKey:@"url"]];

if([userDefaults integerForKey:@"whichNumber"] == 0)

cell1.accessoryType = UITableViewCellAccessoryCheckmark;

else

cell2.accessoryType = UITableViewCellAccessoryCheckmark;

[sw setOn:[userDefaults boolForKey:@"switch1"]];

[slider setValue:[userDefaults doubleForKey:@"slider_preference"]];

}

and call this method from viewDidLoad like this:

- (void)viewDidLoad {

[self loadPreferences];

}

Now if you build and run the application, every time you will see the previous configurations showing up in the wizard.

Let me know if I have been missing anything.

iPhone Development: Application Preferences Part 2

2009-02-03T06:51:00.000-08:00

In this post I will be using PSChildPaneSpecifier in the application preferences.

You should read part 1 of this post if you are not familiar with application preferences. You can find it here .

What does PSChildPaneSpecifier do? It adds another page of configurations into your settings. We do that when we have a large number of configurations, so we divide them into categories and make a child pane of each category.

A child pane is nothing but another plist file. So to start with, open the same project "MyTestProject", right click on Settings.bundle and select "add new". From the "Other" tab select plist file as shown below:

Name the file as "Child.plist". You will notice that child.plist file is not added in the Settings.bundle. You need to add it inside Settings.bundle which will be done from the terminal.

To do so, open Terminal and navigate to your projects directory. Execute "ls" on shell to cross verify that you are in the correct directory. Following should appear on the Terminal:

Now copy child.plist file into the Settings.bundle by following command: "cp child.plist Settings.bundle". Cross verify by navigating into Settings.bundle directory and executing "ls". child.plist file should show up.

Close the terminal now and come to xCode again. You will now find child.plist inside Settings.bundle. Double click Child.plist and add items to make it look like this:

We have created the new child plist file, now we need to add a reference to it in the root.plist file. Open root.plist and add 2 new items to make it look like this.

Build and run the application , go to the settings and select your project MyTestProject. It shold look similar to the following:

In next post I am going to access these preferences from the MyTestProject and also allow the user to change them from the View itself.

iPhone Development: Application Preferences

2009-02-03T05:10:00.000-08:00

Here I am going to discuss Application Preferences. For those who are unaware of it, Application preferences refers to the configurations that shows up in the Settings. So if you want you application name to be listed inside Settings, you need to follow the procedure.

Lets first discuss what are the available options. Since we know in iPhone all applications work in a sandbox mode, we can not write a program to alter the behavior of another program. What it means here is, there are fixed UI Elements that can be used in Application preferences, their behavior is also fixed and cannot be changed. For example a you cannot provide a date picker in the settings, you cannot pop up a message saying the URL you entered is not correct. All you can do is provide a field where user can enter his preferences.

Following is a list of options we have for UI elements that we can provide:

PSTitleValueSpecifier: Used to write titles, similar to UILabel
PSTextFieldSpecifier: Similar to UITextField
PSToggleSwitchSpecifier: A toggle switch which can be ON or OFF
PSSliderSpecifier: A slider which can be used to provide a value bw MAX and MIN
PSMultiValueSpecifier: Shows multiple values from which user can select one.
PSGroupSpecifier: Very important for layout (discussed later).
PSChildPaneSpecifier: When you need to have another page of configurations.

All these elements can be used in the settings and you can read as well as manipulate them from your code.

Lets start the procedure. Open the same project "MyTestProject" we have been using last time. right click on the resources folder in left pane and select addNew. In the new window select Settings.bundle as shown in the figure.

Name it as Settings.bundle and click OK. This will create a Settings.bundle in your resources folder. Expand Settings.Bundle and double click on Root.plist.

By default it should look like this:

Right click on Preference Specifier and select "cut". I did this because in all my tutorials I do not rely on any convenience/ default things provided. It helps later in customizing things the way you want. Any ways now click on the "+" button on the right side of the table and in place of "new Item" type PreferenceSpecifiers. In the type field corresponding to PreferenceSpecifiers, select "Array".

Now we will add one by one all the elements we listed earlier. Click on the Arrow symbol to the left of PreferenceSpecifiers to expand it. You will notice that the "+" image on right has now changed and it shows 3 lines. Click on it to add a child which will automatically be named as "Item 1". In the Type select "Dictionary".

Now expand "Item 1" and add a child element to it, name it as "Title". Type should be "String" and in the Value write "URL".

Add more childs and make the plist file look like this:

Now Click on the arrow against "Item 1" to hide its child elements, click on "Item 1" (not on the arrow) and click on "+" button on right. This should show "Item 2" below "Item 1". Follow the last step correctly else you will end up wondering why I am not able to add a child or a new item at the place I want.

Add more items to make it look like this:

Now build and run your project, go to Settings and find you applications' name there, clicking on it should show a screen like this:

I have only used three types in the preferences. In next post I will be using PSChildPaneSpecifier and add remaining of the elements i.e. PSTitleViewSpecifier, PSSliderSpecifier and PSGroupSpecifier.

Do not forget to mention name of your project "MyTestProject" against "Title", the second field from top in the pList file.

An important thing to remember: "+" button in plist file adds a sibbling and the button with 3 lines adds a child.

If you faced any problem in creating child elements or new Items at the specific place in the plist file, don't worry, you just need to expand/hide elements properly. If you still face any problems, lemme know and I will be more than happy to help.

Topics of next post:

Using PSChildPaneSpecifier and adding rest of the types.
Accessing application preferences from inside your code
Changing preferences from your code.

Also in next post we will be creating a custom TableView and custom Cells to display the application preferences in the form of a SetUp Wizard (all by writing code and not using Interface Builder).

iPhone Development: Navigating from 1 view to other

2009-01-20T06:39:00.000-08:00

In this post I will be making another view and tell you how to navigate from first view to the one we are going to create now. Please refer my previous post as I am going to add code to the same project.

So, this time we will be creating a complete tableView and populate it with some data. We created a button last time "Hit Me". We will add code so that when user presses it, the new view gets displayed.

To start, right click on the classes folder in the left column of your xCode and select add>new file.

Chose the "UIViewController subclass" template and name it as MyTableView. This will add 2 files in the project namely MyTableView.h and MyTableView.m.

Now open MyTableView.h and add the follwing code:

As you can see we have added a UITableView object as a property to this viewController class

Now we should create and add this tableView to the view. So open MyTableViewController.m and add the following code to -(void)loadView method.

Most of the lines in code are self explanatory but I will discuss few of them.

aTableView.delegate = self;

aTableView.dataSource = self;

These lines tell that all the delegate methods of tableView will be implemented in this class only. Similarly the data source is set to self.

self.view = aTableView;

Hmmm..this time we have now added a UI element as a subView as we saw in the last post but instead we are making it the base view it self. I did this because I want the table to cover the whole screen in the application, i.e. I am not going to put any other UI elements so why not make it the base view itself. That ways I dont have to define the frame(coordinates and size of table). I will discuss how to add a table view as a sub view in next post where a table will just be covering a small portion of screen and will have its own scroller.

Now, we have created a tableView and made it as the base view. But what does this table display? We are now going to do the same thing now. For that we need to implement the delegate methods of UITableView. If you remember the interface definition in MyTableView.h was like @interface MyTableView : UIViewController {

In triangular brackets we tell that what are the protocols that this class will be adhering to.

I just hope you have read ObjC properly to understand what I said.

Anyways, in the MyTableView.m file add that following code

Now, three methods, which are automatically called define how the table will look like and what data it will display.

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc] initWithFrame :CGRectZero reuseIdentifier:MyIdentifier]autorelease];

So what is this dequeReusableCell? Why can't we just create a cell by alloc and init? We can do that but there is something you should always keep in mind. This method is called every time you scroll the tableView and a new cell which was not visible earlier gets visible. Imagine you have 20 cells in the table and iPhone can display only 19 on full screen. So the 20th cell will be created by cellForRow method only when it gets visible on the screen. But then the first cell will go out of view ryt? When you scroll back to view the first screen, cellForRow method will be called again to to return a cell to be displayed at first place. That's why we use dequeReusablelCell so that it doesn create a new cell every time.

CAUTION: Do not do anything stupid inside cellForRow method cuz it gets called multiple times.

Finally we have created the view and are ready to use it. What we want is that the new view should appear when we click the "Hit Me" button we created earlier.

So open MyTestProjectViewController.h and modify it to look like this:

We have only defined an instance of MyTableView here, to create it and push it on button click

open MyTestProjectViewControler.m and modify buttonPressed method we created earlier to look like this:

Here we are creating an instance of MyTableView and pushing it over the view which we are looking at now.

If you build this project and run it, you will see the same screen as we saw last time, on pressing the button you will notice that nothing happens. If you chose "navigation based" template when creating the project last time this code would have worked, but since we chose "view based" template its not working. This is the reason why I picked this template so that we can learn how we can programatically do any this we want.

The reason why the new view is not getting pushed is that there is no navigationController attached to the originalView. To do so open MyTestProjectAppDelegate.m and find a method named - (void)applicationDidFinishLaunching:(UIApplication *)application

Add the code to make it look like this

Here we have created a navigation controller and initialized it with the root view as MyTestProjectViewController. So now our original view has a navigation controller and it can push any view over it.

Now if you build and run the project, you can see the new screen containing a tableView on pressing the "Hit Me" button.

In the next post I will be creating a customized view with a table and a few other UI elements on the same page. This will be my favorite post as I could not find this thing using google.

Also I will be creating App Settings in the same project which will work as dataSource for the new view we will be making.

Lemme know if I have been missing something in this post. Till den good luck.

iPhone Development: Creating a Simple View

2009-01-20T05:36:00.000-08:00

In this post I will create a simple view with a label and a button. The Label says Hello World and a Button which says Hit Me, when clicked prints a log statement on console.

I am going to use this project in all my next posts where I will be building complex views, custom table views with custom cells, animations, webViews etc.

The application I am going to build will finally look like this

So open the xCode and create a new project. Chose the template "View Based" and name the project as "MyTestProject"

This will open a new project with may folders appearing on the left side of xCode. Expand the classes folder and select MyTestProjectViewController.h. Add the following code to it:

We have defined a label and a button in the header file. In the implementation file we will create them and finally add it to the baseView. So open MyTestProjectViewController.m and add following code within the implementaion declaration i.e. after

@implementation MyTestProjectViewController.

Most of the lines in code are self explanatory. I will explain some of them:

aLabel = [[UILabel alloc]initWithFrame:CGRectMake(90,100,200,40)];

here you are actually creating a Label and initializing it with a frame. A frame represents the lay out of a UI element. The first 2 arguments of CGRectMake are (x,y) coordinates from where the label will appear. The last 2 arguments are (width,height) size and they define how much space will they be taking on the view.

[aLabel setBackgroundColor:[UIColor whiteColor]];

Yes a label also has a background color. When you define a frame, you are creating a rectangle with its left corner at the (x,y) and right corner at (x+width, y+height). The label (or any UI element) lies inside a frame. The background color of a label is the color with which this rectangle will be filled.

[aButton addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside];

Now in this line we are telling what a button should do on being pressed. addTarget:self tells that the event will be handled by the same class in which it is being declared.

action:@selector(buttonPressed) tells that when the button is touchedUPInside this method should be called automatically.

-(void)buttonPressed

{

NSLog(@"button was pressed");

}

Finally we have implemented the method which will be called automatically when the button is pressed. You can write anything inside this method.

I have not used Interface Builder at all. For me IB is a pain in the as* . If you want to do some serious development you need to learn how every thing is done programatically. In the next post I will be creating another View and add some more Elements to it and we will be adding code for navigating from one view to the other.

Let me know if there is any specific issue.

iPhone Development: Customizing HeaderView

2009-01-20T04:49:00.000-08:00

This post will discuss how we can add a headerView to a UITableView and customize it.

The tableView will finally look like in the above figure. The headerView is the 30 pixel bar just below navigationBar and it reads "Last Synch ..."

How you make a tableView can be found anywhere on Internet, so I ll assume that you know how to make a tableView.

Open the viewController in which you have created your table and add the following code in header file within the interface declaration:

UIView *myHeaderView;

Now open the viewController in which you have created your table and add the following code in implementation file

I have created a method that will create and customize the headerView. You can call this method from viewWillAppear method.

Comments will be appreciated, if you still face any difficulty in creating a headerView, leave a comment and I will be more than happy to address it.

A brief introduction to developement on iPhone

2008-10-10T12:57:00.000-07:00

I joined Pramati a month back and on the very first day I was told to inspect

iPhone developement. Sine then I have been working day and night learning

and applying everything I come across. Just few days to go when I will give

a complete demonstration of my first application on iPhone. Its a mobile

version of Sugar CRM (for those who are unaware of what a CRM is, you can

find more about it at http://www.sugarcrm.com. And btw CRM stands for

Customer Relationship Mangement). So in this article I am going to share

all my experience, difficulties, things that I liked/ not liked with the

developement on iPhone.

First thing that you should know before you start writing applications on iPhone
is Objective-C. As such its' not a difficult language to learn but there are some
specific features that make it more powerfull and some are just enough to make
life as difficult as you can ever imagine.You can find Objective-C tutorials on
http://www.developer.apple.com/iphone.As far as my experience says,
understanding these tutorials is really a heck of a job if you are not familiar with
Object-Oriented Programming. They donot teach you obj-c as other books do
it step by step starting from the very core of basics.So it might be frustating when
you are reading it for the first time (and if you have never developed anything on Mac),
but once you have given it a quick look, try some hand on example codes given on
the developer site and then read it again. It helped me and only after that I realised
the real power obj-c gives you.

In my examples that I will be posting sooner, you will find how even the minor controls
when taken from the compiler to the run-time can make you code so much powerfull.
But as obvius with great power comes great responsibilities. The compiler in such
cases is lame at reporting some of the absolutely basic mistakes we make at times.
An exapmple of such a situation is when you forget to mention data-type of a
parameter expected by a method. obj-c compiler will not even give you a clue of
what wrong is happening.But good news is if you write your code carefully and in a
structured way, it's a beutifull language to work with.

For all my brothers who are also new to this environment, here are some tips for
getting started with iPhone developement

Learn the basics of Object Oriented programming(java if you know is very

good, try having a look at "Run-Time Polymorphism")

Give a quick look at obj-c (tutorials can be found here)

Try playing around with the example code given on developer site of Apple,

write them from scratch, manipulate them, change a few lines and see what happens.

Try reading the concepts from the tutorial once again. It gave me a clearer insight of what exactly they mean to do.

And btw, You need Leopard and XCode to play around with iPhone developement, so get them sooner and have a happy coding and coffee nights :P

if you are facing any problems on iPhone developement, feel free to leave a comment and I 'll be more then happy to fugure it out for you :)