MONOTOUCH open a viewcontroller on tableview cell is clicked - ios

Question

I Have the following viewcontroller with a tableview and a custom cell:
using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
using System.Linq;
using System.Threading;
using System.Data;
using System.IO;
using Mono.Data.Sqlite;
using System.Collections.Generic;
using Zurfers.Mobile.Core;
using AlexTouch.MBProgressHUD;
using System.Collections;
namespace Zurfers.Mobile.iOS
{
public partial class iPhoneHotelSearchViewController : UIViewController
{
MBProgressHUD hud;
public string Destination {
get;
set;
}
public DateTime CheckInDate {
get;
set;
}
public DateTime CheckOutDate {
get;
set;
}
public int Rooms {
get;
set;
}
public iPhoneHotelSearchViewController (IntPtr handle) : base (handle)
{
}
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
hud = new MBProgressHUD(this.View);
hud.Mode = MBProgressHUDMode.Indeterminate;
hud.LabelText = "Loading...";
hud.DetailsLabelText = "Searching Hotel";
this.View.AddSubview(hud);
hud.Show(true);
}
public override void ViewDidAppear (bool animated) {
base.ViewDidAppear (animated);
SearchHotel ();
}
public void SearchHotel (){
Hotel hotel = new Hotel();
var distribution = new HotelDistribution[]{new HotelDistribution(){ Adults = 1, Children = 0, ChildrenAges = new int[0]} };
var items = hotel.SearchHotels(Convert.ToDateTime("2013-08-08"),Convert.ToDateTime("2013-09-09 "),"(MIA)", distribution,"","","",0);
List<DtoHotelinformation> data = new List<DtoHotelinformation>();
foreach (var item in items)
{
DtoHotelinformation DtoHotelinformation = new DtoHotelinformation();
DtoHotelinformation.code = item.Code.ToString();
DtoHotelinformation.price = item.Price.ToString();
DtoHotelinformation.title = item.Name.ToString().ToTitleCase();
DtoHotelinformation.subtitle = item.Address.ToString();
DtoHotelinformation.rating = item.Rating.ToString();
DtoHotelinformation.imageUlr = item.ImageUrl;
data.Add(DtoHotelinformation);
}
hud.Hide(true);
hud.RemoveFromSuperview();
HotelSearchTable.Source = new HotelTableSource(data.ToArray());
HotelSearchTable.ReloadData();
}
partial void GoBack (MonoTouch.Foundation.NSObject sender)
{
DismissViewController(true, null);
}
}
}
Now the table source
using System;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
namespace Zurfers.Mobile.iOS
{
public class HotelTableSource : UITableViewSource
{
DtoHotelinformation[] tableItems;
NSString cellIdentifier = new NSString("TableCell");
public HotelTableSource (DtoHotelinformation[] items)
{
tableItems = items;
}
public override int RowsInSection (UITableView tableview, int section)
{
return tableItems.Length;
}
public override void RowSelected (UITableView tableView, NSIndexPath indexPath)
{
//WHAT TO DO HERE
tableView.DeselectRow (indexPath, true); // normal iOS behaviour is to remove the blue highlight
}
public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
{
CustomCell cell = tableView.DequeueReusableCell(cellIdentifier) as CustomCell;
if (cell == null)
cell = new CustomCell(cellIdentifier);
cell.UpdateCell(tableItems[indexPath.Row].title, tableItems[indexPath.Row].subtitle, tableItems[indexPath.Row].price,
tableItems[indexPath.Row].imageUlr, tableItems[indexPath.Row].rating );
return cell;
}
public override float GetHeightForRow(UITableView tableView, NSIndexPath indexPath)
{
return 70;
}
}
}
Finally the customcell code:
using System;
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
using MonoTouch.Dialog.Utilities;
namespace Zurfers.Mobile.iOS
{
public class CustomCell : UITableViewCell, IImageUpdated
{
UILabel headingLabel, subheadingLabel, priceLabel;
UIImageView imageService;
UIImageView star, star2, star3, star4, star5;
public CustomCell (NSString cellId) : base (UITableViewCellStyle.Default, cellId)
{
imageService = new UIImageView();
star = new UIImageView();
star2 = new UIImageView();
star3 = new UIImageView();
star4 = new UIImageView();
star5 = new UIImageView();
headingLabel = new UILabel(){
Font = UIFont.FromName("Verdana-Bold", 14f),
BackgroundColor = UIColor.Clear,
TextColor = UIColor.FromRGB(241, 241, 211)
};
subheadingLabel = new UILabel(){
Font = UIFont.FromName("Verdana-Bold", 8f),
TextColor = UIColor.FromRGB(255, 255, 255),
BackgroundColor = UIColor.Clear
};
priceLabel = new UILabel(){
Font = UIFont.FromName("Verdana", 14f),
TextColor = UIColor.FromRGB(241, 241, 211),
BackgroundColor = UIColor.Clear
};
AddSubview(imageService);
AddSubview(headingLabel);
AddSubview(subheadingLabel);
AddSubview(priceLabel);
AddSubview(star);
AddSubview(star2);
AddSubview(star3);
AddSubview(star4);
AddSubview(star5);
}
public void UpdateCell (string title, string subtitle, string price, string imageUlr, string rating )
{
if (imageUlr != null) {
var u = new Uri(imageUlr);
ImageLoader MyLoader= new ImageLoader(50,50);
imageService.Image = MyLoader.RequestImage(u,this);
} else {
imageService.Image = UIImage.FromFile("generic_no_image_tiny.jpg");
}
headingLabel.Text = title;
subheadingLabel.Text = subtitle;
if (subtitle.Length > 40) {
subheadingLabel.LineBreakMode = UILineBreakMode.WordWrap;
subheadingLabel.Lines = 0;
}
switch (rating) {
case "T":
star.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star2.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
break;
case "S":
star.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star2.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star3.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
break;
case "F":
star.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star2.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star3.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star4.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
break;
case "L":
star.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star2.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star3.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star4.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
star5.Image = UIImage.FromFile("ZurfersMovil-Stars.png");
break;
}
priceLabel.Text = "USD " + price;
priceLabel.Font = UIFont.BoldSystemFontOfSize (16);
}
public void UpdatedImage (Uri uri)
{
imageService.Image = ImageLoader.DefaultRequestImage(uri, this);
}
public override void LayoutSubviews ()
{
base.LayoutSubviews ();
imageService.Frame = new RectangleF(10, 10, 50, 33);
headingLabel.Frame = new RectangleF(70, 4, 240, 25);
subheadingLabel.Frame = new RectangleF(70, 25, 240, 20);
priceLabel.Frame = new RectangleF(220, 45, 100, 20);
star.Frame = new RectangleF(70, 45, 15, 15);
star2.Frame = new RectangleF(85, 45, 15, 15);
star3.Frame = new RectangleF(100, 45, 15, 15);
star4.Frame = new RectangleF(115, 45, 15, 15);
star5.Frame = new RectangleF(130, 45, 15, 15);
}
}
}
I want to open another viewcontroller (iPhoneHotelDetailViewController) when the user touch a cell of the table view. But I don not have any idea of how to do this.
Could you help me please.
Thanks in advance for your help.

Answer 1

Generally, you want a NavigationController to be the "top" element in your app, wrapping all the other controllers.
In your AppDelegate, create a NavigationController, and make it the root of your application.
Then create an instance of your Search controller and push it onto the NavigationController.
Finally, add a NavigationController property to the constructor of your TableSource.
NavigationController nav;
public HotelTableSource (DtoHotelinformation[] items, NavigationController nav)
{
this.nav = nav;
tableItems = items;
}
When you create your TableSource, pass the NavigationController reference in. You can do this because all ViewControllers have a property that points to their NavigationController, if they are contained within one.
HotelSearchTable.Source = new HotelTableSource(data.ToArray(), this.NavigationController);
Finally, in your RowSelected, create an instance of the new ViewController you want to display:
public override void RowSelected (UITableView tableView, NSIndexPath indexPath)
{
//WHAT TO DO HERE
MyDetailController myDetail = new MyDetailController();
nav.PushViewController(myDetail, true);
tableView.DeselectRow (indexPath, true); // normal iOS behaviour is to remove the blue highlight
}

Answer 2

I think that link to UINavigationController (UI component) in UITableViewSource is a bit weird. I recommend to use event-based approach:
Declare event in UITableViewSource and call it on row selection:
public event Action<int> OnRowSelect;
...
public override void RowSelected (UITableView tableView, NSIndexPath indexPath)
{
tableView.DeselectRow (indexPath, true); // normal iOS behaviour is to remove the blue highlight
if (OnRowSelect != null) {
OnRowSelect(indexPath.Row);
}
}
Then, handle event on UIViewController - push new UIViewController:
var source = data.ToArray();
source.OnRowSelect += HandleOnRowSelect;
HotelSearchTable.Source = new HotelTableSource();
HotelSearchTable.ReloadData();
...
void HandleOnRowSelect(int index)
{
var data = items[index];
// Pass data to new view controller and push it
}
Tip to avoid memory leaks: don't forget to unsubscribe from OnRowSelect when you Pop this UIViewController or making new UITableViewSource instance. I.e:
Declare source in as class member;
Unsubscribe from it's event in, for example, ViewWillDisappear:
source.OnRowSelect -= HandleOnRowSelect;

Answer 3

If you are using StoryBord there is a very easy way to do this. You would then pass the data whit in the PrepareForSegue method like this.
public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
base.PrepareForSegue (segue, sender);
NSIndexPath indexPatch = tableView.IndexPathForSelectedRow;
if (segue.Identifier.Equals ("showHotelDetail")) {
var vc = segue.DestinationViewController as iPhoneHotelDetailViewController;
if (vc != null) {
//Pass some date to the iPhoneHotelDetailViewController if needed.
vc.hotelName = this.tableItems [indexPatch.Row].hotelName;
}
}
}
In your StoryBoard connect the customCell with the iPhoneHotelDetailViewController and call the segue "showHotelDetail" for example.