Это третья и последняя часть серии об Аудиоплеере Audero . В этой статье я рассмотрю оставшиеся файлы, чтобы вы могли закончить проект и поиграть с ним.
Обзор серии
Стиль Тюнинг
jQuery Mobile выполняет большую часть работы за вас, улучшая элементы страниц для устройств с небольшими экранами. Однако есть некоторые, которые меня не волнуют, и мы style.css их в нашем файле style.css . Это также используется для стилизации разметки игрока.
По умолчанию, даже если у вас нет кнопок в верхнем или нижнем колонтитулах страницы, каркас по-прежнему резервирует некоторое пространство с обеих сторон элементов и усекает длинные заголовки. Это поведение применяется и к другим элементам. Мы можем изменить его, просто применив правило white-space: normal !important; к нашим целевым элементам как .ui-title .
Источник таблицы стилей показан здесь:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
.ui-header .ui-title,
.ui-footer .ui-title,
.ui-btn-inner *
{
white-space: normal !important;
}
.photo
{
text-align: center;
}
#player-play,
#player-stop
{
display: inline-block;
width: 48px;
height: 48px;
}
#player-play
{
background-image: url(‘../images/play.png’);
}
#player-stop
{
background-image: url(‘../images/stop.png’);
}
#time-slider
{
display: none;
}
div.ui-slider-track
{
margin: 0;
width: 100%;
}
|
Пользовательская конфигурация jQuery Mobile
jQuery Mobile имеет конфигурацию по умолчанию, которая должна быть достаточной для большинства проектов с простыми требованиями. Однако будут моменты, когда вы захотите изменить или взять под контроль поведение по умолчанию. Вы можете достичь этого, написав файл конфигурации. Файл jquery.mobile.config.js именно там, где мы будем иметь конфигурацию. Обратите внимание, что вы должны включить файл конфигурации перед файлами jQuery Mobile. Когда jQuery Mobile запускается, он запускает событие mobileinit , которое необходимо связать, чтобы переопределить настройки по умолчанию.
Мы $.mobile изменения, присвоив значения свойствам объекта $.mobile . Я не буду менять много свойств. Вместо этого я изменю параметр отображения текста в виджете загрузчика страниц и темы.
Полный источник файла указан ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
$(document).on(
‘mobileinit’,
function()
{
// Page Loader Widget
$.mobile.loader.prototype.options.text = ‘Loading…’;
$.mobile.loader.prototype.options.textVisible = true;
// Theme
$.mobile.page.prototype.options.theme = ‘a’;
$.mobile.page.prototype.options.headerTheme = ‘a’;
$.mobile.page.prototype.options.contentTheme = ‘a’;
$.mobile.page.prototype.options.footerTheme = ‘a’;
$.mobile.page.prototype.options.backBtnTheme = ‘a’;
}
);
|
Конфигурация сборки
Служба Adobe PhoneGap Build позволяет указывать метаданные приложения, такие как автор и описание, с помощью файла конфигурации. Этот файл называется config.xml . Подробное описание формата выходит за рамки этой серии, но я дам вам краткий обзор. Если вы хотите прочитать больше на эту тему, взгляните на официальную страницу документации .
Файл config.xml соответствует спецификации виджета W3C и должен оставаться в корне приложения на том же уровне, что и файл index.html . Первая строка — это объявление XML, а корнем документа является <widget> , имеющий несколько возможных атрибутов. Наиболее важными из них являются id (уникальный идентификатор вашего проекта) и version (которая указывает версию приложения). Внутри <widget> вы можете написать метаданные вашего приложения. В нашем файле мы будем использовать их много, но наиболее важными являются следующие:
- имя (обязательно): название приложения. Это не должно быть уникальным.
- описание (обязательно): описание приложения. Это особенно важно, потому что это будет показано в списке приложений на рынке.
- значок (необязательно): значок, отображаемый на устройствах, на которых будет установлено приложение. Если вы не укажете его, будет использован логотип Cordova.
- заставка (необязательно): этот тег устанавливает заставку приложения, которая является изображением, отображаемым во время загрузки.
- функция (необязательно): указывает функции, которые вы хотите использовать. Например, Android перед установкой любого приложения показывает пользователю необходимые ему разрешения и, если пользователь соглашается, продолжает работу.
- предпочтение (необязательно): набор предпочтений, которые вы хотите применить к своему приложению. Это закрытый тег, и вы можете иметь ноль или более тегов
<preference>внутри файла. У него есть два атрибута, и оба являются обязательными:nameиvalue. Есть много предпочтений, которые вы можете определить, но наиболее важным, на мой взгляд, является определение используемой версии Cordova.
Тег <access> также очень важен, поскольку, ссылаясь на документацию , он предоставляет вашему приложению доступ к ресурсам в других доменах — в частности, он позволяет вашему приложению загружать страницы из внешних доменов, которые могут занимать все ваше веб-представление.
Вспоминая то, что мы обсуждали в разделе « Управление внешними ссылками» из предыдущего поста, чтобы открыть внешние ссылки в Cordova WebView, мы должны добавить их в белый список приложений. Поскольку наше приложение не будет извлекать ссылки из внешних и небезопасных источников, мы можем сократить процесс, чтобы использовать любой внешний ресурс, используя специальный символ * . Например:
<access origin="*" />
Я указал на ключевые моменты формата, и теперь вы можете понять источник файла конфигурации. Полный файл ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<?xml version=»1.0″ encoding=»UTF-8″?>
<widget xmlns = «http://www.w3.org/ns/widgets»
xmlns:gap = «http://phonegap.com/ns/1.0»
id = «com.audero.free.player.auderoaudioplayer»
version = «1.0.0»>
<name>Audero Audio Player</name>
<description>Audero Audio Player is a basic audio player that collects the audio files and then allows the user to listen to them.
<author href=»http://www.audero.it» email=»aurelioderosa@gmail.com»>Aurelio De Rosa</author>
<feature name=»http://api.phonegap.com/1.0/network»/>
<feature name=»http://api.phonegap.com/1.0/media»/>
<feature name=»http://api.phonegap.com/1.0/file»/>
<feature name=»http://api.phonegap.com/1.0/notification»/>
<preference name=»phonegap-version» value=»2.3.0″ />
<preference name=»target-device» value=»universal» />
<access origin=»*» />
<!— Icons —>
<icon src=»icon.png» width=»64″ height=»64″ gap:role=»default» />
<icon src=»images/icon-72×72.png» width=»72″ height=»72″ gap:platform=»android» gap:density=»hdpi» />
<icon src=»images/icon-96×96.png» width=»96″ height=»96″ gap:platform=»android» gap:density=»xhdpi» />
<icon src=»images/icon-72×72.png» width=»72″ height=»72″ gap:platform=»ios» />
<!— Splash Screens —>
<gap:splash src=»splash.png» />
<gap:splash src=»images/splash-160×220.png» gap:platform=»android» gap:density=»ldpi» />
<gap:splash src=»splash.png» gap:platform=»android» gap:density=»mdpi» />
<gap:splash src=»images/splash-450×650.png» gap:platform=»android» gap:density=»hdpi» />
</widget>
|
Запуск приложения
В последнем разделе были собраны все бизнес-логика, HTML и CSS-файлы для приложения, так что теперь пришло время установить функции ввода для приложения и воспроизвести. initApplication() функцией будет метод initApplication() класса Application . Он запустится после полной загрузки Cordova, и вы сможете безопасно вызывать API-интерфейсы Cordova. Для этого мы установим initApplication() в качестве функции обратного вызова для события deviceready , добавив следующий код в файл index.html . Вы можете увидеть это, посмотрев следующий фрагмент:
|
1
2
3
4
|
<script>
$(document).on(‘pagebeforecreate orientationchange’, Application.updateIcons);
$(document).one(‘deviceready’, Application.initApplication);
</script>
|
Возможные улучшения
Вы находитесь в конце проекта. При этом в каждом проекте есть место для улучшений и новых функций, поэтому, прежде чем завершить серию, я хотел бы предложить вам некоторые из них.
Первая функция, которую вы можете добавить, — это интернационализация (i18n) приложения. У нашего плеера мало текста, поэтому перевести его на другие языки должно быть очень легко. Чтобы перевести приложение, вы можете использовать API глобализации, API , добавленный в ядро, начиная с версии 2.2.0. Кроме того, определенная библиотека jQuery, такая как jquery-i18n-properties или jQuery-i18n , наверняка будет полезна для этой функции.
Другие незначительные предложения:
- Разрешить пользователю создавать плейлист.
- Создайте кнопку «Воспроизвести все», чтобы воспроизвести все песни в списке.
- Создайте систему оценки для аудио, чтобы пользователь мог фильтровать и упорядочивать песни по рейтингу.
- Добавьте кнопку «Повторить», чтобы пользователь мог продолжить прослушивание текущей песни.
Эти предложения являются лишь некоторыми из потенциальных улучшений, которые вы можете внести в аудиоплеер Audero . Используя информацию из этого урока и свои собственные навыки, вы можете сделать гораздо больше.
Вывод
Как вы видели в этой серии статей, вы можете создавать мощные и полезные приложения, используя веб-технологии и популярные фреймворки. Теперь ваша очередь поиграть с этим проектом. Попробуйте запустить собственный проект, чтобы проверить, что вы узнали из этой серии!