building hybrid apps with xamarin, ryan paul

Ryan PaulDeveloper EvangelistXamarin

Mail: [email protected]: @segphault

Building Hybrid Appswith Xamarin

NATIVEVERSUSHTML5?

It’s not a battle to the death.

Reframing the Debate

It’s about using the right tool for the right job.

Advantages of HTML

Express high-level design concepts with declarative markupTons of control over presentation: gradients, shadows,

transparency, animation, rich textVendor-neutral open standards enable widespread support and

broad portabilityEasy to learn and use—can tap into existing expertiseEase of rapid prototyping lets you get great stuff working quickly

••

•

••

Disadvantages of HTML

Lack of consistency between rendering enginesDifficult to get optimal performance and acceptably responsive user

interfaceLack of native controls means that you can’t match the platform’s

native look and feelNo access to platform-specific functionalityHTML rendering engines confine you to a lowest-common-

denominator user experience

••

•

••

Give them the high-quality native app that they deserve!

Your users expect better.

This is kind of what it’s like for users when amobile developer ships a non-native app:

Advantages of Native DevelopmentAccess the full range of rich device capabilities and

native platform featuresNative controls supplied by the platform are tailored

for ideal performance and benefit from platform-leveloptimizations and hardware accelerationNative code gives you a lot more room for optimization

and parallelizationPerfectly conform with the standard user interface

conventions of the underlying platform

•

•

•

•

Hybrid Advantages

Decide which parts of your appshould be HTML or nativeExpose device capabilities and native

platform features to your HTMLcontentEasy to transition to fully native

application if you reach the limits ofHTML

•

•

•

Share code across platforms: C#, JavaScript, and HTML.Use platform-specific APIs and native user interface controls.

Xamarin for Hybrids

Displaying HTML Content in Native AppsAn HTML view can be a highly effective tool for displaying

rich content in native applicationsIdeal for use in scenarios where you need complex formatting

and want to intersperse graphicsWith responsive design techniques, content can be made to

seamlessly adapt to different screen sizes and orientationsRazor templating engine can be used in native applications to

generate HTML content that incorporates relevant data

•

•

•

•

A simple Pokédex application built with Xamarin.iOS

DEMO: Razordex

Implementing Razordexpublic class Pokemon{ public int number { get; set; } public string name { get; set; } public string primary_type { get; set; } public string secondary_type { get; set; } public string biography { get; set; } public string primary_ability { get; set; } public string secondary_ability { get; set; }}

...

var template = new PokemonHTMLView () { Model = detailItem };webDetailView.LoadHtmlString ( template.GenerateString (), NSBundle.MainBundle.BundleUrl);

@model Pokemon<html><head> <link type="text/css" rel="stylesheet" href="style.css" /></head><body> <div class="container"> <div class="header">Type</div> <table class="data"><tr><td><b>Primary:</b></td><td>@Model.primary_type</td></tr> <tr><td><b>Secondary:</b></td><td>@Model.secondary_type</td></tr> </table> </div> ...

No ferrets were harmed in the makingof this app.

There are several ways to enable interaction between the native partof your application and the HTML view.

Hybrid Communication Techniques

Expose a C# function to JavaScript

<div onclick="Foo.bar('This is a test!')" class="button">Test</div>

class Foo : Java.Lang.Object{...

[Export ("bar")] public void Bar (Java.Lang.String message) { Toast.MakeText (context,"Message called from JavaScript: " + message, ToastLength.Short).Show (); }}

...

WebView web = FindViewById<WebView> (Resource.Id.myWeb);web.Settings.JavaScriptEnabled = true;web.AddJavascriptInterface (new Foo (this), "Foo");web.LoadUrl("file:///android_asset/main.html");

Intercept a Link Handler

<a href="message:This is a test!">Test</a>

private class CustomWebViewClient : WebViewClient{public override bool ShouldOverrideUrlLoading (WebView view, string url) { if (url.StartsWith ("message:")) { var message = Uri.UnescapeDataString(url.Split(new char[] { ':' }, 2)[1]); Toast.MakeText (view.Context,"Message called from JavaScript: " + message, ToastLength.Short).Show (); return true; } else return false; }}

...

WebView web = FindViewById<WebView> (Resource.Id.myWeb);web.SetWebViewClient (new CustomWebViewClient ());web.Settings.JavaScriptEnabled = true;web.LoadUrl("file:///android_asset/main.html");

Call JavaScript from C#

WebView web = FindViewById<WebView> (Resource.Id.myWeb);web.Settings.JavaScriptEnabled = true;web.LoadUrl("file:///android_asset/main.html");

Button button = FindViewById<Button> (Resource.Id.button1);button.Click += (object sender, EventArgs e) => {web.LoadUrl("javascript:document.getElementById('button').innerHTML = 'Hello!'");};

THANK YOU