wired2win webinar: build enterprise apps with live tiles & notifications with windows 8
TRANSCRIPT
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Build Enterprise Apps with Live Tilesand Notifications with Windows 8
@WinWire
Wired2Win Webinar Series
www.winwire.com
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Session Speakers
Build Enterprise Apps with Live Tilesand Notifications with Windows 8
Amit DubayPractice Manager
WinWire TechnologiesAzure MCP
Viplove SharmaTechnical Lead
WinWire Technologies
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
WinWire Technologies is an IT Services Company that
helps business and technology leaders harness the power of Collaboration
and Analytics across the enterprise leveraging
technology trends such as cloud, mobility, big data,
user interface and enterprise social
Who We Are
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Introduction to Windows 8 Platform
Developing Windows Store Apps
Tiles and Notifications
Demo
Agenda
4
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Windows 8
5
• Released on 25th October 2012
• Primarily focused towards improved mobile experience
• New Modern UI based on Microsoft Design Language
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Windows 8 Platform
Windows 8 Apps
HTMLJavaScri
pt
CC++
C#VB
Desktop Apps
Win32 .NET / SL
Internet Explorer
Communication & Data
Application Model
Devices & Printing
WinRT APIs
Graphics & Media
Syst
em S
ervi
ces
JavaScript(Chakra)
CC++
C#VB
XAML HTML / CSSView
Mod
el
Cont
rolle
r
Windows Core OS ServicesCore
DirectX
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Languages to Develop Windows Store Apps
7
• HTML5, Cascading Style Sheets, Level 3 (CSS3), and JavaScript
Web Development Technologies
• XAML, with code-behind in C++, C#, or Visual Basic.
.NET, Windows Presentation Foundation,
Microsoft Silverlight
• Native C++ and HLSL to take full advantage of graphics hardware.DirectX
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Decide what your app is great at
Decide what user activities to support
Decide what features to include
Decide how to monetize your app
Design the UI for your app
Validate your design
Before You Begin
8
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• Represent your app to the user
• Rich and engaging view into your app
• Alive with activity and continually updated
• Draw users back into your app over and over
• Easy to create and update
Windows 8 Tiles
9
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• Why should I invest in a live tile?
• Characteristics that make a live tile compelling
• Choosing between a square and wide tile size
• Using default tiles
• Using peek templates
• Design considerations for tiles
Tile Design Philosophy
10
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• Convey summary or status information specific to app
• Numeric or glyph
• Appear at lower-right corner of tile
• Defined as an XML document, elements defined in badge schema
• Badge catalog not extendable
Badges
11
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Secondary Tiles
12
• Enable users to promote specific content in an app
• Created via Pin to Start option in app bar
• Same as tiles but can be created/deleted at runtime
• Can be duplicated across devices
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
App on Lock Screen
13
• Should your app be on the lock screen?
• Badge only or Badge and Tile Text
• Up to seven apps on the lock screen
• Tile and toast notifications update text/badge
• Secondary tiles on the lock screen
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• Transient messages to user out of app context
• Tap by user launches the specific area of app
• Toast notification types• Standard and Long-duration toasts• Scheduled and recurring toasts
Toast Notifications
14
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Notification Delivery Methods
15
LocalA set of API calls that send notifications while your app is running
ScheduledA set of API calls that schedule a notification in advance
PeriodicUpdate tiles and badges periodically by polling a cloud service
PushNotifications sent from a cloud server, even if your app isn't running
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• Update tiles/badges at fixed interval by polling a cloud service
• Windows sends an HTTP GET request to URI, receives XML
• Expire after 3 days by default
• Notification cycling
Periodic Notifications
16
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Push Notifications
17
• Enable 3rd party developers to send updates from their cloud service
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• App requests for a push notification channel to the Notification Client Platform
• NCP asks WNS to create a notification channel
• A notification channel is returned in the form of a URI
• The URI is returned by Windows to the app
• The app sends the URI to the cloud service
• When the cloud service has an update to send, it notifies WNS using the URI
• WNS receives the request and routes the notification to the app
How Push Notification Works
18
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Globalization and accessibility
19
• Store strings in resource file
• Store local images in local storage
• Append query string to cloud image URL
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
App package structure for Globalization
20
Strings Images/ProjectFolder /strings /en-US resources.resjson /fr-FR resources.resjson /ja-JP resources.resjson
Strings Usage:<text id="1">ms-resource:greeting</text>
Images Usage:<image id="1" src="ms-appx:///images/welcome.png"/>
/ProjectFolder /images welcome.scale-80.png welcome.scale-100.png /contrast-black welcome.scale-80.png welcome.scale-100.png /contrast-white welcome.scale-80.png welcome.scale-100.png /ja-JP welcome.scale-80.png welcome.scale-100.png /contrast-black welcome.scale-80.png welcome.scale-100.png /contrast-white welcome.scale-80.png welcome.scale-100.png
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
References
21
• Guidelines and checklist for tiles and badges• http://msdn.microsoft.com/en-us/library/windows/apps/hh465403.aspx
• Tile Template Catalog• http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx
• Tiles, Badges and notifications• http://msdn.microsoft.com/en-US/library/windows/apps/hh779725
• App Tiles and Badges Sample• http://code.msdn.microsoft.com/windowsapps/App-tiles-and-badges-sample-5fc4
9148
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Questions?Mail them to: [email protected]
Questions
22