суббота, 13 февраля 2010 г.

AJAX с cl-closure-template. Часть 2.


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

Тут хотел бы обратить внимание, что подобной красоты нельзя добиваться с помощью тем jquery UI, при чём, это принципиальный момент. jquery UI в некоторых случаях модифицирует оригинальную разметку, добавляя к ней несколько своих элементов, в других вообще её никак не изменяет, полагаясь полностью на использование CSS. Но для создания подобных красивых вещей необходимо создавать достаточно сложную разметку фактически ещё в момент генерации страницы. Таким образом нельзя на сервере создать каркас, а потом доработать его с помощью jquery UI до подобного уровня. Как бы факт, что приложения на базе jquery UI не хватает элегантности.

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

Сначала нужен шаблона для каркаса панели:
{template panel}
<table class="panel">
<tbody>
<tr>
<td class="TL"></td>
<td class="TM">
<span class="TML">{$title |noAutoescape}</span>
{if $close}
<div class="TRx"></div>
{/if}
</td>
<td class="TR"></td>
</tr>

<tr>
<td class="ML"></td>
<td class="MM">{$body |noAutoescape}</td>
<td class="MR"></td>
</tr>

<tr>
<td class="BL"></td>
<td class="BM"></td>
<td class="BR"></td>
</tr>
</tbody>
</table>
{/template}
Данный шаблон принимает три параметра:
  • close - признак того, надо ли создавать кнопку для закрытия панели.
  • title - заголовок панели, в данном параметре можно передать не только текст, но и вообще произвольную разметку
  • body - разметка для основного содержимое панели
CSS для данного шаблона можно посмотреть здесь (.panel). В оригинальном варианте автор использовал разметку на базе элементов div, но в этом случае требуется доработка панели после загрузки с помощью JavaScript-напильника, поэтому я выбрал вариант разметки на базе table.

В предыдущем сообщении я ввёл шаблон editable-text и с помощью него создавал пару простейших элементов управления. Использовался он следующим образом:
{call editable-text data="$name" /}
Теперь, поместить результат работы этого шаблоны в красивую панельку можно следующим образом:
{call panel}
{param title: 'Name' /}
{param close: true /}
{param body}
{call editable-text data="$name" /}
{/param}
{/call}
Из чего видно, что результат вызова шаблона можно использовать как параметр для другого шаблона. Теперь можно не особо напрягаясь плодить подобные панельки в неограниченных колличествах :)

Продолжение следует.

6 комментариев:

  1. > Но для создания подобных красивых вещей необходимо создавать достаточно сложную разметку фактически ещё в момент генерации страницы.

    Для меня это совсем не очевидно. Более того, очень даже спорно ;)

    Кстати, вместо убогого jQuery UI посмотри лучше на какой-нибудь ExtJs.

    ОтветитьУдалить
  2. > Для меня это совсем не очевидно.
    > Более того, очень даже спорно ;)

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

    А с ExtJs я начинал и помню мне не очень понравилось, тем более, что ещё и тормозила (хотя и не так, как Dojo).

    ОтветитьУдалить
  3. >> очень красивое приложение.

    Очень жуткое веб-приложение :

    http://classic.my.eyeos.org/

    ОтветитьУдалить
  4. Это то, к чему могут привести игры с панельками и окошками :) Я был поражен.

    ОтветитьУдалить
  5. @quasimoto

    В общем, в чем заключается мысль я не понял :(

    ОтветитьУдалить