|
最近在学习win8 metro app的开发，今天刚刚学了一个小的例子，分享一下
开始之前你需要准备。。。
1、开发win8应用需要具备Windows 8 和 Microsoft Visual Studio Express 2012 for Windows 8
下载 Windows 8
2、安装window8之后，转至 开发者的下载内容 ，查找下载工具和 SDK 标题，然后单击“立即下载”按钮
3、你需要开发者许可证才能开始创建 Windows 应用商店应用。 获取开发者许可证。
在 Visual Studio 中创建新项目，我们来创建名为 HelloWorld 的新应用。以下是操作方法：
启动 Visual Studio Express 2012 for Windows 8。
在“文件”菜单上，选择“新建项目”。会出现“新建项目”对话框。可以在对话框的左侧窗格中选择要显示模板的类型。
在左侧窗格中，依次展开“已安装”、“模板”和 JavaScript，然后选择“Windows 应用商店”模板类型。对话框的中心窗格会显示一列适用于 JavaScript 的项目模板。
在中心窗格中，选择 Blank App 模板。
在 Name 文本框中，输入 "HelloWorld"。
单击“确定”可创建项目。Visual Studio 创建项目并在“解决方案资源管理器”中显示该项目。
尽管 Blank App 为最基本的模板，但该模板仍包含少量文件：
清单文件 (package.appxmanifest)介绍了应用(它的名称、介绍、磁贴、开始页面、初始屏幕等等)并列出了应用包含的文件。
要在开始屏幕中显示的一组大的和小的徽标图像(logo.png 和 smalllogo.png)。
表示应用位于 Windows 应用商店的图像 (storelogo.png)。
显示应用启动时间的初始屏幕 (splashscreen.png)。
Windows JavaScript 库的 CSS 和代码文件(位于 References 文件夹中)。
开始页面 (default.html) 和附带的 JavaScript 文件 (default.js)，这些文件在应用启动时运行。
这些文件是使用 JavaScript 的所有 Windows 应用商店应用必不可少的文件。在 Visual Studio 中创建的所有项目都包含这些文件。
现在我们就创建了一个简单的应用，如果你想看它的外观，按 F5 可构建、部署并启动应用。首先会出现默认的初始屏幕。
这就是初始屏幕
若要关闭应用，请从屏幕的顶部边缘向底部边缘滑动或按 Alt-F4。(有的笔记本要按alt+fn+f4)关闭应用
接下来我们修改default.htm页面，这是默认生成的
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>HelloWorld</title>
6
7 <!-- WinJS references -->
8 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
9 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
10 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
11
12 <!-- HelloWorld references -->
13 <link href="/css/default.css" rel="stylesheet" />
14 <script src="/js/default.js"></script>
15 </head>
16 <body>
17 <p>Content goes here</p>
18 </body>
19 </html>
接下来向 default.html 文件中添加一些新的内容。正如你向任何其他 HTML 文件中添加内容一样
1、使用以下内容替代 body 元素中的现有内容：显示 "Hello, world!" 的首级标题、询问用户名的一些文本、用于接受用户名的 input 元素、button 以及 div 元素。 向 input、button 和 div 分配 ID。
1 <body>
2 <div style="width:100%; height:100%; ">
3 <h1>Hello World!</h1>
4 <p>What's your name?</p>
5 <input id="inputName" type="text" /><button id="btnHello">Say hello</button>
6 <div id="OutputMsg">
7 </div>
8 </div>
9 </body>
我们启动应用程序看看效果吧
现在点击按钮是没有任何反应的，因为我们没有给它注册事件，接下来要做的就是给按钮添加事件，我们向 default.js 文件添加事件处理程序代码。
我们打开default.js文件看看是些什么东东
在我们开始添加自己的代码之前，我们来看一下该文件中代码的头几行和最后几行：
1 (function () {
2 "use strict";
3
4 // Omitted code
5
6 })();
这是自我执行匿名函数
代码的下一行为 JavaScript 代码打开了严格模式。严格模式为代码提供了额外的错误检查。例如，它防止你使用隐式声明的变量或为只读属性分配值。
查看 default.js 中代码的剩余部分。它处理了应用的 activated 和 checkpoint 事件。我们以后会深入了解这些事件的详细信息。现在，只要了解启动应用时会触发 activated 事件。
我们来为 button 定义事件处理程序
function buttonClickHandler(){
}
在事件处理程序内，从“inputName控件内检索用户名，并使用该用户名创建问候语”，首先判断用户名是否输入，没有弹出提示框，有则输出问候语
1 function buttonClickHandler()
2 {
3 var username = document.getElementById("inputName").value;
4 if (username == "") {
5 new Windows.UI.Popups.MessageDialog("Please input your name ！", "Tip").showAsync();
6 return false;
7 }
8 else {
9 var greeting = "Hello, " + username + "! Nice to meet you";
10 document.getElementById("OutputMsg").innerText = greeting;
11 }
12 }
现在，你只需向该按钮注册该事件处理程序。注册事件处理程序的较好时机是在激活应用之时。幸运的是，Visual Studio 为我们在 default.js 文件中生成了一些代码，可处理应用的激活：app.onactivated 事件处理程序
1 app.onactivated = function (args) {
2 if (args.detail.kind === activation.ActivationKind.launch) {
3 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
4 // TODO: 此应用程序刚刚启动。在此处初始化
5 //您的应用程序。
6 } else {
7 // TODO: 此应用程序已从挂起状态重新激活。
8 // 在此处恢复应用程序状态。
9 }
10 args.setPromise(WinJS.UI.processAll());
11
12 var helloButton = document.getElementById("btnHello");
13
14 helloButton.addEventListener("click", buttonClickHandler, false);
15 }
16 };
以下是更新的 default.js 文件的完整代码：
1 (function () {
2 "use strict";
3
4 WinJS.Binding.optimizeBindingReferences = true;
5
6 var app = WinJS.Application;
7 var activation = Windows.ApplicationModel.Activation;
8
9 app.onactivated = function (args) {
10 if (args.detail.kind === activation.ActivationKind.launch) {
11 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
12 // TODO: 此应用程序刚刚启动。在此处初始化
13 //您的应用程序。
14 } else {
15 // TODO: 此应用程序已从挂起状态重新激活。
16 // 在此处恢复应用程序状态。
17 }
18 args.setPromise(WinJS.UI.processAll());
19
20 var helloButton = document.getElementById("btnHello");
21
22 helloButton.addEventListener("click", buttonClickHandler, false);
23 }
24 };
25
26 app.oncheckpoint = function (args) {
27 // TODO: 即将挂起此应用程序。在此处保存
28 //需要在挂起中保留的任何状态。您可以使用
29 // WinJS.Application.sessionState 对象，该对象将在
30 //挂起中自动保存和恢复。如果您需要在
31 //挂起应用程序之前完成异步操作，请调用
32 // args.setPromise()。
33 };
34
35 function buttonClickHandler()
36 {
37 var username = document.getElementById("inputName").value;
38 if (username == "") {
39 new Windows.UI.Popups.MessageDialog("Please input your name ！", "Tip").showAsync();
40 return false;
41 }
42 else {
43 var greeting = "Hello, " + username + "! Nice to meet you";
44 document.getElementById("OutputMsg").innerText = greeting;
45 }
46 }
47
48 app.start();
49 })();
运行一下我们的程序吧
执行成功了，我们再给按钮添加一些样式吧
打开default.css文件，添加如下样式
1 body {
2 }
3
4 .buttonstyle {
5 margin-left:6px;
6 background-color:chocolate;
7 }
8
9
10 @media screen and (-ms-view-state: fullscreen-landscape) {
11 }
12
13 @media screen and (-ms-view-state: filled) {
14 }
15
16 @media screen and (-ms-view-state: snapped) {
17 }
18
19 @media screen and (-ms-view-state: fullscreen-portrait) {
20 }
只有.buttonStyle是我们自己添加的哦，其他是默认的
那么怎么给按钮添加上呢，我们来到default.js文件
1 app.onactivated = function (args) {
2 if (args.detail.kind === activation.ActivationKind.launch) {
3 if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
4 // TODO: 此应用程序刚刚启动。在此处初始化
5 //您的应用程序。
6 } else {
7 // TODO: 此应用程序已从挂起状态重新激活。
8 // 在此处恢复应用程序状态。
9 }
10 args.setPromise(WinJS.UI.processAll());
11
12 var helloButton = document.getElementById("btnHello");
13 helloButton.className = "buttonstyle";
14 helloButton.addEventListener("click", buttonClickHandler, false);
15 }
16 };
helloButton.className="buttonstyle"; 添加上这一句就可以了，自己运行一下看看吧
本文来自小慧only的博客，原文地址：http://www.cnblogs.com/zhaohuionly/archive/2012/11/24/2785980.html
|
