Windows 市集應⽤用程式實例解說 (使⽤ JavaScript)

MSDN 講座

Transcript

1. WINDOWS 市集應⽤用程式實 例解說 ( 使⽤用 JAVASCRIPT ) 蔡秉諺 Vexed
 中華電信 Xuite & Hami+ 個⼈人雲
2. 今天的範圍 ▪7 個 Sample ▪Snap sample ▪Web authentication broker sample ▪Search contract sample ▪Sharing content source app sample ▪Sharing content target app sample ▪Lock screen apps sample ▪Background task sample
3. SNAP SAMPLE ▪4 種 View State ▪snapped 貼⿑齊 ▪filled 填滿 ▪full screen landscape 全螢幕橫向 ▪full screen portrait 全螢幕直向 ▪寬度 ▪snapped 320 px ▪splitter 22 px
4. SNAP SAMPLE ▪snapped 、 filled 互換 ▪splitter 分隔器 ▪點兩下、往左拉、往右拉 ▪Windows 鍵 + .
5. SNAP SAMPLE 重點 ▪判斷 App 現在的 View State ▪什麼時候重新判斷 View State ▪⽤用程式取消 Snap View ▪寫 Snap View 專⽤用的 CSS
6. 判斷 APP 現在的 VIEW STATE ▪ var value = Windows.UI.ViewManagement.ApplicationView.value,
 viewStates = Windows.UI.ViewManagement.ApplicationViewState;
 
 switch (value) {
 case viewStates.snapped :
 case viewStates.filled :
 case viewStates.fullScreenLandscape :
 case viewStates.fullScreenPortrait :
 default :
 }
7. 什麼時候重新判斷 VIEW STATE ▪window.onresize 時
8. ⽤用程式取消 SNAP VIEW ▪ Windows.UI.ViewManagement.ApplicationView.tryUnsnap() ▪ 回傳 true / false
9. 寫 SNAP VIEW 專⽤用的 CSS ▪@media screen and (-ms-view-state: snapped) { /* ... */ } ▪snapped ▪filled ▪fullscreen-landscape ▪fullscreen-portrait
10. ⽰示範 SNAP SAMPLE
11. SNAP SAMPLE 架構 ▪Single-page navigation ▪default.html #contentHost ▪Page Control ⾴頁⾯面控制項 ▪檔案擺放⽅方式 ▪與 Visual Studio 2012 預設不同 ▪ html/snap.html 、 js/snap.js 、 css/snap.css ▪Visual Studio 2012 預設應是 ▪ pages/snap/snap.html 、 pages/snap/snap.js 、 pages/snap/snap.css
12. SNAP SAMPLE 架構 ▪sample-utils ▪footer.html 、 header.html 、
 sample-utils.css 、 sample-utils.js 、
 scenario-select.html ▪每個 Sample 架構⼤大同⼩小異
13. GUIDELINE 規定 APP 要有 SNAP VIEW ▪市集 App 的 Snap View ▪320 px 恰與⼿手機寬度相同 ▪Windows Phone 8 不⽀支援 JavaScript 開發 App
14. WEB AUTHENTICATION BROKER SAMPLE ▪App 裡⽤用 OAuth 做 Single Sign-On ▪先看 App 外⽤用 OAuth 做 Single Sign-On
15. FACEBOOK OAUTH ▪先有 App ID ▪https://developers.facebook.com/apps ▪OAuth Dialog ▪https://developers.facebook.com/docs/reference/dialogs/oauth/ ▪取得 Access Token
16. FACEBOOK OAUTH ▪⽤用 Access Token 取使⽤用者資料 ▪Facebook Graph API ▪https://developers.facebook.com/docs/reference/api/ ▪Facebook Graph API Explorer ▪https://developers.facebook.com/tools/explorer
17. WEB AUTHENTICATION BROKER ▪Windows.Security.Authentication.Web
 .WebAuthenticationBroker.authenticateAsync ▪傳⼊入三個參數 ▪options 、 startURI 、 endURI ▪⽤用 endURI 判斷 OAuth Single Sign-On 完成 ▪吐回 Promise 物件 ▪.done(function(result) { /* … */ })
18. ⽰示範 WEB AUTHENTICATION BROKER
19. WEB AUTHENTICATION BROKER 重點 ▪⽰示範兜出 Facebook 、 Twitter 、 Google 、 Flickr 的 startURI 、 endURI ▪抄 ▪authzInProgress ▪避免 Single Sign-On 進⾏行中，重複做
20. SEARCH CONTRACT SAMPLE ▪Charms Bar 常⽤用⼯工具列 ▪App 內 、 App 外 ▪Search Contract 搜尋協定 ▪可是本 Sample 著重搜尋建議
21. SEARCH CONTRACT SAMPLE 重點 ▪搜尋建議⼊入⾨門 ▪中⽂文選字階段的搜尋建議 ▪檔案資料作為搜尋建議 ▪外部抓取搜尋建議 ▪搜尋結果建議 ▪鍵盤輸⼊入⾃自動搜尋
22. 搜尋建議⼊入⾨門 ▪ var view = Windows.ApplicationModel.Search.SearchPane.getForCurrentView();
 
 view.onsuggestionsrequested = function(e) {
 var q = e.queryText;
 
 e.request.searchSuggestionCollection.appendQuerySuggestion(q + 'ABC');
 }
23. 中⽂文選字階段的搜尋建議 ▪ㄓㄨㄥ ▪中忠鐘鍾終盅衷螽柊 … ▪e.linguisticDetails.queryTextAlternatives ▪陣列
24. 檔案資料作為搜尋建議 ▪設定要作為搜尋建議的資料夾 ▪⽤用 Advanced Query Syntax ( AQS ) 篩選檔案
25. 外部抓取搜尋建議 ▪⾮非同步 ▪var deferral = request.getDeferral();
 deferral.complete(); ▪⽰示範格式 ▪OpenSearch Suggestions format ▪ http://www.opensearch.org/Specifications/OpenSearch/Extensions/ Suggestions/1.0 ▪XML Search Suggestions Format ▪ http://msdn.microsoft.com/en-us/library/cc848863(v=vs.85).aspx
26. 搜尋結果建議 ▪Google 搜尋 appendResultSuggestion ▪Google 搜尋 onresultsuggestionchosen
27. 鍵盤輸⼊入⾃自動搜尋 ▪Windows.ApplicationModel.Search.SearchPane
 .getForCurrentView().showOnKeyboardInput = true;
28. SHARING CONTENT SOURCE APP SAMPLE ▪分辨 Source App 、 Target App ▪Target App 向 Source App 要資料
29. SHARING CONTENT SOURCE APP SAMPLE ▪⽰示範 ▪分享⽂文字、連結 ▪分享圖⽚片、檔案 ▪FileOpenPicker ▪分享 HTML ▪使⽤用 DataProvider 分享 ▪⾃自訂分享資料型態 ▪分享失敗
30. 分享⽂文字、連結 ▪ var DataTransfer = Windows.ApplicationModel.DataTransfer,
 dataTransferManager = DataTransfer.DataTransferManager.getForCurrentView();
 
 dataTransferManager.addEventListener('datarequested', function(e) {
 var request = e.request;
 
 request.data.properties.title = 'title';
 request.data.properties.description = 'description';
 request.data.setText('text');
 request.data.setUri(new Windows.Foundation.Uri('http://www.fabrikam.com'));
 });
31. FILEOPENPICKER ▪ var imageFile,
 picker = new Windows.Storage.Pickers.FileOpenPicker();
 
 picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
 picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
 
 picker.pickSingleFileAsync().done(function (file) {
 if (file)
 imageFile = file;
 });
 
 /* picker.pickMultipleFileAsync().done(function (files) { }); */
32. 分享圖⽚片、檔案
33. 分享 HTML ▪對 Source App 圖⽚片特別處理、 Target App 才看得⾒見 ▪request.data.resourceMap
34. 使⽤用 DATAPROVIDER 分享 ▪request.data.setDataProvider ▪提供分享資料型態與 Callback 予 Target App ▪Target App 再決定是否抓取
35. ⾃自訂分享資料型態 ▪request.data.setData('book', JSON.stringify(book))
36. 分享失敗 ▪request.failWithDisplayText('error')
37. SHARING CONTENT TARGET APP SAMPLE ▪共⽤用⺫⽬目標協定 ▪package.appmanifest ▪target.html ▪target.js
38. TARGET.JS ▪接收各種分享資料型態 ▪皆是 Asyc ▪可能 Data Provider 抓取 ▪注意 HTML 圖⽚片 ResourceMap ▪QuickLink ▪shareOperation.reportCompleted() ▪回報 Source App ▪Google 搜尋 shareOperation
39. LOCK SCREEN APPS SAMPLE ▪什麼是 Badge 、 Tile 、 Notification ？ ▪什麼是 Secondary tile ？ ▪什麼是 Lock Screen App ？
40. LOCK SCREEN APPS SAMPLE ▪package.appxmanifest ▪宣告 ▪背景⼯工作
41. LOCK SCREEN APPS SAMPLE ▪ var Background = Windows.ApplicationModel.Background;
 
 Background.BackgroundExecutionManager.requestAccessAsync();
 
 /* App 只能主動詢問⼀一次 */
 
 
 Background.BackgroundExecutionManager.removeAccess();
 
 var result = Background.BackgroundExecutionManager.getAccessStatus();

42. BADGE 、 TILE 、 NOTIFICATION ▪badge ▪http://msdn.microsoft.com/zh-tw/library/windows/apps/ br212849.aspx ▪The tile template catalog ▪http://msdn.microsoft.com/en-us/library/windows/apps/ Hh761491 ▪The toast template catalog ▪http://msdn.microsoft.com/en-us/library/windows/apps/ Hh761494
43. NOTIFICATIONSEXTENSIONS ▪Quickstart: Using the NotificationsExtensions library in your code ▪http://msdn.microsoft.com/en-us/library/windows/apps/ hh969156.aspx
44. SECONDARY TILE
45. BACKGROUND TASK SAMPLE ▪Introduction to Background Tasks ▪http://www.microsoft.com/en-us/download/details.aspx?id=27411
46. BACKGROUND TASK SAMPLE ▪Background Task ▪開發選擇 ▪JavaScript ▪C# 、 VB.Net 、C++ ▪JavaScript 開發的 App 也能⽤用 ▪package.appxmanifest ▪宣告 ▪背景⼯工作 ▪ JavaScript 起始⾴頁、 C# 進⼊入點
47. BACKGROUND TASK TRIGGER
48. BACKGROUND TASK CONDITION
49. ONPROGRESS 、 ONCOMPLETE ▪未寫在 package.appmanifest ▪App 開啟時註冊 ▪task.addEventListener('progress', task_Progress);
 task.addEventListener('completed', task_Completed);
50. SERVICINGCOMPLETE ▪ServicingComplete ▪App 更新完成時執⾏行 ▪App 內的 JavaScript 要到使⽤用者開啟才會執⾏行 ▪處理新舊 App Background Task 不⼀一致
51. APP 與 BACKGROUND TASK 交換資料 ▪ApplicationData ▪File
52. JAVASCRIPT BACKGROUND TASK ▪記得寫 close() ▪否則恆佔資源