iT邦幫忙

DAY 9
9

用 HTML5 和 JavaScript 學習開發 Windows 8 Apps系列 第 12

Day9 實做WinJS.UI.FlipView

  • 分享至 

  • xImage
  •  

昨天發現了一篇中文說明,快速入門:新增 WinJS 控制項與樣式 (使用 JavaScript 和 HTML 的 Windows 市集應用程式 http://msdn.microsoft.com/zh-tw/library/windows/apps/hh465493.aspx) ,先跟大家說今天我做出來的結果就是看官網的快速入門 |o|,做出來的結果大概會像這樣...噴鼻血


Filpview 其實做起來就像 jQuery Image Slide 套件,可以用來瀏覽圖片的集合,你可以把一組一組的照片個別 Group 起來,當做一組 Flipview。

我先用一段簡短的話講一下過程跟步驟,後面再細講,但不會一直貼 code ,直接把官網的code 再貼一次好像不是很必要,(如果需要的話...再跟我說:P)。

(1). 範本條件:
使用空白應用程式(Blank App)範本。如果你不是使用空白範本,請記得要注意,要載入相關的文件( css, JavaScript 檔案 ),另外,你要在載入 html 時呼叫 WinJS.UI.ProcessAll( )這個函式。
如果你是使用空白應用程式,不用擔心呼叫這些 WinJS.UI.ProcessAll( ) 的這些事情,這些已經幫你包裝好了,詳情可以細看 YOUR_APP/js/default.js 檔案。

(2). 放照片的容器:
所謂空白應用程式就是什麼都沒有,要什麼,自己組,簡直是個DIY遊戲。
那要做 FlipView 這個容器,怎麼來?
答案是:自建 Div 或是準備其他 DOM(官方範例通常使用 div,但你要其他的也可以,我是不確定會不會有什麼問題,不過像我用過 p 也正常,請盡量用塊級元素,不是說非塊級元素就不可以,而是如果你使用了像 span 這種標籤,你還得為它加上 style=”display:block”,不是很麻煩嗎?善用一些 html 本身的特質去處理),重點是,要為該標簽加上 data-win-control=”WinJS.UI.FlipView”,這樣才會有作用。
如:<div id="AAAA_view" data-win-control="WinJS.UI.FlipView"></div>。以下是完整的 div 部分。

<div id="AAAA_view" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }">
</div>

(3). 加上 data-win-options:
上面提到,當我們對想要實現 FlipView 效果的 html 標籤,要指定 data-win-control
,事情當然沒有這麼簡單,FlipView 提供了一些設定讓你選擇,這時候就要使用data-win-options,data-win-options是以object的形式撰寫,守則就是『屬性:值』,為這個 FlipView 加上一些設定。

3.1 首先先介紹 itemDataSource:
比方說 itemDataSource,(可參考:http://msdn.microsoft.com/zh-tw/library/windows/apps/hh700620.aspx),這個屬性是用來連接資料的,官方網站有這樣子的說明:『itemDataSource 屬性接受 IListDataSource 物件』,其值的形式會像是這樣:
DataExample.itemDataList.dataSource。
太好了...!以上的說明太複雜了,白話一點就是,沒資料來源怎麼會有圖?
請大家看看下面這張做出來的結果:

『This is Second』 這個文字怎麼來?背景圖又是怎麼來?

所以這裡要做的步驟就是,我們要準備資料,開啓一個新的JavaScript檔案(叫dataexample.js好了),撰寫一個 FlipView 內容資料的 Array,並且實例化(new)一個 dataList,再來要使用 WinJS.Namespace.define() 這個函數建立一個的命名空間,讓這個資料成為公開可以讀取的成員。
WinJS.Namespace.define()有兩個參數,寫法如下:

WinJS.Namespace.define( “命名空間的名稱” ,  屬性跟值的對象Object );

還有別忘記在 default.html 載入 /js/default.js 之後補上自己所新建的 dataexample.js:

    <script src="/js/default.js"></script>
    <!--this is our flipview dataexample-->
    <script src="/js/dataexample.js"></script>

整個 dataexample.js 寫起來如下:

(function () {
    "use strict";
    var dataArray = [
       { type: "item", title: "This is First", picture: "images/001.png" },
       { type: "item", title: "This is Second", picture: "images/002.png" },
       { type: "item", title: "This is Third", picture: "images/003.png" }
    ];

    var dataArray2 = [
      { type: "item", title: "2This is First", picture: "images/001.png" },
      { type: "item", title: "2This is Second", picture: "images/002.png" },
      { type: "item", title: "2This is Third", picture: "images/003.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);
    var dataList2 = new WinJS.Binding.List(dataArray2);

    var publicMembers = {
        itemList: dataList
    };
    var publicMembers2 = {
        itemList: dataList2
    };
    WinJS.Namespace.define("DataExample", publicMembers);
    WinJS.Namespace.define("DataExample2", publicMembers2);
})();

3-2. 注意事項:

  1. 我們定義了兩個 Namespace 分別是 DataExample 跟 DataExample2,對應到的object是publicMembers(跟2),到時候在default.html的Flipview的data-win-options就會寫成這樣:
    <div id="AAAA_view"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"

</div>
讓 itemDataSource 的資料來源變成 我們自定義的namespace DataExample 的 itemList的dataSource。這樣這個flipview就會接到資料了。

2. 為什麼要用匿名函數包住所有的code ? 因為這些資料跟變數不想公開,但為了讓 FlipView 可以訪問到這些資料,方法就是用 WinJS.Namespace.define 建立命名空間。

(4). 模板啊... ,沒有模板就是只有光溜溜的身體,沒有衣服...
假如 dataexample.js 準備好了,html 也準備好了,當你跑起app時,卻只會看到....

這樣的畫面。不對吧?好像少了什麼,FlipView只會顯示他抓到的資料,沒錯... 接下來要介紹的是模板,也就是Template。

Template不是什麼很複雜的事情,他也是一種 data-win-control,寫起來就像這樣:
只是他比較特別,叫做WinJS.Binding.XXX,而不是WinJS.UI.XXXX。

<div id=”fancy_Template” data-win-control=”WinJS.Binding.Template”>
<!--顯示的內容--->
</div>

我們要做的事情,就是準備一個template,讓flipview去使用,如此一來,就不會只顯示flipview讀取到的資料。

只要在 flipview 的 data-win-options 的 itemTemplate 定義他要用哪一個模板就行了,
<div id="BBBB_view"
data-win-control="WinJS.UI.FlipView"
data-win-options="{ itemDataSource : DataExample2.itemList.dataSource, itemTemplate : fancy_Template }"

</div>

當然,我們的 fancy_template 太空洞了,有了模板,可是沒有結構跟資料,我們把它補齊:

<div id="fancy_template" data-win-control="WinJS.Binding.Template">
    <div class="overlaidItemTemplate">
        <img class="image" src="#" data-win-bind="src: picture; alt: title" />
        <div class="overlay">
            <h3 class="ItemTitle" data-win-bind="innerText: title" style="color:red"></h3>
        </div>
    </div>
</div>

data-win-bind的寫法如下:

data-win-bind=” propertyName 屬性名稱: dataFieldName 資料欄位名稱 ”

src是img標簽原本就有的屬性,picture是我們從資料的array定義的屬性,
(還記得嗎? )

var dataArray = [
       { type: "item", title: "This is First", picture: "images/001.png" },
       ...

(5). 最後要介紹的是 FlipView的方向是透過 orientation 設定為vertical 讓他垂直顯示,如下圖第二個。
<div id="BBBB_view"
data-win-control="WinJS.UI.FlipView"
data-win-options="{ itemDataSource : DataExample2.itemList.dataSource, itemTemplate : fancy_template, orientation: 'vertical' }"

</div>

不設定orientation當然就是水平顯示了。


上一篇
Day8 實做WinJS.UI.AppBar
下一篇
Day10 實作 WinJS.UI.ListView
系列文
用 HTML5 和 JavaScript 學習開發 Windows 8 Apps30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
yihan1028
iT邦新手 3 級 ‧ 2013-09-24 00:21:26

謝謝

yiying iT邦新手 1 級 ‧ 2013-09-24 00:24:53 檢舉

謝謝回應 謝謝

0
SunAllen
iT邦研究生 1 級 ‧ 2013-09-24 00:44:02

樓上不坐,我坐沙發毆飛

yiying iT邦新手 1 級 ‧ 2013-09-24 00:50:52 檢舉

哈哈 謝謝 讚rock

我要留言

立即登入留言