{"id":12259,"date":"2014-07-01T17:05:27","date_gmt":"2014-07-01T21:05:27","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=12259"},"modified":"2014-07-01T17:05:27","modified_gmt":"2014-07-01T21:05:27","slug":"introduction-to-f-with-xamarin-part-ii","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/introduction-to-f-with-xamarin-part-ii\/","title":{"rendered":"Introduction to F# with Xamarin, Part II"},"content":{"rendered":"

\t\t\t\t\"rachel-reese\"<\/a>Rachel Reese is a long-time software engineer and math geek who recently relocated to Nashville, TN to work at Firefly Logic. Rachel is an ASPInsider and an F# MVP. You can catch her at Xamarin Evolve 2014, the largest conference for cross-platform mobile development<\/a>.<\/em><\/p>\n

This blog post is part of our continuing celebration of F# Week at Xamarin! Celebrate by getting your own F# t-shirt<\/a>! Yesterday, Rachel gave us an “Introduction to F# with Xamarin”<\/a>. Today, she takes us through building a task management app with F# and Xamarin.<\/em><\/p>\n

Getting Started with iOS Development<\/strong>\n\"\" Yesterday, we took a look at the benefits of F#<\/a> by building much of the data layer for the F# version of the task-management app Tasky<\/a>. Today, let\u2019s complete that, add a couple of views, and we\u2019ll be up and running with an F# version of Xamarin\u2019s favorite task app!<\/p>\n

In Xamarin Studio, create a new F# iOS Single View Application named “Tasky”. Xamarin Studio will create a solution for us, with two important files:<\/p>\n

1. AppDelegate.fs<\/strong><\/p>\n

    \u2013 This is the heart of the application. The Main module defines an application\u2019s entry point, while the AppDelegate type inherits from UIApplicationDelegate, which provides such application lifecycle events as ApplicationDidFinishLaunching and ApplicationWillTerminate. From AppDelegate, we\u2019ll define which view controller should load first. In this case, because the application is named Tasky, the first view controller that\u2019s called is TaskyViewController.fs.<\/ol>\n

    2. TaskyViewController.fs<\/strong><\/p>\n

      \u2013 This is the project\u2019s first view controller. This is inherited from UIViewController, and the main overridable methods here handle the view lifecycle. For example: ViewDidLoad, DidReceiveMemoryWarning, DidRotate, ViewWillDisappear, etc.<\/ol>\n

      If we run the project at this point, before making any changes, it will load a blank, black screen. Let\u2019s make it do a bit more. We will start by setting up navigation. Open AppDelegate.fs and update the RootViewController to the following:<\/p>\n

      [code langauge=”fsharp”]\nwindow.RootViewController <- new UINavigationController (new TaskyViewController ())\n[\/code]<\/p>\n

      Wrapping the TaskyViewController in a UINavigationController will allow a user to navigate back from the update task screen (once we create it). In other words, that screen will display a back button allowing return to the task list. That finishes off the changes we\u2019ll need to make for Tasky in AppDelegate.fs.<\/p>\n

      Next, let\u2019s work on the main view controller. Open TaskyViewController.fs, and we\u2019ll add an event handler in ViewDidLoad, for adding a new task from a \u201c+\u201d button on the navigation bar.<\/p>\n

      [code langauge=”fsharp”]\nlet addNewTask =\n new EventHandler (fun sender eventargs ->\n this.NavigationController.PushViewController (new AddTaskViewController (), true)\n )\nthis.NavigationItem.SetRightBarButtonItem (new UIBarButtonItem (UIBarButtonSystemIcon.Add, addNewTask), false)\n[\/code]<\/p>\n

      At this point, we\u2019ll also need to create a nearly empty AddTaskViewController.fs, inherited from UIViewController, like so:<\/p>\n

      [code langauge=”fsharp”]\ntype AddTaskViewController () =\n inherit UIViewController ()\n override this.ViewDidLoad () =\n base.ViewDidLoad ()\n[\/code]<\/p>\n

      Our final project structure will look like this:<\/p>\n

      \"2014-07-01_1723\"<\/a>Creating and Populating with Data<\/strong><\/p>\n

      Now that the navigation is set up, let\u2019s build the task list itself. First, create the UITableView:<\/p>\n

      \nlet table <- new UITableView ()\n<\/pre>\n
      Next, within the ViewDidLoad method, set the view\u2019s frame to be the full screen, and add the table to the view.<\/p>\n
      \ntable.Frame <- this.View.Bounds\nthis.View.Add table\n<\/pre>\n
      Displaying the table was the easy part. Next, we\u2019ll need to fill the table with data. To help do this, we need to create a UITableViewSource<\/a>. In our case, we take in the list of tasks that are returned from the SQLite Type Provider, as well as our navigation controller. We will need to include the navigation controller as a parameter, so that we can navigate when the user clicks a row in the table. We also copy the task list locally, and set the cell identifier to a unique name for this cell type. It\u2019s possible to load a mix of different cell types (with completely varied layouts) into an iOS table, and this identifies which one is being loaded.<\/p>\n
      \ntype TaskDataSource(tasksource: task list, navigation: UINavigationController) =\n    inherit UITableViewSource ()\n    let tasks = new List<task> (taskSource)\n    member x.cellIDentifier = "TaskCell"\n<\/pre>\n
      Once we\u2019ve defined those, there are two methods we absolutely must override in TaskDataSource: RowsInSection, and GetCell. RowsInSection returns the total number of rows that the table contains; GetCell dequeues or creates a new UITableViewCell, then populates that cell with the correct data for that row. [For more information on dequeuing, see the \u201cNote on Cell Reuse\u201d in the Xamarin docs, above.]<\/p>\n
      \noverride x.RowsInSection (view, section) = tasks.Count\n\noverride x.GetCell (view, indexPath) =\n    let t = tasks.[indexPath.Item]\n    let cell =\n        let newCell = view.DequeueReusableCell x.cellIdentifier\n        match newCell with\n            | null -> new UITableViewCell (UITableViewCellStyle.Default, x.cellIdentifier)\n            | _ -> newCell\n    cell.TextLabel.Text <- t.Description\n    cell\n<\/pre>\n
      With these added, let\u2019s jump back to the TaskyViewController type. We need to override ViewWillAppear, to set the newly created TaskDataSource to be the UITableView source. We also must reload the data each time the view appears. Using the GetIncompleteTasks method we created in the type providers section, we should now be able to run Tasky and load the tasks.<\/p>\n
      \noverride this.ViewWillAppear animated =\n    base.ViewWillAppear animated\n\n    table.Source <- new TaskDataSource (Data.GetIncompleteTasks (), this.NavigationController)\n    table.ReloadData ()\n<\/pre>\n
      This will give us the basic set up to load a table of tasks, but we aren\u2019t yet able to navigate to a detail page upon selecting a row, nor are we able to delete with a swipe in from the right.<\/p>\n
      Swipe to Delete<\/strong>\nAdding the ability to swipe delete is only a matter of adding two more overrides into the TaskDataSource type.<\/p>\n