tag:blogger.com,1999:blog-15607204941319754112024-03-14T09:29:27.701+03:00Mobile Web ApplicationsРазработка web-приложений под мобильные устройства.Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.comBlogger25125tag:blogger.com,1999:blog-1560720494131975411.post-56386559826963504452011-07-02T10:55:00.001+04:002011-07-21T15:06:13.077+04:00Google+<div dir="ltr" style="text-align: left;" trbidi="on">Вчера решил-таки получить <b>инвайт</b> в новую <a href="http://plus.google.com/">социальную сеть</a> корпорации добра. Сделать мне это удалось быстро и без особого труда, хотя изначально, даже при наличии инвайта, меня не пускали - гугл говорил, мол, и так уже слишком много народа и необходимо подождать.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-4C7R33HvOJM/Tg7AF_5IBJI/AAAAAAAAAJ8/D75VjvIE2vg/s1600/s1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-4C7R33HvOJM/Tg7AF_5IBJI/AAAAAAAAAJ8/D75VjvIE2vg/s1600/s1.jpg" /></a></div><br />
Не буду детально описывать, что там есть, поскольку всё уже описано самим гуглом, скажу только пару слов о кругах. <b>Google+ Круги</b> - это, по сути дела, те же группы <b>в контакте</b>, но от которых последний, судя по апдейтам, пытается отказаться (и зря, должен сказать). Я возлагаю огромные надежды, что <b>Google+</b> всё-таки позволит своим пользователям оставаться приватным!<br />
<br />
И на последок: <b>раздаю инвайты</b>!<br />
<br />
<b>UPD:</b> буду премного благодарен, если кликните "<b>+1</b>" у статей, которые вам понравились и оказались полезными :-)</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com12tag:blogger.com,1999:blog-1560720494131975411.post-74020697151528450422011-05-20T10:38:00.009+04:002011-07-21T16:17:05.653+04:00Вакансия программиста/верстальщика<div dir="ltr" style="text-align: left;" trbidi="on">Вот уже месяц, как я отошёл от фриланса и работаю в компании, занимающейся <b>веб-разработкой</b>.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-WnywcBiDKX0/TdYN2wrfxEI/AAAAAAAAAJE/WZQebaocsoo/s1600/hts_logo_3color.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-WnywcBiDKX0/TdYN2wrfxEI/AAAAAAAAAJE/WZQebaocsoo/s1600/hts_logo_3color.png" /></a></div><br />
<br />
На данный момент нам <b>требуется</b> веб-программист/верстальщик на полный рабочий день с гибким графиком (возможно <b>студент</b>) в <b>Санкт-Петербурге</b>.<br />
<br />
<a name='more'></a><b>Требования</b>:<br />
<ul style="text-align: left;"><li>навыки качественной кроссбраузерной верстки</li>
<li>понимание общих принципов ООП</li>
<li>знание PHP и JS</li>
<li>желателен опыт работы с системами управления контентом (Bitrix, Joomla, WordPress, пр.)</li>
</ul><b>Условия</b>:<br />
<ul style="text-align: left;"><li>работа в молодой, амбициозной веб-студии </li>
<li>работа в офисе у м. Старая деревня (5 минут пешком)</li>
</ul><b>Обязанности</b>:<br />
<ul style="text-align: left;"><li>верстка макетов сайтов под CMS</li>
<li>разработка и адаптация функционала</li>
</ul><br />
Откликнуться на вакансию можно в комментариях или написать на почту: <a href="mailto:mailto:nikitin@htsupport.ru">nikitin@htsupport.ru</a></div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-63329344308668271462011-05-19T16:19:00.003+04:002011-08-17T10:58:37.359+04:00Плагин Illuminations для FireBug<div dir="ltr" style="text-align: left;" trbidi="on">Сегодня на хабре появилась <a href="http://habrahabr.ru/blogs/extjs/119574/">статья</a> об интересном <b>плагине</b> для <a href="http://getfirebug.com/">FireBug</a>, который называется <a href="http://www.illuminations-for-developers.com/">Illuminations</a>.<br />
<br />
Не буду дублировать информацию и подробно расписывать, что делает этот плагин, поскольку об этом уже сказано на хабре. Скажу только то, что он позволяет удобнее <b>разрабатывать</b> и <b>отлаживать</b> приложения, написанные на <a href="http://www.sencha.com/products/extjs/">ExtJS</a> и некоторых других JS-фреймворках (<span class="Apple-style-span" style="font-family: Verdana, sans-serif; font-size: 13px; line-height: 20px;">Dojo Toolkit, SproutCore, qooxdoo, YUI, Google Closure Library, jQuery UI</span>).<br />
<br />
<a href="http://www.illuminations-for-developers.com/">Illuminations</a>, помимо того, что <b>подсвечивает код</b> в консоли и выводит информацию об объектах <b>ExtJS</b> в более удобном виде, позволяет просматривать <b>документацию</b> с официального сайта <a href="http://www.sencha.com/">Sencha</a> и отображает информацию о данных, хранимых в <b>store</b>, что я нахожу очень удобным.<br />
<br />
Плагин <a href="http://www.illuminations-for-developers.com/">Illuminations</a> <b>платный</b> и стоит $25 за первый год для индивидуального испльзования и $50 для организаций, но есть и бесплатная <b>триальная версия.</b><br />
<br />
К сожалению, этот плагин бесполезен при работе с <a href="http://mobile-webapps.blogspot.com/search/label/Sencha%20Touch">Sencha Touch</a>, поскольку web-приложения, написанные на <b>Sencha Touch</b>, работают только в <b>WebKit</b> браузерах (Safari, Google Chrome).<br />
<br />
Думаю, разработчикам <b>Sencha</b> можно было бы взять на карандаш этот плагин и, быть может, включить нечто подобное в <b>Sencha SDK</b>.</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com1tag:blogger.com,1999:blog-1560720494131975411.post-52659006631947192292011-05-06T11:40:00.003+04:002011-08-16T16:15:18.116+04:00Анонс Sencha.io<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-5ne_HHpB704/TcOkR-hikPI/AAAAAAAAAIU/CaKuSCRfLts/s1600/20110504-sencha-io-badge-alt.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-5ne_HHpB704/TcOkR-hikPI/AAAAAAAAAIU/CaKuSCRfLts/s1600/20110504-sencha-io-badge-alt.png" /></a></div>Вчера компания <b>Sencha</b> анонсировали <b>облачный сервис</b> <a href="http://www.sencha.com/products/io/">Sencha.io</a>.<br />
На данный момент <b>Sencha.io</b> находится в активной разработке, и для <b>бета</b>-тестирования доступны два сервиса: <b>Sencha.io Src</b> и <b>Sencha.io Sync</b>.<br />
<br />
<h3><br />
</h3><h3><br />
</h3><h3><br />
</h3><div><a name='more'></a></div><div><br />
</div><div><br />
</div><h3>Sencha.io Src</h3><br />
Этот сервис, предназначен для автоматической оптимизации <b>размера изображений</b> под устройства с различным размером экрана (преимущественно, для мобильных платформ).<br />
Чтобы использовать <b>Sencha.io Src</b>, достаточно вставить в начало тега IMG <a href="http://src.sencha.io/" style="color: #336633;" target="_blank">http://src.sencha.io</a>, и изображения будут автоматически масштабироваться.<br />
<b>Sencha.io Src</b> имеет API и будет разрастаться новым платным премиум-функционалом, но функцию масштабирования изображений компания <b>Sencha</b> обещает оставить бесплатной.<br />
<br />
<h3>Sencha.io Sync</h3><br />
Если с <b>Sencha.io Src</b> всё предельно понятно, то <b>Sencha.io Sync</b> - куда более сложный сервис.<br />
<b>Sencha.io Sync</b> предоставляет возможность синхронизации данных, введённых с различных устройств и браузеров.<br />
На данный момент тестирование <b>Sencha.io Sync</b> открыто только по инвайтам, которые бесплатно раздаются на официальном сайте, но в ограниченном количестве. Компания <b>Sencha</b> планирует выпустить расширенную бета-версию к концу лета.<br />
<b>Sencha.io Sync</b>, как и <b>Sencha.io Src,</b> будет иметь платный премиум-функционал.<br />
<br />
<h3>Послесловие</h3><br />
Как мы видим, компания <a href="http://sencha.com/">Sencha</a> продолжает не только улучшать свои существующие продукты, но и разрабатывать новые, в частности, скоро должны выйти финальные версии <b>Sencha SDK</b> и <b>Sencha.io</b>. Остаётся только пожелать удачи разработчикам и ждать более-менее стабильных версий.<br />
<br />
Подробнее о <b>Sencha.io</b> вы можете прочитать в <a href="http://www.sencha.com/blog/previewing-sencha-io/">официальном блоге</a>.</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com1tag:blogger.com,1999:blog-1560720494131975411.post-79104286253793681642011-04-29T10:32:00.002+04:002011-08-16T16:12:29.849+04:00Sencha Touch Tutorial 3: События<div dir="ltr" style="text-align: left;" trbidi="on">Наконец-то я закончил монтировать новый <strong>видеоурок</strong> по <strong>Sencha Touch</strong>, который я посвятил работе с <b>событиями</b>.<br />
<br />
<object height="344" width="425"><param name="movie" value="http://www.youtube.com/v/HbQctjFCwNQ?hl=ru&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HbQctjFCwNQ?hl=ru&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br />
<br />
<a name='more'></a>В уроке разобраны следующие вещи:<br />
<br />
<ul style="text-align: left;"><li>работа с <b>событиями</b></li>
<li>ещё раз о <b>this</b> и <b>scope</b></li>
<li><b>Ext.Carousel</b></li>
<li>свойство контейнеров <b>defaults</b></li>
</ul>Пример <a href="https://www.sugarsync.com/pf/D440748_7510472_86559">прилагается</a>.<br />
<br />
На этот раз я весь урок озвучил за один день и отрегулировал громкость различных отрывков, поэтому всё получилось достаточно удачно и гладко. Кроме того, я изменил переходы между окном кода и окном демонстрации и постарался всё записать в несколько более быстром и оживлённом темпе, так что готовьтесь использовать паузу.<br />
Следующий урок, я так думаю, выйдет недели через две, поскольку на данный момент я сильно загружен работой. В общем, за май я планирую записать ещё два урока - больше вряд ли получится.<br />
<br />
Жду комментариев :-)</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com20tag:blogger.com,1999:blog-1560720494131975411.post-74294756979246405282011-04-26T17:26:00.001+04:002011-04-26T17:27:54.558+04:00Релиз ExtJS 4.0<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-6RZcQT34x4Q/Tba_5vc1ZZI/AAAAAAAAAIE/mgbklDPBGak/s1600/20110426-ext-js-4-hero.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br />
<img border="0" src="http://3.bp.blogspot.com/-6RZcQT34x4Q/Tba_5vc1ZZI/AAAAAAAAAIE/mgbklDPBGak/s1600/20110426-ext-js-4-hero.jpg" /></a></div><br />
Сегодня команда <a href="http://sencha.com/">Sencha</a> зарелизила <a href="http://www.sencha.com/products/extjs/">ExtJS 4.0</a>.<br />
<a name='more'></a><br />
Я начал использовать <b>ExtJS</b>, когда она была ещё в версии 2.2 и должен сказать, что в этой библиотеке многое изменилось, причём в лучшую сторону.<br />
Итак, вот<b> базовые улучшения</b>:<br />
<br />
<h3>Тестирование</h3><br />
Для ExtJS было написано множество новых юнит-тестов и корректность работы проверена в различных браузерах.<br />
<br />
<h3>Система классов</h3><br />
ExtJS и до этого предоставлял удобную систему классов для объектно-ориентированного программирования, но теперь добавлены такие вещи, как динамическая подгрузка, вычисление зависимостей и прочее.<br />
<br />
<h3>Песочница</h3><br />
Песочница предназначена для более гибкого и быстрого перехода со старых версий библиотеки и интеграции с другими JavaScript-фреймворками.<br />
<br />
<h3>Архитектура приложения</h3><br />
Разработчики сделали шаг навстречу паттерну <b>MVC</b> и даже написали подробное <a href="http://dev.sencha.com/deploy/ext-4.0.0/docs/guide/application_architecture.html">руководство</a>.<br />
<br />
<h3>SDK Tools</h3><br />
Вмесле с релизом ExtJS 4.0 будет опубликована бета-версия <b>Sencha SDK Tools</b> - это набор инструментов, позволяющих оптимизировать производительность, затачивать под различные браузеры, собирать код приложения воедино и прочие полезные вещи.<br />
<br />
<h3>Заключение</h3><br />
Помимо базовых изменений, было произведено множество других улучшений в компонентах пользовательского интерфейса и прочих вещах, но цель моей статьи - это анонс, поэтому я не буду вдаваться в детали. Всё это вы можете прочитать на <a href="http://www.sencha.com/blog/ext-js-4-final/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+extblog+%28Ext+JS+Blog%29#date:11:00">официальном блоге</a> Sencha.<br />
Полный список изменений релиза можно посмотреть <a href="http://dev.sencha.com/deploy/ext-4.0.0/release-notes.html">здесь</a> - он действительно впечатляет.<br />
<br />
Уверен, что-то из этих улучшений перекочует в <b>Sencha Touch 2.0</b>, первые беты которой должны появиться уже летом. Будем ждать!</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-45114178163477427112011-04-21T17:17:00.009+04:002011-08-23T10:55:37.176+04:00Полезные ссылки по Sencha Touch<div dir="ltr" style="text-align: left;" trbidi="on"><style type="text/css">
h3 {
color: #999;
}
</style><br />
Решил собрать в один пост <b>полезные ссылки</b> по <a href="http://mobile-webapps.blogspot.com/search/label/Sencha%20Touch">Sencha Touch</a>. К сожалению, на русском языке материала мало, поэтому большинство ссылок - англоязычные.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-E4kzGyVYjZg/TbAQrRmMgJI/AAAAAAAAAHg/p_TKLbriR8Q/s1600/hero-support1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="http://3.bp.blogspot.com/-E4kzGyVYjZg/TbAQrRmMgJI/AAAAAAAAAHg/p_TKLbriR8Q/s320/hero-support1.png" width="320" /></a></div><div><a name='more'></a></div><h3>Общая информация</h3><div><ul style="text-align: left;"><li><a href="http://www.sencha.com/learn/Ext_Manual_ru">Ext Manual ru</a> (ru) - качественный русскоязычный официальный мануал по <b>ExtJS</b>. Сам им не пользовался, но судя по оглавлению, очень полезная вещь. Там, помимо ExtJS, изложены основы объектно-ориентированного программирования на <b>JavaScript</b>. Конечно, мануал не про Sencha Touch, но, зная ExtJS, перейти на сенчу не сложно.</li>
<li><a href="http://habrahabr.ru/blogs/extjs/111193/">Введение в Sencha Touch 1.0</a> (ru) - обзорная статья на хабре про <b>Sencha Touch</b>.</li>
<li><a href="http://dev.sencha.com/deploy/touch/docs/">Официальная документация</a> (en) <b>Sencha Touch</b>. Здесь кроются ответы на большинство вопросов.</li>
<li><a href="http://www.sencha.com/learn/Tutorial:Sencha_Touch_Hello_World">Tutorial:Sencha Touch Hello World</a> (en) - учебник по созданию первого Hello World приложения на сече.</li>
<li><a href="http://dev.sencha.com/deploy/touch/getting-started.html">Getting Started with Sencha Touch</a> (en) - руководство о том, как начать работать с <strong>Sencha Touch</strong>.</li>
</ul></div><h3>Официальный блог Sencha Touch</h3><ul style="text-align: left;"><li><a href="http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/">An Introduction to Theming Sencha Touch</a> (en) - о том, как создавать пользовательские <b>темы</b> для приложений на базе <b>Sencha Touch</b>.</li>
<li><a href="http://dev.sencha.com/deploy/touch/docs/theme/">Sencha Touch SASS Variables and Mixins</a> (en) - а вот и ссылочка на <b>документацию</b> по CSS-переменным, с помощью которых создаются пользовательские <b>темы</b> (чудом удалось найти, т. к. она хорошенько запрятана).</li>
<li><a href="http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap">Tutorial:A Sencha Touch MVC application with PhoneGap</a> (en) - отличная обучающая статья о том, как с помощью <a href="http://www.phonegap.com/">PhoneGap</a> и <b>Sencha Touch</b> делать приложения для App Store, Android Market и т. п..</li>
<li><a href="http://www.sencha.com/blog/sencha-touch-optimizing-memory-usage/">Sencha Touch: Optimizing Memory Usage</a> (en) - статья об <b>оптимизации</b> потребления памяти <b>Sencha Touch</b> приложениями. К сожалению, пример в статье не рабочий, о чём неоднократно, но безрезультатно писали в комментариях все, кому не лень, однако, в целом идея понятна.</li>
</ul><h3>Видео</h3><ul style="text-align: left;"><li><a href="http://www.youtube.com/watch?v=Ergqt-8BMOM">Sencha Touch Tutorial: Первые шаги</a> (ru) - мой первый видеоурок, посвящённый азам Sencha Touch.<br />
</li>
<li><a href="http://www.youtube.com/watch?v=ZwZZSlzZR3c">Sencha Touch Tutorial: Ext.Panel - Layouting</a> (ru) - мой второй видеоурок о вёрстке с помощью Ext.Panel.<br />
</li>
<li><a href="http://www.youtube.com/watch?v=HbQctjFCwNQ">Sencha Touch Tutorial 3: События</a> (ru) - мой третий видеоурок о работе с событиями.</li>
<li><a href="http://www.youtube.com/watch?v=DWa4OJ4WMmU">Sencha Touch: Introduction</a> (en) - введение в Sencha Touch.</li>
<li><a href="http://www.youtube.com/watch?v=YdRHPSbsIhc">Sencha Touch: Creating a mobile Twitter app with Geo-location</a> (en) - создание Twitter приложения.</li>
<li><a href="http://www.youtube.com/watch?v=6DXdsnpGs3A">Sencha Touch: Introduction to Layers</a> (en) - о вёрстке.</li>
<li><a href="http://www.youtube.com/watch?v=yz9TPTWfRUk">Sencha Touch: Introduction to Layouts</a> (en) - о лайаутинге.</li>
<li><a href="http://vimeo.com/sencha">Sencha на Vimeo</a> (en) - подборка видео.</li>
</ul><br />
<b>P.S.:</b> набор ссылок я буду постоянно <b>обновлять</b>, так что можете заглядывать время от времени.</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com4tag:blogger.com,1999:blog-1560720494131975411.post-1121651961871927562011-04-13T14:08:00.000+04:002011-04-13T14:08:39.830+04:00Фиксированная или почасовая оплата? Взгляд фрилансера.<div dir="ltr" style="text-align: left;" trbidi="on"><style type="text/css">
h3 {
color: #999;
}
</style><br />
<div dir="ltr" style="text-align: left;" trbidi="on">Существует два основных способа оплаты работы фрилансеров: фиксированная ставка (<b>fixed price</b>) и почасовая оплата (<b>hourly rate</b>).<br />
В этой статье я хочу рассказать, почему <b>почасовая оплата</b> может быть <b>выгодна</b> не только для исполнителя, но и <b>для заказчика</b>.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-cTBMPMmU6mw/TaVq0yzXlGI/AAAAAAAAAHc/mvTkRFzA4eY/s1600/fixed.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="http://3.bp.blogspot.com/-cTBMPMmU6mw/TaVq0yzXlGI/AAAAAAAAAHc/mvTkRFzA4eY/s320/fixed.jpg" width="320" /></a></div><br />
<br />
<a name='more'></a><br />
<div style="text-align: left;"><h3>Качество кода</h3></div><div style="text-align: left;"></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
На проектах <b>с почасовой ставкой</b>, как правило, <b>качество кода выше</b>, и это происходит по той причине, что такие проекты, в своём большинстве, более длинные, и программист не торопится быстрее закончить - его поджимают только оговоренные сроки выполнения проекта (<b>due date</b>), а не жажда быстрее получить деньги, поэтому всё делается более основательно, без спешки. Кроме того, на проектах с почасовой оплатой разработчик надеется, что проект будет продолжаться, поэтому он пишет код так, чтобы потом с ним было приятно самому работать.<br />
На проектах с почасовой оплатой у разработчика есть <b>заинтересованность</b> в проявлении <b>инициативы</b> и предложении новых интересных решений. Интерес в продолжении проекта выше, поэтому и больше <b>вовлечённость</b> и степень вникания в проект, что положительно сказывается на конечном результате.</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Но с этим можно и поспорить, поскольку на проектах с фиксированной платой заказчик в праве потребовать высокое качество кода. Это верно, но и у разработчика нет никакой заинтересованности делать больше и качественнее, чем было оговорено в техническом задании, поэтому малейшее недопонимание может привести к конфликту, оставить обоюдное негативное впечатление и, как следствие для фриланс-бирж, плохой фидбек.<br />
<br />
</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>Пример</b>: заказчик говорит, что конечный продукт работает слишком медленно. Разработчик отвечает, что это особенность выбранной технологии и для улучшения производительности необходимо сделать ещё определённый объём работы, который не был оговорен при старте проекта. </div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><b>Вывод</b>: в проектах с фиксированной платой надо заранее обсуждать каждую деталь и быть уверенным, что достигнуто обоюдное взаимопонимание, причём это важно как для заказчика, так и для разработчика.<br />
<br />
</div></div><h3>Переговоры</h3><br />
В проектах <b>с фиксированной оплатой</b> на предварительные <b>переговоры</b> и обсуждение деталей проекта уходит значительно <b>больше времени</b>. Частично этот тезис я уже защитил в предыдущем пункте, но хочу добавить ещё пару слов.<br />
Как правило, во всяких умных книжках о менеджменте проектов пишут о важности и необходимости детального планирования процесса. С этим трудно поспорить, но на деле часто оказывается так, что, пощупав промежуточные результаты, у заказчика возникает желание что-то поменять (пусть, даже незначительное, но разработчику не особо-то хочется делать что-то сверх оговоренного, из-за чего, опять же, страдает качество кода и появляются различные "костыли"). Особо часто это возникает, когда заказчик не является технически подкованным.<br />
<br />
<b>Вывод</b>: если даже вы работаете с фиксированной оплатой, то разбивайте проект на итерации, каждая из которых после старта не подлежит обсуждению и дополнению.<br />
<br />
<h3>Мотивация</h3><br />
Казалось бы, проекты <b>с фиксированной ставкой</b> должны подстёгивать фрилансера закончить работу как можно быстрее, но на деле всё далеко не так.<br />
В успешном развитии проекта после того, как он завершён, разработчик мало заинтересован - проекты с фиксированной ставкой редко бывают длинными, иначе они либо почасовые, либо заказчик платит разработчику оклад, поэтому единственная мотивация - это деньги (или полученный опыт и фитбек, если фрилансер начинающий). Согласитесь, куда <b>приятнее</b>, когда за каждый отработанный час ты в<b>идишь конкретную сумму</b>, которую уже через неделю-две (я имею ввиду систему <b>oDesk</b>) сможешь <b>обналичить</b>.<br />
<br />
<b>Вывод</b>: если используется фиксированная оплата, лучше всего производить её по частям.<br />
<br />
<h3>Безопасность</h3><br />
Основной мотив использования <b>фиксированной цены</b> за проект для заказчика - это жёсткая <b>ограниченность бюджета</b> и боязнь "<b>кидалова</b>". Но обезопаситься можно и с почасовой системой оплаты.<br />
Проверить способности разработчика можно, выделив ему небольшое количество часов для <b>создания первого демо</b> - это не та сумма, за которую можно и "кинуть", забыв про отрицательный фидбек.<br />
Обезопасить себя от перерасхода бюджета можно отслеживанием хода работ и, в случае чего, своевременной беседой с разработчиком о том, что что-то идёт не так. Разработчик должен знать и соглашаться с итоговой суммой, на которую рассчитывает заказчик.<br />
<br />
<h3>Итоги</h3><br />
Итак, я привёл <b>три довода</b> для заказчика, которые <b>должны</b> его <b>мотивировать</b> на работу <b>с почасовой ставкой</b>. Это мой личный опыт, который я получил в ходе работы на различных проектах. Был бы рад, если кто-нибудь со стороны заказчиков как-то прокомментировал мои доводы. Заранее благодарю!</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-4777390748912866082011-04-12T00:34:00.001+04:002011-08-17T11:01:12.501+04:00Планы развития Sencha Touch<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://4.bp.blogspot.com/-eucmuGg9Oog/TaNkelgif_I/AAAAAAAAAGs/uiiHMSSM2cE/s1600/roadmap.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-eucmuGg9Oog/TaNkelgif_I/AAAAAAAAAGs/uiiHMSSM2cE/s1600/roadmap.png" /></a>Только что появились <a href="http://www.sencha.com/blog/2011-product-roadmap-update/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+extblog+%28Ext+JS+Blog%29&utm_content=Google+Reader#date:18:45">новости</a> в официальном блоге <a href="http://www.sencha.com/">Sencha</a> о планах развития их продуктов, в том числе и библиотеки <a href="http://mobile-webapps.blogspot.com/search/label/Sencha%20Touch">Sencha Touch</a>.<br />
<br />
Информации мало, но сказано, что летом этого года мы увидим превью <b>Sencha Touch 2.0</b> (думаю, релиз будет где-то к ноябрю, как было и с первой версией). Кроме того, разработчики обещают уже этой весной предоставить нам в <b>Sencha Touch</b> инструменты для рисования диаграмм и графиков.<br />
<br />
<br />
<br />
<br />
Что ж, новостей хоть и не много, но и они радуют. Остаётся только ждать и надеяться, что новая <b>Sencha Touch 2.0</b> помимо <b>iPhone</b>, <b>Android</b> и <b>Blackberry</b> будет поддерживать <b>Windows Phone 7</b> устройства, поскольку потребность в разработке приложений под WP7 на рынке есть, а вот инструментов ещё не достаточно.</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-75216562530180819412011-04-11T21:28:00.000+04:002011-04-11T21:33:12.482+04:00Демонстрация возможностей HTML5 и CSS3 от Google<div dir="ltr" style="text-align: left;" trbidi="on">Хочу поделиться ссылкой на сайт с примерами и советами по <b>HTML5</b> и <b>CSS3</b>: <a href="http://www.html5rocks.com/">HTML5 Rocks</a>. Особо хочу порекомендовать слайдер <a href="http://slides.html5rocks.com/">HTML5 Presentation</a>.<br />
<br />
Кроме того, если кто ещё не видел, хочу дать ссылку на <b>HTML5</b>-книгу от <b>Google</b>: <a href="http://www.20thingsilearned.com/">20 Things I Learned About Browsers and the Web</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-tN6_Qzfi6NE/TaM6_73d98I/AAAAAAAAAGo/mu6pF1GL95I/s1600/html5_logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="http://3.bp.blogspot.com/-tN6_Qzfi6NE/TaM6_73d98I/AAAAAAAAAGo/mu6pF1GL95I/s320/html5_logo.png" width="320" /></a></div><br />
</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-49828212940836428922011-04-11T01:28:00.002+04:002011-09-07T10:49:11.648+04:00CSS3 свойства, наиболее часто используемые в Sencha Touch<div dir="ltr" style="text-align: left;" trbidi="on"><style type="text/css">
h3 {
color: #999;
}
</style><br />
<div dir="ltr" style="text-align: left;" trbidi="on">При создании интерфейсов своих <a href="http://sencha.com/">Sencha Touch</a> приложений я работаю с <strong>CSS3</strong>, причём, как правило, я использую одни и те же свойства, поэтому я хочу описать наиболее часто употребляемые из них.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-GFDPFZph1yM/TaIPsjhvDEI/AAAAAAAAAF8/s_rq_K-RrA4/s1600/class-header-css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="http://4.bp.blogspot.com/-GFDPFZph1yM/TaIPsjhvDEI/AAAAAAAAAF8/s_rq_K-RrA4/s320/class-header-css3.jpg" width="320" /></a></div><br />
<a name='more'></a><br />
<h3>border-radius</h3><br />
Тут всё просто: устанавливаем значения, подобно тому, как устанавливаем, например, <code>padding</code>, и у нас углы элемента закругляются. Для браузеров на базе <a href="http://ru.wikipedia.org/wiki/WebKit">WebKit</a> также можно использовать свойство <code>-webkit-border-radius</code>.</div><br />
<h5>Пример:</h5><pre class="brush:css">border-radius: 30px;
</pre><h5>Результат:</h5><div class="separator" style="clear: both; text-align: left;"><a href="http://1.bp.blogspot.com/-K9ag_XHcn2M/TaITJFKksFI/AAAAAAAAAGA/cd_98guamGo/s1600/border-radius.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-K9ag_XHcn2M/TaITJFKksFI/AAAAAAAAAGA/cd_98guamGo/s1600/border-radius.png" /></a></div>Прочитать подробнее можно <a href="http://htmlbook.ru/css/border-radius">здесь</a>.<br />
<br />
<h3>gradient</h3><br />
<code>-webkit-gradient</code> - это не свойство, а значение, которое применяется свойству <code>background-image</code> для создания <strong>градиента</strong>. Для браузеров Firefox используется <code>-moz-linear-gradient</code>, но при создании мобильных веб-приложений нам это не важно.<br />
В WebKit браузерах доступно два типа градиентов:<br />
<ul style="text-align: left;"><li>линейный (<b>linear</b>)</li>
<li>круговой (<b>radial</b>)</li>
</ul>Синтаксис создания градиента:<br />
<code>-webkit-gradient(<b>type</b>, <b>start</b>, <b>end</b>, from(<b>color</b>), to(<b>color</b>))</code><br />
<h5>Пример:</h5><pre class="brush:css">background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bbb), to(#000));
</pre><h5>Результат:</h5><div class="separator" style="clear: both; text-align: left;"><a href="http://2.bp.blogspot.com/-j9YHk5mG5zI/TaIXfKx9diI/AAAAAAAAAGE/_x_dDWFYJXA/s1600/gradient-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-j9YHk5mG5zI/TaIXfKx9diI/AAAAAAAAAGE/_x_dDWFYJXA/s1600/gradient-1.png" /></a></div><br />
Кроме того, можно делать "остановки" в градиенте:<br />
<h5>Пример:</h5><pre class="brush:css">background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bbb), color-stop(50%, #000), to(#bbb));</pre><h5>Результат:</h5><div class="separator" style="clear: both; text-align: left;"><a href="http://4.bp.blogspot.com/-vx4W3DLY8W0/TaIYho0UjGI/AAAAAAAAAGI/jtlVtDPLt9o/s1600/gradient-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-vx4W3DLY8W0/TaIYho0UjGI/AAAAAAAAAGI/jtlVtDPLt9o/s1600/gradient-2.png" /></a></div><br />
Подобных остановок может быть несколько.<br />
Подробнее о градиентах можно почитать <a href="http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html#//apple_ref/doc/uid/TP40008032-CH7-SW11">здесь</a>.<br />
<br />
<h3>-webkit-mask</h3><br />
В <b>CSS3</b> стало возможным накладывать на элементы маску. Делать это можно с помощью свойства <code>-webkit-mask</code>.<br />
<br />
Синтаксис:<br />
<code>-webkit-mask: <b>attachment</b>, <b>clip</b>, <b>origin</b>, <b>image</b>, <b>repeat</b>, <b>composite</b>, <b>box-image</b>;</code><br />
<br />
Для примера я буду использовать следующую маску (это просто png-изображение):<br />
<div class="separator" style="clear: both; text-align: left;"><a href="http://1.bp.blogspot.com/-jO2yW9StGPI/TaIcvz6dhQI/AAAAAAAAAGY/DIrwK8JRv0o/s1600/mask.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="108" src="http://1.bp.blogspot.com/-jO2yW9StGPI/TaIcvz6dhQI/AAAAAAAAAGY/DIrwK8JRv0o/s320/mask.png" width="122" /></a></div><h5>Пример:</h5><pre class="brush:css">width: 122px;
height: 108px;
background-color: #bebebe;
-webkit-mask-image: url(mask.png);</pre><h5>Результат:</h5><div class="separator" style="clear: both; text-align: left;"><a href="http://3.bp.blogspot.com/-0scC4D1iqi0/TaIdsLGWffI/AAAAAAAAAGg/rx3qgnwkXso/s1600/mask-sample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="http://3.bp.blogspot.com/-0scC4D1iqi0/TaIdsLGWffI/AAAAAAAAAGg/rx3qgnwkXso/s320/mask-sample.png" width="144" /></a></div><br />
В качестве маски можно использовать не только картинку, но и <b>CSS3</b>-градиент или <b>SVG</b>-графику. Подробнее об этом можно узнать <a href="http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Masks/Masks.html#//apple_ref/doc/uid/TP40008032-CH8-SW8">здесь</a>.<br />
<br />
<h3>Заключение</h3><br />
Я показал всего 3 свойства, появившихся в <b>CSS3</b>, но они являются наиболее часто используемыми мною при вёрстке интерфейсов <a href="http://mobile-webapps.blogspot.com/search/label/Sencha%20Touch">Sencha Touch</a> приложений. С остальными возможностями WebKit браузеров вы сможете познакомиться на <a href="http://developer.apple.com/devcenter/safari/index.action">сайте Apple</a>.</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-30606258122087226792011-04-07T13:25:00.001+04:002011-08-16T16:16:28.265+04:00XCode + PhoneGap<div dir="ltr" style="text-align: left;" trbidi="on">Вчера пол-дня промучился, ставя шаблон <a href="http://www.phonegap.com/">PhoneGap</a>-приложения под <a href="http://developer.apple.com/xcode/index.php">XCode 4</a>. Делал это через установщик <strong>PhoneGap</strong>, вручную и даже пробовал ставить другие шаблоны для <b>XCode</b>, но всё без толку.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-kd5jCC32psI/TZ2CI1vIWuI/AAAAAAAAAF4/uFc7e_5FLpw/s1600/phonegap_symbian.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-kd5jCC32psI/TZ2CI1vIWuI/AAAAAAAAAF4/uFc7e_5FLpw/s1600/phonegap_symbian.jpg" /></a></div><br />
<br />
<a name='more'></a>Решение, как всегда, оказалось куда более простым: я решил скачать и установить <b>XCode 3.2.6 + iOS SDK 4.3</b> и, о чудо, всё заработало! Видимо, шаблон был просто не совместим с четвёртой версией <b>XCode</b>.<br />
В итоге, я написал сообщение с баг-репортом команде <a href="http://www.phonegap.com/">PhoneGap</a> и теперь работаю с <b>XCode 3.2.6</b> и радуюсь жизни, хотя неприятный осадок, безусловно, на душе остался - разработчики могли бы предупредить, что с <a href="http://developer.apple.com/xcode/index.php">XCode 4</a> их детище не работает, сэкономив, тем самым, моё рабочее время.<br />
<br />
<b>UPD:</b> как оказалось, подобный вопрос уже поднимался, но почему-то раньше я не натолкнулся, копаясь в гугле, на эту <a href="http://stackoverflow.com/questions/3518291/phonegap-templates-installed-in-xcode-4">статью</a>.</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-34547100314544077012011-04-06T01:35:00.001+04:002011-05-20T11:00:30.490+04:00Ищу веб-разработчиков!<div dir="ltr" style="text-align: left;" trbidi="on">Я уже около года, как зарабатываю исключительно <b>фрилансом</b>, причём в моей карьере были как взлёты, где я в неделю нарабатывал бешеное количество часов, получая сумму, сравнимую с тем, что мне мог предложить отечественный работодатель в месяц, но были и моменты, когда я мог обеспечить только половинную недельную занятость, а иногда даже и на таковую не хватало. Однако, в целом, мои дела, как фрилансера, идут хорошо.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-x-QI8p_GlYY/TZuJcDDYNXI/AAAAAAAAAFw/DvKhYtswAeQ/s1600/1300106364_freelance2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://4.bp.blogspot.com/-x-QI8p_GlYY/TZuJcDDYNXI/AAAAAAAAAFw/DvKhYtswAeQ/s320/1300106364_freelance2.jpg" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
<a name='more'></a><br />
Через какое-то время работы фрилансером я понял, что всегда надо на виду держать несколько потенциальных проектов, а ещё лучше наработать постоянных заказчиков, с которыми можно стартануть в один день новый проект, не теряя время на долгие переговоры.<br />
Достаточно быстро я понял, что было бы весьма полезно улучшить качество, предоставляемых мною, услуг, причём не только в профессиональном плане, но и в плане сокращения сроков выполнения проектов. Ещё летом прошлого года я ощутил необходимость в <b>команде</b>, но на тот момент <b>программистов</b>, занимающихся веб-разработкой под мобильные платформы, не то, чтобы в России было мало, их и по миру-то можно было на пальцах пересчитать (я беру в расчёт фриланс-биржи типа <a href="http://odesk.com/">oDesk</a>), поскольку <b>iPad</b> только-только вышел и началось активное бурление "мнений" вокруг новоявленных <b>HTML5</b> и <b>CSS3</b>. Одним словом, мне в любом случае пришлось бы заняться обучением программистов для своей команды. Вот тогда-то у меня и родилась мысль о создании блога и обучающих скринкастов по <a href="http://www.sencha.com/">Sencha Touch</a>!<br />
<br />
На данный момент я как никогда <b>нуждаюсь в команде</b> веб-разработчиков, поскольку веду одновременную работу сразу на нескольких проектах и ещё несколько готовы вот-вот стартануть. Времени свободного всё меньше и меньше, а отказываться жадность не позволяет, хоть и в последнее время я перестал отвечать на новые предложения и веду переговоры только с проверенными заказчиками. Не уверен, что такой наплыв проектов будет всегда, поскольку сейчас весна, а весной, как правило, проектов больше, но упускать возможность наработать клиентскую базу, чтобы потом не мучаться в поисках новых проектов, очень бы не хотелось.<br />
<br />
Перехожу ближе к делу. Я приглашаю к себе в команду толковых <b>веб-разработчиков</b> и талантливых <b>студентов</b>! Основной профиль проектов - это разработка под мобильные платформы, поэтому <b>партнёр</b> (предпочитаю называть именно так) должен быть готов в короткие сроки изучать новые технологии. Со своей стороны я предоставляю <b>помощь</b> в обучении и плавное введение в рабочие <b>проекты</b> с достойной оплатой труда. Если вы из <b>Санкт-Петербурга</b>, то преподам <b>мастер-классы</b> и на первых этапах попрактикую <b>парное программирование</b>.<br />
<br />
Одним словом, <b>вакансия</b> разработчика веб-приложений под мобильные платформы <b>открыта</b>!</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com3tag:blogger.com,1999:blog-1560720494131975411.post-72033809862292585832011-04-05T15:28:00.000+04:002011-04-10T15:19:08.245+04:00Sencha Touch Tutorial: Ext.Panel - Layouting<div dir="ltr" style="text-align: left;" trbidi="on">Второй видеоурок <b>Sencha Touch Tutorial</b> наконец-то готов!<br />
<br />
<object height="344" width="425"><param name="movie" value="http://www.youtube.com/v/ZwZZSlzZR3c?hl=ru&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ZwZZSlzZR3c?hl=ru&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br />
<br />
На этот раз я рассказал о следующих вещах:<br />
<br />
- размещение компонентов внутри панели (<b>layout</b>ing);<br />
- обработка нажатия кнопки и параметр <b>scope</b>;<br />
- debugging;<br />
<br />
<a name='more'></a>К сожалению, видеоматериала было отснято гораздо больше, чем вошло в урок, поэтому исходные коды не соответствуют тому, на чём закончилось видео, поэтому выкладывать ничего не буду.<br />
<b><br />
</b><br />
<b>От автора:</b><br />
<br />
<i>Скажу честно, этот урок мне тяжело дался. Сначала были проблемы с видеорядом, из-за чего я всё видео полностью перезаписывал заново, хотя к тому моменту уже озвучил минуты четыре. Потом были проблемы со звуком, поскольку этот урок, в отличие от первого, я озвучивал не за один раз, а в свободное время, что негативно сказалось на качестве звука: как оказалось, в разные дни у меня разный голос и изменить его, практически, не получается, а обработка голоса в аудиоредакторе ещё сильнее затянула бы процесс создания видеоурока.</i><br />
<i>В связи с проблемами, описанными выше, следующие уроки буду делать короче и стараться озвучивать в один день.</i><br />
<i><br />
</i></div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-21801085596009818762011-03-30T00:58:00.000+04:002011-04-03T11:14:50.043+04:00RGraph: HTML5 библиотека для построения графиков и диаграмм<div dir="ltr" style="text-align: left;" trbidi="on">Теперь, с появлением <b>HTML5</b> и <b>canvas</b>, <b>Flash</b> становится всё менее и менее жизненно необходим.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-zMKX1yONz8k/TZIen7wL1qI/AAAAAAAAAFA/4GLf-sHGa6I/s1600/RGraph_sample_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="141" src="http://3.bp.blogspot.com/-zMKX1yONz8k/TZIen7wL1qI/AAAAAAAAAFA/4GLf-sHGa6I/s320/RGraph_sample_1.png" width="320" /></a></div><br />
Хочу познакомить вас с <b>canvas</b>-библиотекой для создания графиков и диаграмм, которые будут работать как в десктопных браузерах с поддержкой <b>HTML5</b>, так и на мобильных платформах. Библиотека называется <a href="http://www.rgraph.net/">RGraph</a>.<br />
<br />
<a name='more'></a><a href="http://www.rgraph.net/">RGraph</a> - очень гибкая библиотека, и если нет надобности в использовании всех её функций одновременно, то вовсе не обязательно подключать все файлы. Например, для построения простого линейного графика достаточно подключить ядро библиотеки <b>RGraph.common.core.js</b> и <b>RGraph.line.js</b>.<br />
<br />
Для того, чтобы добавить график или диаграмму на страничку требуется:<br />
<ul style="text-align: left;"><li>Подключить ядро библиотеки и файлы, необходимые для реализации заданного функционала.</li>
<li>Добавить в DOM документа элемент <b><canvas></b> с атрибутом <b>id</b>.</li>
<li>После того, как <b><canvas></b> будет прорендерен, создать объект <b>RGraph.<name_of_chart></b> и сконфигурировать его свойства.</li>
</ul><div>Для примера будем считать, что у нас в DOM уже есть элемент</div><div><pre class="brush:html"><canvas id="chart_id" width="310" height="140">
[No canvas support]
</canvas>
</pre></div>и подключен <b>RGraph.line.js</b>.<br />
Теперь создадим объект <b>line</b>:<br />
<pre class="brush:js">var data = [10,4,17,50,25,19,20,25,30,29,30,29];
var line = new RGraph.Line("chart_id", data);</pre>Первый параметр при объявлении <b>RGraph.Line</b> - это идентификатор нашего <b>canvas</b>-элемента, а второй - это данные, по которым будет построен график.<br />
Теперь надо прописать конфигурационные свойства объекта <b>line</b>:<br />
<pre class="brush:js">RGraph.SetConfig(line, {
'chart.colors' : ['#57a4ff'],
'chart.filled' : true,
'chart.fillstyle' : ['#57a4ff'],
'chart.labels' : ['0','1','2','3','4','5']
});</pre>Я не буду объяснять, что каждое из свойств означает - всё это вы сможете прочитать в <a href="http://www.rgraph.net/docs/index.html">документации</a> на <a href="http://www.rgraph.net/">официальном сайте</a>.<br />
Осталось только прорисовать график:<br />
<pre class="brush:js">line.Draw();
</pre>Всё, теперь на странице появится симпатичный <b>HTML5</b>-график! Очистить его можно следующим образом:<br />
<pre class="brush:js">RGraph.Clear(document.getElementById('line_chart_id'));
</pre>После очистки можно рисовать новый график в этом же <b>canvas</b>. Если не произвести очистку, то один график будет рисоваться поверх другого.<br />
<br />
В заключении хочу сказать, что библиотека <a href="http://www.rgraph.net/">RGraph</a> проста в освоении и достаточно функциональна, причём есть возможность строить красивые интерактивные графики. Недостатком, пожалуй, могу назвать только то, что бесплатно использовать <a href="http://www.rgraph.net/">RGraph</a> можно только в некоммерческих проектах, в коммерческих же придётся заплатить <span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; white-space: nowrap;">£ 49,00</span>, что не совсем дёшево.<br />
<br />
Примеры различных диаграмм и графиков вы можете найти на <a href="http://www.rgraph.net/">официальном сайте</a>.<br />
<br />
P.S.: <i>исходные коды примера, приведённого в статье, выкладывать не буду, поскольку он исключительно демонстрационный. </i><i>Я просто покажу картинку того, что получилось бы.</i><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-ZSqrU30vzdU/TZIwRZTew8I/AAAAAAAAAFE/PhMQ5azXL7g/s1600/rgraph_sample_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-ZSqrU30vzdU/TZIwRZTew8I/AAAAAAAAAFE/PhMQ5azXL7g/s1600/rgraph_sample_2.png" /></a></div><br />
<span id="goog_1031424956"></span><span id="goog_1031424957"></span></div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-39940361986431665732011-03-24T22:54:00.002+03:002011-08-17T11:02:23.523+04:00Sencha Touch 1.1 Release<div dir="ltr" style="text-align: left;" trbidi="on"><style type="text/css">
h3 {
color: #999;
}
</style><br />
<div dir="ltr" style="text-align: left;" trbidi="on">Сегодня вышло первое в этому году обновление библиотеки <a href="http://mobile-webapps.blogspot.com/search/label/Sencha%20Touch">Sencha Touch</a>.<br />
Должен сказать, что эта новость меня очень обрадовала, поэтому спешу поделиться, что же нового появилось в версии 1.1.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.sencha.com/files/misc/sencha-touch-1-1-hero2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="228" src="http://www.sencha.com/files/misc/sencha-touch-1-1-hero2.jpg" width="320" /></a></div><h3><a name='more'></a>Поддержка Blackberry</h3><br />
Теперь приложения, созданные с помощью <b>Sencha Touch</b>, корректно отображаются на устройствах компании <b>RIM</b> с операционной системой <b>Blackberry 6</b> и выше, включая <b>Blackberry TabletOS</b>, что, надеюсь, положительно скажется на увеличении количества проектов на <b>Sencha Touch</b> на фриланс-биржах, типа oDesk, поскольку в штатах устройства с <b>Blackberry</b> широко распространены, причём в очень "вкусном" корпоративном секторе.<br />
<br />
Подробнее об этом можно прочитать <a href="http://devblog.blackberry.com/2011/03/sencha-touch/">в официальном блоге</a> <b>Blackberry</b>.<br />
<br />
<h3>Первые официальные плагины</h3><br />
Теперь библиотека <b>Sencha Touch</b> обзавелась своими первыми официальными плагинами - это плагин "<a href="http://dev.sencha.com/deploy/touch/examples/pullrefresh/">Pull to Refresh</a>" и плагин "<b>Pagination</b>", добавляющий в конец списка кнопку для подгрузки новой порции контента, причём, включив опцию 'autoPaging', это будет делаться автоматически при достижении конца списка (подобную функцию я реализовывал самостоятельно ещё в ранних бета-версиях библиотеки, что описано в статье "<a href="http://mobile-webapps.blogspot.com/2010/07/blog-post_18.html">Автоподгрузка списка по скроллингу</a>").<br />
<br />
<h3>Новые примеры</h3><br />
<b>Sencha Touch</b> обзавелось новыми примерами, один из которых - <a href="http://dev.sencha.com/deploy/touch/examples/oreilly/">O'Reilly</a>.<br />
<br />
<h3>Улучшена производительность и обновлены стили</h3><br />
Разработчики заявляют, что они кое-где существенно улучшили производительность, но, я думаю, они до сих пор так и не смогли пофиксить те два бага (причём, существенных бага), что я <a href="http://www.sencha.com/forum/showthread.php?121098-OPEN-725-Keyboard-has-not-appeared-on-focus-a-TextArea.&p=577877#post577877">зарепортил</a> ещё осенью прошлого года, поскольку мне на почту не приходило уведомлений о изменении статусов тикетов с этими багами (в ближайшее время проверю это и напишу о результатах).<br />
<br />
Кроме того, намечен курс на сближение с платформой <a href="http://www.phonegap.com/">PhoneGap</a>, что не может не радовать!<br />
<br />
В заключении даю ссылку на <a href="http://www.sencha.com/blog/sencha-touch-1-1-release-with-blackberry-support/">официальную статью</a>.</div></div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-68921913567258666102011-03-24T04:25:00.000+03:002011-03-24T15:49:44.441+03:00Habrahabr<div dir="ltr" style="text-align: left;" trbidi="on">Пару дней назад заработал инвайт на <a href="http://habrahabr.ru/">хабр</a> за статью <a href="http://habrahabr.ru/blogs/extjs/116007/">о создании собственного слайдера</a>. Это, конечно, здорово, но, должен сказать, я не был знаком с правилами публикации хабратопиков, и теперь не могу опубликовать статьи со своими видеоуроками - надо набрать карму.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.oophone.ru/wp-content/uploads/2010/11/habrahabr.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.oophone.ru/wp-content/uploads/2010/11/habrahabr.gif" /></a></div><br />
<a name='more'></a>Вот уже второй видеоурок, практически, готов, а карму, чувствую, я ещё не скоро заработаю, в связи с чем, хочу обратиться к хабражителям, которые заходят сюда по ссылке из моего профиля: "Если Вам понравились мои скринкасты <a href="http://mobile-webapps.blogspot.com/2011/03/sencha-touch.html">Sencha Touch Tutorial</a> (он пока что один), и Вы считаете, что они могут помочь людям, решившим освоить эту библиотеку, проплюсуйте мне, пожалуйста, карму. Я, в свою очередь, обязуюсь не затягивать с продолжением! Заранее благодарю".<br />
<br />
P.S.: Даже если кто-то сам сделает топик-ссылку на мой первый скринкаст <a href="http://mobile-webapps.blogspot.com/2011/03/sencha-touch.html">Sencha Touch Tutorial</a>, буду благодарен.<br />
<br />
Спасибо за внимание!</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-36836292716420068872011-03-23T05:06:00.001+03:002011-04-29T15:02:56.542+04:00Обучающий видеокурс Sencha Touch Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">Я давно уже собирался записать <b>обучающий видеокурс Sencha Touch Tutorial</b> на русском языке, но только сейчас дошли руки. Запись скринкаста, монтаж и озвучка заняли у меня два дня и, надеюсь, это время не окажется потраченным напрасно.<br />
Теперь вы можете просмотреть первый урок, ориентированный на полных новичков в <b>Sencha Touch</b>, но знакомых с JavaScript:<br />
<br />
<object height="344" width="425"><param name="movie" value="http://www.youtube.com/v/Ergqt-8BMOM?hl=ru&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Ergqt-8BMOM?hl=ru&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br />
<br />
<br />
<a name='more'></a>В этом уроке я пролил свет на следующие темы:<br />
<ul style="text-align: left;"><li>азы создания веб-приложений на базе библиотеки <b>Sencha Touch</b>;</li>
<li>компоненты <b>Ext.Panel</b>, <b>Ext.Toolbar</b>, <b>Ext.Button</b> и некоторые из их конфигурационных свойств;</li>
<li>порядок применения значений свойствам компонента</li>
</ul><br />
Исходники проекта можно стянуть <a href="https://www.sugarsync.com/pf/D440748_7510472_76568">отсюда</a>.<br />
<br />
В ближайшее время постараюсь записать <a href="http://mobile-webapps.blogspot.com/2011/04/sencha-touch-tutorial-extpanel.html">продолжение</a>!</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com12tag:blogger.com,1999:blog-1560720494131975411.post-19012880997312218372011-03-20T21:04:00.000+03:002011-03-30T14:59:00.218+04:00Sencha Touch: Ext.form.Slider с полем для ручного ввода значения<div dir="ltr" style="text-align: left;" trbidi="on">В одном из моих проектов я столкнулся с задачей создания компонента слайдера с возможностью ручного ввода значения поля, т. е. выглядеть он должен был так:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://lh3.googleusercontent.com/-nBIYs4oimn8/TYYWOT1vWII/AAAAAAAAAE4/I1mxD3RcO8Y/s1600/CustomSlider.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://lh3.googleusercontent.com/-nBIYs4oimn8/TYYWOT1vWII/AAAAAAAAAE4/I1mxD3RcO8Y/s1600/CustomSlider.png" /></a></div>Причём, при нажатии на значение поля (где написано "8.50 %") должна выдвигаться клавиатура для ввода значения поля вручную, а при перетаскивании ползунка значение поля должно обновляться.<br />
<br />
<a name='more'></a>Итак, первым делом я изучил внутренности компонента <b>Ext.form.Slider</b> и выяснил, что внешний вид задаётся свойством <b>renderTpl</b>.<br />
Вот так выглядит <b>renderTpl</b> в оригинале:<br />
<br />
<pre class="brush:js">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>'
]
</pre><br />
В моём компоненте, помимо дополнительного поля для ручного ввода, будет присутствовать <b>постфикс</b>, т. е. один символ или набор символов, которые будут добавляться после поля со значением (на скриншоте - это "%"), поэтому я изменил шаблон компонента следующим образом:<br />
<br />
<pre class="brush:js">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>'
]
</pre><br />
CSS-классы, прописанные в этом шаблоне, заданы следующим образом:<br />
<br />
<pre class="brush: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;
}
</pre><br />
Теперь компонент будет выглядеть должным образом, но значения <b>value</b> и <b>postfix</b> не будут применяться нашему полю, поэтому переходим к функциональной части.<br />
<br />
Итак, <b>value</b> и <b>postfix</b> изначально не будут подставляться в шаблон, даже если мы передадим их в конфигурационные свойства при объявлении нашего кастомизированного слайдера. Изучив исходный код <b>Ext.form.Field</b>, от которого унаследован <b>Ext.form.Slider</b>, я выяснил, что список полей, которые будут заполнять шаблон, определяется функцией <b>initRenderData</b>, поэтому для нашего слайдера я перегрузил эту функцию следующим образом:<br />
<br />
<pre class="brush:js">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;
}
</pre><br />
Теперь в шаблон будут вписаны значения, указанные в конфигурационных свойствах компонента. Осталось сделать так, чтобы эти значения менялись при перемещении ползунка слайдера.<br />
Чтобы при перемещении ползунка новое значение применялась только к одному компоненту, а не ко всем слайдерам, добавленным на страницу, в шаблоне я задал полю <b>input</b> атрибут <b>id</b>, формирующийся из префикса <b>dnt-form-slider-valuefield-</b> и значения конфигурационного свойства <b>name</b>, которое должно быть объявлено.<br />
Для динамического изменения значения поля необходимо подписаться к событию <b>'change'</b> нашего слайдера и в качестве обработчика назначить следующую функцию:<br />
<br />
<pre class="brush:js">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);
}
</pre><br />
Итак, теперь значение поля меняется, но меняется оно только тогда, когда мы отпускаем ползунок. Для того, чтобы значение поля менялось постоянно при перетаскивании слайдера, нам необходимо функцию <b>onChangeValue</b> подписать и на событие <b>'drag'</b>.<br />
<br />
Осталось совсем немного: надо сделать так, чтобы при ручном изменении значения поля слайдер передвигался на нужную позицию.<br />
Для этого подписываемся на событие <b>'render'</b> нашего компонента и ставим обработчиком функцию <b>onRenderSlider</b> - в этот момент наш компонент прорендерен, поэтому мы можем подписаться на события, выбрасываемые нашим input-элементом, отображающим текущее значение поля.<br />
<br />
<pre class="brush:js">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);
}
</pre><br />
Всё, наш новый слайдер с полем для ручного ввода значения полностью готов, причём никаких дополнительных защит "от дурака" писать не надо!<br />
<br />
Добавить компонент можно следующим образом:<br />
<br />
<pre class="brush:js">new Dnt.form.Slider({
name : 'interestRate',
postfix : '%',
digitalsAfterPoint: 2,
minValue : 1,
maxValue : 15,
increment : 0.05,
label : 'Interest Rate'
})
</pre><br />
В дополнение прилагаю <a href="https://www.sugarsync.com/pf/D440748_7510472_62553">исходный код</a> компонента и <a href="https://www.sugarsync.com/pf/D440748_7510472_62569">файл со стилями</a>.<br />
<br />
Тестовый проект с подключенным и работающим слайдером можно скачать <a href="https://www.sugarsync.com/pf/D440748_7510472_76551">отсюда</a>.<br />
</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-90751967933388752622011-03-15T00:04:00.000+03:002011-03-30T15:12:15.314+04:00Особенности компонента Ext.form.Select<div dir="ltr" style="text-align: left;" trbidi="on">Только что обнаружил интересное и не совсем логическое поведение компонента <b>Ext.form.Select</b>. Дело в том, что если просто написать код, типа этого:<br />
<br />
<pre class="brush:js">new Ext.form.Select({
label: 'Select field',
options: [
{text: 'option 1'},
{text: 'option 2'}
]
})
</pre><br />
то на айфоне (я тестировал на iPhone 3gs) не будет вызываться меню выбора опции (Picker), хотя в настольном Safari всё работает. <br />
<a name='more'></a>Поведение, на мой взгляд, несколько непредсказуемое, но методом тыка удалось выяснить, что не хватает объявления параметра <b>name</b>, т. е. если написать вот так, то всё заработает:<br />
<br />
<pre class="brush:js">new Ext.form.Select({
name: 'selectField',
label: 'Select field',
options: [
{text: 'option 1'},
{text: 'option 2'}
]
})
</pre><br />
Но и это ещё не всё! Теперь меню вызывается, но после нажатия на кнопку <b>Done</b> компоненту не применяется новое значение. В принципе, это поведение я уже могу назвать предсказуемым, поскольку в списке опций мы задали только свойство <b>text </b>, а свойство <b>value </b>не задано.<br />
Вот, как должен выглядеть, работающий без проблем, компонент <b>Ext.form.Select</b>:<br />
<br />
<pre class="brush:js">new Ext.form.Select({
name: 'selectField',
label: 'Select field',
options: [
{text: 'option 1', value: 'option1'},
{text: 'option 2', value: 'option2'}
]
})
</pre></div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-86335165992737906512010-09-15T14:31:00.000+04:002011-03-24T23:04:19.266+03:00Sencha Touch 0.95 beta<div dir="ltr" style="text-align: left;" trbidi="on">Прошлый апдейт JavaScript фреймворка <b>Sencha Touch</b> оказался просто неработоспособным, поскольку после рефакторинга был сломан основной функционал. И вот, спустя 7 дней, разработчики <b>Sencha</b> исправили свои ошибки и выпустили новую версию!<br />
Но, судя по статусам баг-репортов на <a href="http://www.sencha.com/forum/forumdisplay.php?57-Sencha-Touch-Bugs/">официальном форуме</a>, ошибки, привнесённые новым апдейтом, пофикшены не все. Что ж, это всего лишь бета, и каждый, кто берётся писать рабочие проекты на бета-версии, должен понимать и соглашаться с риском и возможными проблемами. Надеюсь, апдейт <a href="http://downloads.sencha.com/touch/sencha-touch-beta-0.95.zip">Sencha Touch 0.95 beta</a> окажется пригодным для работы, а пока остаётся только пожелать удачи разработчикам и ждать финального релиза, который, судя по всему, будет где-то в ноябре.</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-32868341401650845712010-09-14T17:56:00.000+04:002010-09-15T14:28:13.907+04:00Sencha Touch 0.94 beta: BugsК сожалению, <b>Sencha Touch 0.94 beta</b>, принеся кучу новых фич, стала, на мой взгляд, неработоспособной из-за обилия багов. Какое-то время я пытался самостоятельно делать заплатки, но новые дыры вскрывались одна за другой, поэтому я плюнул и откатился до 0.93 версии.<br />
Причём, судя по активности на форуме <a href="http://www.sencha.com/forum/forumdisplay.php?57-Sencha-Touch-Bugs">Sencha Touch: Bugs</a> перестали работать веб-приложения после обновления не только у меня.<br />
Произошло сиё безобразие, скорее всего, из-за глобального рефакторинга, о котором разработчики так хвалились в Release Notes. К сожалению, web-интерфейсы и JavaScript тяжело покрываются автоматизированными тестами (помнится, как-то раз навешевали мы на <b>ExtJS</b>-портал <a href="http://www.google.ru/url?sa=t&source=web&cd=1&sqi=2&ved=0CBgQFjAA&url=http%3A%2F%2Fseleniumhq.org%2F&ei=_3yPTJzMEtOnOMuTybkN&usg=AFQjCNHCelhj_BWssRX2H0HZCcPqhgBrRg&sig2=pLO39-elqLUYMKeu2caivw">Selenium</a>-тесты через css-селекторы, но ничего хорошего не вышло).<br />
<br />
<b>Sencha Touch 0.94 beta</b> сильно обрадовала меня своим выходом, но и не менее огорчила, когда я потратил кучу времени, пытаясь пофиксить то, что раньше работало отлично. В общем, это обновление явилось хорошим примером, что рефакторинг должен быть хорошо протестирован и надеюсь, новая версия не заставит себя долго ждать.Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-66784867142542281482010-09-08T22:16:00.000+04:002011-03-24T23:05:37.924+03:00Sencha Touch 0.94 beta<div dir="ltr" style="text-align: left;" trbidi="on">Сегодня наконец-то обновилась бета-версия, уже полюбившегося мной, JavaScript Framework'а для мобильных платформ <b>Sencha Touch</b>. Должен сказать, этот апдейт я ждал долго и вот, после месячной доработки, он доступен для свободного <a href="http://downloads.sencha.com/touch/sencha-touch-beta-0.94.zip">скачивания</a>.<br />
<br />
В этой версии были исправлены многие баги, проведён рефакторинг, улучшена производительность, произведена оптимизация под <b>Android</b> и <b>iPhone 4</b>.<br />
Полный список изменений вы можете найти в файле release-notes.html, прилагаемому к архиву <b>Sencha Touch</b>.</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0tag:blogger.com,1999:blog-1560720494131975411.post-69410659417941006712010-07-18T15:51:00.000+04:002011-03-30T15:22:12.682+04:00Автоподгрузка списка по скроллингу<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="font-family: inherit;">Итак, я решил первый технический пост не посвящать азам Sencha Touch и не стал излагать тот минимум, который необходим для создания мобильного web приложения (об этом я расскажу в следующих записях), я хочу рассказать вам о компонентах <b>Ext.List</b>, <b>Ext.util.Scroller</b>, о <b>AJAX</b>-запросах и как с помощью этого всего сделать так, чтобы по достижению дна списка подгружалась следующая порция контента.</span><br />
<br />
<a name='more'></a><i>(на момент написания использовалась <b>Sencha Touch 0.91 beta</b>)</i><br />
<br />
<span class="Apple-style-span" style="font-family: inherit;">Когда передо мной возникла эта задача, я первым делом полез в документацию Sencha Touch (</span><a href="http://www.sencha.com/deploy/touch/docs/"><span class="Apple-style-span" style="font-family: inherit;">http://www.sencha.com/deploy/touch/docs/</span></a><span class="Apple-style-span" style="font-family: inherit;">) и обнаружил, что никаких событий, связанных со скроллингом, у компонента <b>Ext.List</b> нет. Сразу после этого, я открыл исходники компонента List в поисках недокументированных возможностей (в ExtJS к этим махинация приходилось обращаться часто, поскольку стандартным набором API сделать можно далеко не всё, а вот если сделать Ext'овскому компоненту какой-нибудь адаптер, то функционал библиотеки можно существенно расширить). Покопавшись в коде, я обнаружил такой компонент, как scoller, оказавшийся на деле <b>Ext.util.Scroller</b>, у которого в документации уже присутствовали, необходимые мне, события:</span><br />
<div><ul><li><b><a href="http://www.sencha.com/deploy/touch/docs/source/Scroller.html#event-Ext.util.Scroller-scrollend" style="color: #083772; text-decoration: none;"><span class="Apple-style-span" style="font-family: inherit;">scrollend</span></a><span class="Apple-style-span" style="font-family: inherit;"> </span></b><span class="Apple-style-span" style="font-family: inherit;">- скроллирование окончено (то, что нам надо)</span></li>
<li><b><a href="http://www.sencha.com/deploy/touch/docs/source/Scroller.html#event-Ext.util.Scroller-scrollstart" style="color: #083772; text-decoration: none;"><span class="Apple-style-span" style="font-family: inherit;">scrollstart</span></a><span class="Apple-style-span" style="font-family: inherit;"> </span></b><span class="Apple-style-span" style="font-family: inherit;">- скроллирование началось</span></li>
<li><b><a href="http://www.sencha.com/deploy/touch/docs/source/Scroller.html#event-Ext.util.Scroller-touchend" style="color: #083772; text-decoration: none;"><span class="Apple-style-span" style="font-family: inherit;">touchend</span></a><span class="Apple-style-span" style="font-family: inherit;"> </span></b><span class="Apple-style-span" style="font-family: inherit;">- окончание прикосновения к экрану</span></li>
<li><b><a href="http://www.sencha.com/deploy/touch/docs/source/Scroller.html#event-Ext.util.Scroller-touchstart" style="color: #083772; text-decoration: none;"><span class="Apple-style-span" style="font-family: inherit;">touchstart</span></a><span class="Apple-style-span" style="font-family: inherit;"> </span></b><span class="Apple-style-span" style="font-family: inherit;">- начало прикосновения к экрану</span></li>
</ul><span class="Apple-style-span" style="font-family: inherit;">Далее оставалось дело за малым: получить компонент scroller нашего списка, подписаться к нему на событие </span><b><a href="http://www.sencha.com/deploy/touch/docs/source/Scroller.html#event-Ext.util.Scroller-scrollend" style="color: #083772; text-decoration: none;"><span class="Apple-style-span" style="font-family: inherit;">scrollend</span></a><span class="Apple-style-span" style="font-family: inherit;">,</span></b><span class="Apple-style-span" style="font-family: inherit;"> проверять, доскроллировали ли мы до конца, и если да, то вызывать, нужный нам, Ajax-метод.</span></div><div><span class="Apple-style-span" style="font-family: inherit;">Трудности возникли с самого первого пункта: в документации Sencha Touch отсутствовали методы или переменные для получения компонента Scroller. Пришлось открыть исходники <b>Ext.List</b> и, прибегнув к хаку, вручную извлечь, необходимый нам, скроллер:</span><br />
<pre class="brush:js">this.scroller.on('scrollend', this.onScrollEnd, this);</pre><span class="Apple-style-span" style="font-size: small;">(this - это сам наш List, а this.onScrollEnd - функция обработчика события)</span><br />
<div><br />
</div>Итак, мы подписались на события окончания скроллинга, и теперь необходимо извлечь данные о позиции скролла и данные о общей длинне скроллируемого листа, чтобы сравнить их. В событие <b><span class="Apple-style-span" style="font-family: inherit;"><a href="http://www.sencha.com/deploy/touch/docs/source/Scroller.html#event-Ext.util.Scroller-scrollend" style="color: #083772; text-decoration: none;">scrollend</a></span></b> передаётся экземпляр скроллера, из которого мы все эти данные и выпытаем:<br />
<pre class="brush:js">onScrollEnd: function(scroller) {
if(scroller.offset.y == scroller.bounds.y && !this.isLoading) {
this.isLoading = true;
this.loadContent(++this.page);
}
}
</pre><span class="Apple-style-span" style="font-family: inherit;"><br />
<b> scroller.offset.y</b> - текущее положение скроллинга<br />
<b> scroller.bounds.y</b> - общий размер скроллируемого списка<br />
<b> this.loadContent()</b> - функция подгрузки нового контента<br />
<b> this.page</b> - номер страницы<br />
<b> this.isLoading</b> - флаг загрузки (необходим, чтобы нельзя было сто раз вызвать подгрузку новго контента, пока старый не загрузился)</span></div><span class="Apple-style-span" style="font-family: inherit;">Осталось вызвать Ajax-метод и добавить, подгруженный контент, к существующему:</span><br />
<pre class="brush:js">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;
}
});
}
</pre><span class="Apple-style-span" style="font-family: inherit;">Вот, в принципе, и всё. Теперь, когда вы прокрутите список в самый низ, будет подгружаться новая порция контента. Не забудьте правильно сконфигурировать сам <b>Ext.List</b> и его <b>Ext.data.Store</b> (об этом я расскажу в следующих записях).</span></div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com2tag:blogger.com,1999:blog-1560720494131975411.post-44707530283916719972010-07-15T14:43:00.000+04:002011-03-30T15:19:50.614+04:00Вступление<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-8sE_cBMEWrU/TZMQeX8RsrI/AAAAAAAAAFo/jnPPz1ILam0/s1600/senchalogo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-8sE_cBMEWrU/TZMQeX8RsrI/AAAAAAAAAFo/jnPPz1ILam0/s1600/senchalogo.png" /></a></div>Я уже около двух лет, как активно использую в своей работе библиотеку <b>ExtJS</b> и месяц назад (как раз 15 июня) зашёл на <a href="http://sencha.com/">extjs.com</a>, чтобы скачать свежую версию, и бнаружил... Собственно говоря, я обнаружил новый продукт - <b>Sencha</b>, объединивший в себе <b>ExtJS</b>, <b>jQTouch</b> и <b>Raphaël</b>.<br />
И вот, спустя почти месяц, мне-таки подвернулся проект, который заключается в разработке web приложения под iPhone, и я, конечно же, сразу же взялся изучать <b>Sencha Touch</b> (заказчику же сообщил, что имею опыт разработки на этой библиотеке). Как оказалось, после <b>ExtJS</b> новенький <b>Sencha Touch</b> учится за полдня, и никаких проблем не составило выдавать желаемое (наличие опыта разработки <b>Sencha Touch</b>) за действительное. Через 4 дня работы над этим проектом я приобрёл себе <b>iPhone</b> (да, я начал с эмулятора) и понеслось...<br />
<br />
В общем, как вы, наверное, догадались из вступления, речь в блоге пойдёт о моём опыте разработки мобильных приложений (<b>web apps</b>) с использованием библиотеки <b>Sencha Touch</b> и вкусностей свежеиспечённых <b>HTML5</b> и <b>CSS3</b>. Надеюсь, информация окажется полезной!</div>Anonymoushttp://www.blogger.com/profile/07465866216376125749noreply@blogger.com0