{"id":13996,"date":"2014-09-08T15:27:15","date_gmt":"2014-09-08T19:27:15","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=13996"},"modified":"2014-09-08T15:27:15","modified_gmt":"2014-09-08T19:27:15","slug":"evolve-countdown-ios-8-today-widget","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/evolve-countdown-ios-8-today-widget\/","title":{"rendered":"Evolve Countdown iOS 8 Today Widget"},"content":{"rendered":"<p>\t\t\t\tCount down how many days until <a href=\"https:\/\/evolve.xamarin.com\/\" title=\"Evolve 2014\" target=\"_blank\">Evolve<\/a> from the iOS 8 notification screen using a <em>Today Widget<\/em>:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14002\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/todayext.png\" alt=\"today extension\" width=\"239\" height=\"497\" \/><\/p>\n<p>iOS 8 introduces a variety of extensibility features called <em>extensions<\/em>. Extensions allow applications to offer user experiences throughout the system in ways that were not available previously to third party developers.<\/p>\n<p>With app extensions, applications can now offer features\u00a0such as custom keyboards, content sharing, and photo editing to name just a few of the new ways to provide system-wide functionality.<\/p>\n<h2>Today Widgets<\/h2>\n<p>One type of extension is called a <em>Today Widget<\/em>, which is an extension that lives on the notification screen along with the widgets provided by Apple. This is a great place for an application to offer updated data for people to consume at a glance without having to open the application. Scenarios involving\u00a0sports scores, package trackers and news headlines make for good <em>Today Widget<\/em> use cases.<\/p>\n<h2>Evolve Countdown Widget<\/h2>\n<p>Let\u2019s take a look at a <em>Today Widget<\/em> that displays the number of days until <a href=\"https:\/\/evolve.xamarin.com\" target=\"_blank\">Xamarin Evolve 2014<\/a>.<\/p>\n<p>Widgets are created using\u00a0an Extension Project template under the Unified API project templates, as extensions are required to support both 64 and 32 bit architectures.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14015\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/extprojtemplates.png\" alt=\"extension project templates\" width=\"633\" height=\"358\" \/><\/p>\n<p>You don\u2019t create a stand-alone extension, rather it must be created and referenced from a container application. In this case, I created a small app that displays the Evolve website in a WKWebView and then added the extension project as a reference.<\/p>\n<p><a href=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/containerproj.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-14017\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/containerproj.png\" alt=\"container project\" width=\"248\" height=\"209\" \/><\/a><\/p>\n<p>There are a few configurations that need to be set in the Info.plist for the extension:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14020\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/infoplist.png\" alt=\"extension info plist\" width=\"824\" height=\"541\" \/><\/p>\n<p>In this case, I included a button in the extension that, when tapped, will launch the app so the app registers a custom url scheme as well:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14022\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/urltypes.png\" alt=\"custom url scheme\" width=\"754\" height=\"489\" \/><\/p>\n<p>To create the extension, I designed the UI in a storyboard with a UIImage, UILabel and UIButton respectively. Note, since the unified API is required, use Xcode to wire up controls to code (code generation support for the Xamarin designer will come in a future release).<\/p>\n<p>The notification center determines the frame for the extension. The best way to control the layout of controls is using auto-layout, which is what I used here.<\/p>\n<h2>Adding the Extension\u2019s Code<\/h2>\n<p>A today widget is just a view controller. Therefore, the code is implemented much like other view controllers, as shown below:<\/p>\n<pre class=\"lang:csharp decode:true\">\npublic override void ViewDidLoad ()\n{\n  base.ViewDidLoad ();\n\n  PreferredContentSize = new CGSize (PreferredContentSize.Width, 55f);\n  var evolveStartDate = new DateTime (2014, 10, 6);\n  var numDays = (evolveStartDate - DateTime.Now).Days;\n\n  WidgetTitle.Text = String.Format (&quot;{0} days until Evolve&quot;, numDays);\n  WidgetButton.SetTitle (&quot;Tap here to register&quot;, UIControlState.Normal);\n  WidgetButton.TouchUpInside += (sender, e) =&gt; UIApplication.SharedApplication.OpenUrl (new NSUrl (&quot;evolveCountdown:\/\/&quot;));\n}\n<\/pre>\n<p>When the application is deployed, the user will have the option to include the widget in the notification screen:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14024\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/includetodayext.png\" alt=\"include today extension\" width=\"239\" height=\"498\" \/><\/p>\n<p>After adding the widget, tapping the butting results in the app opening, thanks to the custom url scheme it registered:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14026\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/containerapp.png\" alt=\"container app launched\" width=\"239\" height=\"498\" \/><\/p>\n<p>Extensions like <em>Today Widgets<\/em>\u00a0allow applications to deliver experiences that\u00a0only for Apple could provide in the past, so it\u2019s great to see this added flexibility come to iOS.<\/p>\n<p>Join me at Evolve to discuss this and many other exciting new iOS 8 features!<\/p>\n<p>The code from this post is available <a href=\"https:\/\/github.com\/xamarin\/monotouch-samples\/tree\/master\/ExtensionsDemo\" title=\"sample code\" target=\"_blank\">here<\/a>.<\/p>\n<p><a href=\"http:\/\/forums.xamarin.com\/discussion\/23627\" title=\"Discuss in Forums\" target=\"_blank\"><em>Discuss this blog post in the Xamarin Forums<\/em><\/a>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Count down how many days until Evolve from the iOS 8 notification screen using a Today Widget: iOS 8 introduces a variety of extensibility features called extensions. Extensions allow applications to offer user experiences throughout the system in ways that were not available previously to third party developers. With app extensions, applications can now offer [&hellip;]<\/p>\n","protected":false},"author":546,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[6,13,4],"class_list":["post-13996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-ios","tag-xamarin-evolve","tag-xamarin-platform"],"acf":[],"blog_post_summary":"<p>Count down how many days until Evolve from the iOS 8 notification screen using a Today Widget: iOS 8 introduces a variety of extensibility features called extensions. Extensions allow applications to offer user experiences throughout the system in ways that were not available previously to third party developers. With app extensions, applications can now offer [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/13996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=13996"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/13996\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=13996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=13996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=13996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}