Windows 8 JavaScript Metro应用程序--入门(上)
如你所知的Windows8允许你通过以下几种方式创建Metro应用程序:
- C++
- C#
- JavaScript
第一部分将侧重于主体结构和JavaScript Grid 应用程序的基础,在随后的文章中我将深度探究在Windows8中更多的功能。
第一步:基础知识
当你写Windows8 JavaScript风格的应用时,你可能需要学习一点WinJS和在Windows 8 JavaScript应用中可用的基本动作。我看到了关于Windows 8 Javascript应用程序集成JQuery的文章,其实这是没有必要的,WinJS已经提供了许多这些:
- 选择器:
- document.querySelector(".headerTemplate")
- document.querySelectorAll("div")
- 文本 :
- document.querySelector(“#Title”).textContent;
- 动画:
- WinJS.UI.Animation.fadeIn(document.querySelector(“div”));
更多…
第二步:Application Styles
当你在Visual Studio 11中打开一个新的JavaScript Metro应用,你可以从以下选择:
- Blank Application –空白Windows Metro应用的项目,没有预定义的控件或布局。
- Split Application – 一个两个页面Windows metro风格应用的项目,在分组项目导航。第一页允许组的选择,而旁边的第二台显示器所选的项目的详细项目清单。
- Fixed Layout Application – 一个可扩展固定宽高比布局的Windows metro风格应用的项目
- Navigation Application – 一个有预定义导航控件的Windows metro风格应用项目
- Grid Application – 一个多页的、项目组之间导航的Windows Metro风格的应用程序。专用页面显示组合项目的详细信息。
这个Demo中我创建了一个新的 Grid Application:
第三步: 项目结构
在以前Visual Studio 11和Windows8的版本是JS文件夹里面有所有的WinJS文件,在最新的版本种所有的必要文件在两个主要文件中,参考下:
- base.js
- ui.js
在上面创建的 Grid Application 你将有三个页面:
- groupDetailsPage
- groupedItemsPage
- itemDetailsPage
请注意,每个HTML页都有自己的CSS和JavaScript文件,它们没有命名约定自动接受这些并结合,但关于如何创建Windows 8 JavaScript应用程序、规范或应用程序,这是最好的做法。
第四步:应用程序流程
一切从default.html开始,这个页面加载所有必需的js文件、css文件和使用PageControlNavigator 导航应用程序到groupedItemsPage
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Application1</title>
6
7 <!-- WinJS references -->
8 <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
9 <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
10 <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
11
12 <!-- Application1 references -->
13 <link href="/css/default.css" rel="stylesheet">
14 <script src="/js/data.js"></script>
15 <script src="/js/navigator.js"></script>
16 <script src="/js/default.js"></script>
17 </head>
18 <body>
19 <div id="contenthost"
20 data-win-control="Application1.PageControlNavigator"
21 data-win-options="{home: '/html/groupedItemsPage.html'}"></div>
22 </body>
23 </html>
The groupedItemsPage 加载相关的JS/CSS文件
2
3 <!-- WinJS references -->
4 <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
5 <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
6 <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
7
8 <link href="/css/default.css" rel="stylesheet">
9 <link href="/css/groupedItemsPage.css" rel="stylesheet">
10 <script src="/js/data.js"></script>
11 <script src="/js/groupedItemsPage.js"></script>
这个流程适用于你加载每个页面。
转载于:https://www.cnblogs.com/lmyhao/archive/2012/03/04/2378940.html
Windows 8 JavaScript Metro应用程序--入门(上)相关推荐
- Windows 8 Metro 应用开发入门
摘 要 随着Windows8的发布,Windows 8 Metro应用程序开发也逐渐得到大家的关注,Visual Studio 2012发布,更是让开发人员蠢蠢欲动!Windows 8 Metro 应 ...
- Windows安装.net Framework时安装不上,提示已处理证书链,但是在不受信任提供程序信任的根证书中终止
解决Windows安装.net Framework时安装不上,提示已处理证书链,但是在不受信任提供程序信任的根证书中终止. 通过网上资料查询找到了以一个可以解决此问题的博客,这里把连接放到这.下次在遇 ...
- led驱动电源初学者必看_初学者:如何在Windows 8中查看Metro应用程序的已用驱动器空间...
led驱动电源初学者必看 In Windows 8 there is no obvious way of checking how much space each Metro app is takin ...
- 解决Windows安装.net Framework时安装不上,提示已处理证书链,但是在不受信任提供程序信任的根证书中终止。
解决Windows安装.net Framework时安装不上,提示已处理证书链,但是在不受信任提供程序信任的根证书中终止. 通过网上资料查询找到了以一个可以解决此问题的博客,这里把连接放到这.下次在遇 ...
- C++ Windows 窗体程序入门 - 1.你的第亿个窗体程序
〇.前言-------------------- + 学Windows窗体已经有一段时日了,奈何没有什么浅显易懂(&便宜!!)的书籍 , 就想来 , 算是记笔记吧 , 顺便还能给你们总结一些经 ...
- 微信小程序入门五上滑加载下拉刷新
之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介绍加载和刷新. 效果图: 先介绍在IDE中,怎么模拟上滑这个操作.开始我是用鼠标点击文章列表,然后先上移动.结果一直没有结果,以为是 ...
- windows下nodejs express安装及入门网站,视频资料,开源项目介绍
windows下nodejs express安装及入门网站,视频资料,开源项目介绍,pm2,supervisor,npm,Pomelo,Grunt安装使用注意事项等总结 第一步:下载安装文件 下载地址 ...
- 使用URI设计松散耦合的Metro应用程序
Metro风格应用程序意味着小型且高度集中.对于我们传统上为企业建立的.大规模的.单一的应用程序而言,我们可把它们重新想象成工作流的特定工 具.例如,你可能使用某款股票交易应用程序中的工具来查找并查看 ...
- 音视频开发(4)---Windows下Red5安装与使用入门
Windows下Red5安装与使用入门 简介 Red5是一个采用Java开发开源的Flash流媒体服务器.它支持:把音频(MP3)和视频(FLV)转换成播放流: 录制客户端播放流(只支持FLV):共享 ...
最新文章
- activemq 连接_ActiveMQ网络连接器
- 一种父线程阻塞等待子线程的有效方法
- 反射(3)反射应用:一个插件项目
- Nuget包管理器将nupkg文件导入ASP.NET MVC5项目
- 数据库软件access mysql对比_access数据库软件优缺点对比
- Java练习题——运算符
- windows平台使用Docker搭建分布式hadoop集群
- 4.3-python爬虫之图形验证码识别
- 浪漫的七夕表白简单代码(简单的小代码)
- Tkinter登陆界面设计
- 《物理世界》公布2022年度十大突破
- 宋宝华: 僵尸进程的成因以及僵尸可以被“杀死”吗?
- linux显示虚拟光驱,在Linux操作系统下使用虚拟光驱的方法
- 第六届材料表面与界面国际研讨会(SIM-BT 2019)
- 技术支持售前人员岗位技能与职责
- 利用Lync Online与MSN联系人沟通
- 11大Java开源中文分词器的使用方法和分词效果对比(转)
- 基于WF4.0的公文管理系统
- 《特征工程三部曲》之一:数据处理
- Summernote文字编辑器添加代码插入功能