Book App – Persisting with NSCoding and Introducing IGGridView (Xamarin.iOS-Monotouch)

Darrell Kress / Tuesday, October 22, 2013

So for V0.2 we made some changes on how the application works before new development.  For the delegates the code was changed to use events to report out various results.   These can be seen in SimpleCaptureMetadataOutputObjectsDelegate and CoverUrlConnectionDelegate.   Aside from that, the project was restructured slightly but that is just a cosmetic change.

Onto the new development.

Persistence of DataModel

The first version of the app was just a scanner with a web look up and that was fine, but to make the application more useful we want to persist the information we get back.   So the main storage data object (Book.cs) has been modified to implement the NSCoding methods.  This was done in a manner consistent with an earlier post on NSCoding .

public Book (NSCoder coder)
   NSString isbn = (NSString)coder.DecodeObject (@"isbn");
   if (isbn != null)
       this.ISBN = isbn.ToString ();

public override void EncodeTo (NSCoder coder)
   if (this.ISBN != null)
      coder.Encode( new NSString (this.ISBN), @"isbn");

The code will ultimately be run on iOS so if we want to use strings in Xamarin.iOS, we need to wrap the string primitive in an NSString object for the persistence round trip.

With this interface / prototype implemented, we can use NSKeyedArchiver and NSKeyedUnarchiver to persist our underlying collection to the device.

Introduction of IGGridView 

Now that we can build data, we need a way to show it. So the project also adds the IGGridView, which is located in the IG.dll. (Download Trial Installer) We add the IGGridView and add columns to show the text and the image of the data object.

isbnColumn.HeaderText = "ISBN";
isbnColumn.Width = IGColumnWidth.CreateNumericColumnWidth(200);
_helper.ColumnDefinitions.Add (isbnColumn);

IGGridViewImageColumnDefinition imageColumn = new IGGridViewImageColumnDefinition ("CoverImage",IGGridViewImageColumnDefinitionPropertyType.IGGridViewImageColumnDefinitionPropertyTypeImage);
imageColumn.Width = IGColumnWidth.CreateNumericColumnWidth(200);
_helper.ColumnDefinitions.Add (imageColumn);

When a book is scanned the image and data is saved on the device. The IGGridView comes into view, it will load the data from the device. works but the data is a little thin. We could also work on the UI a bit to make the book display better. I also think it would be nice if all my devices shared the data, so I could scan with any iOS device and see the results on another.

So I think the next iteration would try to include:

1) A better UI. The one I have now is utilitarian, fine for debugging but can be nicer.

2) Sharing data between devices via cloud storage

3) Maybe I can find more data to make the data more substantial.

So please download the in process project.(Xamarin.iOS / C#)

Articles in this series

1) Using the iOS7 BarCode Scanner - Book App (Xamarin.iOS-Monotouch)

2) Book App – Persisting with NSCoding and Introducing IGGridView (Xamarin.iOS-Monotouch)

By Darrell Kress