65.9K
CodeProject 正在变化。 阅读更多。
Home

移动、平板和桌面开发同时进行

Doug Rathbone
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.60/5 (3投票s)

2013年1月17日

CPOL

10分钟阅读

viewsIcon

21609

移动、平板和桌面开发同时进行。

当你为每个主要平台创建移动应用时，你很快就会意识到这是一项令人费解的任务，沿途有许多语言和工具需要学习。过去几年出现了一些产品，让你只需关注一种语言和工具集，梦想着它们能处理剩下的事情。这种方法有效吗？DXTREME 在回答这个问题时做得相当不错。

我最近一直在玩的产品是 DevExpress 的 DXTREME。售价 899 美元，它声称能让你在单一工具集和单一代码库中为 iOS、Android、Windows 8 和 Web 创建混合应用。虽然这不一定是新事物，但 DevExpress 不仅仅是跨平台编译，它通过增强应用设计更进一步，让你无需进行大量繁重工作即可为每个平台创建原生外观的应用。一个代码库，但你的 iOS 应用看起来像 Cocoa Touch 界面，你的 Android 应用遵循类似的现代 Android 设备特定设计模式。

为 Web 开发，当它不是为 Web 开发时。

当我第一次开始我的跨平台冒险时，我阅读了大量关于 DevExpress 的 DXTREME 工具的文章。我很快意识到它实际上是一个框架和工具包，通过包装 Apache Cordova (PhoneGap) 来编写移动应用，然后添加 Visual Studio 支持进行构建、设计和仿真。这是一件好事。PhoneGap 已经存在相当长一段时间了。它稳定且被认为是移动开发的强大解决方案。迄今为止，PhoneGap 在 Windows 上的极大缺乏是它实际上没有任何好的 IDE 支持——这就是 DXTREME 脱颖而出之处。以至于即使它什么都不做，我也会仅仅因为这个原因购买它：它为 Visual Studio 添加了 PhoneGap 支持，包括在使用 Visual Studio 的设计器和脚本调试功能时。

因为 DXTREME 生成的应用实际上是混合的 HTML 和 JavaScript 应用，所以你本质上是在编写一个单页 HTML/JavaScript 应用 (SPA)。我敢猜测这两种语言是世界上最知名的语言，这使得所有技能水平的开发人员都能轻松地进入并尝试应用开发。就像微软对 ASP.Net MVC 所做的那样，DevExpress 也使用了你 Web 开发工具箱中已经很常见的技术，DXTREME 创建的应用使用了许多常见的 JavaScript 框架，如 jQuery、Knockout 和 jQuery Globalize。

DXTREME 不仅仅是 PhoneGap 的另一个方面是，正如我上面提到的，它添加了大量的自定义 CSS 和 JavaScript 魔法，使你的应用视图页面看起来平台特定，这样你的用户永远不会知道你没有为每个平台编写单独的应用。它在你无需动手的情况下完成了所有这一切——这本身就是一个非常巧妙的技巧。

一个示例页面及其代码

<div data-dx-role="view" data-dx-name="Index" data-dx-title="Home">
    <div data-dx-target-placeholder="content">
        <p style="padding: 5px;">
            My First DXTREME mobile app.       
        </p>
        <p style="padding: 5px;">
            Cross device development is off-the-chain!
        </p>
    </div>
</div>

导出到 iPhone、iPad、Android 手机和 Microsoft Surface 后的效果。请注意平台特定的外观和感觉。

   

 

除了跨设备设计功能。上述屏幕来自的内置 Visual Studio 模拟器支持一系列令人印象深刻的设备，以帮助你更好地了解你的应用外观

  • iPhone 4  
  • iPhone 5
  • iPad
  • iPad mini
  • iPad 3
  • Nexus Galaxy
  • Galaxy Tab
  • Nexus 7
  • MS Surface

你必须承认，当你只需维护一个单一代码库时，这是一个庞大的模拟设备列表。

Hello World。

在安装 DXTREME 后第一次启动 Visual Studio 时，如果你去创建一个新项目，你会看到一些新的项目模板

前两个是跨平台应用，第一个是基本模板，它有一个单一项目，可交叉编译到多个设备，第二个是帮助你根据远程（或本地）Web 服务的 OData 域模型构建应用的模板。

对于支架数据源来说，这是一个有趣的选择，当我第一次使用它时，我用 Stack Exchange 公共 OData 源 进行了测试，因为我的快速拨号列表中没有 OData 服务。 虽然我理解 OData 是连接可 Web 访问数据源的好方法，但支架工具不支持其他数据源这一事实感觉有点局限，特别是如果你需要任何形式的更高级身份验证支持来访问你的远程数据。

后两个模板实际上是上述缺陷的解决方案，因为它们是 WCF Web 服务的脚手架项目模板，允许你提供 OData。这些模板本身是从 Entity Framework 数据源脚手架的。这意味着即使你今天没有 OData 服务，工具也会努力确保这不会让你慢下来太多。

获取答案

当你学习任何新工具或框架时，我经常会有点担心你多快能上手并编写应用程序代码。虽然 DXTREME 凭借使用 HTML 和 JavaScript 作为其语言支持而有一个良好的开端，但自动魔术般的跨设备 CSS 和 JavaScript 组件对我来说仍然是新的。我担心我会花时间学习（撞墙？）一个抽象，而我本可以通过花时间使用 Objective-C 或 Java 来学习真正的东西——但我很幸运，因为他们的框架项目似乎有相当多的官方 文档。

其余组件都处于原始状态。jQuery 是真实的，使用 Knockout 进行 MVVM 模型绑定也与可以从其 网站 下载的完全相同。你还可以通过下载最新版本来带外升级这些文件，尽管我错过的一个功能是能够使用 Nuget 添加 Knockout 和 jQuery 作为包以便于升级（Visual Studio 不允许我打开 DXTREME 项目类型的包管理器）——我希望他们在以后的版本中添加此支持。

互联网上到处都是关于使用 jQuery 和 Knockout 的文档文章和示例；选择使用通用框架是一个很好的举动。

设备特定的硬件调用也是如此，因为这些都是由 PhoneGap/Apache Cordova 包装器完成的，所以文档也可以轻松地在 各处 找到。

硬件交互

现代智能手机通常要求你在编写与设备硬件通信的代码时更接近底层。也许你想使用设备摄像头拍照，或者向设备的定位服务询问你当前的 GPS 坐标。然而，当你只是编写一个 HTML 应用时，你如何做到这一点呢？HTML 和 JavaScript 尚未支持这种级别的硬件交互，并且 iPhone、Android 和 Surface 的设备特定 API 都不同，那么 DXTREME 应用如何让你拍照呢？

幸运的是，由于 PhoneGap 框架长期以来一直支持此功能，因此繁重的工作在其他地方完成

function takePhoto() {
    navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });
}

function onSuccess(imageData) {
    var image = document.getElementById('photo');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

本地存储通过类似的增强型 JavaScript 连接到数据库技术 SQLite 进行处理，该技术运行的 SQLite SQL 规范仅略有简化 SQLite SQL 规范

var db = window.openDatabase("Database", "1.0", "My App", 200000);
function queryDB(tx) {
    db.executeSql('SELECT * FROM MYCONTACTSTABLE', [], querySuccess, errorCB);
}

function querySuccess(tx, results) {
    alert("Contacts found in DB: " + results.rows.length);
}

在 DXTREME 通过使用 PhoneGap 支持的所有硬件设备中，唯一一点不足的是模拟器对这些技术的支持。如果模拟器内部能支持每个设备硬件包装器，以便更轻松地进行测试和调试而无需部署到设备，那就太好了。由于是 JavaScript，这可以轻松地进行引导以进行测试。

消除 Bug

在谈论测试和调试硬件时，值得看看 DXTREME 应用的调试方式，因为他们为此平凡的任务创造了一种相当创新的方法。

调试 DXTREME 应用与调试为 Web 开发的普通单页应用非常相似。你在 Visual Studio 中启动应用，它会启动你喜欢的浏览器，但它不会直接显示你的应用，而是为你提供一个非常酷的抽象模拟器视图，允许你在设备之间切换（从而切换 DXTREME 混合视图）

  

导航你的应用并调试其 JavaScript 的操作方式就像调试 JavaScript 应用一样。由于我使用 Firefox 或 Chrome 的调试工具组合，这对我很有效，但如果你使用 Internet Explorer，这意味着你完全支持 Visual Studio 脚本调试。

另一个值得注意的有趣之处是，如果你查看我的截图，你会看到模拟器中的二维码（左下角）

如果您使用设备扫描此代码，您将能够使用 slick 反向代理技术玩转应用程序，该技术通过 DevExpress 的网站将请求路由到您的本地 IDE/开发环境，尽管您无法以这种方式测试相机和定位服务等特定于设备的功能，但如果您下载 DevExpress 的 iPhone“Courier”应用程序，您可以通过扫描二维码以相同的方式测试所有这些原生功能（据说 Android 应用程序即将推出，Surface 或 Windows Phone 支持尚无消息）。

将其部署到设备上

一旦你开发了你的应用程序，消除了 Bug，并准备好在设备上实际试用你的应用程序，DXTREME 似乎也为你提供了 Visual Studio 内置的集成应用程序打包功能。从你的应用程序属性页面，你可以分配应用程序图标，添加你的 Android 签名证书和 iOS 发布配置文件，并实际构建 iOS IPA 或 Android APK 包。

这让我大吃一惊。过去我不知道有什么方法可以在 Windows 上构建 iOS 应用。遗憾的是，你仍然无法在没有 Mac 的情况下实际测试发布你的应用到 iOS 设备，但与许多 Apple 开发传统一样，这是一个 Apple 规定的障碍，而不是 DXTREME 的缺点。

此外，由于你实际上正在开发一个基于 PhoneGap 的应用程序，你还可以利用像 PhoneGap Build 这样的服务来减轻应用程序打包的一些麻烦。对于 Android 来说，这会很方便：PhoneGap Build 允许你在应用程序完成后从 Web 上下载到你的设备上。”

最后

如果我明天梦想着开发自己的跨平台开发工具，它也不会像 DevExpress 在 DXTREME 中创建的产品那样出色或功能丰富。该框架以深思熟虑的方式设计，使用通用语言和 JS 框架，使其易于上手，而强大的 Visual Studio 集成本身就值得考虑购买，仅仅是为了帮助加快你可能正在进行的任何 PhoneGap 开发。

在开发跨平台应用程序时，学习混合开发框架会引发疑问：这种方法真的有效吗？它真的能让你更高效吗？学习原生语言值得吗？在使用了 DXTREME 几周后，我坚信我对这些问题的回答是响亮的“是”。因为它很容易让你自己尝试，为什么不去查看 免费试用版 呢？

我免费收到了上面提到的产品，希望能在我博客上提及它。尽管如此，我只推荐我个人使用并认为我的读者会喜欢的产品或服务。我根据 联邦贸易委员会的 16 CFR，第 255 部分：“关于广告中使用代言和推荐的指南” 公开此信息。

© . All rights reserved.