iT邦幫忙

DAY 8
6

昨天介紹了
* 開啓一個 Blank App 專案
* 哪些檔案是要做什麼
* 開啓(執行)/ 關閉你的App

今天要做 AppBar應用程式列,準備好了嗎? 空
主要會修改到的檔案:
default.html (起始頁面)
學到的重點是

  1. 使用 data-win-control 屬性
  2. 使用 data-win-options 屬性
  3. 如何知道 AppBar 搭配的 data-win-options有哪些選擇

AppBar (Application Bar)應用程式列,主要是用來提供一些命令的按鈕區塊,恩...我想像一下這種感覺要怎麼舉例,應用程式列裡面會一些 icon,各個 icon 都是一個功能的代表,就好像平常你在用 word 或是其他程式,當你點按右鍵的時候,也會有很多功能,像是複製,剪下,貼上,搜尋等等的功能。

當你開啓一個 App 的時候,AppBar 是不會主動打開的,怎麼開? 沒有觸控螢幕的人請按滑鼠右鍵,是觸控螢幕的人請在螢幕的上邊緣或是下邊緣撥動手指即可。

在前幾天的章節裡,我們有提到Appbar有分上面跟下面的,在這裡是介紹下面的AppBar。

接著請開啓你的 default.html,在與之間加入顯示 AppBar 的 html:

<div data-win-control="WinJS.UI.AppBar" data-win-options="">
<button  data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'ComAdd',label : 'Add', icon:'add', section:'global', tooltip:'removeItem'}"></button>
<hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator', setcion:'global'}"/>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'ComDelete',label:'Delete',icon:'delete', section:'global', tooltip:'deleteItem'}"></button>
</div>

首先,最外層的 div 有著 data-win-control 的屬性,使用了 WinJS.UI.AppBar , 用以顯示 AppBar 的結果。

接著裡面包著一些 button 標籤,每個標籤分別是一個功能,可以從 button 的 data-win-control 看出其屬性是 WinJS.UI.AppBarCommand,而且還附有 data-win-controls 屬性,該屬性的內容像是一個物件,給它相對應的 key 跟 value,比方說 id 是 ComDelete,label 是 Delete ,這些Key跟 Value,都是跟你的顯示面有關係。

包在 WinJS.UI.AppBar 裡面的標籤,如果要有 data-win-control 屬性,只能使用AppBarCommand。

至於,到底 AppBarCommand 的 data-win-options 有哪些設定呢?以下舉幾個例子來說,
想要知道更多的話歡迎參考:http://msdn.microsoft.com/en-us/library/windows/apps/hh700497.aspx

接著我們試試看在本機run看看這個app:點選在本機電腦執行的icon

接著就會看到起始畫面,然後到主畫面,到了主畫面什麼都沒有,因為前面有提到 AppBar 不會自己出現,請點按滑鼠右鍵,他就會出現了,樣子如下圖:(全貌)

(局部)

浮出來的 removeItem 其實就是 button add 的 tooltip 屬性的值。
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'ComAdd',label : 'Add', icon:'add', section:'global', tooltip:'removeItem'}"></button>

我們還可以發現 Add 跟 Delete 之間,還有一條分隔線,
那條分隔線就是<hr>這個標籤,
雖然hr沒有什麼功能,不過它屬於 WinJS.UI.AppBar 底下的元素,
所以也需要為他增加 data-win-control 與 data-win-options
(<hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator', setcion:'global'}"/>),
我有試過只單純留下<hr>,不過很慘的是,完全會被擋下,
data-win-control 與 data-win-options ,缺一不可。

可以試著改變 data-win-options 的值,看看有哪些差異,對了,icon可不是自己胡亂掰出來的,如果你打了 icon:’apple’,可不會有真的蘋果icon出現,除非 WinJS.UI.AppBar 本來就有提供,能不能自己客制呢?恩..我沒試過耶...,歡迎大家親自嘗試。不過icon有哪些可以用,就在這個表了:
http://msdn.microsoft.com/en-us/library/windows/apps/hh770557.aspx

AppBar的CSS ,官方文件(http://msdn.microsoft.com/en-us/library/windows/apps/br229670.aspx)有提供這些class可以讓你做客制化的動作,我大概簡單隨意設定一下每個class的樣式,把background換掉,就變成這個樣子了:
(這張圖是兩張圖疊在一起,分別是有修改css跟沒修改css的樣子)

(恩..很醜,但是藉由這些顯示的結果,可以回推哪些 css class 對應到的部分是哪個地方)

下一篇我們會來做FlipView。


上一篇
Day7 visual studio 2012 模擬器(Simulator)的介紹
下一篇
Day9 實做WinJS.UI.FlipView
系列文
用 HTML5 和 JavaScript 學習開發 Windows 8 Apps30

我要留言

立即登入留言