Uutiset

Adafyn kuulumisia

Aurelia and UWP – Part 2: Adding the back button

<p><a href="http://mikaelkoskinen.net/posts/files/5ea2a7f4-cb68-4222-a4fc-d2b4c9dc58ba.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;float:right;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/c0d3ef20-9ba4-4dd1-98a0-c605f96062cc.png" width="370" align="right" height="219" /></a>The <a href="http://mikaelkoskinen.net/post/aurelia-uwp-win10-tutorial">first part of our Aurelia &amp; UWP tutorial</a> showed us how to get started. As mentioned in the end of that post, it was easy to get started but when you start using the Aurelia app using desktop, you’ll notice that you can’t navigate backwards.</p><p>This second part of our tutorial will show you how to add back button into your app.</p><h3>The back button in UWP apps</h3><p>If you’ve built UWP apps using C# &amp; XAML, you’ve quite likely encountered SystemNavigationManager. Through it, you can add the standard backward navigation button into your app:</p><p><a href="http://mikaelkoskinen.net/posts/files/e2d55c01-27bd-4d97-9ba2-5ca587f1d682.png"><img title="image" style="border-left-width:0;border-right-width:0;background-image:none;border-bottom-width:0;padding-top:0;padding-left:0;display:inline;padding-right:0;border-top-width:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/b52d44e0-8728-439d-ba4c-86bc5ca05b2b.png" width="244" height="149" /></a></p><p>More about this from the MSDN: <a href="https://docs.microsoft.com/en-us/windows/uwp/layout/navigation-history-and-backwards-navigation">Navigation history and backwards navigation for UWP apps</a></p><h3>The back button in Aurelia UWP app</h3><p>So if we can use SystemNavigationManager in C#, what can we do in our Aurelia app? We can use the same SystemNavigationManager!</p><blockquote><p>var systemNavigationManager = Windows.UI.Core.SystemNavigationManager.getForCurrentView();</p></blockquote><p>That’s one big nice thing in UWP: You can access the same WinRT classes and methods from Javascript in addition to C# and C++.</p><p>To add the back button, add backbutton.js into your app with the following content:</p><div><div id="highlighter_340327" class="syntaxhighlighter javascript"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="javascript plain">(</code><code class="javascript keyword">function</code> <code class="javascript plain">() {</code></div><div class="line number2 index1 alt1"> </div><div class="line number3 index2 alt2"><code class="javascript spaces">    </code><code class="javascript keyword">var</code> <code class="javascript plain">systemNavigationManager = Windows.UI.Core.SystemNavigationManager.getForCurrentView();</code></div><div class="line number4 index3 alt1"><code class="javascript spaces">    </code><code class="javascript plain">systemNavigationManager.addEventListener(</code><code class="javascript string">"backrequested"</code><code class="javascript plain">, handleSystemNavigationEvent.bind(</code><code class="javascript keyword">this</code><code class="javascript plain">));</code></div><div class="line number5 index4 alt2"> </div><div class="line number6 index5 alt1"><code class="javascript spaces">    </code><code class="javascript plain">window.onpopstate = </code><code class="javascript keyword">function</code> <code class="javascript plain">() {</code></div><div class="line number7 index6 alt2"> </div><div class="line number8 index7 alt1"><code class="javascript spaces">        </code><code class="javascript keyword">var</code> <code class="javascript plain">systemNavigation = Windows.UI.Core.SystemNavigationManager.getForCurrentView();</code></div><div class="line number9 index8 alt2"> </div><div class="line number10 index9 alt1"><code class="javascript spaces">        </code><code class="javascript keyword">if</code> <code class="javascript plain">(endsWith(window.location.href, </code><code class="javascript string">"index.html"</code><code class="javascript plain">)) {</code></div><div class="line number11 index10 alt2"><code class="javascript spaces">            </code><code class="javascript plain">systemNavigation.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.collapsed;</code></div><div class="line number12 index11 alt1"><code class="javascript spaces">        </code><code class="javascript plain">} </code><code class="javascript keyword">else</code> <code class="javascript plain">{</code></div><div class="line number13 index12 alt2"><code class="javascript spaces">            </code><code class="javascript plain">systemNavigation.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.visible;</code></div><div class="line number14 index13 alt1"><code class="javascript spaces">        </code><code class="javascript plain">}</code></div><div class="line number15 index14 alt2"><code class="javascript spaces">    </code><code class="javascript plain">};</code></div><div class="line number16 index15 alt1"> </div><div class="line number17 index16 alt2"><code class="javascript plain">})();</code></div><div class="line number18 index17 alt1"> </div><div class="line number19 index18 alt2"><code class="javascript keyword">function</code> <code class="javascript plain">handleSystemNavigationEvent(args) {</code></div><div class="line number20 index19 alt1"><code class="javascript spaces">    </code><code class="javascript plain">args.handled = </code><code class="javascript keyword">true</code><code class="javascript plain">;</code></div><div class="line number21 index20 alt2"><code class="javascript spaces">    </code><code class="javascript plain">window.history.back();</code></div><div class="line number22 index21 alt1"><code class="javascript plain">}</code></div><div class="line number23 index22 alt2"> </div><div class="line number24 index23 alt1"><code class="javascript keyword">function</code> <code class="javascript plain">endsWith(str, suffix) {</code></div><div class="line number25 index24 alt2"><code class="javascript spaces">    </code><code class="javascript keyword">return</code> <code class="javascript plain">str.slice(-suffix.length) === suffix;</code></div><div class="line number26 index25 alt1"><code class="javascript plain">}</code></div></div></td></tr></tbody></table></div></div><p>Then reference backbutton.js in index.html:</p><p><a href="http://mikaelkoskinen.net/posts/files/d5418794-4ea5-4bda-949d-de67b35027ee.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/be3d1429-5203-47a7-b1fe-01178c786ccc.png" width="500" height="89" /></a></p><p>That’s it. You should now see the back button in your app’s title bar when you navigate away from the home page.</p><p><a href="http://mikaelkoskinen.net/posts/files/d2fdaedc-f823-4feb-afb7-0e433b955aeb.png"><img title="image" style="border-top:0;border-right:0;background-image:none;border-bottom:0;padding-top:0;padding-left:0;border-left:0;display:inline;padding-right:0" border="0" alt="image" src="http://mikaelkoskinen.net/posts/files/c872dc20-fe7c-4705-ad7c-0cfde9e528e9.png" width="377" height="223" /></a></p><p>You can find the full example from GitHub: <a title="https://github.com/mikoskinen/aurelia-uwp/" href="https://github.com/mikoskinen/aurelia-uwp/">https://github.com/mikoskinen/aurelia-uwp/</a></p><p>In part three of Aurelia and UWP tutorial we look how to integrate more UWP app features inside your Aurelia app: The goal is to integrate the Aurelia app with Windows 10 and to make it behave like a standard C#/XAML based UWP app.</p>