Win8 Metro应用开发的第一次学习1:创建一个 Metro 项目
《Win8 Metro应用开发的第一次学习》旨在介绍 Windows 8 Metro 风格的应用的一系列《Win8Y团队手把手教您Win8 Metro应用开发系列教程》中的第一个。在本《Win8Y团队手把手教您Win8 Metro应用开发系列教程》中,您将使用 HTML 和 JavaScript 创建一个名为 Win8y Metro Study 的菜谱应用程序。在随后的《Win8Y团队手把手教您Win8 Metro应用开发系列教程》中,您将利用在这里开始的工作来改进 Metro 应用,以此了解编写引人注目和可在应用商店中销售的 Metro 应用所需的关键技能。
1.创建一个 Metro 项目
开始学习之前,win8Y说下开发环境:Windows 8 cp/rp版本+ Visual Studio11/2012.所提示的开发环境/软件可以在以下地址找到下载.
Windows8 rp下载:http://www.zglr8.com/1.htm
Visual studio 2012 RC简体中文旗舰版本iso光盘镜像下载:http://www.zglr8.com/visual-studio-2012-rc-chinese-simplified-flagship-releases-iso-cd-image-download.htm
注意:请在开始本《Win8Y团队手把手教您Win8 Metro应用开发系列教程》前,进行此步骤,否则《Win8Y团队手把手教您Win8 Metro应用开发系列教程》不能正常运行
先进入开始屏幕打开Visual Studio11
新建一个项目
按照下图进行选择
在local machine处点小三角,选择simulator,然后单击它,或按f5
出现此屏幕后开始试验
任务1 – 创建项目
第一步是创建一个新项目来容纳构成
Win8y Metro Study 应用的代码和资源,然后查看Visual Studio 在该项目中提供了什么内容。
1.
启动
Visual Studio,使用“File – New Project“命令创建一个新的
JavaScript 项目并将其命名为Win8YMetroStudy。应确保从JavaScript 模板列表中选择“Windows Metro Style”,如图
1 所示。
图
1
创建Win8YMetroStudy 项目
2.
从
Debug菜单选择Start Debugging(或按
F5),在调试器中启动应用。应用将启动,您将看到如图
2 所示的屏幕。这是应用的主页,也称为开始页面。
图
2
Win8y Metro Study 开始页面
3.
用一些时间尝试操作该应用。对于初学者来说,可使用鼠标(或手指,如果您使用的是触摸屏)水平滚动屏幕。
注意:ListView 控件提供水平滚动。如果您想知道它是如何声明的,请在该项目的html 文件夹中打开
groupedItemsPage.html,在页面底部附近寻找具有
data-win-control=”WinJS.UI.ListView” 属性的DIV。如果没有这个属性,它是一个普通
DIV。然而有了这个属性,它就是一个支持数据绑定和模板化的ListView 控件。WinJS扫描
DOM,查看data-win-control 属性,并将
DIV 转换为
ListView。该转换发生于对
default.js 中的WinJS.UI.processAll 的调用中。该调用从app.onactivated 事件处理程序发起,并且在应用每次启动时执行。
4.
查看如果您触摸或点击ListView 项目之一会发生什么。例如,点击标签为“Item Title:1″的项目可显示如图
3 所示的屏幕。这是“item-detail(项目详细信息)“页面。
注意:Windows8 通常被称为“触控优先“操作系统,但它对于鼠标和触笔等传统输入设备也有着很好的支持。因此,当文中指示您“触摸“或“点击“屏幕上的项目时,您没有触摸屏也可以完成该操作。只需点击鼠标即可!
图
3
项目详细信息页面
5.
通过点击按屏幕左上角的后退按钮(圆形左箭头),返回到应用程序的开始页面。
6.
点击开始页面左上角“Win8YMetroStudy”下的“Group Title: 1″来显示组详细信息页(图
4)。
图
4
组详细信息页面
6.
切换回
Visual Studio(如果您使用的是触摸屏,做到这一点的简单方式是从屏幕左边缘开始从左到右滑动;如果您喜欢使用键盘,按下Windows和
D组合键,也表示为Win-D),然后从
Debug 菜单中选择“Stop Debugging”停止运行应用程序。
任务2 – 熟悉项目
很显然,当
Visual Studio 生成该项目时,它无偿地给了您很多内容。具体来说,它给您提供了几个
HTML 页以及
CSS 和
JavaScript,还有用于在页之间和示例数据资源之间导航的逻辑和用户界面。为了实现Win8y Metro Study,我们将利用
Visual Studio 生成的内容。但您首先要花点时间熟悉项目结构以及
Visual Studio 创建的资产。
1.
在
Solution Explorer 窗口中,检查该项目
html 文件夹的内容。您会发现有三个文件:
l groupedItemsPage.html,代表开始页面
l itemDetailPage.html,代表项目详细信息页面
l groupDetailPage.html,代表组详细信息页面
2.
除了html 文件夹中的三个页面,该项目包含一个名为
default.html 的页面,它托管其他页面。打开
default.html 并查看
BODY 元素中的
DIV。它定义了显示其他页面的内容区域。
注意:BODY元素包含第二个
DIV(已注释掉)。该
DIV 的
ID是“appbar”,表示一个应用程序栏,其中包含与用户可以在应用题程序中执行的常见命令对应的按钮或“命令“。在随后的《Win8Y团队手把手教您Win8 Metro应用开发系列教程》中,您将撤消该
DIV 的注释并对其添加命令。
3.
检查项目的
js 文件夹的内容。下面是此处所存在文件的概述:
·
data.js:其中包含示例数据以及将数据绑定到
ListView 控件的代码
·
default.js:其中包含default.html 和代码隐藏
·
groupDetailPage.js:其中包含groupDetailPage.html 的代码隐藏
·
groupedItemsPage.js:其中包含groupedItemsPage.html 的代码隐藏
·
itemDetailPage.js:其中包含itemDetailPage.html 的代码隐藏
·
navigator.js:其中包含在default.html 中声明的
PageControlNavigatorcontrol 的实现,并负责当用户在应用中导航时加载其他页面。
4.
查看项目的
css文件夹。您看到了什么?css 文件夹中的文件和应用程序中的页之间是否存在相关性?
5.
查看项目的image文件夹,在这里您会找到用于为应用程序添加品牌标识的图像资产。
任务3 – 自定义开始页面
目前项目名称Win8YMetroStudy 出现在开始页面的顶部。让我们将其修改为“Win8y Metro Study”。
1.
在
Visual Studio 中打开groupedItemsPage.html。
2.
找到其类为pagetitle的SPAN 元素,将“Win8YMetroStudy”更改为“Win8YMetroStudy”,如下所示:
HTML
<span class=”pagetitle”>Win8y Metro Study</span>
3.
按
F5 在调试器中启动应用程序,然后确认开始页面顶部的标题文本是否已更改(图
5)。
图
5
修改后的开始页面
4.
返回到
Visual Studio,使用Stop Debugging 命令关闭该应用。
任务4 – 自定义品牌标识
如果您现在立即转到
Metro 开始屏幕,会看到有一个Win8YMetroStudy 磁贴。该磁贴是应用的主磁贴。它通常在安装应用时创建,但在我们的例子中,正好是从
Visual Studio 第一次启动应用时创建的。磁贴上的图像来自图像文件夹中的
logo.png。在该任务中,您需要将
VisualStudio 生成的徽标替换为更适合电子菜谱的徽标。届时您将更换图像文件夹中的其他
PNG 格式文件来为应用添加具有唯一性的品牌标识,最后修改应用清单。
1.
在
Metro 开始屏幕上,右键单击Win8YMetroStudy 磁贴(或用手指将其向下拖动半英寸左右再放手),然后选择“Uninstall”卸载应用并删除磁贴。
2.
回到
Visual Studio 中,右键单击
images 文件夹。然后使用“Add – Existing Item“命令,从《Win8Y团队手把手教您Win8 Metro应用开发系列教程》原始材料的
images 文件夹导入logo.png、smalllogo.png、splashscreen.png和
storelogo.png。当出现提示时,允许这些文件覆盖现有的具有相同名称的文件。
3.
在
Solution Explorer 中,双击
package.appxmanifest 来打开应用清单。
注意:应用清单包含与
Metro 风格的应用有关的元数据,并嵌入到您构建的每个应用中。在运行时,该清单为Windows 8 提供所需的有关应用的一切信息,如应用名称、发布人以及该应用要求什么“功能“,包括对网络摄像机、麦克风、Internet和文件系统各部分(具体来说是用户的文档、音乐和视频库)的访问。
4.
将应用的显示名称更改为“Win8y Metro Study”,将其描述更改为“Win8y Metro Study application”,如图
6 所示。
图
6
在清单中更改显示名称和描述
5.
按
F5 启动应用程序。
6.
在应用启动时观看。闪屏(应用加载时短暂显示的屏幕)是否与以前不同?
7.
转到Metro 开始屏幕,确认它是否包含如下所示的磁贴。
图7
新的应用磁贴
8.
返回
Visual Studio 并停止调试。