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

MSDN 講座

Transcript

1. WINDOWS 市集應⽤用程式實
   例解說 ( 使⽤用 JAVASCRIPT )
   蔡秉諺 Vexed

   中華電信 Xuite & Hami+ 個⼈人雲
   

   View Slide

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
   

   View Slide

3. SNAP SAMPLE
   ▪4 種 View State
   ▪snapped 貼⿑齊
   ▪filled 填滿
   ▪full screen landscape 全螢幕橫向
   ▪full screen portrait 全螢幕直向
   ▪寬度
   ▪snapped 320 px
   ▪splitter 22 px
   

   View Slide

4. SNAP SAMPLE
   ▪snapped 、 filled 互換
   ▪splitter 分隔器
   ▪點兩下、往左拉、往右拉
   ▪Windows 鍵 + .
   

   View Slide

5. SNAP SAMPLE 重點
   ▪判斷 App 現在的 View State
   ▪什麼時候重新判斷 View State
   ▪⽤用程式取消 Snap View
   ▪寫 Snap View 專⽤用的 CSS
   

   View Slide

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 :

   }
   

   View Slide

7. 什麼時候重新判斷 VIEW STATE
   ▪window.onresize 時
   

   View Slide

8. ⽤用程式取消 SNAP VIEW
   ▪ Windows.UI.ViewManagement.ApplicationView.tryUnsnap()
   ▪ 回傳 true / false
   

   View Slide

9. 寫 SNAP VIEW 專⽤用的 CSS
   ▪@media screen and (-ms-view-state: snapped) { /* ... */ }
   ▪snapped
   ▪filled
   ▪fullscreen-landscape
   ▪fullscreen-portrait
   

   View Slide

10. ⽰示範 SNAP SAMPLE
    

    View Slide

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
    

    View Slide

12. SNAP SAMPLE 架構
    ▪sample-utils
    ▪footer.html 、 header.html 、

    sample-utils.css 、 sample-utils.js 、

    scenario-select.html
    ▪每個 Sample 架構⼤大同⼩小異
    

    View Slide

13. GUIDELINE 規定 APP 要有 SNAP VIEW
    ▪市集 App 的 Snap View
    ▪320 px 恰與⼿手機寬度相同
    ▪Windows Phone 8 不⽀支援 JavaScript 開發 App
    

    View Slide

14. WEB AUTHENTICATION BROKER SAMPLE
    ▪App 裡⽤用 OAuth 做 Single Sign-On
    ▪先看 App 外⽤用 OAuth 做 Single Sign-On
    

    View Slide

15. FACEBOOK OAUTH
    ▪先有 App ID
    ▪https://developers.facebook.com/apps
    ▪OAuth Dialog
    ▪https://developers.facebook.com/docs/reference/dialogs/oauth/
    ▪取得 Access Token
    

    View Slide

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
    

    View Slide

17. WEB AUTHENTICATION BROKER
    ▪Windows.Security.Authentication.Web

    .WebAuthenticationBroker.authenticateAsync
    ▪傳⼊入三個參數
    ▪options 、 startURI 、 endURI
    ▪⽤用 endURI 判斷 OAuth Single Sign-On 完成
    ▪吐回 Promise 物件
    ▪.done(function(result) { /* … */ })
    

    View Slide

18. ⽰示範 WEB AUTHENTICATION BROKER
    

    View Slide

19. WEB AUTHENTICATION BROKER 重點
    ▪⽰示範兜出 Facebook 、 Twitter 、 Google 、 Flickr 的
    startURI 、 endURI
    ▪抄
    ▪authzInProgress
    ▪避免 Single Sign-On 進⾏行中，重複做
    

    View Slide

20. SEARCH CONTRACT SAMPLE
    ▪Charms Bar 常⽤用⼯工具列
    ▪App 內 、 App 外
    ▪Search Contract 搜尋協定
    ▪可是本 Sample 著重搜尋建議
    

    View Slide

21. SEARCH CONTRACT SAMPLE 重點
    ▪搜尋建議⼊入⾨門
    ▪中⽂文選字階段的搜尋建議
    ▪檔案資料作為搜尋建議
    ▪外部抓取搜尋建議
    ▪搜尋結果建議
    ▪鍵盤輸⼊入⾃自動搜尋
    

    View Slide

22. 搜尋建議⼊入⾨門
    ▪ var view = Windows.ApplicationModel.Search.SearchPane.getForCurrentView();

    

    view.onsuggestionsrequested = function(e) {

    var q = e.queryText;

    

    e.request.searchSuggestionCollection.appendQuerySuggestion(q + 'ABC');

    }
    

    View Slide

23. 中⽂文選字階段的搜尋建議
    ▪ㄓㄨㄥ
    ▪中忠鐘鍾終盅衷螽柊 …
    ▪e.linguisticDetails.queryTextAlternatives
    ▪陣列
    

    View Slide

24. 檔案資料作為搜尋建議
    ▪設定要作為搜尋建議的資料夾
    ▪⽤用 Advanced Query Syntax ( AQS ) 篩選檔案
    

    View Slide

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
    

    View Slide

26. 搜尋結果建議
    ▪Google 搜尋 appendResultSuggestion
    ▪Google 搜尋 onresultsuggestionchosen
    

    View Slide

27. 鍵盤輸⼊入⾃自動搜尋
    ▪Windows.ApplicationModel.Search.SearchPane

    .getForCurrentView().showOnKeyboardInput = true;
    

    View Slide

28. SHARING CONTENT SOURCE APP SAMPLE
    ▪分辨 Source App 、 Target App
    ▪Target App 向 Source App 要資料
    

    View Slide

29. SHARING CONTENT SOURCE APP SAMPLE
    ▪⽰示範
    ▪分享⽂文字、連結
    ▪分享圖⽚片、檔案
    ▪FileOpenPicker
    ▪分享 HTML
    ▪使⽤用 DataProvider 分享
    ▪⾃自訂分享資料型態
    ▪分享失敗
    

    View Slide

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'));

    });
    

    View Slide

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) { }); */
    

    View Slide

32. 分享圖⽚片、檔案
    

    View Slide

33. 分享 HTML
    ▪對 Source App 圖⽚片特別處理、 Target App 才看得⾒見
    ▪request.data.resourceMap
    

    View Slide

34. 使⽤用 DATAPROVIDER 分享
    ▪request.data.setDataProvider
    ▪提供分享資料型態與 Callback 予 Target App
    ▪Target App 再決定是否抓取
    

    View Slide

35. ⾃自訂分享資料型態
    ▪request.data.setData('book', JSON.stringify(book))
    

    View Slide

36. 分享失敗
    ▪request.failWithDisplayText('error')
    

    View Slide

37. SHARING CONTENT TARGET APP SAMPLE
    ▪共⽤用⺫⽬目標協定
    ▪package.appmanifest
    ▪target.html
    ▪target.js
    

    View Slide

38. TARGET.JS
    ▪接收各種分享資料型態
    ▪皆是 Asyc
    ▪可能 Data Provider 抓取
    ▪注意 HTML 圖⽚片 ResourceMap
    ▪QuickLink
    ▪shareOperation.reportCompleted()
    ▪回報 Source App
    ▪Google 搜尋 shareOperation
    

    View Slide

39. LOCK SCREEN APPS SAMPLE
    ▪什麼是 Badge 、 Tile 、 Notification ？
    ▪什麼是 Secondary tile ？
    ▪什麼是 Lock Screen App ？
    

    View Slide

40. LOCK SCREEN APPS SAMPLE
    ▪package.appxmanifest
    ▪宣告
    ▪背景⼯工作
    

    View Slide

41. LOCK SCREEN APPS SAMPLE
    ▪ var Background = Windows.ApplicationModel.Background;

    

    Background.BackgroundExecutionManager.requestAccessAsync();

    

    /* App 只能主動詢問⼀一次 */

    

    

    Background.BackgroundExecutionManager.removeAccess();

    

    var result = Background.BackgroundExecutionManager.getAccessStatus();

    

    View Slide

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
    

    View Slide

43. NOTIFICATIONSEXTENSIONS
    ▪Quickstart: Using the NotificationsExtensions library in
    your code
    ▪http://msdn.microsoft.com/en-us/library/windows/apps/
    hh969156.aspx
    

    View Slide

44. SECONDARY TILE
    

    View Slide

45. BACKGROUND TASK SAMPLE
    ▪Introduction to Background Tasks
    ▪http://www.microsoft.com/en-us/download/details.aspx?id=27411
    

    View Slide

46. BACKGROUND TASK SAMPLE
    ▪Background Task
    ▪開發選擇
    ▪JavaScript
    ▪C# 、 VB.Net 、C++
    ▪JavaScript 開發的 App 也能⽤用
    ▪package.appxmanifest
    ▪宣告
    ▪背景⼯工作
    ▪ JavaScript 起始⾴頁、 C# 進⼊入點
    

    View Slide

47. BACKGROUND TASK TRIGGER
    

    View Slide

48. BACKGROUND TASK CONDITION
    

    View Slide

49. ONPROGRESS 、 ONCOMPLETE
    ▪未寫在 package.appmanifest
    ▪App 開啟時註冊
    ▪task.addEventListener('progress', task_Progress);

    task.addEventListener('completed', task_Completed);
    

    View Slide

50. SERVICINGCOMPLETE
    ▪ServicingComplete
    ▪App 更新完成時執⾏行
    ▪App 內的 JavaScript 要到使⽤用者開啟才會執⾏行
    ▪處理新舊 App Background Task 不⼀一致
    

    View Slide

51. APP 與 BACKGROUND TASK 交換資料
    ▪ApplicationData
    ▪File
    

    View Slide

52. JAVASCRIPT BACKGROUND TASK
    ▪記得寫 close()
    ▪否則恆佔資源
    

    View Slide