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

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

MSDN 講座

7067c01e5e98f8b8211343054a908076?s=128

Ping-Yen Tsai

January 07, 2013
Tweet

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() ▪否則恆佔資源