Место действия: Тула, Дата: 5 января 2014

+20 минут Ушло на установку node.js и Cordova CLI

+10 минут Скачал шаблон приложения от Cordova. Добавил шаблон из PhoneJS. Создал Git-репозиторий, зарегистрировал его в WebStorm. Добавил запись в httpd.conf, чтобы была возможность отлаживать и проверять работу приложения в браузере.

+38 минут Поменял неймспейс приложения на io.nikitin.ThriftBox. Настроил навигацию. PhoneJS является MVC-фреймворком. Каждый экран приложения представлен набором из html разметки (вью) и функцией-фабрикой вью-модели. В простейшем случае, это

< div data-options=" dxView: { name: 'home', title: 'Home' } " >

< div data-options=" dxContent: { targetPlaceholder: 'content' } " >

// Содержимое вью

< /div>

< /div>

плюс

ThriftBox.home = function (params) { // Параметры запроса из uri

return {}; // Объект вью-модели

};

В дальнейшем, одно с другим увязывается с помощью knockout-биндингов. Времени в притык, поэтому оставляю два экрана: ввод трат и отчет трат по месяцам.

+4 часа 20 минут Случился первый «затык». Не получилось быстро сделать разметку цифровых кнопок для ввода трат.
В исходном приложении на главном экране огромная клавиатура, похожая на калькулятор или приложение-звонилку.

Оказалось, что даже «в лоб», с помощью тега table сделать такую клавиатуру не получается. На retina-iphone бордюры в 1 пиксел между кнопками меняли свой цвет после нажатия кнопок. Разница в цвете линий на хорошем экране телефона была очень заметна. Пришлось думать, как победить.

Изучал вопрос и опробовал вариант верстки на div'ах. С ними не получилось добиться, чтобы рамка была ровно 1 пиксел шириной и все кнопки были одинакового размера на экранах разного разрешения. Спустя 3 часа баг был оставлен как есть и я двинулся дальше.

+28 минут Убран индикатор нажатия ссылки на iOS. iOS отрисовывает серый индикатор нажатия вокруг ссылок и объектов с обработчиком onclick. Поскольку у меня был свой индикатор нажатия (кнопка становилась темнее), этот серый индикатор мне был не нужен. Проблема решилась с помощью события dxAction:

было:

< td data-bind=" click: function() { buttonPress('1') }" > 1< /td>

стало:

< td data-bind=" dxAction: function() { buttonPress('1') }" > 1< /td>

Это событие — расширенная вариация события click: в качестве обработчика оно поддерживает uri навигации между вью и корректно отрабатывает в скроллируемой область.

+14 минут Обработчик buttonPress из предыдущего примера, валидация введенного числа.

var number = ko.observable(null);

var isValidNumber = ko.computed(function() {

return number() & & parseFloat(number()) > 0;

});

......

function buttonPress(button) {

if (button) {

if (number())

number(number() + button);

else

number(button);

} else if (number())

number(number().substr(0, number().length - 1));

}

var viewModel = {

number: number,

isValidNumber: isValidNumber,

viewShowing: viewShowing,

buttonPress: buttonPress

};

.....

+8 минут Добавил FastClick.js, который убирает задержку перед срабатыванием события click на телефонах. По умолчанию, мобильный браузер откладывает вызов обработчика click, чтобы убедиться, что не будет double-tap. Внешне это проявляется как подтормаживающее приложение. Вы быстро нажимаете кнопками, а они реагируют с ощутимой задержкой на нажатия. Авторы FastClick.js вешаются на touchstart и выстраивают свою логику обработки нажатий.

Забегая вперед скажу, что добавление этой библиотеки было ошибкой. Почему — читайте далее.

+4 минуты Ввел ограничение на длину числа, которое может ввести пользователь. Подкорректировал размер шрифтов, чтобы все отлично выглядело и не вылезало за границы области ввода.

+58 минут Выбор категории траты. Под областью ввода добавил прокручивающуюся область с кнопками доступных категорий. Видео.
Заняло меньше, чем могло бы. Внутри PhoneJS нашел подходящий компонентdxTileView. Из коробки получил нужный мне внешний вид и кинетик-прокрутку. С последней пришлось бы помучится, если делать её самому. Особенно здорово, что ребята из DevExpress включили её только для iOS, где она — системная, но выключили для Android, где такой прокрутки нет.

< div class=" category" data-bind=" dxTileView: {

dataSource: categories,

itemMargin: 0,

baseItemHeight: 72,

baseItemWidth: 72,

listHeight: 72

}" >

< div class=" tile"

data-options=" dxTemplate: { name: 'item' }"

data-bind=" css: { selected: $parent.category() == $data },

click: function() { $parent.category($data) }" >

< div> < img data-bind=" attr: { src: image }" /> < /div>

< div data-bind=" text: name" > < /div>

< /div>

< /div>

Было уже 19: 40 и я решил закончить.