第一次为Window8开发Web Apps

开发 前端
在之前的一篇文章里,我提到过Windows8版的TrialTool。TrialTool是一款基于web的应用,这款应用充分展示了各种Javascript接口的兼容性。它就像是一个接口的容器,任凭你浏览、修改和运行示例。这个版本的TrialTool特别展示了各种Windows8接口。

免责声明:以下内容乃我个人观点,并不代表我公司的意见。我作为一个独立的开发人员,所开发的App属共享资源。

在之前的一篇文章里,我提到过Windows8版的TrialTool。TrialTool是一款基于web的应用,这款应用充分展示了各种Javascript接口的兼容性。它就像是一个接口的容器,任凭你浏览、修改和运行示例。这个版本的TrialTool特别展示了各种Windows8接口。

1. 背景

这个应用程序是在Windows 8开发者预览版的Visual Studio 11特别版上开发的。整个应用程序的开发使用了HTML5,CSS和JavaScript等语言。这个工具还没有涵盖所有的API,但是用到这些接口是Windows8中编程模型的很好的代表。

2. 开发环境

我的主要IDE是Eclipse或Cloud9,实际上这是我***次使用VisulStudiio专门去开发一个端对端的项目。

首先,在VisualStudio中选择一个预定义的项目类型或者是一个单一空白JS模板。这个模板在创建框架和填充代码上做的很好。正如框架一样,对于一个新手来说,很难一下浏览大量的文件,这些文件是模板的一部分。一旦你知道关于文件和其部分编辑方式,这个模板都是不错的。不幸的是,看上去,目前Visual Studio是我惟一的选择。因为我找不到任何能够用Eclipse或者Notepad++来创建、打包或者部署的命令行应用程序。

3. 写代码

创建一个空白项目跟从头写一个网页是一样的。首先我们用到的模板是Metro Style UI。TrialTool使用Grid布局模板,此模板是从一个显示项目清单的“索引”页面开始。通过点击每个细目可以将我们带到下一层“细节”页面。

JavaScript 文件是通过模板创建的,我推荐使用严格的方式。

3.1单页面应用程序

APP的创建本质上相当于一个单页网站。使用导航浏览网页的时候,从“索引”页面到“细节”页面,导致细节内容作为DOM的一部分被加载。加载和卸载事件使得我们能够控制每个操作显示的内容。WinJS模块定义的事件,让我们访问这个操作或DOM的片段作为导航加载事件,除此之外还有事件的布局变化(画出平板美化模式,调整大小,等等),我注意到,在默认情况下,HTML,CSS和JS的文件类型各含有一个目录。我更喜欢通过模块而不是文件类型来给文件分类,文件类型根据他们的扩展来进行区分。

3.2 CSS网格

使用ms-grid来定义metro UI非常棒。CSS网格布局的仍需改进。Tiles是一个主要的metro UI,并且ms-gri的实现使得在MetroUI中创建平铺的样式更加简单。

3.3 数据绑定

该模板也支持数据绑定。通过在HTML标签中,使用data-win-*属性使得视图可以被定义。这些渲染视图可以定义具体的控件(如 ListView),和这些控件的选择。通过AJAX和使用这些“itemRenderers”,JSON数据可以被加载。

这里用到的思想类似于框架,例如Backbone。然而,不像BockBone,当数据改变时自动改变视图这样类似的功能,需要明确的编码。把itemRender指向URL的方式会更好。

另一个我非常喜欢的功能是,能够在item render中声明格式。目前,模型中的数据可以被转换,但这看起来像人为的。使用特定元素的data-win-option来指定格式也非常棒。

3.4 Promises

所有异步操作(如AJAX,读取文件等等)似乎都返回promise。对互动事件驱动应用程序来说,这肯定是很好的,在C#中“async”也是一样的。

我们可以得到更好的承诺文件,看起来,文件是为C#和安装JavaScript写的.例如,像FilePicker这样的操作,返回值是一个promise。然而,看看实际传递给 promise.then() method的参数,你可以导航到“GetResults”方法。

4.windows8的接口

开发win8应用的最主要原因就是我可以使用win8接口,另外一个原因就是,这个App也是MetroIE能够打开的一个网站。

在JavaScript中添加本地win8接口,跟用本地DOM方法调用DOM是一样的。Windows8弹窗和调用本地警示窗口时一样的。使用本地文件接口,或者加密都是非常简单明了的。

有关Windows Runtime的接口的文档非常详尽,但是如果他们分组的更好,并且***个列表有高等级的类别(像Storage),这样你就可以深入了解特定的API(Bulk Access或File properties),这样的情况我会觉得很舒服。自从很多API有了共同的概念之后,这对我们看特定的API是很有帮助的。

我发现另外一个问题是,在Javascript 语言中API所需的功能都没有。举个例子,读取文件的内容返回一个 InputStream ,这时似乎并没有显示任何Javascript的API。实际上DataReader可以用来读取数据,这点上并不是很清楚。

我希望这些API可以成为类似HTML5 FILE/Blob的API。

5.调试

使用Visual Studio进行调试非常棒,以至于你真的忽视Firebug和Web Developer了。从类似于支持记录断点这样的基本功能到察看HTML源代码,调试器都非常强大。为了有更好的经验我会推荐一个双显示器设置。

我发现其中一个不足的功能是,配置(如Speed Trace)Javascript APP来解决其性能问题的方式。添加意向单也是调试应用程序的一种手段,(例如Opera dragonfly,这也是我喜欢的一个IE的功能)。远程调试证明在平板案例中很有用。

通过console.log打印带来的烦恼仍然存在。如果我们在产品部署中,能把console.log和Windows应用或系统日志整合在一起会更好。

6.打包和部署

虽然VisualStudio中有一个存储菜单,但是看上去存储功能并不可用。现在唯一可用的选择是创建一个本地App。把这个App打包成一个appx文件,一个压缩文件和一个验证文件。用Admin身份执行这个压缩文件安装这个应用。

7.结论

对于web开发者来说,选择用HTML、CSS或者JS来开发windows8应用非常有吸引力。现有的web开发知识可以用在这,但是为了平衡操作系统的,***熟悉windows8提供的接口。

总的来说,这是一个非常强大的方法,把web开发变成本地应用。希望对于web开发者来说,开发Android和iOS也这样简单。

原文:http://dotnet.dzone.com/articles/developing-apps-windows-8

译文:http://www.webapptrend.com/2012/01/1566.html

【编辑推荐】

  1. 讨论了那么多,究竟什么是Web App?
  2. 2011年Web Apps发展状况大盘点
  3. Web App和Native App之争纯属扯淡
  4. 到底什么情况该选择开发Web App?
  5. Web App和Native App谁会是未来的主流移动趋势?
责任编辑:陈贻新 来源: Web App Trend
相关推荐

2022-08-15 08:16:56

shiroWeb认证

2012-04-13 10:11:58

Windows 8泄露

2011-07-21 21:01:37

诺基亚塞班苹果

2017-03-22 15:38:28

代码架构Java

2013-06-03 09:28:49

游戏设计

2013-05-13 11:35:53

独立开发开发经验开发感悟

2023-09-11 00:14:46

后端团队项目

2024-08-08 08:50:21

标签页portTab

2022-03-16 14:59:28

打包debian模板文件

2011-01-04 16:17:09

2015-10-26 16:38:17

2021-02-05 08:35:21

私活程序员

2022-06-21 09:26:28

开源项目PR

2018-08-15 10:34:30

戴尔

2018-11-21 14:51:00

Windows 功能系统

2015-11-02 14:42:12

2017-08-08 12:50:51

Serverless云端数据库

2013-02-25 09:43:22

LambdasJava8

2018-09-11 17:05:12

戴尔

2010-05-27 10:00:09

点赞
收藏

51CTO技术栈公众号