将离线支持添加到您的剑道用户界面移动应用


由TJ VanToll为Telerik移动博客撰写。


剑道UI 2014年的第三个也是最后一个版本有just landed。对于Kendo UI Mobile用户来说,有一些很棒的东西-比如improved AngularJS support还有一个新的材料设计主题--但让我兴奋的是,我今天要写的是,新的离线支持内置到了Kendo UI中。

就我个人而言,离线支持是我总觉得添加到我的应用程序中,但从来没有真正抽出时间,很大程度上是因为这很难,而且我很懒。但幸运的是,对我来说,Kendo UI中新的离线支持使得添加此功能变得微不足道。让我们看看它是怎么工作的。

Kendo UI Mobile中的数据

要了解Kendo UI Mobile中离线存储的工作原理,您必须了解一些相关知识Kendo UI DataSources工作。让我们看一个例子。

假设您想要围绕以下位置的JSON端点构建一个杂货清单应用程序http://api.myapp.com/Groceries。正在发送GET对该端点的请求将返回杂货列表,并发送POST请求将添加新的食品杂货。连接到这样的端点的Kendo UI DataSource将如下所示:

var groceryDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://api.myapp.com/Groceries",
            dataType: "json"
        },
        create: {
            url: "http://api.myapp.com/Groceries",
            dataType: "json"
        }
    }
});

本文的设置非常简单,但是Kendo UI DataSource包含过多的选项,可以连接到各种服务。想要配置如何处理删除吗?使用transport.destroy option。需要在您的移动应用程序中使用旧式CMS中的数据吗?您可以使用schema option就因为这个。你可以的peruse the DataSource API docsgetting starting documentation去了解一下什么是可能的。

将数据绑定到小部件

那么现在您有了一个数据源,如何使用它呢?在Kendo UI Mobile中,只需将dataSource任何支持数据源绑定的小部件上的选项。例如,假设上述数据源在以下位置可用window.groceryDataSource,您可以构建一个ListView widget它通过以下代码使用此数据源:

<ul data-role="listview" data-source="groceryDataSource" data-template="grocery-template"></ul>
<script id="grocery-template" type="text/html">
    #: Name #
</script>

这里需要简要解释几件事。首先,请注意,data-template属性与ListView的id属性的<script>标签。这将告诉ListView小部件如何呈现DataSource中的每一项。上面的代码假设来自后端服务的每个杂货对象都有一个Name财产。ListView小部件负责构建<li>元素,并自动将它们追加到列表中。例如,如果要获取http://api.myapp.com/Groceries退货[{"Name": "Grapes"},{"Name":"Bread"}],上面的ListView将包含<li>Grapes</li><li>Bread</li>

担心在全局范围内公开DataSource对象吗?别担心。Kendo UI有一个完整的MVVM框架,可以充当作用域机制,并将引用排除在全局作用域之外。深入研究Kendo UI MVVM功能超出了本文的范围,但是您可以learn more about it on our docs

Kendo UI DataSource的伟大之处在于它完全将视图逻辑从底层数据服务中抽象出来。当此ListView小部件需要数据时,kendo UI将自动执行GET请求。当需要将项添加到数据源时,可以使用其add() method。kendo UI自动更新绑定到该数据源的任何小部件的视图。很酷,是吧?当呈现上面的ListView小部件时,看起来有点像这样:

e60JdJH

喜欢这款应用的外观吗?它使用的一个新的剑道UI平面主题来自http://kendoflatthemes.com/


添加脱机功能

那么,离线在这方面起到了什么作用呢?假设我们的同一数据源仍可在groceryDataSource,您可以使用以下两行将新项目添加到列表中:

groceryDataSource.add({ Name: "Cheese" });
groceryDataSource.sync();

add()方法更新DataSource并重新呈现小部件;sync()方法将适当的请求发送到后端。(还有一个autoSync option这样就不需要显式调用sync()。(

这很有效,除了一个问题:这个应用程序依赖于网络连接,当用户离线时,它将静默失败。如果用户在隧道中添加了一个项目,它就会消失。惊喜吧!幸运的是,Kendo UI中的新离线功能使得这项工作非常容易,就像用户预期的那样。事实上,这只是两个步骤。

步骤1:使用offlineStorage选项

第一步是指定offlineStorage option在DataSource对象上。例如,下面的代码将选项添加到我们的杂货数据源。


var groceryDataSource = new kendo.data.DataSource({
    offlineStorage: "grocery-list",
    transport: {
        ...
    }
});

剑道UI使用HTML5 localStorage API默认情况下脱机存储数据,并且offlineStorage选项用作密钥。因此,在将选项添加到上面的代码之后,您可以运行localStorage.get("grocery-list")若要获取存储在数据源中的原始数据,请执行以下操作。

本地存储每个应用程序的数据限制为5MB,因此对于数据量很大的应用程序,您可能需要寻找替代存储选项。Kendo UI DataSource使得将替代方法插入到其API中变得很容易。请查看object version of the offlineStorage option举个例子。有关数据配额的更多信息以及如何跨浏览器解决这些问题,请查看以下内容excellent article on the topic from HTML5 Rocks

步骤2:适当调用online()方法

kendo UI不会自动为您检测在线/离线访问,因为这样做可能会很棘手,您希望如何处理这取决于您正在构建的内容。Cordova应用程序的情况相对正常,因为Cordova network information plugin使用设备的本机API检测有关设备连接的信息。网络连接API做的一件事就是触发onlineoffline事件,分别在设备联机和脱机时发生。因此,在我们的groceryDataSource只需添加以下代码即可:


document.addEventListener("online", function() {
    groceryDataSource.online(true);
});
document.addEventListener("offline", function() {
    groceryDataSource.online(false);
});

对于那些好奇的人来说,网络信息插件默认安装在新的Telerik AppBuilder项目。AppBuilder模拟器还提供了一种方便的方式来模拟在线和离线条件。它是值得的checking out如果你还没有这么做的话。

下面是该代码的工作原理。当用户脱机时,offline事件处理程序运行,调用online(false)在数据源上。这会使DataSource处于脱机模式,并开始维护内部__state__字段,该字段设置为"create","update",或"destroy"

当用户重新联机时,online事件处理程序运行,调用online(true)在数据源上。这告诉数据源通过后台向同步修改数据发送所有必要的请求。所有这些都是完全透明的,而不是你必须跟踪自己的事情,我认为这非常酷。

当涉及到传统的Web应用程序时,事情就有点棘手了。虽然有标准化的onlineoffline事件,它们的工作方式在不同的浏览器实现中并不一致。例如,如果您连接到网络,某些浏览器会认为您是“在线”的,而不管该网络是否连接到Internet。对于那些对向传统Web应用程序添加离线存储感兴趣的人,我建议您通读一下Kendo UI’s documentation on the issue。它介绍了几种不同的方法,您可能希望根据您的需求使用这些方法。信不信由你,定期轮询服务器是准确检测连接性的最可靠方法。

包扎

对于任何移动应用程序来说,离线存储都是一个重要的考虑因素。Kendo UI Mobile有一个相当流畅的实现,这使得离线存储成为可能变得非常简单。因为脱机功能是在DataSource级别实现的,所以您可以在绑定到DataSource的任何Kendo UI小部件中使用它-包括grids,schedulers,新的treelist widget等等。

如果您想了解更多关于Kendo UI第三季度发布的新功能,check out our keynote video。它介绍了新功能,包括这个离线功能的实现。Kendo UI Mobile和Kendo UI DataSource是开放源码的Kendo UI Core项目的一部分,您可以在以下位置免费下载和使用该项目https://github.com/telerik/kendo-ui-core

标题图像由photosteve101