Steps to developing Metro style apps 第一章-Creat a UI（2）(2)
原文地址：http://msdn.microsoft.com/en-us/library/windows/apps/br211362.aspx
第一章知识结构：
第二节：Adding controls and content（添加控件和内容）
（原地址：http://msdn.microsoft.com/en-us/library/windows/apps/hh465393.aspx）
本节内容概览：
Displaying images, graphics, and thumbnails(显示图片图形和缩略图)
原文地址：http://msdn.microsoft.com/en-us/library/windows/apps/hh465459.aspx
下面写一个事例，如何选择并显示图片
第一步
新建三个控件，一个按钮，用于选择图片，一个<p>用于显示图片相关信息，一个<img>用于显示选择的图片，如下：
1: <button id="selectImageButton">Select an image...</button>
2: <p id="imageInformation"></p>
3: <img id="imageControl" src="placeholder.png" alt="The selected image" />
并给按钮添加点击事件：
WinJS.UI.processAll().done(function () {
document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
});
第二步：定义 loadImage函数
1: function loadImage(eventInfo) {
2:
3: var picker = new Windows.Storage.Pickers.FileOpenPicker(); //创建文件打开器
4: picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]); //过滤要选择的文件类型
5: picker.pickSingleFileAsync().then(processResults, displayError);//第一个是成功的回调函数
6: }
FileOpenPicker详细http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.pickers.fileopenpicker.aspx
第三步：处理选择的图片：实现 打开文件成功的回调函数processResults
1: function processResults(file) {
2:
3: // 检查是不是 选择了文件.
4: // 如果用户选择取消选择，那么返回null
5: if (file) {
6: var imageBlob = URL.createObjectURL(file);//createObjectURL返回一个Blob,Blob就是一个原始的二进制文件
7: document.getElementById("imageControl").src = imageBlob; //使图片地址指向这个Blob对象
8: //这是我想起了 原来用 ashx做验证码，返回的也是二进制图片
9:
10: document.getElementById("imageInformation").innerText =
11: "The src of the first image has been set to " + file.name;
12:
13: // 释放blob占用的资源
14: URL.revokeObjectURL(imageBlob);
15: } else {
16: displayError("An image wasn't selected.");
17: }
18: }
createObjectURL详细内容如下url: http://msdn.microsoft.com/en-us/library/windows/apps/hh453196.aspx
Blob object详细内容如下url如下：http://msdn.microsoft.com/en-us/library/windows/apps/hh453178.aspx
第四步： 处理错误，实现选择图片当中出现的错误，实现displayError函数
1: function displayError(error) {
2: if (imageBlob) {
3: URL.revokeObjectURL(imageBlob);
4: }
5: document.getElementById("imageInformation").innerText = error;
6: }
页面完整代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title></title>
5: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
6: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
7: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
8: <script type="text/javascript">
9:
10:
11: function processResults(file) {
12:
13: if (file) {
14: var imgBlob = URL.createObjectURL(file);
15: document.getElementById("imageControl").src = imgBlob;
16: document.getElementById("imageInformation").innerText =
17: "The src of the first image has been set to " + file.name;
18:
19: // Release the blob resources.
20: URL.revokeObjectURL(imageBlob);
21:
22:
23: }
24: else {
25: displayError("An image wasn't selected.");
26: }
27:
28: };
29: function displayError(error) {
30: if (imageBlob) {
31: URL.revokeObjectURL(imageBlob);
32: }
33: document.getElementById("imageInformation").innerText = error;
34: };
35:
36: function loadImage(eventInfo) {
37:
38: var picker = new Windows.Storage.Pickers.FileOpenPicker();
39: picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
40: picker.pickSingleFileAsync().then(processResults, displayError);
41: }
42:
43: function Initialize() {
44:
45: WinJS.UI.processAll().done(function () {
46:
47: var s = document.getElementById("selectImageButton");
48: s.addEventListener("click", loadImage, false);
49:
50:
51: })
52: }
53:
54: document.addEventListener("DomContentLoaded", Initialize(), false);
55:
56: </script>
57: </head>
58: <body>
59: <button id="selectImageButton">Select an image...</button>
60: <p id="imageInformation"></p>
61: <img id="imageControl" src="" alt="The selected image" />
62: </body>
63: </html>
执行效果：
1初始界面：
2选择图片：
3.展示图片：
thumbnails（缩略图）http://msdn.microsoft.com/en-us/library/windows/apps/hh465350.aspx
缩略图大概分以下几种：
如下是实现 pictureView 代码：这个列子并没有写完，因为getThumbnailAsync这个函数返回的缩略图 我不知道怎么来处理，望有高手指点。
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title></title>
5: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
6: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
7: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
8: <script type="text/javascript">
9:
10:
11: function processResults(file) {
12:
13: if (file) {
14: // var value = Windows.Storage.FileProperties.ThumbnailMode.picturesView;
15:
16: //for (var i = 0; i < file.length; i++) {
17: // var listToken = Windows.Storage.StorageFile.getFileFromPathAsync(file[0].path);
18: //}
19:
20: // var s = storageFile.getAt(0);
21:
22:
23: file.getThumbnailAsync( //返回缩略图
24: Windows.Storage.FileProperties.ThumbnailMode.pictureView,
25: 200,
26: Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale).then(
27: function (storageItemThumbnail) {
28: // Add code to process thumbnail
29:
30: //storageItemThumbnail就是返回的缩略图 图像
31:
32: var s = storageItemThumbnail; //调试时显示contentType = "image/jpeg"
33:
34: }
35: );
36:
37: var sasd = "sasds";
38: }
39: else {
40: displayError("An image wasn't selected.");
41: }
42:
43: };
44: function displayError(error) {
45: if (imageBlob) {
46: URL.revokeObjectURL(imageBlob);
47: }
48: document.getElementById("imageInformation").innerText = error;
49: };
50:
51: function loadImage(eventInfo) {
52: // Windows.Storage.Pickers.PickerViewMode.list;
53: var folderPicker = new Windows.Storage.Pickers.FileOpenPicker();//FolderPicker
54: folderPicker.fileTypeFilter.replaceAll(["*"]);
55: folderPicker.pickSingleFileAsync().then(processResults, displayError); //pickSingleFileAsync打开单文件
56: }
57:
58: function Initialize() {
59:
60: WinJS.UI.processAll().done(function () {
61:
62:
63: var s = document.getElementById("selectImageButton");
64: s.addEventListener("click", loadImage, false);
65:
66:
67: })
68: }
69:
70: document.addEventListener("DomContentLoaded", Initialize(), false);
71:
72: </script>
73: </head>
74: <body>
75: <button id="selectImageButton">Select an image...</button>
76: <p id="imageInformation"></p>
77: <img id="imageControl" src="" alt="The selected image" />
78: </body>
79: </html>
Displaying popups（显示弹出窗口）
添加一个Flyout（http://msdn.microsoft.com/en-us/library/windows/apps/br211726.aspx#properties）
实现效果 ，点击按钮，弹出确认框，点击确认框内按钮，确认框消失
实现代码：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title></title>
5: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
6: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
7: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
8: <script type="text/javascript">
9: function Initialize() {
10: WinJS.UI.processAll().then(function () {
11:
12: // 侦听点击事件
13: document.getElementById("buyButton").addEventListener("click", showConfirmFlyout, false);
14: document.getElementById("confirmButton").addEventListener("click", confirmOrder, false);
15:
16: // Command and Flyout functions.
17: function showConfirmFlyout() {
18:
19:
20: confirmFlyout.winControl.show(buyButton, "bottom","center");
21: //show http://msdn.microsoft.com/en-us/library/windows/apps/br211727.aspx
22: }
23:
24: function confirmOrder() {
25: document.getElementById("confirmFlyout").winControl.hide();
26: }
27: })
28: }
29:
30: document.addEventListener("DomContentLoaded", Initialize(), false);
31:
32: </script>
33: </head>
34: <body>
35: <!-- Button that launches the confirmation Flyout. -->
36: <button class="action" id="buyButton">Buy</button>
37: <!-- Confirmation Flyout. -->
38: <div id="confirmFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm purchase flyout}">
39: <div>你需要支付1000元</div>
40:
41: <button id="confirmButton">Complete Order</button>
42: </div>
43: </body>
44: </html>
初始页面：
点击按钮：
点击弹出框内按钮：
添加一个菜单：http://msdn.microsoft.com/en-us/library/windows/apps/hh700921.aspx
实现效果： 点击 response按钮，就会在按钮下 加载一个菜单
实现代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title></title>
5: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
6: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
7: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
8: <script type="text/javascript">
9: function Initialize() {
10: WinJS.UI.processAll().then(function () {
11:
12: // Command and menu functions.
13: function showFlyout(flyout, anchor, placement) {//显示菜单
14: flyout.winControl.show(anchor, placement);
15: }
16: function hideFlyout(flyout) {//隐藏菜单
17: flyout.winControl.hide();
18: }
19: function alwaysSave() {
//默认选择
20: var alwaysSaveState = document.getElementById("alwaysSaveMenuItem").winControl.selected;
21: }
22: function reply() {
23: hideFlyout(respondFlyout);
24: }
25: function replyAll() {
26: hideFlyout(respondFlyout);
27: }
28: function forward() {
29: hideFlyout(respondFlyout);
30: }
31:
32: function showRespondFlyout() {
33: showFlyout(respondFlyout, respondButton, "bottom");
34: }
35:
36: // Initialize event listeners.
37: document.getElementById("respondButton").addEventListener("click", /*@static_cast(EventListener)*/showRespondFlyout, false);
38: document.getElementById("alwaysSaveMenuItem").addEventListener("click", /*@static_cast(EventListener)*/alwaysSave, false);
39: document.getElementById("replyMenuItem").addEventListener("click", /*@static_cast(EventListener)*/reply, false);
40: document.getElementById("replyAllMenuItem").addEventListener("click", /*@static_cast(EventListener)*/replyAll, false);
41: document.getElementById("forwardMenuItem").addEventListener("click", /*@static_cast(EventListener)*/forward, false);
42:
43:
44:
45:
46: })
47: }
48:
49: document.addEventListener("DomContentLoaded", Initialize(), false);
50:
51: </script>
52: </head>
53: <body>
54: <!-- 调用菜单 -->
55: <button id="respondButton" aria-haspopup="true">Respond</button>
56: <!--菜单控件-->
57: <div id="respondFlyout" data-win-control="WinJS.UI.Menu">
58: <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'alwaysSaveMenuItem',label:'Always save drafts',type:'toggle', selected:'true'}">
59: </button>
60: <hr data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'separator',type:'separator'}" />
61: <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'replyMenuItem',label:'Reply'}">
62: </button>
63: <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'replyAllMenuItem',label:'Reply All'}">
64: </button>
65: <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'forwardMenuItem',label:'Forward'}">
66: </button>
67: </div>
68: </body>
69: </html>
初始页面：
点击按钮效果：
点击菜单项效果：
添加一个信息对话框：http://msdn.microsoft.com/en-us/library/windows/apps/hh738361.aspx
一共提供了两个构造函数来创建一个消息框，如下：
代码如下：
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title></title>
5: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
6: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
7: <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
8: <script type="text/javascript">
9: function Initialize() {
10: WinJS.UI.processAll().then(function () {
11:
12: var messageDialog = new Windows.UI.Popups.MessageDialog("sss", "title");
13: messageDialog.showAsync();
14:
15: })
16: }
17:
18: document.addEventListener("DomContentLoaded", Initialize(), false);
19:
20: </script>
21: </head>
22: <body>
23: <button >asd</button>
24: </body>
25: </html>
效果如图：
