免责声明:以下内容乃我个人观点,并不代表我公司的意见。我作为一个独立的开发人员,所开发的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
【编辑推荐】