使用 HTML5 和 DXTREME 构建跨平台应用

开发一个支持多个平台（Apple、Android、Microsoft）的应用程序的最佳方式是什么？

和许多开发人员一样，我最近也面临着这个确切的问题。事实证明，有两种选择可以实现这一点：1) 构建 HTML5 Web 应用程序和一堆 Shell 应用程序，每个平台一个；或 2) 为每个平台构建原生应用程序。由于我没有所有平台的专业知识，也没有时间和金钱去掌握所有这些平台，所以我决定研究第一个选项。我很幸运地听说 DevExpress 正在开发一个名为 DXTREME 的新跨平台开发框架。DXTREME 旨在帮助您使用 Web 开发人员非常熟悉的 HTML、JavaScript、CSS 和 XAML（仅适用于 Win8）等技术为 Android、Apple 和 Windows 8 构建应用程序。它包含一套库、控件和其他资产，抽象化了为所有这些不同平台构建应用程序的复杂性。它直接与 Visual Studio 集成，并带有一个项目模板，您可以使用它来构建应用程序。

它建立在两种不同的技术栈上：HTML5 和 XAML。

HTML5 技术栈用于使用 HTML、JavaScript 和 CSS 构建 Android、Apple 和 Windows 8 应用程序。它允许您创建在不同平台之间共享外观和多点触控功能的应用程序，但也与 Apple App Store、Google Play Store 和 Windows Store 兼容。

XAML 技术栈适用于已经熟悉 WPF 或 Silverlight 的开发人员，用于构建原生 Windows 8 应用程序。

我将带您了解我使用 DXTREME 创建基本应用程序的经验。希望它能让您了解首次使用 DXTREME 的人需要多长的上手时间。

启动多渠道应用程序项目

对于第一次练习，我选择了多渠道应用程序模板，您将使用它来使用 HTML、JavaScript 和 CSS 创建跨平台移动应用程序。

事实证明，您基本上是在使用模型-视图-视图模型 (MVVM) 模式构建一个单页 Web 应用程序 (SPA)。ViewModel 使用 Knockout，整个应用程序通过 Apache Cordova 连接在一起，允许您发布到 Apple App Store 或 Google Play。

选择多渠道应用程序模板后，会生成一个包含 4 个项目的解决方案，一个用于桌面版，一个用于移动版，一个用于 Win8，一个用于共享

它可以直接编译。

========== 生成：4 个成功，0 个失败，0 个最新，0 个跳过 ==========

选中桌面应用程序后，我按 F5 看看会发生什么。它打开了这个示例应用程序。

 

回到 Visual Studio，我选择移动项目并按 F5 在模拟器中打开它。

它加载了 DXTREME 中包含的 iPhone 应用程序模拟器。它看起来是测试应用程序屏幕尺寸的一种不错的方式，但它只是一个 HTML 模拟器，不应作为最终测试体验——您需要实际的模拟器或设备来进行测试。

DevExpress 也通过其 Courier 移动应用程序解决了这个问题，该应用程序可在 Apple App Store 中用于 iOS，在 Google Play Store 中用于 Android。Courier 允许您通过扫描二维码（他们提供）来测试您的移动 Web 应用程序。它将在您的 iPhone 或 Android 设备上加载在您的本地机器上运行的 Web 应用程序。

回到 Visual Studio，我选择 Win8 应用程序，正如预期，它打开了 Windows 8 应用程序。

项目中有哪些内容？

让我们回到 Visual Studio，稍微深入了解一下项目。在桌面项目中，您会看到对共享项目的项目引用。不需要其他 DLL。这很好。

还有一些特定于设备的 CSS

和一些 JavaScript。

我四处查看，在项目的根目录下找到一个名为 app.js 的文件。打开它，我发现了这段代码片段，它使用 DXTREME 框架实例化了一个 `HtmlApplication` 对象。

$(function() {
     Application2.app = new DevExpress.framework.html.HtmlApplication({
       ns: Application2,
       viewPortNode: document.getElementById("viewPort"),
       defaultLayout: Application2.config.defaultLayout,
       navigation: Application2.config.navigation
     });
     Application2.app.router.register(":view/:id", { view: "About", id: undefined });
});

其他项目也大同小异。通用逻辑在应用程序之间共享，但您可以深入研究各个文件以调整或增强平台或设备特定的功能。

我注意到一个很酷的事情是，他们为他们的视图实现了一个自定义编辑器。它允许您在 Visual Studio 中预览视图。这很好。

从文档中学习 DXTREME

您可以在这里找到 HTML 文档：http://help.devexpress.com/HTML/#!Overview，在这里找到 Windows 8 文档：http://help.devexpress.com/#XAML/CustomDocument12019

HTML5 文档看起来不错。有一个简单的演练，看起来很像 knockout 的那个，它很好地解释了构建 DXTREME 应用程序的要素。

DXTREME 还包含几个示例应用程序，可帮助您入门并提供模板和 DevExpress 控件如何协同工作的示例。这是启动 DXTREME 时启动的应用程序。它有指向演示和示例应用程序的指针。

让我们看一下 CRM HTML JS 应用程序，看看它告诉我们如何构建 DXTREME 应用程序。CRM 应用程序包含 5 个项目

一切都一目了然。大部分内容看起来与多渠道项目模板相似，只是这个没有 Win8 项目（有单独的演示）并且包含一个服务项目。

让我们深入研究一下解决方案。ViewModels 位于共享项目中。

看起来像这样……一个基本的 Knockout ViewModel。

[ShipperViewModel.js]

(function() {
     DXCRM.ShipperViewModel = function(data) {
       this.ShipperID = ko.observable();
       this.CompanyName = ko.observable();
       this.Phone = ko.observable();
       if(data)
       this.fromJS(data);
     };
})();

它们在应用程序视图中使用

这是 Shippers.js 作为示例。

[Shippers.js]

DXCRM.Shippers = function(params) {
     return {
       dataSource: new DevExpress.data.SimpleDataSource({
       store: DXCRM.db.Shippers,
       map: function(item) {
         return new DXCRM.ShipperViewModel(item);
       }
     })};
};

这些相同的 ViewModel 正在 WinJS 项目中使用。这太棒了。我可以看到基于 HTML 的项目之间正在进行代码重用。

演示应用程序通过 DXTREME 项目向导使用 Microsoft NorthWind 示例数据库自动生成。显然，您可以使用自己的数据，但这是在您试验时将数据引入应用程序的好方法。

然后我专注于 Win8 应用程序的单独 XAML 解决方案。它看起来像一个使用 DXTREME 控件的标准 Win8 应用程序。

部署

所以，现在您已经开发了应用程序，您需要将其打包并准备好将其交付给 Microsoft、Apple 和 Google。

所以，假设我构建了 CRM 应用程序，我想部署它。有两个解决方案，一个用于 Win8，一个用于其他所有平台。让我们尝试部署后者。

我转到解决方案中的第一个项目，即“桌面”项目。右键单击它，会给我一个“构建原生包”选项

这将启动此对话框

像大多数 .NET 开发人员一样，假设我从未发布过 Android 或 iOS 应用程序。我不知道如何处理这个屏幕。然后我漫步到 DXTREME 帮助文档，因为我记得之前看到过关于部署的内容。我在这里找到了“原生包”部分：http://help.devexpress.com/HTML/#!Overview/Application/Native%20Packages

事实证明，我需要注册 Apple 和 Google 开发者计划，并可以从他们那里获得我的证书文件。DXTREME 提供了 Apple 和 Google 计划的链接，以及生成证书的 XCA 链接。

在多平台部署之前，您需要一些特定于平台的知识。由于 Apple、Google 和 Microsoft 都有自己的商店、注册要求、证书等，因此您必须花一些时间学习这些。DXTREME 简化了大部分跨平台编码体验，但没有一键式解决方案来完成部署。

最终想法

花了几小时使用 DXTREME 后，它看起来是朝着跨平台应用程序开发方向迈出的良好一步。能够利用我已知的技术，并且 DXTREME 控件能够根据平台自适应地渲染，这真是太棒了。我花了一些时间研究学习 iOS 和 Android 开发需要付出什么，作为一名 .NET 开发人员，我肯定宁愿花时间学习 DXTREME。我期待着更深入地研究 DXTREME，并期待着在未来的版本中看到它的发展。

Jon

材料披露声明：我获得了酬金和免费的 DXTREME 订阅，希望我能在我的博客上提及它。无论如何，我只推荐我个人使用并认为我的读者会喜欢的产品或服务。我根据联邦贸易委员会的 16 CFR，第 255 部分：“关于广告中使用代言和推荐的指南”进行披露。