Page 54 - MSDN Magazine, April 2017
P. 54
Web site) based on the input. You create a sep- arate JavaScript file for coding this scenario.
The code in Figure 5 should be referred in the <body> section of the caller page/referencing page just before the DOMContentLoaded event trig- gers. Hence, it’s best to add <script src> just before the <body> element ends in the referencing page.
(Note: Because the app is “activated” by Cortana
using the “activationKind” as “voiceCommand,”
it’s important to register the event handler for
this activation. To register app lifecycle events
where the app isn’t a native WinJS or C# one, the
namespace Windows.UI.WebUI.WebUIAppli-
cation is provided to help subscribe to and handle specific events.)
In the code in Figure 5, Cortana APIs will receive the user voice input and populate the SpeechRecognition property of the activation classes. This should help retrieve the converted text in the code and help the app perform relevant actions. In this snip- pet, you use a switch-case statement to evaluate the textSpoken variable and route the user to the Cities.html page with the value of city appended as querystring.
Clearly, this is just one of the scenarios and, given the routing configuring of each Web site (MVC, REST and so on), the cases will change accordingly. The app is now ready to talk to Cortana.
The (Missing) Back Button
After discussing some of the most-advanced functionalities, let’s look at one of the basic—but important—aspects of the app expe- rience: navigation. Ease of browsing through the app and intuitive navigation hierarchy helps users to predictively experience an app.
This scenario is special because when you port the responsive Web site to a UWP app, the UI behaves as expected. However, you need to provide the app container with more pointers about han- dling the navigation within the app. The default UX goes like this:
1. User launches the app.
2. The user browses various sections of the app by clicking
hyperlinks or menus on the pages.
3. At one point, the user wishes to go to the previous page and
clicks the hardware or software back button provided by
the Windows OS (there is no back button in the app yet). 4. The app exits.
Figure 8 Simple Live Tiles Code
Point No. 4 is an unexpected result and needs to be fixed. The solution is simple, which includes instructing the app container window to go back through regular JavaScript APIs. Figure 6 shows the code for this scenario.
The initial few lines enable the framework- provided back button, which appears on the top of the app and then registers an event handler for the tap/click event. All that you do in the code is access the “window” DOM object and instruct it to go one page back. There’s one thing to remem- ber: When the app is at the bottom of the naviga- tion stack, there’s no further pages available in the
history and the app will exit at this point. Additional code needs to be written if custom experience is required to be baked into the app.
Live Tiles
Live Tiles is a feature of the UWP apps that displays crisp infor- mation about updates in the app or anything that might be of interest to the user without having to launching the app. A quick example can be viewed by hitting the Start menu on a Windows device. A few Live Tiles would be evident for apps such as News, Money and Sports.
Here are just a few use-case examples:
• For an e-commerce app, a tile can display recommendations
or status of your order.
• In a line-of-business app, a tile can display a mini image of
your organization’s reports.
• In a gaming app, Live Tiles can display offers, achievements,
new challenges and so on.
Figure 7 shows two examples of tiles from some of the Microsoft
first-party apps.
One of the easiest ways to integrate Live Tiles into your hosted
Web app is to create a Web API and set up the app code (shown in Figure 8) to poll it every few minutes. The job of the Web API is to send back XML, which will be used to create the tile content for the Windows app. (Note: It’s important that the end user pins the app to the Start menu to experience Live Tiles.)
Figure 9: Another Option for Live Tiles Creations
Figure 7 Live Tiles Examples
function createLiveTile() /* can contain parameters */ {
var notifications = Windows.UI.Notifications,
tile = notifications.TileTemplateType.tileSquare310x310ImageAndText01, tileContent = notifications.TileUpdateManager.getTemplateContent(tile), tileText = tileContent.getElementsByTagName('text'),
tileImage = tileContent.getElementsByTagName('image');
// Get the text for live tile here [possibly] from a remote service through xhr.
tileText[0].appendChild(tileContent.createTextNode('Demo Message')); // Text here. tileImage[0].setAttribute('src','<URL of image>');
var tileNotification = new notifications.TileNotification(tileContent); var currentTime = new Date();
tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);
notifications.TileUpdateManager.createTileUpdaterForApplication(). update(tileNotification);
}
function enableLiveTile() {
if (typeof Windows !== 'undefined' &&
typeof Windows.UI !== 'undefined' &&
typeof Windows.ApplicationModel !== 'undefined') {
{
var notification = Windows.UI.Notifications; var tileUpdater =
notification.TileUpdateManager.createTileUpdaterForApplication(); var recurrence = notification.PeriodicUpdateRecurrence.halfHour; var url = new Windows.Foundation.Uri("<URL to receieve the XML for tile>"); tileUpdater.startPeriodicUpdate(url, recurrence);
}
} }
40 msdn magazine
UWP Apps
