MyFreeWeb.ru

Недавно на Хабрахабре проскакивала новость про обновление jQTouch. Это такой плагин к известному JavaScript-фреймворку jQuery, позволяющий очень просто создавать веб-приложения для тачфонов - телефонов с сенсорным экраном, причём с пальцеориентированным интерфейсом. Каким и является iPhone. А так же HTC Hero, Dream, Magic - на Android - и куча разных WM-коммуникаторов с оболочками. Вот последнее у меня есть.

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

Я добавил в head вот это:

<script type="application/x-javascript" src="/media/jqtouch/jquery.1.3.2.min.js" charset="utf-8"></script>
<script type="application/x-javascript" src="/media/jqtouch/jqtouch.min.js" charset="utf-8"></script>
<style type="text/css" media="screen">@import "/media/themes/jqt/theme.min.css";
@import "/media/jqtouch/jqtouch.min.css";</style>

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

После подключения надо инициализировать интерфейс. Это делается функцией $.jQTouch() - и всё, больше ничего не надо писать на JS. Если, конечно, не надо AJAX'ом подгружать ничего. У меня вот так:

$.jQTouch({
    icon: 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png',
    statusBar: 'black-translucent',
    preloadImages: [
        '/media/themes/jqt/img/chevron_white.png',
 *пути_к_всяким_картинкам*
        ]
});

Разумеется, здесь надо подправить загружаемую графику на ту, что ты чаще используешь. Для скорости. И иконку, она будет иконкой приложения в меню iPhone.

Теперь можно просто использовать обычные XHTML-теги. Но сначала расскажу о самом главном. Страницы - главное в приложении. Страница представляет из себя простой блок (div) c (понятным) id. Первый див будет первой страницей, которая будет открываться при нажатии на иконку в телефоне. Чтобы переходить между страницами, на первой должна быть ссылка на вторую, то есть a href="#id_страницы".

Для создания верхнего бара делаем вложенный в страницу div class="toolbar". Заголовок в нём - просто обычный h1. Кнопка "назад" - a class="back button" href="#id_задней_страницы". Вообще, чтобы узнать больше о элементах интерфейса, смотрите исходный код демки.

А теперь самое главное - интеграция с Django. Мы же делаем тач-версию блога, так? Я не знаю, как у тебя устроены модели и виды, но у меня список постов - content.object_list. Просто делаем шаблон, в котором в head вся инициализация, описанная выше, а в body... Особая Django'вская магия ;) Начнём с главной страницы. Это - список постов блога. По нажатию на один из них - страница с самим постом. Логично, да?

<div id="main">
  <div class="toolbar"><h1>MyFreeWeb Touch</h1></div>
  <div id="content">
    <ul>
      {% for post in content.object_list %}
      <li class="arrow"><a href="#{{ post.slug }}">{{ post.name }}</a></li>
       {% endfor %}
    </ul>
  </div>
</div>

Мало кода, да? Просто заголовок и список постов. А теперь делаем настоящую магию. Для каждого поста создаём свою страницу с id равным его slug (короткое имя на латинице, с _ вместо пробелов, и без лишних символов. Переводить как это слово - не знаю.) - мы ссылались на эти страницы в главной.

{% for post in content.object_list %}
<div id="{{ post.slug }}">
  <div class="toolbar">
    <a class="back button" href="#main">Назад</a>
      <h1>MFW:{{ post.name }}</h1>
  </div>
  <div class="post">{{ post.text|safe|urlize }}</div>
  <div class="info">Написан {{ post.date }}{% if post.tags %} | 
Теги (открываются в обычной версии):{% for tag in post.tags.filter %}
<a href="/tag/{{tag.name}}">{{ tag.name }}</a> {% endfor %}{% endif %}</div>
</div>
{% endfor %}

Да вот и всё. Вот так Это выглядит на моём AnyDATA ASP-505A:

А вот как на iPhone, спасибо @_corwin_ (follow! follow!!!):

Короче, теперь веб-приложения для iPhone и коммуникаторов вообще делать очень просто. Вот такие дела.