Building hybrid apps with Xamarin, Ryan Paul

5,215 views
4,616 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,215
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
86
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building hybrid apps with Xamarin, Ryan Paul

  1. 1. Ryan PaulDeveloper EvangelistXamarinMail: ryan@xamarin.comTwitter: @segphaultBuilding Hybrid Appswith Xamarin
  2. 2. NATIVEVERSUSHTML5?
  3. 3. It’s not a battle to the death.Reframing the DebateIt’s about using the right tool for the right job.
  4. 4. Advantages of HTMLExpress high-level design concepts with declarative markupTons of control over presentation: gradients, shadows,transparency, animation, rich textVendor-neutral open standards enable widespread support andbroad portabilityEasy to learn and use—can tap into existing expertiseEase of rapid prototyping lets you get great stuff working quickly•••••
  5. 5. Disadvantages of HTMLLack of consistency between rendering enginesDifficult to get optimal performance and acceptably responsive userinterfaceLack of native controls means that you can’t match the platform’snative look and feelNo access to platform-specific functionalityHTML rendering engines confine you to a lowest-common-denominator user experience•••••
  6. 6. 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:
  7. 7. Advantages of Native DevelopmentAccess the full range of rich device capabilities andnative platform featuresNative controls supplied by the platform are tailoredfor ideal performance and benefit from platform-leveloptimizations and hardware accelerationNative code gives you a lot more room for optimizationand parallelizationPerfectly conform with the standard user interfaceconventions of the underlying platform••••
  8. 8. Hybrid AdvantagesDecide which parts of your appshould be HTML or nativeExpose device capabilities and nativeplatform features to your HTMLcontentEasy to transition to fully nativeapplication if you reach the limits ofHTML•••
  9. 9. Share code across platforms: C#, JavaScript, and HTML.Use platform-specific APIs and native user interface controls.Xamarin for Hybrids
  10. 10. Displaying HTML Content in Native AppsAn HTML view can be a highly effective tool for displayingrich content in native applicationsIdeal for use in scenarios where you need complex formattingand want to intersperse graphicsWith responsive design techniques, content can be made toseamlessly adapt to different screen sizes and orientationsRazor templating engine can be used in native applications togenerate HTML content that incorporates relevant data••••
  11. 11. A simple Pokédex application built with Xamarin.iOSDEMO: Razordex
  12. 12. 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>...
  13. 13. No ferrets were harmed in the makingof this app.
  14. 14. There are several ways to enable interaction between the native partof your application and the HTML view.Hybrid Communication Techniques
  15. 15. 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");
  16. 16. 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");
  17. 17. 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!");};
  18. 18. Q&A
  19. 19. THANK YOU

×