Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Windows 市集應用程式開發實戰 (使用 JavaScript)
Search
Ping-Yen Tsai
December 13, 2012
Technology
0
67
Windows 市集應用程式開發實戰 (使用 JavaScript)
MSDN 講座
Ping-Yen Tsai
December 13, 2012
Tweet
Share
More Decks by Ping-Yen Tsai
See All by Ping-Yen Tsai
「台灣報紙新聞」與「台灣即時新聞」
pingyen
0
100
我的工作經驗 (到目前為止)
pingyen
2
410
網頁前端⼯程師與室內裝修師傅的相似之處
pingyen
0
80
JavaScript Closure
pingyen
1
100
HTML5 Sectioning Elements
pingyen
0
45
次世代搜尋引擎戰爭
pingyen
0
92
進階 JavaScript
pingyen
0
220
jQuery 入門
pingyen
0
50
Windows 市集應⽤用程式實例解說 (使⽤ JavaScript)
pingyen
0
83
Other Decks in Technology
See All in Technology
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
740
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
270
簡単に始めるSnowflakeの機械学習
nayuts
1
190
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Navigating Team Friction
lara
181
13k
Debugging Ruby Performance
tmm1
71
11k
Speed Design
sergeychernyshev
9
270
Thoughts on Productivity
jonyablonski
64
4.1k
Facilitating Awesome Meetings
lara
46
5.8k
Done Done
chrislema
179
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Gamification - CAS2011
davidbonilla
78
4.9k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Embracing the Ebb and Flow
colly
81
4.3k
GitHub's CSS Performance
jonrohan
1026
450k
Transcript
WINDOWS 市集應⽤用程式開 發實戰 (使⽤用 JAVASCRIPT) 蔡秉諺 Vexed 中華電信 Xuite &
Hami+ 個⼈人雲
假設你們⽤用過 WINDOWS 8 了 ▪不是電腦教室
開發環境 ▪Visual Studio 2012 ▪Express 免費 ▪ Visual Studio Express
2012 for Windows 8 ▪Windows 8 ▪Google 搜尋 Windows 8 439 ▪Enterprise 評估版 90 天免費
先當和開發網站⼀一模⼀一樣 ▪當然不是⼀一模⼀一樣 ▪IE10 ▪和 Chrome Firefox 相似 ▪HTML5 、 CSS3
、 ECMAScript 5
空⽩白應⽤用程式 ▪⽅方案總管 ▪default.html 、 default.js 、 default.css ▪本機電腦、模擬器、遠端電腦 ▪偵錯 ->
視窗 ▪DOM 總管 ▪JavaScript 主控台 ▪ console.log ▪ Google 搜尋 JavaScript Console MSDN
不⼀一樣 有好有壞 ▪好的 ▪AJAX Cross Domain ▪Native 多 Windows 、
MSApp 兩物件
AJAX CROSS DOMAIN ▪App 內檔案也可以 AJAX 載⼊入
WINDOWS 物件 ▪不是 window 物件 ▪Windows Runtime API ▪簡稱 WinRT
API ▪C# C++ VB JavaScript 共通 ▪不是 Windows RT
WINDOWS 物件 ▪系統底層
⾃自⼰己寫 WINDOWS RUNTIME COMPONENT ▪C++ C# VB ▪JavaScript 呼叫 ▪Google
搜尋 Windows Runtime Component
不⼀一樣 有好有壞 ▪壞的 ▪innerHTML 、 document.write 、 … 安全性限制 ▪不能嵌⼊入外部
JavaScript ▪不能開新視窗 ▪不能將整個 App 導⾄至外部網⾴頁 ▪沒有 FLASH 、 ActiveX ▪沒有 alert() confirm() prompt()
INNERHTML 、 … 安全性限制 ▪innerHTML ▪outerHTML ▪pasteHTML ▪document.write ▪document.writeln ▪createContextualFragment
▪insertAdjacentHTML ▪DOMParser.parseFromString
INNERHTML 、 … 安全性限制 ▪XSS ▪ <a onclick="Windows.Storage.ApplicationData.current.roamingSettings.values['XSS'] = 'demo';"
> ▪toStaticHTML() ▪Google 搜尋 toStaticHTML msdn store
不能嵌⼊入外部 JAVASCRIPT ▪CDN ▪廣告
不能開新視窗 ▪<a target="_blank" > ▪window.open() ▪moveTo() 、 moveBy() 、 resizeTo()
、 resizeBy() ▪window.close() ▪中⽌止 App ▪ 例外使⽤用 ▪ 不可使⽤用?
不能將整個 APP 導⾄至外部網⾴頁 ▪<a href="http://bing.com" > ▪跳出 App 、預設瀏覽器開啟
沒有 FLASH 、 ACTIVEX
沒有 ALERT() CONFIRM() PROMPT() ▪Windows.UI.Popups.MessageDialog ▪Flyout
我的解決⽅方法 ▪alert() confirm() prompt() 替代⽅方案 ▪MSApp.execUnsafeLocalFunction ▪<iframe> 嵌⼊入外部網⾴頁 ▪Local context
vs. Web context ▪App 內網⾴頁 Web context 載⼊入
ALERT() 替代⽅方案 ▪var md = new Windows.UI.Popups.MessageDialog('Hi'); md.showAsync().done(function() {
// ... });
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); });
PROMPT() 替代⽅方案 ▪無 100% ▪confirm() 替代⽅方案? ▪Flyout 近似 ▪無 Block
UI
MSAPP.EXECUNSAFELOCALFUNCTION ▪MSApp.execUnsafeLocalFunction ▪繞過 innerHTML 、 document.write 、 … 安全性限制
<IFRAME> 嵌⼊入外部網⾴頁 ▪Web context ▪無特權 幾無限制 近似瀏覽器環境
LOCAL CONTEXT VS. WEB CONTEXT ▪Google 搜尋 Local Web context
APP 內網⾴頁 WEB CONTEXT 載⼊入 ▪ms-appx-web:/// ▪三條斜線 ▪ ms-appx-web://a3001e40-c3bf-4ae9-b713-da500ca42135/ ▪
package.appmanifest ▪ ms-appx:/// 、 ms-appdata:/// 同理 ▪⽤用 postMessage() 溝通 ▪Google 搜尋 postMessage
實例演練 ▪使⽤用 jQuery ▪jQuery.support ▪使⽤用 Google Maps JavaScript API ▪使⽤用
YUI ▪Google 搜尋 Windows 8 Learnings ▪ 動態載⼊入 類似 AMD
IE10 ▪ECMAScript 5 ▪CSS3
ECMASCRIPT 5 ▪Strict Mode ▪"use strict"; ▪Google 搜尋 mdn strict
▪拿掉 "use strict"; ? ▪Object ▪Google 搜尋 mdn object guide ▪getter setter
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
WINDOWS LIBRARY FOR JAVASCRIPT ▪純 CSS 、 JavaScript ▪可以看、不能改 ▪JavaScript
物件 WinJS ▪base.js WinJS ▪ui.js WinJS.UI ▪Google 搜尋 Windows API
CONTROL 控制項 ▪DOM 物件屬性 ▪winControl ▪HTML 元素屬性 ▪data-win-control ▪data-win-options ▪default.js
▪WinJS.UI.processAll() ▪Google 搜尋 WinJS controls
PROMISE 物件 ▪CommonJS ▪jQuery Deferred Object ▪與 callback 相⽐比 語意清晰
▪⾮非同步
PROMISE 物件 ▪WinJS.xhr({ url: 'a.php' }) .then(function() { return WinJS.xhr({
url: 'b.php' }); }) .then(function() { return WinJS.xhr({ url: 'c.php' }); }) .done(function() { /* ... */ });
PROMISE 物件 ▪WinJS.Promise.join([ WinJS.xhr ({ url: 'a.php' }), WinJS.xhr ({
url: 'b.php' }), WinJS.xhr ({ url: 'c.php' }) ]) .done(function() { /* ... */ });
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) { /* ... */ });
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) { /* ... */ });
SETPROMISE() ▪default.js ▪args.setPromise( WinJS.UI.processAll().done(function() { /* ... */ }) );
⾃自製 PROMISE 物件 ▪var promise = new WinJS.Promise( function(complete, error,
progress) { setTimeout(function() { // … complete('DEMO'); }, 3000); } );
⾃自製 PROMISE 物件 ▪WinJS.xhr 原始碼
SINGLE-PAGE NAVIGATION ▪微軟建議 App 使⽤用 ▪WinJS.Navigation 、 WinJS.UI.Pages ▪瀏覽應⽤用程式、格線應⽤用程式、分割應⽤用程式
瀏覽應⽤用程式 ▪default.html ▪<script src="/js/navigator.js" ></script> ▪<div id="contenthost"> ▪home.html
瀏覽應⽤用程式 ▪新增資料夾 /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);}
OBSERVABLE 物件 ▪ECMAScript 5 Object getter setter ▪WinJS.Binding.as ▪WinJS.Binding.Template ▪WinJS.Binding.List
▪WinJS.UI.ListView
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
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>
APPLICATION LIFECYCLE ▪default.js ▪oncheckpoint
APPLICATION LIFECYCLE ▪HTML5 ▪localStorage 、 sessionStorage ▪Windows.Storage.ApplicationData.current ▪localSettings 、 roamingSettings
▪localFolder 、 roamingFolder 、temporaryFolder ▪WinJS.Application ▪local 、 roaming 、 temp ▪Promise
CHARMS BAR 常⽤用⼯工具列 ▪Search Charm 搜尋快速鍵 ▪Share Charm 分享快速鍵 ▪Settings
charm 設定快速鍵 ▪App 內 、 App 外
CONTRACT 協定 ▪Google 搜尋 Contract msdn store ▪Search contract 搜尋協定
▪Share contract 分享協定 ▪Setting contract 設定協定 ▪…
SEARCH CONTRACT 搜尋協定 ▪格線應⽤用程式 ▪Single-page navigation ▪<script src="/js/data.js"></script> ▪ 範例資料
SEARCH CONTRACT 搜尋協定 ▪新增資料夾 pages/search ▪新增 搜尋協定 search.html ▪package.appxmanifest ▪宣告
▪default.html ▪<script src="/pages/search/search.js"></script>
SEARCH CONTRACT 搜尋協定 ▪search.js ▪_searchData() ▪_generateFilters() ▪search.html ▪data-win-bind="innerHTML: title search.markText"
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()
SETTINGS CONTRACT 設定協定 ▪Google 搜尋 SettingsFlyout ▪新增資料夾 html ▪新增 html/demo.html
▪<div data-win-control="WinJS.UI.SettingsFlyout" data-win- options="{ settingsCommandId :'demo', width :'wide' }" >
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
WINDOWS AZURE MOBILE SERVICE ▪https://manage.windowsazure.com/ ▪Mobile Service ▪Push notifications ▪Google
搜尋 azure push ▪Authentication ▪Microsoft 、 Facebook 、 Twitter 、 Google 帳號認證 ▪Google 搜尋 azure auth mobile
BLEND ▪尺⼨寸 ▪翻轉 ▪Snap View
GUIDELINE ▪Google 搜尋 ux guideline store ▪Google 搜尋 font guideline
store ▪Snap View
專案 -> 市集 ▪Windows App Certification Kit ▪簡稱 WACK ▪BOM
▪Bytecode
WINDOWS 8 CAMP IN A BOX ▪Google 搜尋 Windows 8
Camp in a box ▪中⽂文版?