免责声明:以下内容乃我个人观点,并不代表我公司的意见。我作为一个独立的开发人员,所开发的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
发表评论
-
响应式Web设计资源整理
2012-03-02 22:50 809这篇文章是对以往发表在Smashing Magazine上关于 ... -
投身移动开发必须知道的20件事
2012-03-01 23:42 722移动开发需要具体的设计考虑。这个所指的范围非常广,可以从“ ... -
聘用NodeJS开发者的六个建议
2012-03-01 23:41 793假设你正想聘用一名Node ... -
[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎
2012-03-01 23:41 874国外知名调查分析机构V ... -
Facebook发力Mobile Web 推出支付和测试工具
2012-02-28 23:49 790Facebook入场了,在MWC大 ... -
【数据】《移动优先》作者:为什么移动如此重要?
2012-02-28 23:48 903三 年前,前雅虎用户体验总监Luke Wrobl ... -
重新审视Mobile Web
2012-02-28 23:48 673作者简介:Byron是一个 ... -
WebAppTrend周刊:Google Chrome工程师推出Web App开发指南
2012-02-26 00:52 1189从本周起,WebAppTrend将精选一周内(2月20日~2月 ... -
Google Web App开发指南第四章:构建优秀的Web Apps
2012-02-24 23:13 1250构建漂亮的应用 一个web app 的视觉设计不仅 ... -
零基础学习Sencha Touch(资料和教程集合)
2012-02-23 00:41 1256译者注:本篇文章为开发者提供了零基础使用Sencha To ... -
Google Web Apps开发指南之项目样例(上)
2012-02-23 00:41 901如果缺少项目案例部 ... -
如何一步一步制作出高品质Infographic?
2012-02-20 21:23 952译者注:Infographic就 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:10 852在计算机的发展过程中 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:09 0在计算机的发展过程中 ... -
新手必读:PhoneGap入门六大问题
2012-02-18 00:08 996很多PhoneGap新手总是需要一些基础问题的解答,Ado ... -
Google Web App开发指南第一章:什么是Web Apps?
2012-02-18 00:07 893很多人向我问起学习HTML5技术的权威入门资料,我总是毫不 ... -
Lanyrd是如何应用HTML5创建出优秀的移动Web应用的
2012-02-15 00:28 624当很多人都在等待观望 ... -
Appcelerator收购Cocoafish,旨在为Titanium平台提供即时移动云服务
2012-02-15 00:17 885译者注:Appcelerator是 ... -
Android官方文档之Web Apps最佳实践
2012-02-15 00:14 647为移动设备开发web页面或者web应用与为桌面浏览器开发web ... -
Android官方文档之Web Apps调试
2012-02-15 00:13 885概览 你可以使用控制台的Javascript方法调试你的w ...
相关推荐
Reimagined for full-screen and touch-optimized apps, Windows 8 provides a platform for reaching new users in new ways. In response, programming legend Charles Petzold is rewriting his classic ...
Building Progressive Web Apps(EarlyRelease) 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
Progressive Web Apps(PWAS)开发教程,跨平台开发,这是微软推出的最新的web技术
This book—the 6th edition of Programming Windows—is a guide to programming applications that run under Microsoft Windows 8. At the time of this writing (May 1, 2012), Windows 8 is not yet complete ...
您可以安装 Office Web Apps Server 作为单服务器 Office Web Apps Server 场,或者作为多服务器、负载平衡 Office Web Apps Server 场。您可以使用物...
ASP.net office web apps整合
As this practical guide clearly demonstrates, you can use WordPress to build web apps of any typea??not mere content sites, but full-blown apps for specific tasks. If you have ...
office web apps整合,Java 源代码,亲测可用
Office Web Apps Host 程序,可以调用OWA查看Office文档。
Oracle Application Express (APEX): Build Powerful Data-Centric Web Apps with APEX features step-by-step application development techniques, real-world coding examples, and best practices. You will ...
HTML5 and JavaScript Web Apps is about building web applications with HTML5 and W3C specifications that are widely supported across all devices and browsers. It is intendedfor programmers who are ...
WindowsApps
关于Windows8 编程的书,Writing Windows8 apps with c# and XAML. 超高清英文原版电子书
Progressive Web Apps 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国...
Building Web Apps with Spring 5 and Angular 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
Our primary focus will be on applying these web technologies within the Windows 8 platform, where there are unique considerations, and not on exploring the details of those web technologies ...
Write Modern Web Apps with the MEAN Stack Mongo Express AngularJS and Node.js 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
OWASP_Broken_Web_Apps_VM_1.2
HTML5 and JavaScript Web Apps.pdf