building hybrid apps with xamarin, ryan paul
TRANSCRIPT
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!'");};
Q&A
THANK YOU