![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Место действия: Тула, Дата: 5 января 2014Стр 1 из 2Следующая ⇒
+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 {}; // Объект вью-модели };
+4 часа 20 минут Случился первый «затык». Не получилось быстро сделать разметку цифровых кнопок для ввода трат.
+28 минут Убран индикатор нажатия ссылки на iOS. iOS отрисовывает серый индикатор нажатия вокруг ссылок и объектов с обработчиком onclick. Поскольку у меня был свой индикатор нажатия (кнопка становилась темнее), этот серый индикатор мне был не нужен. Проблема решилась с помощью события dxAction:
было: < td data-bind=" click: function() { buttonPress('1') }" > 1< /td>
стало: < td data-bind=" dxAction: function() { buttonPress('1') }" > 1< /td>
+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 минут Выбор категории траты. Под областью ввода добавил прокручивающуюся область с кнопками доступных категорий. Видео.
< 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>
|