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

简介:

这是《运用 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 的工作已经大致差不多了。

[css]  view plain copy
  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 的时刻,为了你的持续学习,我们建议:
  • 在查找一些 Windows Developer Preview Sample Gallery 示例程序
  • 探索 Metro style app reference section 文档。
  • 可以在资源中心发掘 Metro App 更多的资源,如果你遇到问题,也可以利用相关资源来解决问题。

原文地址



本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/archive/2012/02/10/2345199.html,如需转载请自行联系原作者

目录
相关文章
|
1天前
|
数据采集 JavaScript 前端开发
理解并应用:JavaScript响应式编程与事件驱动编程的差异
了解JavaScript的响应式编程与事件驱动编程至关重要。事件驱动编程基于事件触发函数执行,如用户交互或系统事件。响应式编程则关注数据流变化,利用Observables自动响应更新。在爬虫代理IP的Web Scraping示例中,两者分别通过axios和rxjs显示了数据抓取的不同处理方式。掌握这两者能提升异步操作的效率和代码质量。
理解并应用:JavaScript响应式编程与事件驱动编程的差异
|
4天前
|
JavaScript Shell 开发者
怎样使用Nest.js快速构建高效Node.js应用?
这篇博客介绍了Nest.js,一个基于TypeScript的Node.js框架,适用于构建可维护和可扩展的服务器端应用。文章引导读者快速入门,包括安装Node.js和Nest.js CLI,创建新项目,安装依赖以及启动开发服务器。通过访问`http://localhost:3000`,可以看到&quot;Hello World!&quot;,证明应用已成功运行。Nest.js因其模块化架构和强大的功能,成为现代Web开发的热门选择。
|
6天前
|
前端开发 JavaScript 网络协议
深入探讨其在JavaScript中的应用
【6月更文挑战第12天】WebSockets是为解决HTTP协议在实时通信中的局限而生的一种全双工通信协议,基于TCP,适合在线聊天、游戏等场景。JavaScript中的WebSocket API使浏览器与服务器能建立持久连接,方便数据实时传输。通过创建WebSocket对象、监听事件(open、message、error、close)来管理连接、发送/接收数据及处理错误。相较于AJAX轮询和长轮询,WebSockets更高效实时,是现代Web实时应用的理想选择。
19 3
|
7天前
|
前端开发 JavaScript 开发者
函数式编程在JavaScript中的应用
【6月更文挑战第10天】本文探讨了函数式编程在JavaScript中的应用,介绍了函数式编程的基本概念,如纯函数和不可变数据。文中通过示例展示了高阶函数、不可变数据的使用,以及如何编写纯函数。此外,还讨论了函数组合和柯里化技术,它们能提升代码的灵活性和可重用性。掌握这些函数式编程技术能帮助开发者编写更简洁、可预测的JavaScript代码。
|
12天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
157 21
|
14天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的服装品牌的推广及应用网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的服装品牌的推广及应用网站附带文章和源代码部署视频讲解等
25 4
|
16天前
|
JavaScript Serverless 网络架构
Next.js与SSR:构建高性能服务器渲染应用
创建Next.js项目使用`create-next-app`,每个页面自动支持SSR。动态路由如`pages/posts/[id]`,在`getStaticPaths`和`getServerSideProps`中获取数据。利用静态优化和预渲染提升性能,动态导入减少初始加载时间。使用`next/image`优化图片,自定义服务器增加控制,集成第三方库如Redux。优化SEO,利用i18n支持多语言,使用Serverless模式和Web Workers。项目支持TypeScript,创建`_error.js`处理错误,部署到Vercel并使用工具进行性能监控和优化。
153 4
|
18天前
|
存储 JavaScript 前端开发
Vue.js表单开发宝藏工具集,让构建表单变得轻松又酷炫!
Vue Tiny Validate 是最小的验证库,如果你只需要最基本的功能,它可以帮你减轻负担。
22 3
|
18天前
|
JavaScript Java 测试技术
基于ssm+vue.js的绿色农产品推广应用网站附带文章和源代码设计说明文档ppt
基于ssm+vue.js的绿色农产品推广应用网站附带文章和源代码设计说明文档ppt
31 4
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js的电商应用系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的电商应用系统附带文章和源代码设计说明文档ppt
16 0