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

Slide 1

Slide 1 text

WINDOWS 市集應⽤用程式實例解說 ( 使⽤用 JAVASCRIPT ) 蔡秉諺 Vexed  中華電信 Xuite & Hami+ 個⼈人雲

Slide 2

Slide 2 text

今天的範圍 ▪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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

判斷 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 :  }

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

⽰示範 SNAP SAMPLE

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

SNAP SAMPLE 架構 ▪sample-utils ▪footer.html 、 header.html 、  sample-utils.css 、 sample-utils.js 、  scenario-select.html ▪每個 Sample 架構⼤大同⼩小異

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

FACEBOOK OAUTH ▪⽤用 Access Token 取使⽤用者資料 ▪Facebook Graph API ▪https://developers.facebook.com/docs/reference/api/ ▪Facebook Graph API Explorer ▪https://developers.facebook.com/tools/explorer

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

⽰示範 WEB AUTHENTICATION BROKER

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

搜尋建議⼊入⾨門 ▪ var view = Windows.ApplicationModel.Search.SearchPane.getForCurrentView();    view.onsuggestionsrequested = function(e) {  var q = e.queryText;    e.request.searchSuggestionCollection.appendQuerySuggestion(q + 'ABC');  }

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

外部抓取搜尋建議 ▪⾮非同步 ▪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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

鍵盤輸⼊入⾃自動搜尋 ▪Windows.ApplicationModel.Search.SearchPane  .getForCurrentView().showOnKeyboardInput = true;

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

分享⽂文字、連結 ▪ 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'));  });

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

分享圖⽚片、檔案

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

LOCK SCREEN APPS SAMPLE ▪ var Background = Windows.ApplicationModel.Background;    Background.BackgroundExecutionManager.requestAccessAsync();    /* App 只能主動詢問⼀一次 */      Background.BackgroundExecutionManager.removeAccess();    var result = Background.BackgroundExecutionManager.getAccessStatus(); 

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

SECONDARY TILE

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

BACKGROUND TASK TRIGGER

Slide 48

Slide 48 text

BACKGROUND TASK CONDITION

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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