Windows 8开发31历程---第一天: 一个的空白应用程序
2012-12-24 13:03
375 查看
译者注: 最近对Html5相关的内容及Windows 8开发产生了浓厚的兴趣,故尝试翻译Clark Sell的《31 Days of Windows 8 for Html5》,因本人英文水平有限,翻译未能达意之处,请大家尽量点处。
在本系列的第一篇文章中,我认为全面的介绍 Visual Studio
2012中 Windows Store Blank App template非常的重要。我将介绍里面的每个文件,为什么它们很重要呢,因为许多设置都被隐藏每一个文件中。我们通过学习使用每一文件,这将为你本系列课程的后续学习打下一个坚实的基础。
在Visual Studio 2012 中还有其他几个项目模板,正如你下图中所看到的Gid、Split 、 Fixed Layout 和Navigation 等等App。但这些模版都是针对特定类型的应用程序,它们可能会限制你的思维。记住这些模板只是起点,而不是最终的解决方案。对于本系列,几乎我们都从Blank
App 模板开始。
下图中是Solution Explorer视图,基于Blank App模板建立的HTML5 的解决方案。
你就可以看到这些图片用在不同的地方,如下所述。
这可能是您的应用程序最常见使用的一个图片。在Windows 8的用户开始屏幕上,这是您的应用程序标题默认的背景图像。它尺寸是 150 × 150 像素。
此图片用于所有应用程序列表显示时。例如,当您在 Windows 8中搜索应用程序,或在Share菜单。SmallLogo.png
为 30 x 30 像素。在这种小的尺寸,您想要确保此图标能向您的用户准确表达某一个信息。我强烈推荐只是一个Logo或其他一些明确的图像。
当应用程序启动时,会加载这张初始化的图,。对于该图片你可以使用一些巧妙的技巧,我们将在后面的文章中会进行讨论。现在,你只要记住这个图片总是是620 x 300像素,并且无论你的用户的屏幕多大,总是水平居中和垂直的显示的。
在store里为了节省空间,我们需要一个稍微小点的图片。这张图片是50 x 50像素,但是在你的整个应用程序,这2500像素可能是最重要的。当用户决定哪些新的应用程序添加到他们的设备时,这是图标将会被看到。一个差的图标会给大多数用户感觉这是一个差的应用程序。所以在这个图标多花些时间是值得的。
这是一个额外的图标包括在我的初始项目中。您若需要将它添加到您的项目中,只需在Solution Explorer视图中右键单击images文件夹,选择“Add Existing Item…”这张图片大小是310 x 150像素,用来使你的应用程序有一个更宽Title比标准的Logo.png。
它还定义了默认的背景颜色,方向,和应用程序需要的特定功能,如位置的访问。
你尽可能熟悉此文件。以后你会经常用到它。
的。
像任何 你看到的html 页,你会发现我们的引用样式表和脚本文件。但仔细查看一个link和script标签中的href和src。注意是以 / / 作为路径的开始。这表示我们引用内置的脚本和样式表。
default.css 不是我们的模板引用的唯一的样式表。我们还引用:
这个内置的样式表,使我们的应用程序上的内置控件有一个统一的风格。默认的模板引用的是"dark"的样式,但也有"light"样式,如图所示:
跟我们的CSS文件一样,我们还引用一些内置的库,特别是WinJS库。我们需要WinJS实现PLM之类的东西。后面会讨论更多关于WinJS的内容。
一旦您已准备好提交到应用程序商店,您需要将您的应用程序与微软的在线商店及您的开发人员帐户相关联。您可以进入Projects->Store->Associate App with the Store......这样做之后,你会注意到一个新的证书将被添加到您的项目,它将会用于签署最后生成的包。
点击这里您可以找到更多有关app包签名的详细信息.
明天,我们将共同关注Orientation 和 Snap功能,这两个重要方面在您的应用程序常常被忽视。如果您还没有准备好,可以从下面的连接中下载免费的工具来创建windows 8应用程序。同时也提供了今天所讲内容的整个工程的下载链接。
在本系列的第一篇文章中,我认为全面的介绍 Visual Studio
2012中 Windows Store Blank App template非常的重要。我将介绍里面的每个文件,为什么它们很重要呢,因为许多设置都被隐藏每一个文件中。我们通过学习使用每一文件,这将为你本系列课程的后续学习打下一个坚实的基础。
在Visual Studio 2012 中还有其他几个项目模板,正如你下图中所看到的Gid、Split 、 Fixed Layout 和Navigation 等等App。但这些模版都是针对特定类型的应用程序,它们可能会限制你的思维。记住这些模板只是起点,而不是最终的解决方案。对于本系列,几乎我们都从Blank
App 模板开始。
下图中是Solution Explorer视图,基于Blank App模板建立的HTML5 的解决方案。
图片
让我们从简单开始,简单的images文件夹中的图像。每个新的项目,都有四个图像,每一张图片都为特定的用途。我们已重新创建了这几个图片 (另外还增加了一个) ,这样当我们执行该应用程序时,就容易哪个图片是做什么用的。我强烈建议下载这些图像和替换原有的图片,尤其是你正在学习时。您可以在这里下载到这五个图片。一旦您替换缺省的图片,但你运行工程,你就可以看到这些图片用在不同的地方,如下所述。
Logo.png
这可能是您的应用程序最常见使用的一个图片。在Windows 8的用户开始屏幕上,这是您的应用程序标题默认的背景图像。它尺寸是 150 × 150 像素。
SmallLogo.png
此图片用于所有应用程序列表显示时。例如,当您在 Windows 8中搜索应用程序,或在Share菜单。SmallLogo.png
为 30 x 30 像素。在这种小的尺寸,您想要确保此图标能向您的用户准确表达某一个信息。我强烈推荐只是一个Logo或其他一些明确的图像。
SplashScreen.png
当应用程序启动时,会加载这张初始化的图,。对于该图片你可以使用一些巧妙的技巧,我们将在后面的文章中会进行讨论。现在,你只要记住这个图片总是是620 x 300像素,并且无论你的用户的屏幕多大,总是水平居中和垂直的显示的。
StoreLogo.png
在store里为了节省空间,我们需要一个稍微小点的图片。这张图片是50 x 50像素,但是在你的整个应用程序,这2500像素可能是最重要的。当用户决定哪些新的应用程序添加到他们的设备时,这是图标将会被看到。一个差的图标会给大多数用户感觉这是一个差的应用程序。所以在这个图标多花些时间是值得的。
WideLogo.png
这是一个额外的图标包括在我的初始项目中。您若需要将它添加到您的项目中,只需在Solution Explorer视图中右键单击images文件夹,选择“Add Existing Item…”这张图片大小是310 x 150像素,用来使你的应用程序有一个更宽Title比标准的Logo.png。
package.appxmanifest
这个文件包含应用程序所有的配置、设置和声明。它几乎包括所有与你的运行在Windows 8机器的应用程序相关的每一个事情。例如,这里可以设置search contract为启用的,或者设置不同状态下使用不同的图标。例如,我们刚才已经看到了在AppXManifest的应用程序的UI选项卡中定义了images文件夹中的每一个图像。它还定义了默认的背景颜色,方向,和应用程序需要的特定功能,如位置的访问。
你尽可能熟悉此文件。以后你会经常用到它。
default.html
这是我们的主要入口点,您的应用程序启动页面。 default.html实际上可以被命名为任何名字,因为它在我们的package.appxmanifest 文件中被设置为应用程序的启动页面。作为 web 开发人员default.html就像任何其他已经创建的网站的起始页一样,尤其如果你做HTML5的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Day1</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- Day1 references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> </body> </html>
像任何 你看到的html 页,你会发现我们的引用样式表和脚本文件。但仔细查看一个link和script标签中的href和src。注意是以 / / 作为路径的开始。这表示我们引用内置的脚本和样式表。
css/default.css
自从我们开始与空白模板,您应该能够猜到我们默认样式也是不存在。尽管如此,那里是微软想要我们做的最小值、 定位在几个线索,对齐。明天我们将涵盖定位和对齐详细信息中,但它不是足够的说它由一些简单的媒体查询处理。body { } @media screen and (-ms-view-state: fullscreen-landscape) { } @media screen and (-ms-view-state: filled) { } @media screen and (-ms-view-state: snapped) { } @media screen and (-ms-view-state: fullscreen-portrait) { }
default.css 不是我们的模板引用的唯一的样式表。我们还引用:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
这个内置的样式表,使我们的应用程序上的内置控件有一个统一的风格。默认的模板引用的是"dark"的样式,但也有"light"样式,如图所示:
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
js/default.js
不像我们的默认CSS,我们default.js文件过程生命周期管理(process lifecycle management:PLM)做了特别的定制。我们的模版设置一些行为接口来处理一些不同的PLM周期,如启动和终止。这些都是我们想去实现的(function () { "use strict"; WinJS.Binding.optimizeBindingReferences = true; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize your application here. } else { // TODO: This application has been reactivated from suspension.Restore application state here. } args.setPromise(WinJS.UI.processAll()); } }; app.oncheckpoint = function (args) { }; app.start(); })();
跟我们的CSS文件一样,我们还引用一些内置的库,特别是WinJS库。我们需要WinJS实现PLM之类的东西。后面会讨论更多关于WinJS的内容。
<script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
Day1_TemporaryKey.pfx
每一个Windows商店的应用程序都必须有一个签名证书。当您首次在 Visual Studio 中创建一个新的项目时,它会自动创建一个新的测试证书。在我们的例子中测试证书名叫Day1_TemporaryKey.pfx,这是我们第一天的项目名称 。再次,您可以在包装选项卡下的package.appxmanifest文件中找到此集。如果需要,您甚至可以创建新的证书。一旦您已准备好提交到应用程序商店,您需要将您的应用程序与微软的在线商店及您的开发人员帐户相关联。您可以进入Projects->Store->Associate App with the Store......这样做之后,你会注意到一个新的证书将被添加到您的项目,它将会用于签署最后生成的包。
点击这里您可以找到更多有关app包签名的详细信息.
摘要
就说到这里吧 !我们现在才刚刚开始此系列课程,但你现在已经开始对基于default Blank App template for HTML5程序中文件有了一个全面了解.明天,我们将共同关注Orientation 和 Snap功能,这两个重要方面在您的应用程序常常被忽视。如果您还没有准备好,可以从下面的连接中下载免费的工具来创建windows 8应用程序。同时也提供了今天所讲内容的整个工程的下载链接。
相关文章推荐
- Windows 8 开发31日-第01日-一个空的应用程序
- Windows Store apps开发[58]Windows 8 开发31日-第01日-一个空的应用程序
- 记一个Vue项目的开发历程
- Become.com的 Web Crawler: 一个超大规模的Java应用程序(想开发自己的搜索引擎增值服务的必读)
- Become.com的 Web Crawler: 一个超大规模的Java应用程序(想开发自己的搜索引擎增值服务的必读)
- Windows Embedded CE 6.0开发初体验(四)跑个应用程序先
- Sqlite数据库在各种平台下的C语言应用程序开发(windows,linux,arm-linux)
- 一个体验好的Windows 任务栏缩略图开发心得
- 使windows应用程序中只有一个实例
- 提供一个Windows mobile Native UI 程序,循序渐进开发,并附有代码!
- c#开发windows应用程序几个小技巧
- ASP.NET 是微软所提供的网站开发技术。程序设计师可以利用这些技术建置一个网站/页应用程序。
- winform只允许一个应用程序运行 2014-12-08 09:51 31人阅读 评论(0) 收藏
- 面向对象,掌握Windows应用程序的创建过程:一个窗口的诞生
- PHP开发Windows桌面应用程序实例
- 一个消息提示托盘程序的开发历程
- Windows桌面应用程序(1-1-1st) 使用DirectX进行开发的先决条件
- 为Windows 8开发业务应用程序
- 在一个WINDOWS的应用程序中嵌入IE浏览器
- 1.windows 应用程序开发(MessageBox 和 DialogBox 和 WM_COMMAND)