Совершенно нет настроения уйти дальше содержания в заметках про Couchdb или Strophe JS и, возможно, XMPP вцелом, поэтому расскажу как я учил JavaScript.
Поскольку опыт показал, что без немедленного использования полученных знаний на практике, знания улетучиваются из моей головы с фантастической скоростью, я решил написать что-нибудь для себя полезное. И т.к. в тот момент я испытывал потребность в web-морде для Amarok и таковой (по крайней мере, понравившейся мне) нагуглить не удалось, вопрос приложения сил и полученных знаний решился сам собой.
Disclaimer: это статья не про «Как выучить JS за месяц» — я сам его не знаю.
Драму «Как закалялась сталь^H^H двигалась разработка» желающие могут посмотреть в git log.
Это просто описание без глубокомысленных выводов и в конце пара вопросов к тем, кто знает JS получше.
Поскольку я на работе, как следует из названия, работаю, всё писалось в моменты незагруженности и прочие обеденные перерывы.
Грязного времени это заняло 2 месяца без недели, чистого — чтение материала, гугление, размышления и написание непосредственно кода — неделя, по субъективной оценке.
Всё начиналось с чистого JS, а закончилось плотным использованием jQuery{-UI}.
Итого, мы имеем:
— Переключение треков (вперед-назад, проигрыш, остановка, пауза)
— Отображение информации для проигрываемого трека: текущая позиция, общее время, прогресс, исполнитель: название.
— Ползунок уровня громкости (дизайн стоковый, не пинать!)
— Div с табами для плейлиста и для браузера файлов.
Запланировано:
— Сделать человеческий дизайн (для меня это самое тяжелое, т.к. рисовальщик из меня на букву «Хэ», но вовсе не «хороший»).
— Улучшить, по-мелочи, юзабилити — вроде кликабельных строк таблицы плейлиста, чтобы можно было переключать треки в произвольном порядке.
— Пересмотреть код amarok.js на предмет выкидывания лишнего и общей стройности.
Я бы хотел, чтобы аргументированно покритиковали код amarok.js и общих советов по логике приложения.
Git смотреть тут
UPD:
При том, что обычно нравятся книги от Apress, обе книги по jQuery, которыми я пользовался, были выпущены издательством Packt — это Learning jQuery 1.3 и jQuery UI 1.7 The User Interface Library for jQuery. В первой очень доходчиво описано какова выгода от использования библиотеки jQuery и как как ей вообще пользоваться, вторая — освещает jQuery-UI — библиотеку на базе jQuery для создания анимации, эффектов и виджетов.
Отличная документация выложена непосредственно на jQuery.com (плагины — plugins.jquery.com).
Пока я не переписал Ajax-часть в чистого JS, мне очень помогли Введение в Ajax и xmlhttprequest.ru
В самом начале выбор стоял между jQuery и Prototype, но jQuery показалась субъективно легче в освоении с более доступной информацией.
Возможно топик стоило бы назвать «Программируем веб-морду для amarok с использованием JS», но я хотел сделать упор на то, что создавая приложение покрупнее учебных синтетических примеров, получается заметно больше толка, впрочем, не упуская случая показать получившийся код.
Поскольку опыт показал, что без немедленного использования полученных знаний на практике, знания улетучиваются из моей головы с фантастической скоростью, я решил написать что-нибудь для себя полезное. И т.к. в тот момент я испытывал потребность в web-морде для Amarok и таковой (по крайней мере, понравившейся мне) нагуглить не удалось, вопрос приложения сил и полученных знаний решился сам собой.
Disclaimer: это статья не про «Как выучить JS за месяц» — я сам его не знаю.
Драму «Как закалялась сталь^H^H двигалась разработка» желающие могут посмотреть в git log.
Это просто описание без глубокомысленных выводов и в конце пара вопросов к тем, кто знает JS получше.
Затраченной время.
Поскольку я на работе, как следует из названия, работаю, всё писалось в моменты незагруженности и прочие обеденные перерывы.
Грязного времени это заняло 2 месяца без недели, чистого — чтение материала, гугление, размышления и написание непосредственно кода — неделя, по субъективной оценке.
Компоненты:
- Django — показывает саму морду и вызывает нужные функции через dbus-интерфейс.
- Amarok2 — лично мне A2 не нравится совсем, но поскольку видеть я буду только самодельный дизайн, а на целевой машине стоит kde4, нацеливаться на первый Amarok я не счел нужным. Тем более, что заменить вызовы через dbus на такие же через dcop не представляется чем-то сложным.
- Логика обеспечивается обвязкой из js-скриптов, научиться писать которые и было основной задачей.
Ближе к делу!
Всё начиналось с чистого JS, а закончилось плотным использованием jQuery{-UI}.
Итого, мы имеем:
- Dbus-биндинги к амароку примерно такого вида
import dbus
bus = dbus.SessionBus()
player = bus.get_object("org.mpris.amarok", "/Player")
..
def action(request, action, value):
'''1 input value, no output. Reporting if needed.'''
if action == 'set': player.VolumeSet(int(value))
if action == 'up': player.VolumeUp(int(value))
if action == 'down': player.VolumeDown(int(value))
if action == 'setposition':
current_track = int(media.GetCurrentTrack())
meta = media.GetMetadata(current_track)
length = int(meta['mtime'])#331000
#logging.debug(int(length*float(value)))
player.PositionSet(int(length*float(value)))
if action == 'add': addTrack(value)
if action == 'del': delTrack(value)
return HttpResponse()
- Скрипт, реализующий логику управления.
Что-то осталось на голом JS
function metadata() {
var statusElem = document.getElementById('metadata');
statusElem.innerHTML = controller2('/metadata/');
};
Что-то давно переписано с использованием jQuery{-UI}
function highlightCurrentTrack() {
// Highlights current track
var current_track = controller2('/track/');
$("#playlisttable tr.hlight").toggleClass('hlight');
$("tr#track"+current_track).toggleClass('hlight');
}
- Непосредственно интерфейс:
— Кнопки управления. Это amarok.js — обращения к специального вида ссылкам (например, /volume/set/(\d{1,3})/).
— Информация о текущем треке — обращение к /metadata/.
— Индикатор прогресса проигранного времени — progressbar via jQuery-UI.
— Ползунок регулятора громкости — слайдер via jQuery-UI.
— Плейлист формируется так же за счет вызова playlist() — фактически, это $.getJSON('/playlist/json/' и формирование таблицы со списком.
— Браузер файлов реализуется с помощью рекурсивной функции обхода заданной директории (~/muzak, например) и приведеничем в свёрнутый и кликабельный вид с помощью jQuery.
Что готово
— Переключение треков (вперед-назад, проигрыш, остановка, пауза)
— Отображение информации для проигрываемого трека: текущая позиция, общее время, прогресс, исполнитель: название.
— Ползунок уровня громкости (дизайн стоковый, не пинать!)
— Div с табами для плейлиста и для браузера файлов.
Known bugs
- Полное отсутствие дизайна!
- Требуется запущенный Amarok, при его отсутствии или рестарте мы имеем ошибку, ибо bus = dbus.SessionBus().
- Проблемы с отображением текущего состояния амарока, если страница рефрешилась во время проигрыша музыки. Потому что невозможно получить информацию о состоянии проигрывания (playing|paused|stopped).
- И, да, у приложения нет названия!
Запланировано:
— Сделать человеческий дизайн (для меня это самое тяжелое, т.к. рисовальщик из меня на букву «Хэ», но вовсе не «хороший»).
— Улучшить, по-мелочи, юзабилити — вроде кликабельных строк таблицы плейлиста, чтобы можно было переключать треки в произвольном порядке.
— Пересмотреть код amarok.js на предмет выкидывания лишнего и общей стройности.
Я бы хотел, чтобы аргументированно покритиковали код amarok.js и общих советов по логике приложения.
Git смотреть тут
UPD:
Источники
При том, что обычно нравятся книги от Apress, обе книги по jQuery, которыми я пользовался, были выпущены издательством Packt — это Learning jQuery 1.3 и jQuery UI 1.7 The User Interface Library for jQuery. В первой очень доходчиво описано какова выгода от использования библиотеки jQuery и как как ей вообще пользоваться, вторая — освещает jQuery-UI — библиотеку на базе jQuery для создания анимации, эффектов и виджетов.
Отличная документация выложена непосредственно на jQuery.com (плагины — plugins.jquery.com).
Пока я не переписал Ajax-часть в чистого JS, мне очень помогли Введение в Ajax и xmlhttprequest.ru
В самом начале выбор стоял между jQuery и Prototype, но jQuery показалась субъективно легче в освоении с более доступной информацией.
Возможно топик стоило бы назвать «Программируем веб-морду для amarok с использованием JS», но я хотел сделать упор на то, что создавая приложение покрупнее учебных синтетических примеров, получается заметно больше толка, впрочем, не упуская случая показать получившийся код.
