Добавление автономной поддержки в мобильное приложение Kendo UI

Автор TJ VanToll для Telerik Mobile Blog.

Третий и последний выпуск Kendo UI 2014 года только что появился . Для пользователей Kendo UI Mobile есть несколько замечательных вещей — например, улучшенная поддержка AngularJS и новая тема дизайна материалов — но то, что меня радует и о чем я пишу сегодня, — это новая автономная поддержка, встроенная в Kendo UI.

Лично поддержка в автономном режиме — это одна из тех функций, которые я всегда чувствую, что должен добавить в свои приложения, но никогда не получаю, в основном потому, что это сложно, и я ленив. Но, к счастью для меня, новая офлайн-поддержка в Kendo UI делает эту функцию тривиальной для добавления. Посмотрим, как это работает.

Данные в Kendo UI Mobile

Чтобы понять, как работает автономное хранилище в Kendo UI Mobile, необходимо немного узнать о том, как работают источники данных Kendo UI . Давайте посмотрим на пример.

Предположим, вы хотите создать приложение со списком продуктов вокруг конечной точки JSON http://api.myapp.com/Groceries. Отправка GETзапросов в эту конечную точку вернет список продуктов, а отправка POSTзапросов добавит новые продукты. Источник данных Kendo UI для подключения к такой конечной точке будет выглядеть примерно так:

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 содержит множество вариантов, позволяющих подключаться к огромному количеству сервисов. Хотите настроить обработку удалений? Используйте transport.destroyопцию . Вам нужно скопировать данные из вашей устаревшей CMS для работы в вашем мобильном приложении? Вы можете использовать schemaопцию для этого. Вы можете просмотреть документы DataSource API и получить начальную документацию, чтобы получить представление о том, что возможно.

Привязка данных к виджетам

Итак, теперь, когда у вас есть источник данных, как его использовать? В Kendo UI Mobile это так же просто, как установить dataSourceпараметр для любого виджета, который поддерживает привязку DataSource. Например, предполагая, что вышеупомянутый DataSource доступен в window.groceryDataSource, вы можете создать виджет ListView, который использует этот DataSource с кодом ниже:

<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вернуть GET [{"Name": "Grapes"},{"Name":"Bread"}], вышеприведенный ListView будет содержать <li>Grapes</li><li>Bread</li>.

Заинтересованы в том, чтобы выставить объект DataSource в глобальном масштабе? Не стоит беспокоиться. Пользовательский интерфейс Kendo имеет полную инфраструктуру MVVM, которая может действовать как механизм определения объема и сохранять ссылки вне глобальной области видимости. Углубление в функциональность Kendo UI MVVM выходит за рамки этой статьи, но вы можете узнать больше об этом в наших документах .

Что хорошего в источнике данных Kendo UI, так это то, что он полностью абстрагирует вашу логику представления от базовых сервисов данных. Пользовательский интерфейс Kendo автоматически выполнит запрос GET, когда этот виджет ListView будет нуждаться в данных. Когда вам нужно добавить элементы в источник данных, вы можете использовать его add()метод . Пользовательский интерфейс Kendo автоматически обновляет представление всех виджетов, связанных с этим источником данных. Круто, да? Когда визуализированный выше виджет ListView выглядит примерно так:

Понравился внешний вид этого приложения? Он использует одну из новых плоских тем Kendo UI от http://kendoflatthemes.com/ .

Добавление офлайн-функциональности

Так, где оффлайн играет в это? Предполагая, что наш тот же источник данных все еще доступен по адресу groceryDataSource, вы можете использовать следующие две строки, чтобы добавить новый элемент в список:

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

add()Метод обновляет источник данных и повторно делает виджеты; sync()метод отправляет соответствующие запросы на внутренний интерфейс. (Существует также autoSyncопция, которая устраняет необходимость явного вызова sync().)

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

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