В предыдущей статье этой серии я описал классы и функции, необходимые для конвертации валют в нашем приложении. Я также проиллюстрировал Cordova Globalization API и то, как мы можем использовать его для перевода письменных инструкций на главной странице «Конвертера валют». В следующей части я покажу вам остальные functions.js файла functions.js и краткую справку. обзор интерфейсов Cordova Connection и InAppBrowser .
Сервисные функции
Обновление ярлыка «Последнее обновление»
В вводной статье этой серии я объяснил, что наш проект будет хранить загруженные курсы валют, чтобы пользователь мог использовать приложение в автономном режиме. Поскольку курсы обмена валют меняются каждый день, важно уведомить пользователя о том, сколько лет его курсам обмена. Если он чувствует, что они слишком стары, он может запустить обновление и загрузить последнюю версию. По этой причине главная страница имеет следующий код:
<label id="last-update-label">Last update of exchange rates:</label> <span id="last-update"></span>
<span> с id="last-update" — это место, где мы добавим дату последнего обновления. Дата будет записана в формате, который наилучшим образом соответствует предпочтениям пользователя, определенным API-интерфейсом Globalization , о котором я говорил в предыдущей статье . Вспоминая третью статью, в которой мы говорили о пользовательских настройках, вы должны помнить, что мы обновляем и сохраняем дату каждый раз, когда пользователь запрашивает обновление обменного курса через класс « Settings » и его методы.
Функция, которая обновляет текст вышеуказанного <span> называется updateLastUpdate(), и ее разметка выглядит следующим образом:
function updateLastUpdate() { if (typeof Settings.getSettings().lastUpdate === 'undefined') { $('#last-update').text('-'); return; } // Show the last time the rates have been updated navigator.globalization.dateToString( new Date(Settings.getSettings().lastUpdate), function (date) { $('#last-update').text(date.value); }, function () { $('#last-update').text('-'); } ); }
Обновление тарифов
Метод, который имеет дело с фактическим обновлением, является updateExchangeRates() . В самом начале метода есть тест, чтобы проверить, подключено ли устройство к Интернету или нет. Тест проводится с использованием Cordova Connection API — объекта, который предоставляет доступ к информации о сотовой связи и соединении Wi-Fi устройства. У него есть одно свойство с именем type которое проверяет активное используемое сетевое соединение и может принимать следующие значения (как константы):
- Connection.UNKNOWN
- Connection.ETHERNET
- Connection.WIFI
- Connection.CELL_2G
- Connection.CELL_3G
- Connection.CELL_4G
- Connection.NONE
Если устройство имеет активное соединение, функция выполняет вызов RSS-канала Европейского центрального банка для получения ставок с использованием метода jQuery ajax() . После получения курсы сохраняются с использованием класса Currency , а также lastUpdate данные lastUpdate настроек пользователя, поэтому пользователь знает, что они работают с последними курсами обмена валют.
Два поля выбора и метка «последнее обновление» главной страницы обновляются с использованием этих текущих данных. Затем два меню выбора заполняются с помощью функции fillCurrenciesSelection() , которую я опишу через несколько минут. И последнее замечание: если обновление тарифа завершается неудачно, пользователь получает уведомление об этом сбое, отображаемое с помощью Cordova Notification API.
Итак, что именно произойдет, если первый тест не пройден? Хорошо, если устройство не имеет активного подключения к Интернету, приложение проверит, есть ли какие-либо сохраненные тарифы. Если нет сохраненных курсов обмена валют, пользователь уведомляется о проблеме, и кнопка «Преобразовать» отключается, потому что нет никаких способов выполнить какую-либо конвертацию валюты.
Код, который реализует эту функцию, приведен ниже:
/** * Update the exchange rates using the ECB web service */ function updateExchangeRates() { if (navigator.network.connection.type !== Connection.NONE) { $.mobile.loading( 'show', { text: 'Updating rates...', textVisible: true } ); $.get( 'http://www.ecb.int/stats/eurofxref/eurofxref-daily.xml', null, function(data) { var $currenciesElements = $(data).find('Cube[currency]'); // The EURO is the default currency, so it isn't in the retrieved data var currencies = [new Currency('EUR', '1')]; var i; for(i = 0; i < $currenciesElements.length; i++) { currencies.push( new Currency( $($currenciesElements[i]).attr('currency'), $($currenciesElements[i]).attr('rate') ) ); } currencies.sort(Currency.compare); // Store the data for(i = 0; i < currencies.length; i++) currencies[i].save(); // Update settings var settings = Settings.getSettings(); if ($.isEmptyObject(settings)) settings = new Settings(); settings.lastUpdate = new Date(); settings.save(); fillCurrenciesSelection(); updateLastUpdate(); $('#submit-button').button('enable'); }, 'XML' ) .error(function() { console.log('Unable to retrieve exchange rates from the provider.'); navigator.notification.alert( 'Unable to retrieve exchange rates from the provider.', function(){}, 'Error' ); if (Currency.getCurrencies().length === 0) $('#submit-button').button('disable'); }) .complete(function() { $.mobile.loading('hide'); }); } // Check if there are data into the local storage else if (Currency.getCurrencies().length === 0) { console.log('The connection is off and there aren't rates previously stored.'); navigator.notification.alert( 'Your device has the connection disabled and there aren't rates previously stored.n' + 'Please turn on your connection.', function(){}, 'Error' ); $('#submit-button').button('disable'); } }
Заполнение полей выбора
Функция обновления полей выбора не очень сложна для понимания. Он просто извлекает сохраненные валюты с помощью getCurrencies() класса Currency а затем вставляет каждую из них с помощью метода jQuery append() . Стоит отметить, что после вставки всех валют эта функция ищет последние валюты отправления и назначения, сохраненные в пользовательских настройках. Если найдены эти последние использованные валюты, они выбираются автоматически. В этом сценарии необходимо обновить виджет списка, что достигается с помощью метода selectmenu() и передачи ему строки refresh .
Полный источник fillCurrenciesSelection() указан ниже:
/** * Use the stored currencies to update the selection lists */ function fillCurrenciesSelection() { var currencies = Currency.getCurrencies(); var $fromCurrencyType = $('#from-type'); var $toCurrencyType = $('#to-type'); // Empty elements $fromCurrencyType.empty(); $toCurrencyType.empty(); // Load all the stored currencies for(var i = 0; i < currencies.length; i++) { $fromCurrencyType.append(' ' + currencies[i].abbreviation + ' '); $toCurrencyType.append(' ' + currencies[i].abbreviation + ' '); } // Update the selected option using the last currencies used var settings = Settings.getSettings(); if (!$.isEmptyObject(settings)) { var currency = $fromCurrencyType.find('[value="' + settings.fromCurrency + '"]'); if (currency !== null) $(currency).attr('selected', 'selected'); currency = $toCurrencyType.find('[value="' + settings.toCurrency + '"]'); if (currency !== null) $(currency).attr('selected', 'selected'); } $fromCurrencyType.selectmenu('refresh'); $toCurrencyType.selectmenu('refresh'); }
Управление внешними ссылками
Как вы видели в дизайне интерфейса «Конвертера валют», файл aurelio.html содержит несколько внешних ссылок. Эти ссылки не очень полезны, но мне нужно объяснить важную концепцию.
Еще несколько версий назад Cordova открывала внешние ссылки в том же Cordova WebView, в котором работало приложение. Таким образом, после открытия ссылки, когда пользователь нажимал кнопку «назад», страница последнего проекта отображалась точно так же, как и до того, как пользователь покинул ее. Но в самой последней версии фреймворка это поведение было изменено; теперь внешние ссылки открываются по умолчанию с помощью Cordova WebView, если URL-адрес находится в белом списке вашего приложения. URL-адреса, которых нет в вашем белом списке, открываются с помощью API InAppBrowser.
Ссылаясь на официальную документацию, InAppBrowser — это веб-браузер, который отображается в вашем приложении при использовании вызова window.open.
Этот API имеет три метода: addEventListener() , removeEventListener() и close() . Первый позволяет прослушивать три события ( loadstart , loadstop и exit) и позволяет прикрепить функцию, которая запускается сразу loadstart loadstop этих событий. Второй метод, как вы можете догадаться, используется для удаления ранее подключенного слушателя. Наконец, метод close() используется для закрытия окна InAppBrowser.
Если пользователь открывает ссылку, которая отображается в InAppBrowser или системном браузере, а затем возвращается «обратно» в приложение, все улучшения CSS и jQuery Mobile теряются. Это происходит потому, что внешняя ссылка не ссылается на цитируемые файлы и когда пользователь возвращается в приложение; файл загружается так, как было запрошено в первый раз, но без прохождения через главную страницу. Очевидно, вам следует избегать этого, что подчеркивает важность белого списка в файле конфигурации Cordova, и в помощь приходит следующая функция.
Цель функции openLinksInApp() — отлавливать щелчки по всем внешним ссылкам (распознается с помощью атрибута target="_blank" ), предотвращая нежелательное поведение по умолчанию и открывая их с помощью window.open() . Как вы увидите в приведенном ниже коде, я буду использовать параметр _target чтобы ссылки открывались с помощью WebView, поскольку я добавлю эти URL-адреса в белый список Cordova. Используя эту технику, мы избежим проблем, описанных выше, и ваше приложение будет продолжать работать так, как ожидается.
/** * Open all the links as internals */ function openLinksInApp() { $("a[target="_blank"]").on('click', function(event) { event.preventDefault(); window.open($(this).attr('href'), '_target'); }); }
Вывод
В этой статье я описал несколько других functions.js файла functions.js , выделив ключевые моменты каждого из них. Я также рассказал о Cordova Connection и API InAppBrowser и о том, как они работают. Как мы уже видели, работа с внешними ссылками чрезвычайно важна, когда вы используете jQuery Mobile для создания интерфейса мобильного приложения. В следующей и последней статье этой серии я покажу вам функцию, которая инициализирует приложение, называемую initApplication() , и файл конфигурации Cordova, который мы будем использовать вместе со службой Adobe PhoneGap Build для упаковки нашего приложения «Конвертер валют» ,