Tuesday, March 2, 2010

UIAlertView with UITextField (AlertView with TextBoxes)

We can have custom AlertView with TextFields (TextBoxes) so user can enter the data into it.

Things to consider are:

1) Declare TextField in Header file; this helps in fetching the value of TextField in other functions.

2) Allocate & Initialize TextField; and add it as SubView to AlertView object.

3) use CGAffineTransform to move the AlertView object to top so that virtual keyboard, don't overwrite it.

4) You can fetch the values of TextField in the function

- (void) alertView:(UIAlertView *)alert clickedButtonAtIndex:(NSInteger)buttonIndex


Business Scenario: This type of functionality is used to prompt user for entering credentials like logging details:


//Create a custome UIAlertView with TextFields & Buttons

UIAlertView *myAlertView = [[UIAlertView alloc] initWithTitle:@"Twitter Login" message:@"\n\n\n\n" delegate:self cancelButtonTitle:@"Cancel" otherButtonTitles:@"Sign In",nil];

UILabel *lblUserName = [[UILabel alloc] initWithFrame:CGRectMake(20, 55, 65, 21)];

lblUserName.tag =2;

//lblUserName.backgroundColor = [UIColor darkGrayColor];

lblUserName.font = [UIFont systemFontOfSize:12.0];

lblUserName.text = @"User Name:";

[myAlertView addSubview:lblUserName];

if(txtTwitterUserName == nil)

txtTwitterUserName = [[UITextField alloc] initWithFrame:CGRectMake(89, 50, 160, 30)];

//txtUserName.tag = 3;

txtTwitterUserName.borderStyle = UITextBorderStyleBezel;

txtTwitterUserName.textColor = [UIColor whiteColor];

txtTwitterUserName.font = [UIFont systemFontOfSize:12.0];

txtTwitterUserName.placeholder = @"Twitter User ID";

[myAlertView addSubview:txtTwitterUserName];

UILabel *lblPassword = [[UILabel alloc] initWithFrame:CGRectMake(20, 95, 65, 21)];

lblPassword.tag = 4;

//lblPassword.backgroundColor = [UIColor darkGrayColor];

lblPassword.font = [UIFont systemFontOfSize:12.0];

lblPassword.text = @"Password:";

[myAlertView addSubview:lblPassword];

if(txtTwitterPassword == nil)

txtTwitterPassword = [[UITextField alloc] initWithFrame:CGRectMake(89, 90, 160, 30)];

txtTwitterPassword.borderStyle = UITextBorderStyleBezel;

txtTwitterPassword.textColor = [UIColor whiteColor];

txtTwitterPassword.font = [UIFont systemFontOfSize:12.0];

txtTwitterPassword.secureTextEntry = TRUE;

txtTwitterPassword.placeholder = @"Password";

[myAlertView addSubview:txtTwitterPassword];

//Transform to move AlertView up to show keyboard

CGAffineTransform myTransform = CGAffineTransformMakeTranslation(0.0, 130.0);

[myAlertView setTransform:myTransform];

[myAlertView show];

[myAlertView release];



Other method to read which button was pressed.

- (void) alertView:(UIAlertView *)alert clickedButtonAtIndex:(NSInteger)buttonIndex

{

NSLog(@"%d", (int) buttonIndex);

if (buttonIndex == 1)

{ // Sign-In pushed

[MGTwitterEngine setUsername:txtTwitterUserName.text password:txtTwitterPassword.text remember:YES];

NSString *messageBody = @"This is 2nd March: ";

_twitter = [[MGTwitterEngine alloc] initWithDelegate:self];

NSString* mgTwitterConnectionID = nil;

mgTwitterConnectionID = [_twitter sendUpdate:messageBody];

}

else

{

// Cancel pushed

}

}