Showing posts with label monotouch. Show all posts
Showing posts with label monotouch. Show all posts

Sunday, September 29, 2013

How to Add Barcode Scanning to your Web App using Xamarin

Recently I had a client who wanted to add barcode scanning capabilities to their web app. Their web app was already responsive thanks to Bootstrap but there isn't a convenient way to scan a bar code from mobile Safari or Chrome.

This turned out to be fairly trivial thanks to Xamarin and two components in their Component Store:
JsBridge - eases Native to Javascript communication
ZXing.Net.Mobile - handles the barcode scanning

Here are some screenshots of what the web app looks like when accessed via the iOS app:



One of the requirements of the bar code scanning was to not show the Scan button if the user is not using the native app. To do this I customize the UserAgent of the UIWebView and then do UserAgent sniffing on the server side to hide or show the Scan button.

You'll notice if you view the web app in a browser the Scan button is not displayed:
http://xamarinbarcodesample.apphb.com/
To enable this functionality in the iOS app we append a XamarinBarcodeSampleApp string to the default UserAgent of the UIWebView:

Then in the web app we do UserAgent sniffing for this string.

To wire up the Scan button we take advantage of JsBridge. The first thing we do is register the mt.js library. Secondly we listen for the scanComplete event which is triggered on the iOS app side. Thirdly we handle the Scan button click event and let the iOS side know about it by firing the scanBarcode event.

On the iOS side we need to enable JsBridge, then listen for the scanBarcode event. When scanBarcode is fired we display the ZXing.Net.Mobile scanner. If the user successfully scans a barcode we fire the scanComplete event and pass the barcode string as an event parameter.

The native / hybrid iOS app source code can be downloaded here: 
https://github.com/crdeutsch/Xamarin.iOS.BarcodeSample

The web app source code is here:
https://github.com/crdeutsch/Xamarin.Web.BarcodeSample

Final thoughts:

Xamarin tools are flexible enough to handle the requirements of the Web Application developer dipping their toes into native development. 

In fact the Xamarin tools work so nicely with UIWebView based web apps that I'd urge any developer looking at PhoneGap or Titanium to add Xamarin to your review list and avoid the limitations you may run into. 

For instance, I built a series of HTML5 based game for a client that play audio via Flash in a desktop browser. To make them work on an iPad I used Titanium to martial the audio playback to native code. At the time I figured Titanium was the best solution since the bulk of the code was already Javascript. I eventually ran into limitations with Titanium when I wanted to detect custom gestures and realized they don't have a 1 to 1 mapping with the iOS API like Xamarin does. I plan on porting this app to Xamarin in the near future to take advantage of more advanced native iOS functionality.

In a future blog post I will demonstrate how to use JsBridge and another library I wrote to martial audio calls to the native side like I did for those HTML5 games.

DISCLAIMER: I've been work full time for Xamarin for about 3 weeks as a web developer. The following experiences and opinions were developed during my 3 years as a freelance consultant.

Tuesday, May 1, 2012

MonoTouch JsBridge - Communicate with the UIWebView

Today I'm open sourcing JsBridge for MonoTouch which allows for bidirectional communication between the javascript in your UIWebViews and your native C# code in your MonoTouch app. Go directly to GitHub for the documentation on how to use it.

This project was inspired by doing a project using Appcelerator's Titanium. In fact the javascript used in JsBridge was taken directly from that project, so if you're used to using Titanium you should be right at home using JsBridge.

At this time it requires MonoTouch 5.3.3, which as of 5/1/2012 is in Alpha, because JsBridge needs to register a custom url protocol using NSUrlProtocol.

I'm not 100% satisfied with the implementation of the event listeners on the native side, so I'm open to suggestions on how to make it better. Ideally some day the Xamarin team will implement something like this in a future version. ;)

I've already submitted my first app to use it the iOS AppStore and it relies heavily on bidirectional communication between javascript and native. The app is a remote control for Rdio's new UI. A nicely executed feature by Rdio (even if it came way after the chrome extension remote I made for their first UI ;) ), but unfortunately it doesn't work on iOS partially due to the Rdio servers not supporting the Websockets protocol that the UIWebView has. Using JsBridge I was able to implement the WebSocket connection on the native side and override the Rdio javascript calls that use WebSockets and pass them to the native side and vice versa. I'm quite pleased with the results so far. ;)

Wednesday, February 29, 2012

MonoTouch.Dialog UIPicker

In iOS a UIPicker looks like this:

I'm working on an iPhone application that's built using MonoTouch.Dialog and after a full day of trying to get the MonoTouch.Dialog compatible Picker in ClanceyLib to work, I've decided to package up my work and release it on GitHub.

The main issues with ClanceyLib is that it requires a heavily modified and out of date version of MonoTouch.Dialog. If you try to compile it with the built-in version of MonoTouch.Dialog you'll get the following two errors:

/Users/guivho/Mono/ClanceyLib/ClanceysLib/MT.D/ButtonElement.cs(49,49):
Error CS0115: `ClanceysLib.ButtonElement.GetCell(MonoTouch.Dialog.DialogViewController,
MonoTouch.UIKit.UITableView)' is marked as an override but no suitable
method found to override (CS0115) (ClanceysLib)


/Users/guivho/Mono/ClanceyLib/ClanceysLib/MT.D/ComboBoxElement.cs(49,49):
Error CS0115: `ClanceysLib.ComboBoxElement.GetCell(MonoTouch.Dialog.DialogViewController,
MonoTouch.UIKit.UITableView)' is marked as an override but no suitable
method found to override (CS0115) (ClanceysLib)


Ripping out the elements you need from ClanceyLib wasn't as easy as I hoped on the first try but I now have it working along with some other improvements:
  • Updated it to hide the keyboard or picker when selecting different cells to edit.
  • Changed so the Items in the Picker list are UIView's for greater customization.
  • Actually has a sample of how to use it. ;)
UPDATE 3/1/2012: It works out of the box with the version of MonoTouch.Dialog that is now packaged with MonoTouch. But, it will not dismiss the picker when selecting a different cell. To enable that feature it requires a custom version of MonoTouch.Dialog and you'll need to comment in 3 lines of code in PickerElement.cs.

I sent a pull request to get my minor change to MonoTouch.Dialog included in the core. If/when it's pulled I will update PickerElement.cs to take advantage of it and the dependency on the custom version of MonoTouch.Dialog will be no more. ;)

Saturday, May 29, 2010

MonoTouch.Dialog: Improved List Documents!

After completing my last example on listing Documents using MonoTouch, Miguel de Icaza pointed out that MonoTouch.Dialog could make it easier. He was right and below are the results.

Two ways to start off, you can add an "IPhone Window-based Project" and then add a "UINavigationController" to the "MainWindow.xib", or do the route I took and create a "iPhone Navigation based Project" and just delete the extra "RootViewController.xib" we won't be needing.



If you haven't already, download MonoTouch.Dialog (use the "Download Source" link at the top) and then add a reference to it in your project and also be sure to add a "using MonoTouch.Dialog" at the top of "Main.cs"

Below is all the code I need to place in Main.cs to do exactly what my last blog post did which used a TON of extra auto generated code. The code I added starts under the "EDITED" comment.

public class Application
 {
  static void Main (string[] args)
  {
   UIApplication.Main (args);
  }
 }

 // The name AppDelegate is referenced in the MainWindow.xib file.
 public partial class AppDelegate : UIApplicationDelegate
 {
  // This method is invoked when the application has loaded its UI and its ready to run
  public override bool FinishedLaunching (UIApplication app, NSDictionary options)
  {
   
   window.AddSubview (navigationController.View);

   
   //EDITED: this is it!!! Takes care of generating the whole Table View!
   var menu = new RootElement ("Documents"){
    new Section("") {
     from ff in System.IO.Directory.GetFiles(Environment.GetFolderPath (Environment.SpecialFolder.Personal)).ToList()
      select (Element) new StringElement (new System.IO.FileInfo(ff).Name)
    }  
   };
   var dv = new DialogViewController (menu) {
    Autorotate = true
   };
   navigationController.PushViewController (dv, true);    
   dv.Style = UITableViewStyle.Plain;
   
   
   window.MakeKeyAndVisible ();
   
   return true;
  }

  // This method is required in iPhoneOS 3.0
  public override void OnActivated (UIApplication application)
  {
  }
  
 }

You'll need to read my last blog post if you need to add some files to the "Documents" directory (there aren't any by default).

Here are the results or those 12 lines of code (yes, the last sample only had 5 lines added but these extra 7 lines eliminated LOTS of auto generated code and is much simpler):



Amazing! Miguel de Icaza and the Mono/MonoTouch crew didn't stop at the awesome achievement of bringing C# and the .NET Framework to IPhone development; with MonoTouch.Dialog they've outright made Apple and their ancient Object-C language embarrassing. If you can't see the ROI on the $400 a MonoTouch license costs, then your time isn't worth money.

Be sure to visit the MonoTouch.Dialog page on Github and Miguel's blog post on it for more amazingness!

MonoTouch - List Documents

Use the following MonoTouch code to easily list all the files in your Applications Documents folder. First create a regular IPhone Navigation based Project.


Open "RootViewController.xib.cs" and add the following code. I only added five lines of code. I've put a "//EDITED:" comment in front of each line that I added. Make sure to add a "using System.Linq" to the top of the file as well.


partial class RootViewController : UITableViewController
 {
   //EDITED: list to hold file names.
  private System.Collections.Generic.List<string> dataItems = null;

  public RootViewController (IntPtr handle) : base(handle)
  {
  }

  public override void ViewDidLoad ()
  {
   base.ViewDidLoad ();
   //Show an edit button
   //NavigationItem.RightBarButtonItem = EditButtonItem;
   
     //EDITED: build list of files.
   string path = Environment.GetFolderPath (Environment.SpecialFolder.Personal);
     dataItems = System.IO.Directory.GetFiles(path).ToList();
   
   this.TableView.Source = new DataSource (this);
  }

  /*
  public override void ViewWillAppear (bool animated)
  {
   base.ViewWillAppear (animated);
  }
  */
  /*
  public override void ViewDidAppear (bool animated)
  {
   base.ViewDidAppear (animated);
  }
  */
  /*
  public override void ViewWillDisappear (bool animated)
  {
   base.ViewWillDisappear (animated);
  }
  */
  /*
  public override void ViewDidDisappear (bool animated)
  {
   base.ViewDidDisappear (animated);
  }
  */

  /*
  // Override to allow orientations other than the default portrait orientation
  public override bool ShouldAutorotateToInterfaceOrientation (UIInterfaceOrientation toInterfaceOrientation)
  {
   //return true for supported orientations
   return (InterfaceOrientation == UIInterfaceOrientation.Portrait);
  }
  */

  public override void DidReceiveMemoryWarning ()
  {
   // Releases the view if it doesn't have a superview.
   base.DidReceiveMemoryWarning ();
   
   // Release any cached data, images, etc that aren't in use.
  }

  public override void ViewDidUnload ()
  {
   // Release anything that can be recreated in viewDidLoad or on demand.
   // e.g. this.myOutlet = null;
   
   base.ViewDidUnload ();
  }

  class DataSource : UITableViewSource
  {
   RootViewController controller;

   public DataSource (RootViewController controller)
   {
    this.controller = controller;
   }

   public override int NumberOfSections (UITableView tableView)
   {
    return 1;
   }

   // Customize the number of rows in the table view
   public override int RowsInSection (UITableView tableview, int section)
   {
    //EDITED: return count of files.
    return controller.dataItems.Count();
   }

   // Customize the appearance of table view cells.
   public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
   {
    string cellIdentifier = "Cell";
    var cell = tableView.DequeueReusableCell (cellIdentifier);
    if (cell == null) {
     cell = new UITableViewCell (UITableViewCellStyle.Default, cellIdentifier);
    }
    
    // EDITED: Configure the cell.
       cell.TextLabel.Text = (new System.IO.FileInfo(controller.dataItems[indexPath.Row])).Name;
   
    return cell;
   }

   /*
   // Override to support conditional editing of the table view.
   public override bool CanEditRow (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
   {
    // Return false if you do not want the specified item to be editable.
    return true;
   }
   */
   /*
   // Override to support editing the table view.
   public override void CommitEditingStyle (UITableView tableView, UITableViewCellEditingStyle editingStyle, MonoTouch.Foundation.NSIndexPath indexPath)
   {
    if (editingStyle == UITableViewCellEditingStyle.Delete) {
     controller.TableView.DeleteRows (new NSIndexPath[] { indexPath }, UITableViewRowAnimation.Fade);
    } else if (editingStyle == UITableViewCellEditingStyle.Insert) {
     // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view.
    }
   }
   */
   /*
   // Override to support rearranging the table view.
   public override void MoveRow (UITableView tableView, NSIndexPath sourceIndexPath, NSIndexPath destinationIndexPath)
   {
   }
   */
   /*
   // Override to support conditional rearranging of the table view.
   public override bool CanMoveRow (UITableView tableView, NSIndexPath indexPath)
   {
    // Return false if you do not want the item to be re-orderable.
    return true;
   }
   */

   // Override to support row selection in the table view.
   public override void RowSelected (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
   {
    // Navigation logic may go here -- for example, create and push another view controller.
    // var anotherViewController = new AnotherViewController ("AnotherView", null);
    //controller.NavigationController.PushViewController (anotherViewController, true);
   }
  }
 }

By default your app won't have any files in the documents folder but you can manually add some. In you user accounts "~/Library/Application Support/IPhone Simulator/" directory there will be multiple folders for each version of IPhone OS you can test. Pick the one you'll be test and put some files in the "Documents" folder.


Once that is done you can run your application in the simulator and it should give you the list of files you added to the "Documents" folder. Pretty simple huh?



I'll be using this code in a prototype that uploads Cycorder recordings from my IPhone 3G (I have a separate app for 3GS to use the built-in video recording) to Qwikcast, my company's WebCast presentation software. I'll be using SSH to create a symbolic link so Cycorder saves it's recordings to my applications Documents folder. Then I'll be doing a HTTP Upload to the Qwikcast web server where the video will automatically be encoded, published to a streaming media server, and then available on a "catalog" page for viewing (iPad and iPhone compatible of course) !