Mobile Web Applications

Google+

2011-07-02T10:55:00.001+04:00

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

Не буду детально описывать, что там есть, поскольку всё уже описано самим гуглом, скажу только пару слов о кругах. Google+ Круги - это, по сути дела, те же группы в контакте, но от которых последний, судя по апдейтам, пытается отказаться (и зря, должен сказать). Я возлагаю огромные надежды, что Google+ всё-таки позволит своим пользователям оставаться приватным!

И на последок: раздаю инвайты!

UPD: буду премного благодарен, если кликните "+1" у статей, которые вам понравились и оказались полезными :-)

Вакансия программиста/верстальщика

2011-05-20T10:38:00.009+04:00

Вот уже месяц, как я отошёл от фриланса и работаю в компании, занимающейся веб-разработкой.

На данный момент нам требуется веб-программист/верстальщик на полный рабочий день с гибким графиком (возможно студент) в Санкт-Петербурге.

Требования:

навыки качественной кроссбраузерной верстки
понимание общих принципов ООП
знание PHP и JS
желателен опыт работы с системами управления контентом (Bitrix, Joomla, WordPress, пр.)

Условия:

работа в молодой, амбициозной веб-студии
работа в офисе у м. Старая деревня (5 минут пешком)

Обязанности:

верстка макетов сайтов под CMS
разработка и адаптация функционала

Откликнуться на вакансию можно в комментариях или написать на почту: nikitin@htsupport.ru

Плагин Illuminations для FireBug

2011-05-19T16:19:00.003+04:00

Сегодня на хабре появилась статья об интересном плагине для FireBug, который называется Illuminations.

Не буду дублировать информацию и подробно расписывать, что делает этот плагин, поскольку об этом уже сказано на хабре. Скажу только то, что он позволяет удобнее разрабатывать и отлаживать приложения, написанные на ExtJS и некоторых других JS-фреймворках (Dojo Toolkit, SproutCore, qooxdoo, YUI, Google Closure Library, jQuery UI).

Illuminations, помимо того, что подсвечивает код в консоли и выводит информацию об объектах ExtJS в более удобном виде, позволяет просматривать документацию с официального сайта Sencha и отображает информацию о данных, хранимых в store, что я нахожу очень удобным.

Плагин Illuminations платный и стоит $25 за первый год для индивидуального испльзования и $50 для организаций, но есть и бесплатная триальная версия.

К сожалению, этот плагин бесполезен при работе с Sencha Touch, поскольку web-приложения, написанные на Sencha Touch, работают только в WebKit браузерах (Safari, Google Chrome).

Думаю, разработчикам Sencha можно было бы взять на карандаш этот плагин и, быть может, включить нечто подобное в Sencha SDK.

Анонс Sencha.io

2011-05-06T11:40:00.003+04:00

Вчера компания Sencha анонсировали облачный сервис Sencha.io.
На данный момент Sencha.io находится в активной разработке, и для бета-тестирования доступны два сервиса: Sencha.io Src и Sencha.io Sync.

Sencha.io Src

Этот сервис, предназначен для автоматической оптимизации размера изображений под устройства с различным размером экрана (преимущественно, для мобильных платформ).
Чтобы использовать Sencha.io Src, достаточно вставить в начало тега IMG http://src.sencha.io, и изображения будут автоматически масштабироваться.
Sencha.io Src имеет API и будет разрастаться новым платным премиум-функционалом, но функцию масштабирования изображений компания Sencha обещает оставить бесплатной.

Sencha.io Sync

Если с Sencha.io Src всё предельно понятно, то Sencha.io Sync - куда более сложный сервис.
Sencha.io Sync предоставляет возможность синхронизации данных, введённых с различных устройств и браузеров.
На данный момент тестирование Sencha.io Sync открыто только по инвайтам, которые бесплатно раздаются на официальном сайте, но в ограниченном количестве. Компания Sencha планирует выпустить расширенную бета-версию к концу лета.
Sencha.io Sync, как и Sencha.io Src, будет иметь платный премиум-функционал.

Послесловие

Как мы видим, компания Sencha продолжает не только улучшать свои существующие продукты, но и разрабатывать новые, в частности, скоро должны выйти финальные версии Sencha SDK и Sencha.io. Остаётся только пожелать удачи разработчикам и ждать более-менее стабильных версий.

Подробнее о Sencha.io вы можете прочитать в официальном блоге.

Sencha Touch Tutorial 3: События

2011-04-29T10:32:00.002+04:00

Наконец-то я закончил монтировать новый видеоурок по Sencha Touch, который я посвятил работе с событиями.

В уроке разобраны следующие вещи:

работа с событиями
ещё раз о this и scope
Ext.Carousel
свойство контейнеров defaults

Пример прилагается.

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

Жду комментариев :-)

Релиз ExtJS 4.0

2011-04-26T17:26:00.001+04:00

Сегодня команда Sencha зарелизила ExtJS 4.0.

Я начал использовать ExtJS, когда она была ещё в версии 2.2 и должен сказать, что в этой библиотеке многое изменилось, причём в лучшую сторону.
Итак, вот базовые улучшения:

Тестирование

Для ExtJS было написано множество новых юнит-тестов и корректность работы проверена в различных браузерах.

Система классов

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

Песочница

Песочница предназначена для более гибкого и быстрого перехода со старых версий библиотеки и интеграции с другими JavaScript-фреймворками.

Архитектура приложения

Разработчики сделали шаг навстречу паттерну MVC и даже написали подробное руководство.

SDK Tools

Вмесле с релизом ExtJS 4.0 будет опубликована бета-версия Sencha SDK Tools - это набор инструментов, позволяющих оптимизировать производительность, затачивать под различные браузеры, собирать код приложения воедино и прочие полезные вещи.

Заключение

Помимо базовых изменений, было произведено множество других улучшений в компонентах пользовательского интерфейса и прочих вещах, но цель моей статьи - это анонс, поэтому я не буду вдаваться в детали. Всё это вы можете прочитать на официальном блоге Sencha.
Полный список изменений релиза можно посмотреть здесь - он действительно впечатляет.

Уверен, что-то из этих улучшений перекочует в Sencha Touch 2.0, первые беты которой должны появиться уже летом. Будем ждать!

Полезные ссылки по Sencha Touch

2011-04-21T17:17:00.009+04:00

Решил собрать в один пост полезные ссылки по Sencha Touch. К сожалению, на русском языке материала мало, поэтому большинство ссылок - англоязычные.

Общая информация

Ext Manual ru (ru) - качественный русскоязычный официальный мануал по ExtJS. Сам им не пользовался, но судя по оглавлению, очень полезная вещь. Там, помимо ExtJS, изложены основы объектно-ориентированного программирования на JavaScript. Конечно, мануал не про Sencha Touch, но, зная ExtJS, перейти на сенчу не сложно.
Введение в Sencha Touch 1.0 (ru) - обзорная статья на хабре про Sencha Touch.
Официальная документация (en) Sencha Touch. Здесь кроются ответы на большинство вопросов.
Tutorial:Sencha Touch Hello World (en) - учебник по созданию первого Hello World приложения на сече.
Getting Started with Sencha Touch (en) - руководство о том, как начать работать с Sencha Touch.

Официальный блог Sencha Touch

An Introduction to Theming Sencha Touch (en) - о том, как создавать пользовательские темы для приложений на базе Sencha Touch.
Sencha Touch SASS Variables and Mixins (en) - а вот и ссылочка на документацию по CSS-переменным, с помощью которых создаются пользовательские темы (чудом удалось найти, т. к. она хорошенько запрятана).
Tutorial:A Sencha Touch MVC application with PhoneGap (en) - отличная обучающая статья о том, как с помощью PhoneGap и Sencha Touch делать приложения для App Store, Android Market и т. п..
Sencha Touch: Optimizing Memory Usage (en) - статья об оптимизации потребления памяти Sencha Touch приложениями. К сожалению, пример в статье не рабочий, о чём неоднократно, но безрезультатно писали в комментариях все, кому не лень, однако, в целом идея понятна.

Видео

Sencha Touch Tutorial: Первые шаги (ru) - мой первый видеоурок, посвящённый азам Sencha Touch.
Sencha Touch Tutorial: Ext.Panel - Layouting (ru) - мой второй видеоурок о вёрстке с помощью Ext.Panel.
Sencha Touch Tutorial 3: События (ru) - мой третий видеоурок о работе с событиями.
Sencha Touch: Introduction (en) - введение в Sencha Touch.
Sencha Touch: Creating a mobile Twitter app with Geo-location (en) - создание Twitter приложения.
Sencha Touch: Introduction to Layers (en) - о вёрстке.
Sencha Touch: Introduction to Layouts (en) - о лайаутинге.
Sencha на Vimeo (en) - подборка видео.

P.S.: набор ссылок я буду постоянно обновлять, так что можете заглядывать время от времени.

Фиксированная или почасовая оплата? Взгляд фрилансера.

2011-04-13T14:08:00.000+04:00

Существует два основных способа оплаты работы фрилансеров: фиксированная ставка (fixed price) и почасовая оплата (hourly rate).
В этой статье я хочу рассказать, почему почасовая оплата может быть выгодна не только для исполнителя, но и для заказчика.

Качество кода

На проектах с почасовой ставкой, как правило, качество кода выше, и это происходит по той причине, что такие проекты, в своём большинстве, более длинные, и программист не торопится быстрее закончить - его поджимают только оговоренные сроки выполнения проекта (due date), а не жажда быстрее получить деньги, поэтому всё делается более основательно, без спешки. Кроме того, на проектах с почасовой оплатой разработчик надеется, что проект будет продолжаться, поэтому он пишет код так, чтобы потом с ним было приятно самому работать.
На проектах с почасовой оплатой у разработчика есть заинтересованность в проявлении инициативы и предложении новых интересных решений. Интерес в продолжении проекта выше, поэтому и больше вовлечённость и степень вникания в проект, что положительно сказывается на конечном результате.

Но с этим можно и поспорить, поскольку на проектах с фиксированной платой заказчик в праве потребовать высокое качество кода. Это верно, но и у разработчика нет никакой заинтересованности делать больше и качественнее, чем было оговорено в техническом задании, поэтому малейшее недопонимание может привести к конфликту, оставить обоюдное негативное впечатление и, как следствие для фриланс-бирж, плохой фидбек.

Пример: заказчик говорит, что конечный продукт работает слишком медленно. Разработчик отвечает, что это особенность выбранной технологии и для улучшения производительности необходимо сделать ещё определённый объём работы, который не был оговорен при старте проекта.

Вывод: в проектах с фиксированной платой надо заранее обсуждать каждую деталь и быть уверенным, что достигнуто обоюдное взаимопонимание, причём это важно как для заказчика, так и для разработчика.

Переговоры

В проектах с фиксированной оплатой на предварительные переговоры и обсуждение деталей проекта уходит значительно больше времени. Частично этот тезис я уже защитил в предыдущем пункте, но хочу добавить ещё пару слов.
Как правило, во всяких умных книжках о менеджменте проектов пишут о важности и необходимости детального планирования процесса. С этим трудно поспорить, но на деле часто оказывается так, что, пощупав промежуточные результаты, у заказчика возникает желание что-то поменять (пусть, даже незначительное, но разработчику не особо-то хочется делать что-то сверх оговоренного, из-за чего, опять же, страдает качество кода и появляются различные "костыли"). Особо часто это возникает, когда заказчик не является технически подкованным.

Вывод: если даже вы работаете с фиксированной оплатой, то разбивайте проект на итерации, каждая из которых после старта не подлежит обсуждению и дополнению.

Мотивация

Казалось бы, проекты с фиксированной ставкой должны подстёгивать фрилансера закончить работу как можно быстрее, но на деле всё далеко не так.
В успешном развитии проекта после того, как он завершён, разработчик мало заинтересован - проекты с фиксированной ставкой редко бывают длинными, иначе они либо почасовые, либо заказчик платит разработчику оклад, поэтому единственная мотивация - это деньги (или полученный опыт и фитбек, если фрилансер начинающий). Согласитесь, куда приятнее, когда за каждый отработанный час ты видишь конкретную сумму, которую уже через неделю-две (я имею ввиду систему oDesk) сможешь обналичить.

Вывод: если используется фиксированная оплата, лучше всего производить её по частям.

Безопасность

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

Итоги

Итак, я привёл три довода для заказчика, которые должны его мотивировать на работу с почасовой ставкой. Это мой личный опыт, который я получил в ходе работы на различных проектах. Был бы рад, если кто-нибудь со стороны заказчиков как-то прокомментировал мои доводы. Заранее благодарю!

Планы развития Sencha Touch

2011-04-12T00:34:00.001+04:00

Только что появились новости в официальном блоге Sencha о планах развития их продуктов, в том числе и библиотеки Sencha Touch.

Информации мало, но сказано, что летом этого года мы увидим превью Sencha Touch 2.0 (думаю, релиз будет где-то к ноябрю, как было и с первой версией). Кроме того, разработчики обещают уже этой весной предоставить нам в Sencha Touch инструменты для рисования диаграмм и графиков.

Что ж, новостей хоть и не много, но и они радуют. Остаётся только ждать и надеяться, что новая Sencha Touch 2.0 помимо iPhone, Android и Blackberry будет поддерживать Windows Phone 7 устройства, поскольку потребность в разработке приложений под WP7 на рынке есть, а вот инструментов ещё не достаточно.

Демонстрация возможностей HTML5 и CSS3 от Google

2011-04-11T21:28:00.000+04:00

Хочу поделиться ссылкой на сайт с примерами и советами по HTML5 и CSS3: HTML5 Rocks. Особо хочу порекомендовать слайдер HTML5 Presentation.

Кроме того, если кто ещё не видел, хочу дать ссылку на HTML5-книгу от Google: 20 Things I Learned About Browsers and the Web.

CSS3 свойства, наиболее часто используемые в Sencha Touch

2011-04-11T01:28:00.002+04:00

При создании интерфейсов своих Sencha Touch приложений я работаю с CSS3, причём, как правило, я использую одни и те же свойства, поэтому я хочу описать наиболее часто употребляемые из них.

border-radius

Тут всё просто: устанавливаем значения, подобно тому, как устанавливаем, например, padding, и у нас углы элемента закругляются. Для браузеров на базе WebKit также можно использовать свойство -webkit-border-radius.

Пример:

border-radius: 30px;

Результат:

Прочитать подробнее можно здесь.

gradient

-webkit-gradient - это не свойство, а значение, которое применяется свойству background-image для создания градиента. Для браузеров Firefox используется -moz-linear-gradient, но при создании мобильных веб-приложений нам это не важно.
В WebKit браузерах доступно два типа градиентов:

линейный (linear)
круговой (radial)

Синтаксис создания градиента:
-webkit-gradient(type, start, end, from(color), to(color))

Пример:

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bbb), to(#000));

Результат:

Кроме того, можно делать "остановки" в градиенте:

Пример:

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bbb), color-stop(50%, #000), to(#bbb));

Результат:

Подобных остановок может быть несколько.
Подробнее о градиентах можно почитать здесь.

-webkit-mask

В CSS3 стало возможным накладывать на элементы маску. Делать это можно с помощью свойства -webkit-mask.

Синтаксис:
-webkit-mask: attachment, clip, origin, image, repeat, composite, box-image;

Для примера я буду использовать следующую маску (это просто png-изображение):

Пример:

width: 122px;
height: 108px;
background-color: #bebebe;
-webkit-mask-image: url(mask.png);

Результат:

В качестве маски можно использовать не только картинку, но и CSS3-градиент или SVG-графику. Подробнее об этом можно узнать здесь.

Заключение

Я показал всего 3 свойства, появившихся в CSS3, но они являются наиболее часто используемыми мною при вёрстке интерфейсов Sencha Touch приложений. С остальными возможностями WebKit браузеров вы сможете познакомиться на сайте Apple.

XCode + PhoneGap

2011-04-07T13:25:00.001+04:00

Вчера пол-дня промучился, ставя шаблон PhoneGap-приложения под XCode 4. Делал это через установщик PhoneGap, вручную и даже пробовал ставить другие шаблоны для XCode, но всё без толку.

Решение, как всегда, оказалось куда более простым: я решил скачать и установить XCode 3.2.6 + iOS SDK 4.3 и, о чудо, всё заработало! Видимо, шаблон был просто не совместим с четвёртой версией XCode.
В итоге, я написал сообщение с баг-репортом команде PhoneGap и теперь работаю с XCode 3.2.6 и радуюсь жизни, хотя неприятный осадок, безусловно, на душе остался - разработчики могли бы предупредить, что с XCode 4 их детище не работает, сэкономив, тем самым, моё рабочее время.

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

Ищу веб-разработчиков!

2011-04-06T01:35:00.001+04:00

Я уже около года, как зарабатываю исключительно фрилансом, причём в моей карьере были как взлёты, где я в неделю нарабатывал бешеное количество часов, получая сумму, сравнимую с тем, что мне мог предложить отечественный работодатель в месяц, но были и моменты, когда я мог обеспечить только половинную недельную занятость, а иногда даже и на таковую не хватало. Однако, в целом, мои дела, как фрилансера, идут хорошо.

Через какое-то время работы фрилансером я понял, что всегда надо на виду держать несколько потенциальных проектов, а ещё лучше наработать постоянных заказчиков, с которыми можно стартануть в один день новый проект, не теряя время на долгие переговоры.
Достаточно быстро я понял, что было бы весьма полезно улучшить качество, предоставляемых мною, услуг, причём не только в профессиональном плане, но и в плане сокращения сроков выполнения проектов. Ещё летом прошлого года я ощутил необходимость в команде, но на тот момент программистов, занимающихся веб-разработкой под мобильные платформы, не то, чтобы в России было мало, их и по миру-то можно было на пальцах пересчитать (я беру в расчёт фриланс-биржи типа oDesk), поскольку iPad только-только вышел и началось активное бурление "мнений" вокруг новоявленных HTML5 и CSS3. Одним словом, мне в любом случае пришлось бы заняться обучением программистов для своей команды. Вот тогда-то у меня и родилась мысль о создании блога и обучающих скринкастов по Sencha Touch!

На данный момент я как никогда нуждаюсь в команде веб-разработчиков, поскольку веду одновременную работу сразу на нескольких проектах и ещё несколько готовы вот-вот стартануть. Времени свободного всё меньше и меньше, а отказываться жадность не позволяет, хоть и в последнее время я перестал отвечать на новые предложения и веду переговоры только с проверенными заказчиками. Не уверен, что такой наплыв проектов будет всегда, поскольку сейчас весна, а весной, как правило, проектов больше, но упускать возможность наработать клиентскую базу, чтобы потом не мучаться в поисках новых проектов, очень бы не хотелось.

Перехожу ближе к делу. Я приглашаю к себе в команду толковых веб-разработчиков и талантливых студентов! Основной профиль проектов - это разработка под мобильные платформы, поэтому партнёр (предпочитаю называть именно так) должен быть готов в короткие сроки изучать новые технологии. Со своей стороны я предоставляю помощь в обучении и плавное введение в рабочие проекты с достойной оплатой труда. Если вы из Санкт-Петербурга, то преподам мастер-классы и на первых этапах попрактикую парное программирование.

Одним словом, вакансия разработчика веб-приложений под мобильные платформы открыта!

Sencha Touch Tutorial: Ext.Panel - Layouting

2011-04-05T15:28:00.000+04:00

Второй видеоурок Sencha Touch Tutorial наконец-то готов!

На этот раз я рассказал о следующих вещах:

- размещение компонентов внутри панели (layouting);
- обработка нажатия кнопки и параметр scope;
- debugging;

К сожалению, видеоматериала было отснято гораздо больше, чем вошло в урок, поэтому исходные коды не соответствуют тому, на чём закончилось видео, поэтому выкладывать ничего не буду.

От автора:

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

RGraph: HTML5 библиотека для построения графиков и диаграмм

2011-03-30T00:58:00.000+04:00

Теперь, с появлением HTML5 и canvas, Flash становится всё менее и менее жизненно необходим.

Хочу познакомить вас с canvas-библиотекой для создания графиков и диаграмм, которые будут работать как в десктопных браузерах с поддержкой HTML5, так и на мобильных платформах. Библиотека называется RGraph.

RGraph - очень гибкая библиотека, и если нет надобности в использовании всех её функций одновременно, то вовсе не обязательно подключать все файлы. Например, для построения простого линейного графика достаточно подключить ядро библиотеки RGraph.common.core.js и RGraph.line.js.

Для того, чтобы добавить график или диаграмму на страничку требуется:

Подключить ядро библиотеки и файлы, необходимые для реализации заданного функционала.
Добавить в DOM документа элемент <canvas> с атрибутом id.
После того, как <canvas> будет прорендерен, создать объект RGraph.<name_of_chart> и сконфигурировать его свойства.

Для примера будем считать, что у нас в DOM уже есть элемент

<canvas id="chart_id" width="310" height="140">
    [No canvas support]
</canvas>

и подключен RGraph.line.js.
Теперь создадим объект line:

var data = [10,4,17,50,25,19,20,25,30,29,30,29];
var line = new RGraph.Line("chart_id", data);

Первый параметр при объявлении RGraph.Line - это идентификатор нашего canvas-элемента, а второй - это данные, по которым будет построен график.
Теперь надо прописать конфигурационные свойства объекта line:

RGraph.SetConfig(line, {
     'chart.colors'          : ['#57a4ff'],
     'chart.filled'          : true,
     'chart.fillstyle'       : ['#57a4ff'],
     'chart.labels'          : ['0','1','2','3','4','5']
});

Я не буду объяснять, что каждое из свойств означает - всё это вы сможете прочитать в документации на официальном сайте.
Осталось только прорисовать график:

line.Draw();

Всё, теперь на странице появится симпатичный HTML5-график! Очистить его можно следующим образом:

RGraph.Clear(document.getElementById('line_chart_id'));

После очистки можно рисовать новый график в этом же canvas. Если не произвести очистку, то один график будет рисоваться поверх другого.

В заключении хочу сказать, что библиотека RGraph проста в освоении и достаточно функциональна, причём есть возможность строить красивые интерактивные графики. Недостатком, пожалуй, могу назвать только то, что бесплатно использовать RGraph можно только в некоммерческих проектах, в коммерческих же придётся заплатить £ 49,00, что не совсем дёшево.

Примеры различных диаграмм и графиков вы можете найти на официальном сайте.

P.S.: исходные коды примера, приведённого в статье, выкладывать не буду, поскольку он исключительно демонстрационный. Я просто покажу картинку того, что получилось бы.

Sencha Touch 1.1 Release

2011-03-24T22:54:00.002+03:00

Сегодня вышло первое в этому году обновление библиотеки Sencha Touch.
Должен сказать, что эта новость меня очень обрадовала, поэтому спешу поделиться, что же нового появилось в версии 1.1.

Поддержка Blackberry

Теперь приложения, созданные с помощью Sencha Touch, корректно отображаются на устройствах компании RIM с операционной системой Blackberry 6 и выше, включая Blackberry TabletOS, что, надеюсь, положительно скажется на увеличении количества проектов на Sencha Touch на фриланс-биржах, типа oDesk, поскольку в штатах устройства с Blackberry широко распространены, причём в очень "вкусном" корпоративном секторе.

Подробнее об этом можно прочитать в официальном блоге Blackberry.

Первые официальные плагины

Теперь библиотека Sencha Touch обзавелась своими первыми официальными плагинами - это плагин "Pull to Refresh" и плагин "Pagination", добавляющий в конец списка кнопку для подгрузки новой порции контента, причём, включив опцию 'autoPaging', это будет делаться автоматически при достижении конца списка (подобную функцию я реализовывал самостоятельно ещё в ранних бета-версиях библиотеки, что описано в статье "Автоподгрузка списка по скроллингу").

Новые примеры

Sencha Touch обзавелось новыми примерами, один из которых - O'Reilly.

Улучшена производительность и обновлены стили

Разработчики заявляют, что они кое-где существенно улучшили производительность, но, я думаю, они до сих пор так и не смогли пофиксить те два бага (причём, существенных бага), что я зарепортил ещё осенью прошлого года, поскольку мне на почту не приходило уведомлений о изменении статусов тикетов с этими багами (в ближайшее время проверю это и напишу о результатах).

Кроме того, намечен курс на сближение с платформой PhoneGap, что не может не радовать!

В заключении даю ссылку на официальную статью.

Habrahabr

2011-03-24T04:25:00.000+03:00

Пару дней назад заработал инвайт на хабр за статью о создании собственного слайдера. Это, конечно, здорово, но, должен сказать, я не был знаком с правилами публикации хабратопиков, и теперь не могу опубликовать статьи со своими видеоуроками - надо набрать карму.

Вот уже второй видеоурок, практически, готов, а карму, чувствую, я ещё не скоро заработаю, в связи с чем, хочу обратиться к хабражителям, которые заходят сюда по ссылке из моего профиля: "Если Вам понравились мои скринкасты Sencha Touch Tutorial (он пока что один), и Вы считаете, что они могут помочь людям, решившим освоить эту библиотеку, проплюсуйте мне, пожалуйста, карму. Я, в свою очередь, обязуюсь не затягивать с продолжением! Заранее благодарю".

P.S.: Даже если кто-то сам сделает топик-ссылку на мой первый скринкаст Sencha Touch Tutorial, буду благодарен.

Спасибо за внимание!

Обучающий видеокурс Sencha Touch Tutorial

2011-03-23T05:06:00.001+03:00

Я давно уже собирался записать обучающий видеокурс Sencha Touch Tutorial на русском языке, но только сейчас дошли руки. Запись скринкаста, монтаж и озвучка заняли у меня два дня и, надеюсь, это время не окажется потраченным напрасно.
Теперь вы можете просмотреть первый урок, ориентированный на полных новичков в Sencha Touch, но знакомых с JavaScript:

В этом уроке я пролил свет на следующие темы:

азы создания веб-приложений на базе библиотеки Sencha Touch;
компоненты Ext.Panel, Ext.Toolbar, Ext.Button и некоторые из их конфигурационных свойств;
порядок применения значений свойствам компонента

Исходники проекта можно стянуть отсюда.

В ближайшее время постараюсь записать продолжение!

Sencha Touch: Ext.form.Slider с полем для ручного ввода значения

2011-03-20T21:04:00.000+03:00

В одном из моих проектов я столкнулся с задачей создания компонента слайдера с возможностью ручного ввода значения поля, т. е. выглядеть он должен был так:

Причём, при нажатии на значение поля (где написано "8.50 %") должна выдвигаться клавиатура для ввода значения поля вручную, а при перетаскивании ползунка значение поля должно обновляться.

Итак, первым делом я изучил внутренности компонента Ext.form.Slider и выяснил, что внешний вид задаётся свойством renderTpl.
Вот так выглядит renderTpl в оригинале:

renderTpl: [
    '<tpl if="label">',
        '<div class="x-form-label"><span>{label}</span></div>',
    '</tpl>',
    '<tpl if="fieldEl">',
        '<div id="{inputId}" name="{name}" class="{fieldCls}"',
        '<tpl if="tabIndex">tabIndex="{tabIndex}"</tpl>',
        '<tpl if="style">style="{style}" </tpl>',
    '/></tpl>'
]

В моём компоненте, помимо дополнительного поля для ручного ввода, будет присутствовать постфикс, т. е. один символ или набор символов, которые будут добавляться после поля со значением (на скриншоте - это "%"), поэтому я изменил шаблон компонента следующим образом:

renderTpl: [
    '<tpl if="label">',
        '<div class="x-form-label"><span>{label}</span></div>',
        '<div class="dnt_form_slider_value">' +
          '<input type="text" id="dnt-form-slider-valuefield-{name}"
              class="dnt_form_slider_value_input" value="{value}" />' +
          '{postfix}' +
        '</div>',
    '</tpl>',
    '<tpl if="fieldEl">',
        '<div id="{inputId}" name="{name}" class="{fieldCls}"',
        '<tpl if="tabIndex">tabIndex="{tabIndex}"</tpl>',
        '<tpl if="style">style="{style}" </tpl>',
    '/></tpl>'
]

CSS-классы, прописанные в этом шаблоне, заданы следующим образом:

.dnt_form_slider_title {
    background-color: transparent;
    display: inline;
}
.dnt_form_slider_value {
    position: absolute;
    right: 26px;
    display: inline;
}
.dnt_form_slider_value_input {
    display: inline !important;
    min-height: 20px !important;
    padding: 0px !important;
    text-align: right;
    width: 60px !important;
}

Теперь компонент будет выглядеть должным образом, но значения value и postfix не будут применяться нашему полю, поэтому переходим к функциональной части.

Итак, value и postfix изначально не будут подставляться в шаблон, даже если мы передадим их в конфигурационные свойства при объявлении нашего кастомизированного слайдера. Изучив исходный код Ext.form.Field, от которого унаследован Ext.form.Slider, я выяснил, что список полей, которые будут заполнять шаблон, определяется функцией initRenderData, поэтому для нашего слайдера я перегрузил эту функцию следующим образом:

initRenderData: function() {
    //вызываю код, который был прописан в оригинальном Ext.form.Field
    var renderData = Dnt.form.Slider.superclass.initRenderData.call(this);
    //добавляю новые поля, которые будут подставляться в шаблон
    Ext.applyIf(renderData, {
        value       : this.getValue(),
        postfix     : this.postfix
    });
    return renderData;
}

Теперь в шаблон будут вписаны значения, указанные в конфигурационных свойствах компонента. Осталось сделать так, чтобы эти значения менялись при перемещении ползунка слайдера.
Чтобы при перемещении ползунка новое значение применялась только к одному компоненту, а не ко всем слайдерам, добавленным на страницу, в шаблоне я задал полю input атрибут id, формирующийся из префикса dnt-form-slider-valuefield- и значения конфигурационного свойства name, которое должно быть объявлено.
Для динамического изменения значения поля необходимо подписаться к событию 'change' нашего слайдера и в качестве обработчика назначить следующую функцию:

onChangeValue: function(slider, thumb, newValue, oldValue) {
    //получаю ссылку на input-элемент компонента
    var valueField = Ext.get('dnt-form-slider-valuefield-' + this.name);
    /*
      устанавливаю новое значение, обрезав количество 
      символов после запятой до значения конфигурационного
      свойства digitalAfterPoint (у меня по умолчанию 2)
    */
    valueField.dom.value = newValue.toFixed(this.digitalsAfterPoint);
}

Итак, теперь значение поля меняется, но меняется оно только тогда, когда мы отпускаем ползунок. Для того, чтобы значение поля менялось постоянно при перетаскивании слайдера, нам необходимо функцию onChangeValue подписать и на событие 'drag'.

Осталось совсем немного: надо сделать так, чтобы при ручном изменении значения поля слайдер передвигался на нужную позицию.
Для этого подписываемся на событие 'render' нашего компонента и ставим обработчиком функцию onRenderSlider - в этот момент наш компонент прорендерен, поэтому мы можем подписаться на события, выбрасываемые нашим input-элементом, отображающим текущее значение поля.

onRenderSlider: function() {
    //получаю ссылку на input-элемент компонента
    var valueField = Ext.get('dnt-form-slider-valuefield-' + this.name);
    //подписываюсь на изменения значения input-элемента
    valueField.on('change', function(event, el) {
        //формирую из введённых данных новое значение поля
        var newValue = parseFloat(el.value) || 0;
        //форматирую значение и передвигаю слайдер
        this.setValue(newValue.toFixed(this.digitalsAfterPoint));
    }, this);
}

Всё, наш новый слайдер с полем для ручного ввода значения полностью готов, причём никаких дополнительных защит "от дурака" писать не надо!

Добавить компонент можно следующим образом:

new Dnt.form.Slider({
    name              : 'interestRate',
    postfix           : '%',
    digitalsAfterPoint: 2,
    minValue          : 1,
    maxValue          : 15,
    increment         : 0.05,
    label             : 'Interest Rate'
})

В дополнение прилагаю исходный код компонента и файл со стилями.

Тестовый проект с подключенным и работающим слайдером можно скачать отсюда.

Особенности компонента Ext.form.Select

2011-03-15T00:04:00.000+03:00

Только что обнаружил интересное и не совсем логическое поведение компонента Ext.form.Select. Дело в том, что если просто написать код, типа этого:

new Ext.form.Select({
  label: 'Select field',
  options: [
    {text: 'option 1'},
    {text: 'option 2'}
  ]
})

то на айфоне (я тестировал на iPhone 3gs) не будет вызываться меню выбора опции (Picker), хотя в настольном Safari всё работает.
Поведение, на мой взгляд, несколько непредсказуемое, но методом тыка удалось выяснить, что не хватает объявления параметра name, т. е. если написать вот так, то всё заработает:

new Ext.form.Select({
  name: 'selectField',
  label: 'Select field',
  options: [
    {text: 'option 1'},
    {text: 'option 2'}
  ]
})

Но и это ещё не всё! Теперь меню вызывается, но после нажатия на кнопку Done компоненту не применяется новое значение. В принципе, это поведение я уже могу назвать предсказуемым, поскольку в списке опций мы задали только свойство text , а свойство value не задано.
Вот, как должен выглядеть, работающий без проблем, компонент Ext.form.Select:

new Ext.form.Select({
  name: 'selectField',
  label: 'Select field',
  options: [
    {text: 'option 1', value: 'option1'},
    {text: 'option 2', value: 'option2'}
  ]
})

Sencha Touch 0.95 beta

2010-09-15T14:31:00.000+04:00

Прошлый апдейт JavaScript фреймворка Sencha Touch оказался просто неработоспособным, поскольку после рефакторинга был сломан основной функционал. И вот, спустя 7 дней, разработчики Sencha исправили свои ошибки и выпустили новую версию!
Но, судя по статусам баг-репортов на официальном форуме, ошибки, привнесённые новым апдейтом, пофикшены не все. Что ж, это всего лишь бета, и каждый, кто берётся писать рабочие проекты на бета-версии, должен понимать и соглашаться с риском и возможными проблемами. Надеюсь, апдейт Sencha Touch 0.95 beta окажется пригодным для работы, а пока остаётся только пожелать удачи разработчикам и ждать финального релиза, который, судя по всему, будет где-то в ноябре.

Sencha Touch 0.94 beta: Bugs

2010-09-14T17:56:00.000+04:00

К сожалению, Sencha Touch 0.94 beta, принеся кучу новых фич, стала, на мой взгляд, неработоспособной из-за обилия багов. Какое-то время я пытался самостоятельно делать заплатки, но новые дыры вскрывались одна за другой, поэтому я плюнул и откатился до 0.93 версии.
Причём, судя по активности на форуме Sencha Touch: Bugs перестали работать веб-приложения после обновления не только у меня.
Произошло сиё безобразие, скорее всего, из-за глобального рефакторинга, о котором разработчики так хвалились в Release Notes. К сожалению, web-интерфейсы и JavaScript тяжело покрываются автоматизированными тестами (помнится, как-то раз навешевали мы на ExtJS-портал Selenium-тесты через css-селекторы, но ничего хорошего не вышло).

Sencha Touch 0.94 beta сильно обрадовала меня своим выходом, но и не менее огорчила, когда я потратил кучу времени, пытаясь пофиксить то, что раньше работало отлично. В общем, это обновление явилось хорошим примером, что рефакторинг должен быть хорошо протестирован и надеюсь, новая версия не заставит себя долго ждать.

Sencha Touch 0.94 beta

2010-09-08T22:16:00.000+04:00

Сегодня наконец-то обновилась бета-версия, уже полюбившегося мной, JavaScript Framework'а для мобильных платформ Sencha Touch. Должен сказать, этот апдейт я ждал долго и вот, после месячной доработки, он доступен для свободного скачивания.

В этой версии были исправлены многие баги, проведён рефакторинг, улучшена производительность, произведена оптимизация под Android и iPhone 4.
Полный список изменений вы можете найти в файле release-notes.html, прилагаемому к архиву Sencha Touch.

Автоподгрузка списка по скроллингу

2010-07-18T15:51:00.000+04:00

Итак, я решил первый технический пост не посвящать азам Sencha Touch и не стал излагать тот минимум, который необходим для создания мобильного web приложения (об этом я расскажу в следующих записях), я хочу рассказать вам о компонентах Ext.List, Ext.util.Scroller, о AJAX-запросах и как с помощью этого всего сделать так, чтобы по достижению дна списка подгружалась следующая порция контента.

(на момент написания использовалась Sencha Touch 0.91 beta)

Когда передо мной возникла эта задача, я первым делом полез в документацию Sencha Touch (http://www.sencha.com/deploy/touch/docs/) и обнаружил, что никаких событий, связанных со скроллингом, у компонента Ext.List нет. Сразу после этого, я открыл исходники компонента List в поисках недокументированных возможностей (в ExtJS к этим махинация приходилось обращаться часто, поскольку стандартным набором API сделать можно далеко не всё, а вот если сделать Ext'овскому компоненту какой-нибудь адаптер, то функционал библиотеки можно существенно расширить). Покопавшись в коде, я обнаружил такой компонент, как scoller, оказавшийся на деле Ext.util.Scroller, у которого в документации уже присутствовали, необходимые мне, события:

scrollend - скроллирование окончено (то, что нам надо)
scrollstart - скроллирование началось
touchend - окончание прикосновения к экрану
touchstart - начало прикосновения к экрану

Далее оставалось дело за малым: получить компонент scroller нашего списка, подписаться к нему на событие scrollend, проверять, доскроллировали ли мы до конца, и если да, то вызывать, нужный нам, Ajax-метод.

Трудности возникли с самого первого пункта: в документации Sencha Touch отсутствовали методы или переменные для получения компонента Scroller. Пришлось открыть исходники Ext.List и, прибегнув к хаку, вручную извлечь, необходимый нам, скроллер:

this.scroller.on('scrollend', this.onScrollEnd, this);

(this - это сам наш List, а this.onScrollEnd - функция обработчика события)

Итак, мы подписались на события окончания скроллинга, и теперь необходимо извлечь данные о позиции скролла и данные о общей длинне скроллируемого листа, чтобы сравнить их. В событие scrollend передаётся экземпляр скроллера, из которого мы все эти данные и выпытаем:

onScrollEnd: function(scroller) {
 if(scroller.offset.y == scroller.bounds.y && !this.isLoading) {
  this.isLoading = true;
  this.loadContent(++this.page);
 }
}

scroller.offset.y - текущее положение скроллинга
scroller.bounds.y - общий размер скроллируемого списка
this.loadContent() - функция подгрузки нового контента
this.page - номер страницы
this.isLoading - флаг загрузки (необходим, чтобы нельзя было сто раз вызвать подгрузку новго контента, пока старый не загрузился)

Осталось вызвать Ajax-метод и добавить, подгруженный контент, к существующему:

loadContent: function(page) {
 Ext.Ajax.request({
  /* адрес php-функции, подгружающей контент */
  url  : 'action.php', 
  method : 'POST',
  /* список параметров, передаваемых в запрос */
  params : {
   /* номер страницы (если не определён, то берём страницу №1) */
   page  : page || 1
  },
  scope : this,
  /* запрос прошёл успешно */
  success : function(response, opts) { 
   /* декодируем строку в JSON-объект */
   response = Ext.util.JSON.decode(response.responseText); 
   if(response.content != null) {
    /* если не обнулить это свойство, то все новые записи будут  дублироваться */
    this.getStore().snapshot = null; 
    /* пробегаем по всем записям */
    Ext.each(response.content, function(entry) {
     /* добавляем запись в Store */
     this.getStore().add(entry); 
    }, this);
   }
   /* разрешаем подгрузку следующей порции контента */
   this.isLoading= false; 
  },
  /* запрос не прошёл */
  failure : function(response, opts) { 
   this.isLoading= false;
  }
 });
}

Вот, в принципе, и всё. Теперь, когда вы прокрутите список в самый низ, будет подгружаться новая порция контента. Не забудьте правильно сконфигурировать сам Ext.List и его Ext.data.Store (об этом я расскажу в следующих записях).

Вступление

2010-07-15T14:43:00.000+04:00

Я уже около двух лет, как активно использую в своей работе библиотеку ExtJS и месяц назад (как раз 15 июня) зашёл на extjs.com, чтобы скачать свежую версию, и бнаружил... Собственно говоря, я обнаружил новый продукт - Sencha, объединивший в себе ExtJS, jQTouch и Raphaël.
И вот, спустя почти месяц, мне-таки подвернулся проект, который заключается в разработке web приложения под iPhone, и я, конечно же, сразу же взялся изучать Sencha Touch (заказчику же сообщил, что имею опыт разработки на этой библиотеке). Как оказалось, после ExtJS новенький Sencha Touch учится за полдня, и никаких проблем не составило выдавать желаемое (наличие опыта разработки Sencha Touch) за действительное. Через 4 дня работы над этим проектом я приобрёл себе iPhone (да, я начал с эмулятора) и понеслось...

В общем, как вы, наверное, догадались из вступления, речь в блоге пойдёт о моём опыте разработки мобильных приложений (web apps) с использованием библиотеки Sencha Touch и вкусностей свежеиспечённых HTML5 и CSS3. Надеюсь, информация окажется полезной!