运用JavaScript构建你的第一个Metro式应用程序(onWindows 8)(三)

简介: 原文 http://blog.csdn.net/zhangxin09/article/details/6793593 这是《运用 JavaScript构建你的第一个Metro式应用程序》系列教程的最后一篇,将会告诉你在的 Microsoft Visual Studio 11 Express for Windows Developer Preview 提供的Metro 样式和 Split 模板的帮助下,如何透过 CSS样式 使得你的程序更符合 Windows 的 Look & feel。

原文 http://blog.csdn.net/zhangxin09/article/details/6793593

这是《运用 JavaScript构建你的第一个Metro式应用程序》系列教程的最后一篇,将会告诉你在的 Microsoft Visual Studio 11 Express for Windows Developer Preview 提供的Metro 样式和 Split 模板的帮助下,如何透过 CSS样式 使得你的程序更符合 Windows 的 Look & feel。

前言

该文是《运用 JavaScript 构建你的第一个 Metro式应用程序(on Windows8)的第三篇,如果你尚未阅读第一篇第二篇,请立刻翻阅。如果读者已经熟悉 HTML5、CSS3 和 JavaScript 最好,不熟悉也没关系,不影响理解主体意思。

实现CSS3 Grid Layout

Microsoft 业已实现了相当程度的 Web 标准:HTML5、ECMAScript 第五版的语言规范和 CSS3。CSS3 其中一项标准为 CSS3Grid Layout(Grid 布局)。通过此技术你可以在 HTML 页面中轻松地调节表格的行与列。在本例中,ListView 正是处于这种布局中。ListView 能够把所有空白的地方填充,而我们现在的需求只是让 ListView 占据屏幕一半的地方足矣,放在左边,右边则是内容区。一点击 ListView  即可在内容区显示详细内容。

如上图所示,我们想要的是两行的 Grid,一行用于标题,一行用于 RSS 数据。RSS 数据区域则被切分为两个列,一列是左边的 ListView,另一列是内容。我们看看怎么做,就是需要在右边划出一块地方,放置模板:

[html] view plain copy
  1. <body>  
  2.     <h1>The Old New Thing</h1>  
  3.     <div id="downloadStatus"></div>  
  4.     <div id="template" data-win-control="WinJS.Binding.Template">  
  5.         <div data-win-bind="innerText: title" class="postTitle"></div>  
  6.         <div data-win-bind="innerText: date" class="postDate"></div>  
  7.     </div>  
  8.     <div id="posts" data-win-control="WinJS.UI.ListView"  
  9.          data-win-options="{itemRenderer: template, layout: {type: WinJS.UI.ListLayout},  
  10.                             selectionMode: 'single', onselectionchanged: selectionChanged}">  
  11.     </div>  
  12.     <div id="contentTemplate" data-win-control="WinJS.Binding.Template">  
  13.         <div data-win-bind="innerText: title" class="postTitle"></div>  
  14.         <div data-win-bind="innerText: date" class="postDate"></div>  
  15.         <div data-win-bind="innerHTML: content" class="postContent"></div>  
  16.     </div>  
  17.     <div id="content"></div>   
  18. </body>  

根 据用户在左边 ListView 选择的记录,就在右边的 div 显示内容,模板则用来定义外观。我们还要让 ListView 设为“单选(Single Select)”的选择模式(默认是none)。一旦选区内容改变将会触发事件处理器(event handler),处理器本身较简单:

[javascript] view plain copy
  1. function selectionChanged(e) {  
  2.     content.innerHTML = "";  
  3.     var selection = posts.winControl.selection;  
  4.   
  5.     if (selection.length) {  
  6.         var post = postItems[selection[0].begin];  
  7.         var contentTemplate = WinJS.UI.getControl(document.getElementById("contentTemplate"));  
  8.         contentTemplate.render(post).then(function (element) {  
  9.             content.appendChild(element);  
  10.         });  
  11.     }  
  12. }  
当用户点击了 ListView 上某项的内容,这意味着不是选择内容就是取消内容(反选)。无论哪种事件都触发事件处理器。具体是,先清除掉当前右边的内容,其后检查选区,若存在选区, 我们从 RSS 数据中提取帖子记录,然后将此记录的数据填充到内容模板里去,——就像我们前面的做法那样。拥有渲染好的 HTML 元素,最后就是简单地把 HTML 元素放到我们内容 div 上即可。

至此,除了调整样式问题以外,Grid Layout 的工作已经大致差不多了。

  1. body {  
  2.   background-color#fff;  
  3.   color#000;  
  4.   font-familyVerdana;  
  5.   padding8pt;  
  6.   display: -ms-grid;  
  7.   -ms-grid-rows: auto 1fr;  
  8.   -ms-grid-columns: 1fr 1fr;  
  9. }  
  10.   
  11. ...  
  12.   
  13. #posts {  
  14.   width99%;  
  15.   height100%;  
  16.   overflowauto;  
  17.   -ms-grid-row: 2;  
  18.   -ms-grid-column: 1;  
  19. }  
  20.   
  21. ...  
  22.   
  23. #content {  
  24.   width95%;  
  25.   height100%;  
  26.   overflow-y: auto;  
  27.   margin-right64px;  
  28.   -ms-grid-row: 2;  
  29.   -ms-grid-column: 2;  
  30. }  

body 样式中,我们定义整张页面为 gridl ayout 模式,“-ms-grid-rows: auto1fr;”划分页面为两行,一行自适应宽度(取最大的宽度为宽度),另外一行则占领剩余的空间;“-ms-grid- columns:1fr1fr;”划分页面为两列,都是等分的两列。默认情况下,所有内容都是在第一行、第一列的(行、列皆以1算起,非0算起)。换言 之,因为第一行用来放标题恰恰好用不着变动(如果我们打算处理溢出,当然也可以横跨两列 span two columns),而帖子的 ListView 则移到第二行、第一列中去;内容区移到第二行、第二列中去。于是整个 Grid Layout 就能填满了。

创建分栏式的 Metro App

到目前为止,我们的 RSS Reader 程序已经跃然纸上了。事实上,这种风格是如此普遍,以致归纳为一种特定的项目模板,称作“Split Application”。如果您创建一个这种类型的新项目并执行它,你会看到我们建立了一个更漂亮的版本,虽然没有任何真实的数据。当你点击左边的项目,您会看到在右边所反映的数据,正如我们在我们做的简单 RSS Reader 程序那样:

下一步

恭喜你!你已经构建起了你的第一个 Metro式程序。到了最后 Say Good Bye 的时刻,为了你的持续学习,我们建议:
目录
相关文章
|
18天前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
3天前
|
前端开发 JavaScript API
JavaScript中的异步编程技术及应用
【2月更文挑战第2天】传统的JavaScript编程方式在处理异步操作时存在诸多不足,为了解决这一问题,近年来涌现出了一系列异步编程技术,本文将深入探讨Promise、async/await等异步编程解决方案,并结合实际案例展示其在前端开发中的应用。
|
4天前
|
前端开发 JavaScript UED
JavaScript 中的异步编程及其应用
【2月更文挑战第1天】 在前端开发中,JavaScript 的异步编程是一个重要的话题。本文将深入探讨 JavaScript 中的异步编程机制,包括回调函数、Promise、async/await 等,以及在实际开发中的应用场景和最佳实践。
|
4天前
|
前端开发 JavaScript UED
《JavaScript中的异步编程技巧与应用》
【2月更文挑战第1天】在前端开发中,异步编程是至关重要的一环。本文将探讨JavaScript中常用的异步编程技巧,包括Promise、async/await等,并结合实际案例展示其应用场景和优势。
|
4天前
|
前端开发 JavaScript
JavaScript中的异步编程及Promise的应用
在前端开发中,异步编程是常见的需求,而Promise作为一种解决异步操作的技术,具有很高的应用价值。本文将介绍JavaScript中的异步编程原理,并结合实际案例详细讲解Promise的使用方法及其在前端开发中的应用。
8 2
|
5天前
|
前端开发 JavaScript
JavaScript 中的异步编程:Promise 和 Async/Await 的实现与应用
在Web开发中,JavaScript异步编程是一个不可忽视的重要话题。本文将深入探讨JavaScript中Promise和Async/Await的实现原理与应用场景,通过实例代码带您了解如何优雅地处理异步操作,提升代码的可读性和可维护性。
|
6天前
|
JavaScript 前端开发 UED
JavaScript中的事件委托机制及实践应用
事件委托是JavaScript中常用的性能优化技巧,通过将事件监听器绑定在父元素上,实现对子元素事件的统一管理,减少页面中事件处理函数的数量,提升页面性能。本文将介绍事件委托的原理和实践应用,帮助开发者更好地理解和运用这一技术。
|
19天前
|
JavaScript NoSQL Redis
深入浅出:使用 Docker 容器化部署 Node.js 应用
在当今快速发展的软件开发领域,Docker 作为一种开源的容器化技术,已经成为了提高应用部署效率、实现环境一致性和便于维护的关键工具。本文将通过一个简单的 Node.js 应用示例,引导读者从零开始学习如何使用 Docker 容器化技术来部署应用。我们不仅会介绍 Docker 的基本概念和操作,还会探讨如何构建高效的 Docker 镜像,并通过 Docker Compose 管理多容器应用。此外,文章还将涉及到一些最佳实践,帮助读者更好地理解和应用 Docker 在日常开发和部署中的强大功能。
18 0
|
19天前
|
Web App开发 JavaScript 前端开发
构建现代Web应用:Vue.js与Node.js的完美结合
在当今快速发展的Web技术领域,选择合适的技术栈对于开发高效、响应迅速的现代Web应用至关重要。本文深入探讨了Vue.js和Node.js结合使用的优势,以及如何利用这两种技术构建一个完整的前后端分离的Web应用。不同于传统的摘要,我们将通过一个实际的项目示例,展示从搭建项目架构到实现具体功能的整个过程,着重介绍了Vue.js在构建用户友好的界面方面的能力,以及Node.js在处理服务器端逻辑和数据库交互中的高效性。通过本文,读者不仅能够理解Vue.js与Node.js各自的特点,还能学习到如何将这两种技术融合应用,以提升Web应用的开发效率和用户体验。
|
20天前
|
NoSQL JavaScript 前端开发
深入浅出:使用Node.js和MongoDB构建RESTful API
在当今的软件开发领域,构建高效、可扩展的Web服务已成为开发者的重要任务之一。本文将引导读者通过现代JavaScript环境——Node.js,搭配流行的NoSQL数据库MongoDB,一步步构建一个RESTful API。不同于常规的摘要,我们将采用故事化的方式,通过一个虚构的应用“BookFinder”的开发旅程,带领读者理解API设计、数据库交互及安全性考量等关键知识点。无论你是前端工程师希望深化后端知识,还是后端新手寻求实践机会,本文都将提供你所需的指南和启示。

相关产品

  • 云迁移中心