Creating Mobile Apps With Xamarin.Forms and Visual Studio For Mac Using F#

I have worked through chapters one to nine in Petzold’s Creating Mobile Apps with Xamarin.Forms using Visual Studio For the Mac and F#.  I found a couple of gotchas that might trip up someone doing the same that I thought I could document here.  I am using a Mac Book Pro and Visual Studio Enterprise For Mac 2017.

1) The code samples found on GitHub are in C# with a folder for the F# port – well until chapter nine when he stopped with port.  Since we are in a “Pull Request or STFU” world, I will be adding my samples for chapter 9 and beyond.

Issue #1

When you fire up Visual Studio for Mac and Select File –> New Solution –> Single View App (iOS –> app) and follow the default prompts, you will get a skeleton of a project.  Selecting Main.storyboard bring you to a designer that you can drag and drop controls onto an iPhone application, like a Label.  A problem arises when you try and given the Label a name like “testLabel”

Blog0

Just by setting the name, when you try and run your app, you get this error:

Objective-C exception thrown.  Name: NSUnknownKeyException Reason: [<ViewController 0x7f90f7a11310> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key testLabel.

The problem is that the IDE does not update the code-behind of the Main.Storyboard to reflect the new name.  If you open that file using “Source Code Editor”, you can then rename the id to “testLabel” from “name-outlet-197” and delete the destination attribute. 

Blog01

The project then runs

Issue #2

When you add a new File to an existing solution, in this case “MyPage”,

Screen Shot 2018-06-20 at 6.35.11 AM

 

it shows up alphabetically in the solution explorer

Blog04

If you try and reference that new file in the App.xaml to display it on startup, you get the following error:

Screen Shot 2018-06-20 at 6.37.17 AM

This is because in F#, the ordering of files is important.  MyPage has to be visible to the compiler before App.xaml.  The way to fix this is to open the project items file, in this case Greetings.projitems:

Blog05

Screen Shot 2018-06-20 at 6.39.08 AM

and change the new file (MyPage.fs) location from the default location (the end)

Screen Shot 2018-06-20 at 6.39.34 AM

to above the app.xaml fie

Screen Shot 2018-06-20 at 6.39.58 AM

 

Issue #3

Chapter 9 talks about calling native code on each device and referring to those calls from the forms project.  To achieve this, you need to add an interface to the common project

Blog09

and then refer to it in the common project page

Blog08

and to implement this in the iOS project

Blog07

I had to ask for help on Stack Overflow here.  Note that the “Dependency” attribute is in a module at the end, above the do() function.  I’ll be adding this code to the book’s repository in a bit, but at least this post will help others along.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: