我。閱讀

這一章開始介紹基礎元件了。 AppBar 主要是當按下滑鼠右鍵或是由下往上時出現在螢幕下方。用的方法就是在 HTML 裡增加一個 div，id 屬性設為 appBar，data-win-control 屬性設為 WinJS.UI.AppBar 。裡面的按鈕，則是用 button tag，其 data-win-control 屬性為 WinJS.UI.AppBarCommand，要提供預設屬性設置的話，就用 data-win-options 屬性，屬性內容則是 json 格式的字串。 大致像是這樣子： <div id="appBar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{section: 'global', label: 'New Item', icon: 'add'}"> </button> </div> AppBar 因為會被許多 HTML 畫面引用到，所以可以寫在獨立的 HTML 裡，然後使用 HtmlControl 來引用，像這樣： <div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/appbar.html'}"></div> 作者把這種獨立的 HTML 畫面叫做 HTML fragment。 從上面，可以了解到 WinJS 利用 data-win-control 跟 data-win-options 來做一些事情。程式碼不能寫在 appbar 所在的 HTML 裡，要放在共用的 js 裡，像作者是寫在 default.js，正好每個 HTML 畫面都會用到。除此之外，作者也用一個 namespace 來切開。 Flyout 有點像是 pop dialog，一樣是 div tag，data-win-control 是 WinJS.UI.Flyout。裡面用的 tag 就是標準的 form tags，像 label、input、button 之類的。要讓按鈕叫出這個 flyout，AppBarCommand 按鈕的 data-win-options 裡要加一個 flyout 項目，內容填 flyout 的 id 即可。雖然是填 id，但可以放在跟 AppBar 不同的 HTML fragment 裡。程式的話，就是去操作 DOM element，真正的資料存取則是透過 ViewModel 來做。 Page 是 HtmlControl 的進化版，HtmlControl 能控制的事情很少，Page 可以在頁面載入完成時去執行一些事情。大致的做法跟前面都很類似，但 Page 需要寫的 JavaScript 代碼會比較多一點，頁面跟頁面間的切換是用 WinJS.UI.Pages.render()。 一樣可以用 iframe 來顯示額外的頁面，也可以加上 ready() 的事件做一些處理。 最後提到 package.appmanifest，這邊可以定義 permission，表示 app 會使用到哪些 permission。這一章的程式碼不多，因為沒有跟著實作，僅大致摘錄一下看過的部分。