当前位置: 代码迷 >> Web前端 >> 【初体验】替Window8开发Web Apps
  详细解决方案

【初体验】替Window8开发Web Apps

热度:431   发布时间:2012-07-03 13:37:42.0
【初体验】为Window8开发Web Apps

免责声明:以下内容乃我个人观点,并不代表我公司的意见。我作为一个独立的开发人员,所开发的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 也这样简单。

原文链接:Developing Apps for Windows 8

?

译文来源:http://www.webapptrend.com/
?WebAppTrend是一个独立的技术博客,关注Web?App前瞻和实践,以及智能浏览器发展?

请大家在关注ITeye的同时,关注我们的新浪微博 @WebAppTrend,关注我们的腾讯微博@WebAppTrend,欢迎加入我们的Q Q群:193775364

?

  相关解决方案