Windows 市集應用程式開發實戰 (使用 JavaScript)

MSDN 講座

Transcript

1. WINDOWS 市集應⽤用程式開 發實戰 (使⽤用 JAVASCRIPT) 蔡秉諺 Vexed 中華電信 Xuite & Hami+ 個⼈人雲
2. 假設你們⽤用過 WINDOWS 8 了 ▪不是電腦教室
3. 開發環境 ▪Visual Studio 2012 ▪Express 免費 ▪ Visual Studio Express 2012 for Windows 8 ▪Windows 8 ▪Google 搜尋 Windows 8 439 ▪Enterprise 評估版 90 天免費
4. 先當和開發網站⼀一模⼀一樣 ▪當然不是⼀一模⼀一樣 ▪IE10 ▪和 Chrome Firefox 相似 ▪HTML5 、 CSS3 、 ECMAScript 5
5. 空⽩白應⽤用程式 ▪⽅方案總管 ▪default.html 、 default.js 、 default.css ▪本機電腦、模擬器、遠端電腦 ▪偵錯 -> 視窗 ▪DOM 總管 ▪JavaScript 主控台 ▪ console.log ▪ Google 搜尋 JavaScript Console MSDN
6. 不⼀一樣 有好有壞 ▪好的 ▪AJAX Cross Domain ▪Native 多 Windows 、 MSApp 兩物件
7. AJAX CROSS DOMAIN ▪App 內檔案也可以 AJAX 載⼊入
8. WINDOWS 物件 ▪不是 window 物件 ▪Windows Runtime API ▪簡稱 WinRT API ▪C# C++ VB JavaScript 共通 ▪不是 Windows RT
9. WINDOWS 物件 ▪系統底層
10. ⾃自⼰己寫 WINDOWS RUNTIME COMPONENT ▪C++ C# VB ▪JavaScript 呼叫 ▪Google 搜尋 Windows Runtime Component
11. 不⼀一樣 有好有壞 ▪壞的 ▪innerHTML 、 document.write 、 … 安全性限制 ▪不能嵌⼊入外部 JavaScript ▪不能開新視窗 ▪不能將整個 App 導⾄至外部網⾴頁 ▪沒有 FLASH 、 ActiveX ▪沒有 alert() confirm() prompt()
12. INNERHTML 、 … 安全性限制 ▪innerHTML ▪outerHTML ▪pasteHTML ▪document.write ▪document.writeln ▪createContextualFragment ▪insertAdjacentHTML ▪DOMParser.parseFromString
13. INNERHTML 、 … 安全性限制 ▪XSS ▪ <a onclick="Windows.Storage.ApplicationData.current.roamingSettings.values['XSS'] = 'demo';" > ▪toStaticHTML() ▪Google 搜尋 toStaticHTML msdn store
14. 不能嵌⼊入外部 JAVASCRIPT ▪CDN ▪廣告
15. 不能開新視窗 ▪<a target="_blank" > ▪window.open() ▪moveTo() 、 moveBy() 、 resizeTo() 、 resizeBy() ▪window.close() ▪中⽌止 App ▪ 例外使⽤用 ▪ 不可使⽤用？
16. 不能將整個 APP 導⾄至外部網⾴頁 ▪<a href="http://bing.com" > ▪跳出 App 、預設瀏覽器開啟
17. 沒有 FLASH 、 ACTIVEX
18. 沒有 ALERT() CONFIRM() PROMPT() ▪Windows.UI.Popups.MessageDialog ▪Flyout
19. 我的解決⽅方法 ▪alert() confirm() prompt() 替代⽅方案 ▪MSApp.execUnsafeLocalFunction ▪<iframe> 嵌⼊入外部網⾴頁 ▪Local context vs. Web context ▪App 內網⾴頁 Web context 載⼊入
20. ALERT() 替代⽅方案 ▪var md = new Windows.UI.Popups.MessageDialog('Hi');
 
 md.showAsync().done(function() {
 // ...
 });
21. 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);
 });
22. PROMPT() 替代⽅方案 ▪無 100% ▪confirm() 替代⽅方案？ ▪Flyout 近似 ▪無 Block UI
23. MSAPP.EXECUNSAFELOCALFUNCTION ▪MSApp.execUnsafeLocalFunction ▪繞過 innerHTML 、 document.write 、 … 安全性限制
24. <IFRAME> 嵌⼊入外部網⾴頁 ▪Web context ▪無特權 幾無限制 近似瀏覽器環境
25. LOCAL CONTEXT VS. WEB CONTEXT ▪Google 搜尋 Local Web context
26. APP 內網⾴頁 WEB CONTEXT 載⼊入 ▪ms-appx-web:/// ▪三條斜線 ▪ ms-appx-web://a3001e40-c3bf-4ae9-b713-da500ca42135/ ▪ package.appmanifest ▪ ms-appx:/// 、 ms-appdata:/// 同理 ▪⽤用 postMessage() 溝通 ▪Google 搜尋 postMessage
27. 實例演練 ▪使⽤用 jQuery ▪jQuery.support ▪使⽤用 Google Maps JavaScript API ▪使⽤用 YUI ▪Google 搜尋 Windows 8 Learnings ▪ 動態載⼊入 類似 AMD
28. IE10 ▪ECMAScript 5 ▪CSS3
29. ECMASCRIPT 5 ▪Strict Mode ▪"use strict"; ▪Google 搜尋 mdn strict ▪拿掉 "use strict"; ？ ▪Object ▪Google 搜尋 mdn object guide ▪getter setter
30. 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
31. WINDOWS LIBRARY FOR JAVASCRIPT ▪純 CSS 、 JavaScript ▪可以看、不能改 ▪JavaScript 物件 WinJS ▪base.js WinJS ▪ui.js WinJS.UI ▪Google 搜尋 Windows API
32. CONTROL 控制項 ▪DOM 物件屬性 ▪winControl ▪HTML 元素屬性 ▪data-win-control ▪data-win-options ▪default.js ▪WinJS.UI.processAll() ▪Google 搜尋 WinJS controls
33. PROMISE 物件 ▪CommonJS ▪jQuery Deferred Object ▪與 callback 相⽐比 語意清晰 ▪⾮非同步
34. PROMISE 物件 ▪WinJS.xhr({ url: 'a.php' })
 .then(function() {
 return WinJS.xhr({ url: 'b.php' });
 })
 .then(function() { 
 return WinJS.xhr({ url: 'c.php' });
 })
 .done(function() { 
 /* ... */
 });
35. PROMISE 物件 ▪WinJS.Promise.join([
 WinJS.xhr ({ url: 'a.php' }),
 WinJS.xhr ({ url: 'b.php' }),
 WinJS.xhr ({ url: 'c.php' })
 ])
 .done(function() {
 /* ... */
 });
36. 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) { /* ... */ });
37. 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) { /* ... */ });
38. SETPROMISE() ▪default.js ▪args.setPromise(
 WinJS.UI.processAll().done(function() { /* ... */ })
 );
39. ⾃自製 PROMISE 物件 ▪var promise = new WinJS.Promise(
 function(complete, error, progress) {
 setTimeout(function() {
 // …
 complete('DEMO');
 }, 3000);
 }
 );
40. ⾃自製 PROMISE 物件 ▪WinJS.xhr 原始碼
41. SINGLE-PAGE NAVIGATION ▪微軟建議 App 使⽤用 ▪WinJS.Navigation 、 WinJS.UI.Pages ▪瀏覽應⽤用程式、格線應⽤用程式、分割應⽤用程式
42. 瀏覽應⽤用程式 ▪default.html ▪<script src="/js/navigator.js" ></script> ▪<div id="contenthost"> ▪home.html
43. 瀏覽應⽤用程式 ▪新增資料夾 /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);}
44. OBSERVABLE 物件 ▪ECMAScript 5 Object getter setter ▪WinJS.Binding.as ▪WinJS.Binding.Template ▪WinJS.Binding.List ▪WinJS.UI.ListView
45. 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
46. WINJS.BINDING.TEMPLATE ▪ <div id="temp" data-win-control="WinJS.Binding.Template" >
 <div data-win-bind="style.backgroundColor : color" >
 <p data-win-bind="innerHTML : x" ></p>
 <p data-win-bind="textContent : y" ></p>
 </div>
 </div>
47. APPLICATION LIFECYCLE ▪default.js ▪oncheckpoint
48. APPLICATION LIFECYCLE ▪HTML5 ▪localStorage 、 sessionStorage ▪Windows.Storage.ApplicationData.current ▪localSettings 、 roamingSettings ▪localFolder 、 roamingFolder 、temporaryFolder ▪WinJS.Application ▪local 、 roaming 、 temp ▪Promise
49. CHARMS BAR 常⽤用⼯工具列 ▪Search Charm 搜尋快速鍵 ▪Share Charm 分享快速鍵 ▪Settings charm 設定快速鍵 ▪App 內 、 App 外
50. CONTRACT 協定 ▪Google 搜尋 Contract msdn store ▪Search contract 搜尋協定 ▪Share contract 分享協定 ▪Setting contract 設定協定 ▪…
51. SEARCH CONTRACT 搜尋協定 ▪格線應⽤用程式 ▪Single-page navigation ▪<script src="/js/data.js"></script> ▪ 範例資料
52. SEARCH CONTRACT 搜尋協定 ▪新增資料夾 pages/search ▪新增 搜尋協定 search.html ▪package.appxmanifest ▪宣告 ▪default.html ▪<script src="/pages/search/search.js"></script>
53. SEARCH CONTRACT 搜尋協定 ▪search.js ▪_searchData() ▪_generateFilters() ▪search.html ▪data-win-bind="innerHTML: title search.markText"
54. 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()
55. SETTINGS CONTRACT 設定協定 ▪Google 搜尋 SettingsFlyout ▪新增資料夾 html ▪新增 html/demo.html ▪<div data-win-control="WinJS.UI.SettingsFlyout" data-win- options="{ settingsCommandId :'demo', width :'wide' }" >
56. 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
57. WINDOWS AZURE MOBILE SERVICE ▪https://manage.windowsazure.com/ ▪Mobile Service ▪Push notifications ▪Google 搜尋 azure push ▪Authentication ▪Microsoft 、 Facebook 、 Twitter 、 Google 帳號認證 ▪Google 搜尋 azure auth mobile
58. BLEND ▪尺⼨寸 ▪翻轉 ▪Snap View
59. GUIDELINE ▪Google 搜尋 ux guideline store ▪Google 搜尋 font guideline store ▪Snap View
60. 專案 -> 市集 ▪Windows App Certification Kit ▪簡稱 WACK ▪BOM ▪Bytecode
61. WINDOWS 8 CAMP IN A BOX ▪Google 搜尋 Windows 8 Camp in a box ▪中⽂文版？