$30 off During Our Annual Pro Sale. View Details »

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

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

MSDN 講座

Ping-Yen Tsai

January 07, 2013
Tweet

More Decks by Ping-Yen Tsai

Other Decks in Technology

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