Во второй части серии я показал вам код двух HTML-страниц и пользовательский CSS-файл нашего приложения «Конвертер валют». В этой статье я покажу вам пользовательскую конфигурацию jQuery Mobile и некоторые файлы JavaScript, которые реализуют бизнес-логику. При описании файлов JavaScript я также подробно продемонстрирую API-интерфейсы Cordova.
Пользовательская конфигурация jQuery Mobile
jQuery Mobile имеет конфигурацию по умолчанию, которая обычно подходит для большинства проектов с базовыми требованиями. Тем не менее, вам все равно может потребоваться настроить некоторые специальные пользовательские правила в соответствии с требованиями вашего приложения. Как я уже говорил в первой части этой серии, когда я представлял список файлов, составляющих наше приложение, у нас есть файл с именем jquery.mobile.config.js , в котором мы точно указываем конфигурацию. В этом разделе я покажу вам, какие параметры я буду менять.
(Обратите внимание, что когда вы создаете такой файл, вы должны включить его перед mobileinit файлами библиотеки. Фактически, когда запускается jQuery Mobile, он запускает событие, называемое mobileinit , которое используется для переопределения настроек по умолчанию.)
У вас есть два разных способа задания параметров, но я буду использовать метод, который изменяет свойства объекта $.mobile . Я изменю только некоторые из них, но если вам нужен обзор всех свойств jQuery Mobile, вы можете прочитать документацию по настройке jQuery Mobile . Наш файл изменит параметры, касающиеся виджета загрузчика страниц, темы и тех, которые разрешают междоменные запросы. Настройки, разрешающие междоменные запросы, являются наиболее интересными и заслуживают обсуждения.
Как вы узнали из требований к приложению, «Конвертер валют» позвонит в RSS-канал Европейского центрального банка, чтобы обновить курсы валют, поэтому мы должны иметь возможность отправлять HTTP-запросы к внешнему источнику. Когда вы используете инфраструктуру Cordova в сочетании с jQuery Mobile, чтобы иметь возможность делать междоменные запросы, вам нужно установить одно свойство в файле config.xml для первой платформы (Cordova) и два свойства для второй (jQuery Mobile). ).
Свойства jQuery Mobile для изменения: $.support.cors и $.mobile.allowCrossDomainPages . Первым является логическое значение, которое необходимо установить в значение true , чтобы сообщить браузеру о поддержке междоменных запросов. В проекте также есть ссылки на внешние страницы (на странице кредитов), поэтому мы также должны установить для свойства $.mobile.allowCrossDomainPages значение true . Фактически, когда jQuery Mobile пытается загрузить внешнюю страницу, запрос выполняется с помощью $.mobile.loadPage() , который разрешает междоменные запросы, только если для указанного свойства установлено значение true . По умолчанию его значение равно false , потому что, согласно документации, инфраструктура отслеживает, какая страница просматривается в хеше местоположения браузера, поэтому возможна атака с использованием межсайтовых сценариев (XSS), если код XSS в Вопрос может манипулировать хешем и устанавливать его на междоменный URL по своему выбору
. Эта опция должна быть установлена до того, как будут сделаны запросы, и документация предлагает ввести ее в первоначальную конфигурацию. Мы будем действовать соответственно.
Теперь, когда вы знаете значение этих параметров, вы готовы увидеть полный исходный код jquery.mobile.config.js .
$(document).on( 'mobileinit', function() { // Page Loader Widget $.mobile.loader.prototype.options.text = 'Loading...'; $.mobile.loader.prototype.options.textVisible = true; // Bypass Access-Control-Allow-Origin $.support.cors = true; $.mobile.allowCrossDomainPages = true; // Theme $.mobile.page.prototype.options.theme = 'b'; $.mobile.page.prototype.options.headerTheme = 'b'; $.mobile.page.prototype.options.contentTheme = 'b'; $.mobile.page.prototype.options.footerTheme = 'b'; $.mobile.page.prototype.options.backBtnTheme = 'b'; } );
Класс перевода
Вспоминая требования проекта, вы помните, что «Конвертер валют» — это мультиязычное приложение. Поскольку его наиболее важной частью является index.html , я буду создавать переводы для этой страницы и игнорировать переводы для aurelio.html . Я думаю, что наличие кредитов только на английском языке является адекватным.
Для хранения строк разных языков в файле translation.js я использовал объект, вызывающий переменную Translation . Этот объект имеет столько свойств, сколько разговорных языков вы хотите поддерживать. Итак, поскольку мы переведем его на итальянский, французский и испанский языки, у нас будет три свойства, значения которых являются объектами, содержащими строки. Чтобы упростить процесс перевода, эти объекты имеют идентификатор элементов, которые будут переведены как имена их свойств, и строку, которую нужно изменить как их значения. Чтобы понять, как осуществляется Translation , достаточно увидеть один язык, поэтому я покажу вам только итальянский, но вы обнаружите, что другие будут поддерживаться в репозитории приложения.
var Translation = { 'it': { 'app-description': 'Currency Converter è una semplice applicazione che ti aiuta a convertire da una valuta ad un'altra. È anche possibile aggiornare i tassi di cambio ogni volta che si desidera così da avere sempre dei tassi di conversione aggiornati.', 'convert-title': 'Converti', 'from-value-label': 'Valore:', 'from-type-label': 'Da Valuta:', 'to-type-label': 'A Valuta:', 'result-title': 'Risultato', 'copyright-title': 'Creata da Aurelio De Rosa', 'credits-button': 'Crediti', 'update-button': 'Aggiorna dati', 'submit-button': 'Converti', 'reset-button': 'Azzera dati', 'last-update-label': 'Ultimo aggiornamento cambi:' } // other languages here }
Настройки пользователя
Во вступительной статье этой серии я заявил:
Приложение сохранит последнюю валюту, использованную для конвертации, поэтому при следующем запуске приложения пользователь найдет свою последнюю использованную валюту. Кроме того, будут также сохраняться дата и время последнего обновления, чтобы пользователь знал, насколько недавними (или старыми) являются его коэффициенты конверсии.
Таким образом, нам нужно управлять и хранить эти данные. Для достижения этой цели мы будем использовать API хранилища Cordova , который построен на основе API хранилища Web и Cordova. Для устройств, которые имеют встроенную поддержку, он использует собственную реализацию вместо своей собственной, которая совместима со спецификациями W3C.
В этом разделе я собираюсь описать файл с именем settings.js который содержит класс с именем Settings . Давайте внимательнее посмотрим на этот файл.
Как вы уже знаете, этот класс имеет три открытых свойства: lastUpdate , fromCurrency и toCurrency . У этого также есть два частных: _db и _tableName . Цель первых трех свойств должна быть самоочевидной, поэтому я пропущу их объяснение. _db — это ссылка на свойство window.localStorage которое будет использоваться для вызова метода API веб-хранилища для сохранения и извлечения данных из браузера (или, в случае нашего гибридного приложения, с устройства). Имейте в виду, что этот API не использует реальные таблицы, как СУБД. Вместо этого он имеет набор свойств, значениями которых являются базовый тип (например, строка или число) или объект в кодировке JSON. Сказав это, должно быть ясно, что _tableName — это не свойство, имеющее в качестве значения строку, содержащую имя реальной таблицы, а скорее имя свойства, в котором мы будем хранить JSON-кодированный объект, содержащий пользовательские настройки. ,
Следующий код показывает, что я объяснил до сих пор.
function Settings(lastUpdate, fromCurrency, toCurrency) { var _db = window.localStorage; var _tableName = 'settings'; this.lastUpdate = lastUpdate; this.fromCurrency = fromCurrency; this.toCurrency = toCurrency; }
Теперь нам нужно два метода: один для хранения данных и один для их извлечения. В другой из моих удивительно творческих моментов я назвал эти методы save() и load() соответственно. Эти методы ничего не делают, кроме как оборачивают вызовы методов getItem() и setItem() , как вы можете видеть, посмотрев на их код ниже.
this.save = function() { _db.setItem(_tableName, JSON.stringify(this)); } this.load = function() { return JSON.parse(_db.getItem(_tableName)); }
Некоторые из вас, кто уже использовал API веб-хранилища, могут удивиться, почему я использовал setItem() и getItem() вместо использования точечной нотации. Причина в том, что Windows Phone 7 не поддерживает последнее, поэтому для обеспечения совместимости во всех операционных системах мы должны использовать первое.
У этого класса есть другой метод для обсуждения, который больше полезен, чем обязательный метод. Это называется getSettings() и это статический метод. Когда вы используете load() , извлеченный объект является не экземпляром класса Settings а эквивалентом Object . Теперь предположим, что вы хотите изменить настройки текущего пользователя на основе тех, которые вы сохранили. В этом случае намного проще иметь экземпляр Settings , так что вы можете изменить свойства и затем вызвать метод save() напрямую. По этой причине я создал getSettings() , который вызывает load() а затем преобразует результат в экземпляр Settings . Источник этой утилиты следующий:
Settings.getSettings = function() { var settings = new Settings().load(); return (settings === null) ? {} : new Settings( settings.lastUpdate, settings.fromCurrency, settings.toCurrency ); }
Вывод
В этой третьей статье я описал пользовательскую конфигурацию «Конвертера валют» и важность опций, разрешающих междоменные запросы. Кроме того, я показал класс, используемый для перевода приложения, и класс, используемый для сохранения пользовательских настроек. В следующей части серии я проиллюстрирую два других оставшихся файла JavaScript: functions.js (который имеет функции для получения курсов, обновления полей выбора валют и инициализации приложения) и currency.js , файл, который содержит класс для хранения, загрузки, сортировки и конвертации найденных валют.