Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

假設你們⽤用過 WINDOWS 8 了 ▪不是電腦教室

Slide 3

Slide 3 text

開發環境 ▪Visual Studio 2012 ▪Express 免費 ▪ Visual Studio Express 2012 for Windows 8 ▪Windows 8 ▪Google 搜尋 Windows 8 439 ▪Enterprise 評估版 90 天免費

Slide 4

Slide 4 text

先當和開發網站⼀一模⼀一樣 ▪當然不是⼀一模⼀一樣 ▪IE10 ▪和 Chrome Firefox 相似 ▪HTML5 、 CSS3 、 ECMAScript 5

Slide 5

Slide 5 text

空⽩白應⽤用程式 ▪⽅方案總管 ▪default.html 、 default.js 、 default.css ▪本機電腦、模擬器、遠端電腦 ▪偵錯 -> 視窗 ▪DOM 總管 ▪JavaScript 主控台 ▪ console.log ▪ Google 搜尋 JavaScript Console MSDN

Slide 6

Slide 6 text

不⼀一樣 有好有壞 ▪好的 ▪AJAX Cross Domain ▪Native 多 Windows 、 MSApp 兩物件

Slide 7

Slide 7 text

AJAX CROSS DOMAIN ▪App 內檔案也可以 AJAX 載⼊入

Slide 8

Slide 8 text

WINDOWS 物件 ▪不是 window 物件 ▪Windows Runtime API ▪簡稱 WinRT API ▪C# C++ VB JavaScript 共通 ▪不是 Windows RT

Slide 9

Slide 9 text

WINDOWS 物件 ▪系統底層

Slide 10

Slide 10 text

⾃自⼰己寫 WINDOWS RUNTIME COMPONENT ▪C++ C# VB ▪JavaScript 呼叫 ▪Google 搜尋 Windows Runtime Component

Slide 11

Slide 11 text

不⼀一樣 有好有壞 ▪壞的 ▪innerHTML 、 document.write 、 … 安全性限制 ▪不能嵌⼊入外部 JavaScript ▪不能開新視窗 ▪不能將整個 App 導⾄至外部網⾴頁 ▪沒有 FLASH 、 ActiveX ▪沒有 alert() confirm() prompt()

Slide 12

Slide 12 text

INNERHTML 、 … 安全性限制 ▪innerHTML ▪outerHTML ▪pasteHTML ▪document.write ▪document.writeln ▪createContextualFragment ▪insertAdjacentHTML ▪DOMParser.parseFromString

Slide 13

Slide 13 text

INNERHTML 、 … 安全性限制 ▪XSS ▪ ▪toStaticHTML() ▪Google 搜尋 toStaticHTML msdn store

Slide 14

Slide 14 text

不能嵌⼊入外部 JAVASCRIPT ▪CDN ▪廣告

Slide 15

Slide 15 text

不能開新視窗 ▪ ▪window.open() ▪moveTo() 、 moveBy() 、 resizeTo() 、 resizeBy() ▪window.close() ▪中⽌止 App ▪ 例外使⽤用 ▪ 不可使⽤用？

Slide 16

Slide 16 text

不能將整個 APP 導⾄至外部網⾴頁 ▪ ▪跳出 App 、預設瀏覽器開啟

Slide 17

Slide 17 text

沒有 FLASH 、 ACTIVEX

Slide 18

Slide 18 text

沒有 ALERT() CONFIRM() PROMPT() ▪Windows.UI.Popups.MessageDialog ▪Flyout

Slide 19

Slide 19 text

我的解決⽅方法 ▪alert() confirm() prompt() 替代⽅方案 ▪MSApp.execUnsafeLocalFunction ▪ 嵌⼊入外部網⾴頁 ▪Local context vs. Web context ▪App 內網⾴頁 Web context 載⼊入

Slide 20

Slide 20 text

ALERT() 替代⽅方案 ▪var md = new Windows.UI.Popups.MessageDialog('Hi');
 
 md.showAsync().done(function() {
 // ...
 });

Slide 21

Slide 21 text

CONFIRM() 替代⽅方案 ▪ var md = new Windows.UI.Popups.MessageDialog('Are you OK?');
 
 md.commands.append(new Windows.UI.Popups.UICommand('Yes'));
 md.commands.append(new Windows.UI.Popups.UICommand('No'));
 
 md.showAsync().done(function (cmd) {
 console.log(cmd.label);
 });

Slide 22

Slide 22 text

PROMPT() 替代⽅方案 ▪無 100% ▪confirm() 替代⽅方案？ ▪Flyout 近似 ▪無 Block UI

Slide 23

Slide 23 text

MSAPP.EXECUNSAFELOCALFUNCTION ▪MSApp.execUnsafeLocalFunction ▪繞過 innerHTML 、 document.write 、 … 安全性限制

Slide 24

Slide 24 text

嵌⼊入外部網⾴頁 ▪Web context ▪無特權 幾無限制 近似瀏覽器環境

Slide 25

Slide 25 text

LOCAL CONTEXT VS. WEB CONTEXT ▪Google 搜尋 Local Web context

Slide 26

Slide 26 text

APP 內網⾴頁 WEB CONTEXT 載⼊入 ▪ms-appx-web:/// ▪三條斜線 ▪ ms-appx-web://a3001e40-c3bf-4ae9-b713-da500ca42135/ ▪ package.appmanifest ▪ ms-appx:/// 、 ms-appdata:/// 同理 ▪⽤用 postMessage() 溝通 ▪Google 搜尋 postMessage

Slide 27

Slide 27 text

實例演練 ▪使⽤用 jQuery ▪jQuery.support ▪使⽤用 Google Maps JavaScript API ▪使⽤用 YUI ▪Google 搜尋 Windows 8 Learnings ▪ 動態載⼊入 類似 AMD

Slide 28

Slide 28 text

IE10 ▪ECMAScript 5 ▪CSS3

Slide 29

Slide 29 text

ECMASCRIPT 5 ▪Strict Mode ▪"use strict"; ▪Google 搜尋 mdn strict ▪拿掉 "use strict"; ？ ▪Object ▪Google 搜尋 mdn object guide ▪getter setter

Slide 30

Slide 30 text

CSS3 ▪Grid Layout ▪display : -ms-grid;
 -ms-grid-columns : auto 100px 1fr 2fr;
 -ms-grid-rows : 50px 5em auto;
 -ms-grid-row : 1;
 -ms-grid-column : 1;
 -ms-grid-column-align : end;
 -ms-grid-row-align : center;
 -ms-grid-columns : 10px (250px 10px)[3]; ▪Google 搜尋 msdn Grid Layout

Slide 31

Slide 31 text

WINDOWS LIBRARY FOR JAVASCRIPT ▪純 CSS 、 JavaScript ▪可以看、不能改 ▪JavaScript 物件 WinJS ▪base.js WinJS ▪ui.js WinJS.UI ▪Google 搜尋 Windows API

Slide 32

Slide 32 text

CONTROL 控制項 ▪DOM 物件屬性 ▪winControl ▪HTML 元素屬性 ▪data-win-control ▪data-win-options ▪default.js ▪WinJS.UI.processAll() ▪Google 搜尋 WinJS controls

Slide 33

Slide 33 text

PROMISE 物件 ▪CommonJS ▪jQuery Deferred Object ▪與 callback 相⽐比 語意清晰 ▪⾮非同步

Slide 34

Slide 34 text

PROMISE 物件 ▪WinJS.xhr({ url: 'a.php' })
 .then(function() {
 return WinJS.xhr({ url: 'b.php' });
 })
 .then(function() { 
 return WinJS.xhr({ url: 'c.php' });
 })
 .done(function() { 
 /* ... */
 });

Slide 35

Slide 35 text

PROMISE 物件 ▪WinJS.Promise.join([
 WinJS.xhr ({ url: 'a.php' }),
 WinJS.xhr ({ url: 'b.php' }),
 WinJS.xhr ({ url: 'c.php' })
 ])
 .done(function() {
 /* ... */
 });

Slide 36

Slide 36 text

PROMISE 物件 ▪ var promise;
 
 if(type === 'A')
 promise = WinJS.xhr({ url : 'a.php' }).then(function(data){
 /* ... */
 });
 else
 promise = WinJS.xhr({ url : 'b.php' }).then(function(data) {
 /* ... */
 });
 
 promise.done(function(result) { /* ... */ });

Slide 37

Slide 37 text

PROMISE 物件 ▪ var promise;
 
 if(localStorage.x)
 promise = WinJS.Promise.as(localStorage.x);
 else
 promise = WinJS.xhr({ url : 'a.php' }).then(function(data) { 
 /* ... */
 }); 
 
 promise.done(function(result) { /* ... */ });

Slide 38

Slide 38 text

SETPROMISE() ▪default.js ▪args.setPromise(
 WinJS.UI.processAll().done(function() { /* ... */ })
 );

Slide 39

Slide 39 text

⾃自製 PROMISE 物件 ▪var promise = new WinJS.Promise(
 function(complete, error, progress) {
 setTimeout(function() {
 // …
 complete('DEMO');
 }, 3000);
 }
 );

Slide 40

Slide 40 text

⾃自製 PROMISE 物件 ▪WinJS.xhr 原始碼

Slide 41

Slide 41 text

SINGLE-PAGE NAVIGATION ▪微軟建議 App 使⽤用 ▪WinJS.Navigation 、 WinJS.UI.Pages ▪瀏覽應⽤用程式、格線應⽤用程式、分割應⽤用程式

Slide 42

Slide 42 text

瀏覽應⽤用程式 ▪default.html ▪ ▪
▪home.html

Slide 43

Slide 43 text

瀏覽應⽤用程式 ▪新增資料夾 /pages/page2 ▪新增 ⾴頁⾯面控制項 page2.html ▪home.js 、 page2.js 記得加上 ▪ready : function (element, options) {
 WinJS.Utilities.query("a").listen("click", function(e) {
 e.preventDefault();
 WinJS.Navigation.navigate(e.target.href);
 }, false);}

Slide 44

Slide 44 text

OBSERVABLE 物件 ▪ECMAScript 5 Object getter setter ▪WinJS.Binding.as ▪WinJS.Binding.Template ▪WinJS.Binding.List ▪WinJS.UI.ListView

Slide 45

Slide 45 text

WINJS.BINDING.AS ▪ var target = document.getElementById('target'),
 a = { x : 1 },
 b = WinJS.Binding.as(a);
 
 b.bind('x', function(newVal, oldVal) { target.innerHTML = newVal; }); 
 console.log(target.innerHTML); // 1
 
 b.x = 2;
 console.log(target.innerHTML); // 2
 
 b.x = 3;
 console.log(target.innerHTML); // 3

Slide 46

Slide 46 text

WINJS.BINDING.TEMPLATE ▪













Slide 47

Slide 47 text

APPLICATION LIFECYCLE ▪default.js ▪oncheckpoint

Slide 48

Slide 48 text

APPLICATION LIFECYCLE ▪HTML5 ▪localStorage 、 sessionStorage ▪Windows.Storage.ApplicationData.current ▪localSettings 、 roamingSettings ▪localFolder 、 roamingFolder 、temporaryFolder ▪WinJS.Application ▪local 、 roaming 、 temp ▪Promise

Slide 49

Slide 49 text

CHARMS BAR 常⽤用⼯工具列 ▪Search Charm 搜尋快速鍵 ▪Share Charm 分享快速鍵 ▪Settings charm 設定快速鍵 ▪App 內 、 App 外

Slide 50

Slide 50 text

CONTRACT 協定 ▪Google 搜尋 Contract msdn store ▪Search contract 搜尋協定 ▪Share contract 分享協定 ▪Setting contract 設定協定 ▪…

Slide 51

Slide 51 text

SEARCH CONTRACT 搜尋協定 ▪格線應⽤用程式 ▪Single-page navigation ▪ ▪ 範例資料

Slide 52

Slide 52 text

SEARCH CONTRACT 搜尋協定 ▪新增資料夾 pages/search ▪新增 搜尋協定 search.html ▪package.appxmanifest ▪宣告 ▪default.html ▪

Slide 53

Slide 53 text

SEARCH CONTRACT 搜尋協定 ▪search.js ▪_searchData() ▪_generateFilters() ▪search.html ▪data-win-bind="innerHTML: title search.markText"

Slide 54

Slide 54 text

SHARE CONTRACT 分享協定 ▪Google 搜尋 Quickstart Sharing ▪Source App 來源 App ▪Quickstart: Sharing content 左側下 ▪ text 、 link 、 HTML 、 image 、 file 、 … ▪Target App ⺫⽬目標 App ▪共⽤用⺫⽬目標協定 ▪share.js ▪ args.detail.shareOperation.reportCompleted()

Slide 55

Slide 55 text

SETTINGS CONTRACT 設定協定 ▪Google 搜尋 SettingsFlyout ▪新增資料夾 html ▪新增 html/demo.html ▪

Slide 56

Slide 56 text

SETTINGS CONTRACT 設定協定 ▪default.js ▪app.onsettings = function (args) {
 args.detail.applicationcommands = {
 "demo" : { title: "Demo", href: "/html/demo.html" }
 }; 
 WinJS.UI.SettingsFlyout.populateSettings(args);
 } ▪Google 搜尋 populateSettings ▪ui.js 搜尋 populateSettings

Slide 57

Slide 57 text

WINDOWS AZURE MOBILE SERVICE ▪https://manage.windowsazure.com/ ▪Mobile Service ▪Push notifications ▪Google 搜尋 azure push ▪Authentication ▪Microsoft 、 Facebook 、 Twitter 、 Google 帳號認證 ▪Google 搜尋 azure auth mobile

Slide 58

Slide 58 text

BLEND ▪尺⼨寸 ▪翻轉 ▪Snap View

Slide 59

Slide 59 text

GUIDELINE ▪Google 搜尋 ux guideline store ▪Google 搜尋 font guideline store ▪Snap View

Slide 60

Slide 60 text

專案 -> 市集 ▪Windows App Certification Kit ▪簡稱 WACK ▪BOM ▪Bytecode

Slide 61

Slide 61 text

WINDOWS 8 CAMP IN A BOX ▪Google 搜尋 Windows 8 Camp in a box ▪中⽂文版？