Plurk paste

昨天知道原來WinJS是利用data-win-control 、data-win-options和data-win-bind等把html轉成 Windows 8 Store App 的控制元件。
那 data-win-control 可以套用那些控制元件呢？
[url]http://msdn.microsoft.com/en-us/library/windows/apps/hh465493.aspx[/url]
從這個網址列出了可以用的控制元，那就來看看這些控制元件套用後的結果是怎樣。



[b]1 AppBar[/b] 顯示命令。
[code]<div id="commandsAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}">
</button>
[/code]
(ps 這裡有段程式碼每次貼上去都anwer error, 所以不完整)
顯示結果[img]http://ithelp.ithome.com.tw/upload/images/20120930/20120930031048506747b8e563b_resize.png[/img]
按右鍵後下方AppBar就跑出來了。









[b]2 DatePicker[/b] 可以讓使用者選取日期。
[code]<div data-win-control="WinJS.UI.DatePicker"></div>[/code]
執行結果
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209291624005066b0205a34a_resize.png[/img]









[b]3 FlipView[/b] 顯示項目集合，一次一個項目。
[code] <div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="overlaidItemTemplate">
<img class="image" src="#" data-win-bind="src: picture; alt: title" />
<div class="overlay">
<h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
</div>
</div>
</div>

<div id="simple_FlipView"
data-win-control="WinJS.UI.FlipView"
data-win-options="{ itemDataSource: DefaultData.bindingList.dataSource, itemTemplate: select('#simple_ItemTemplate') }">
</div>
[/code]

[code](function () {
"use strict";

var array = [
{ type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
{ type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
{ type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
{ type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
{ type: "item", title: "Valley", picture: "images/Valley.jpg" }
];
var bindingList = new WinJS.Binding.List(array);

WinJS.Namespace.define("DefaultData", {
bindingList: bindingList,
array: array
});

var e = DefaultData.bindingList.dataSource;
})();[/code]

他需要DataBind 所以程式照copy好了 XDD
執行結果
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209291629155066b15b8837d_resize.png[/img]
按左邊或右邊換頁，我一樣還是沒圖。











[b]4 Flyout [/b]顯示一則要求使用者互動的訊息。

[code]
<div id="Flyout1" data-win-control="WinJS.UI.Flyout"> 這是啥 ????</div>
<button id="Button1" class="action">TextFlyout</button>
[/code]

[code] args.setPromise(WinJS.UI.processAll().then(function () {
document.getElementById("Flyout1").winControl.show(Button1, "bottom");
}));[/code]
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209291652285066b6cc29a1a_resize.png[/img]
可以呈現在button下方的flyout
其他範例1[url]http://debugmode.net/2012/01/12/flyout-control-in-windows-8-html-javascript-metro-application/[/url]
其他範例2[url]https://github.com/dotnetcurry/WinJSMenu/downloads[/url]











[b]5 ListView[/b] 在格線或清單配置中顯示項目集合。
[code](function () {
"use strict";

var dataArray = [
{ title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
{ title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
{ title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
{ title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
{ title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
{ title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
{ title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
];

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

// Create a namespace to make the data publicly
// accessible.
var publicMembers =
{
itemList: dataList
};
WinJS.Namespace.define("DataExample", publicMembers);

})();

[/code]

[code]
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div>

<!-- Displays the "picture" field. -->
<img data-win-bind="alt: title; src: picture" />
<div>

<!-- Displays the "title" field. -->
<h4 data-win-bind="innerText: title"></h4>

<!-- Displays the "text" field. -->
<h6 data-win-bind="innerText: description"></h6>
</div>
</div>
</div>

<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">
</div>

[/code][img]http://ithelp.ithome.com.tw/upload/images/20120929/201209291657325066b7fc18b50_resize.png[/img]
這個好像copy過 XDD











[b]6 HtmlControl[/b] 顯示 HTML 頁面。
[code]<div id="header1" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/page.html'}"></div>
[/code]

page.html
[code]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
啦啦啦啦啦啦啦啦啦
</body>
</html>[/code]
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209291705105066b9c69d3af_resize.png[/img]
把page1.html的內容塞到header1裡了











[b]7 Menu [/b] 功能表
[code] <button id="Button1" class="action">TextFlyout</button>
<div id="mnuReports" data-win-control="WinJS.UI.Menu">
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'menuItemCitywiseDoctors',label:'City wise Doctors'}"></button>
<hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'separator3',type:'separator'}" />
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'menuItemCitywiseStockiest',label:'City wise Stockiest'}"></button>
<hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'separator4',type:'separator'}" />
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'menuItemStockiestwiseOrders',label:'Stockiest wise Orders'}"></button>
<hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'separator5',type:'separator'}" />
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'menuItemDoctorwiseOrders',label:'Doctor wise Orders'}"></button>
</div>[/code]


[code] args.setPromise(WinJS.UI.processAll().then(function () {
document.getElementById("mnuReports").winControl.show(Button1, "bottom");
}));[/code]
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209291716365066bc74cd1b6_resize.png[/img]
跟Flyout一樣嘛....

(ps 這裡格式亂掉了, 原因不明)












[b]8 PageControl[/b] 可以把某一個設計好的html和js 塞到一個div裡
[url]http://msdn.microsoft.com/en-us/library/windows/apps/jj126158.aspx[/url]
這裡寫說一開始要用 WinJS.UI.Pages.define 定義一個自訂控制元件，然後有五種方法呼叫它。這個比較難今天先不談這個了。











[b]9 Rating [/b] 評分
[code] <div data-win-control="WinJS.UI.Rating"></div>[/code]
執行結果
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209292023115066e82fce33f_resize.png[/img]











[b]10 SemanticZoom [/b] 有兩種狀態，一種是縮小模式，一種是放大模式。
[code]<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">

<!-- The zoomed-in view. -->
<div id="zoomedInListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: mediumListIconTextTemplate, groupHeaderTemplate: headerTemplate, groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
></div>

<!--- The zoomed-out view. -->
<div id="zoomedOutListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: semanticZoomTemplate, selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
></div>[/code]
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209292028405066e9788d190_resize.png[/img]
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209292028485066e980f06e0_resize.png[/img]











[b]11 SettingsFlyout[/b] 應用程式設定
[code]WinJS.UI.SettingsFlyout.show();[/code]
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209292046205066ed9c9ebd2_resize.png[/img]
一執行右邊就跑出設定畫面了，可以自行設計設定內容。











[b]12 TimePicker[/b] 時間
[code]<div data-win-control="WinJS.UI.TimePicker"></div>[/code][img]http://ithelp.ithome.com.tw/upload/images/20120929/201209292048225066ee1637d4c_resize.png[/img]
很簡單











[b]13 ToggleSwitch [/b] 開關
[code]<div data-win-control="WinJS.UI.ToggleSwitch" />
[/code]
[img]http://ithelp.ithome.com.tw/upload/images/20120929/201209292050145066ee8655fab_resize.png[/img]











[b]14 Tooltip [/b] 說明
[code] <span data-win-control="WinJS.UI.Tooltip" data-win-options="{innerHTML: 'Microsoft Corporation<br><span class=\'win-text-domain\'>www.microsoft.com</span>'}"
style="margin-left: 40px;"><a href="http://www.microsoft.com">Microsoft</a>
</span>

[/code]
很難拍到畫面.... XDDDD











[b]15 ViewBox [/b]是對排版比較重要的元件。
參考 [url]http://www.codefoster.com/post/2012/06/12/boxes.aspx[/url]






今天先到這了，頭有點痛..
(ps這篇文章有些格式亂掉了, 原因不明, 若要看原始碼請連)