UI.Layout

10 Декабрь 2009

Обычно я так называю статьи в которых выкладываю собственные плагины, но сегодня не тот случай. Я буду рассказывать о плагине который написали Fabrizio Balliano и Kevin Dalman

Когда-то давно, когда только вышла первая бэтка YUI-Ext которая сейчас переросла в огромный фреймворк Ext JS, я увидел насколько красивыми могут быть лайауты ;) (кто знает как красиво перевести это слово, согласно контексту, милости прошу в каменты). Я скачал эту бэтку, сырую как подвал, открыл исходники блога Jack'a Slocum'a, потому что документации еще не было и наваял небольшой сайтик который НЕ стал моим блогом, как задумывалось, но перевернул мое отношение к javascript'y.

Работая в Инкоме, я хотел вернутся к этой красоте и простоте, но этот фреймворк идеально подходит для создания бизнес приложений с нуля и никаким боком не касался моего тогдашнего проекта - Киевстара. Раз выпало потрогать свежую версию Ext JS 2.3, когда к нам пришел проект от ГАИшников на создание веб-морды для базы данных угона. Куски того что получилось можно наблюдать тут и тут

А недавно я столкнулся с одним очень интересным дополнением к jQuery UI и как вы поняли это был jQuery UI.Layout Plug-in, который позволяет делать лайауты похожие на Ext JS. Конечно в силу молодости UI.Layout глючная и не много функциональная, но подает большие надежды. Под "не многофункциональностью" я понимаю отсутствие всяких всяких красивых плюшечек (табиков, кнопочек, менюшечек, панелек) как в Ext JS. Хотя это ведб не лайауты, а виджеты, правильно? UI.Layout интегрирована с табами (их даже можно сортировать) и аккордеоном из jQuery UI, а также есть пример создания кнопок для открывания (стрелочка) и удерживания (кнопка) блока. Это уже хорошо :)

Вот пример плагина на стандартных настройках, без какого либа дополнительного CSS, больше примеров вы сможете посмотреть на сайте плагина.

Center pane
North pane
West pane
South pane
East pane

Updated 08.07.11

К сожалению все потуги авторов зарелизить версию 1.3 тщетны :( Плагин сейчас находиться в версии 1.3RC29.15. Но не смотря на это плагин очень приятен в использовании. Он поддерживает возможность создавать неограниченного количество вложенных лайаутов, на каждую анимацию есть по два call-back'a в начале и в конце события, в следующей версии будет I18N, зачатки которой уже есть сейчас, 78 настроек (включая call-back) для каждого блока, возможность сохранения состояния в куках и многое другое.

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

Categories: CSS, JavaScript, Программирование Tags: , ,
  1. slamer
    11 Декабрь 2009 в 00:16 | #1
    Ответить | Цитата
    FF правильно говорит. Слово "помучаться" не совсем корректно, надо писать "помучиться")) А плагин действительно симпатичный и полезный.
  2. deerua
    11 Декабрь 2009 в 00:33 | #2
    Ответить | Цитата
    лайаут - из полиграфии что, вёрстка. А есть примеры бизнес логики с каким-то из перечисленных выше ЮИ?
  3. CTAPbIu_MABP
    11 Декабрь 2009 в 00:47 | #3
    Ответить | Цитата
    Простите господа, за неработающий сайт - обновлял :) @slamer поправил @deerua не понял с каким именно? с Ext-JS или с какими-то виджетами из jQueryUI?
  4. Морозов
    11 Декабрь 2009 в 09:45 | #4
    Ответить | Цитата
    Мне в последнее время стало казаться, что с наращиванием UI-ных мощностей jQuery, эта библиотека всё ближе и ближе подходит к тупику или пределу, который связан с ее довольно неудобным для описания UI API. Он удобен для манипуляции готовым документом, но выглядит по меньшей мере странно в части манипуляции собой же порожденными элементами. Я дальше попробую объяснить на примерах:
    Пример 1. Имеем готовый блок, хотим его красиво скрыть. Никаких изменений структуры документа делать не нужно. 
    
$(".selector").fadeIn("slow");
    Получается вполне читаемый и лаконичный код, ужасно удобно, потому что даже не надо знать, как и что устроено внутри, чтобы приделать спецэффекты для своей странички.
    Пример 2. Нужно реализовать элемент стандатный элемент UI, прогресс-бар. Берем библиотеку UI, она сама сгенерирует нужные DOM-элементы и назначит им необходимое представление и поведение. 
    
// создаем прогресс-бар
$(".selector").progressbar();

// где-то в другом блоке кода вызываем обновление прогресс-бара
$(".selector").progressbar("option", "value", 37);
    Мне, по правде сказать, не очень нравится писать такой код, как во второй строке. Но, поскольку jQuery привносит с собой только один тип объектов — jQuery-объект — никакого более удобного интерфейса для него придумать нельзя. Зато гораздо читабельнее и привычнее в том же ExtJS, Google Maps API и т.п.: 
    
var map = new GMap2(...);
map.setCenter(...);
map.addOverlay(new GMarker(...))
    Это я все к чему: не считашь ли ты, что стоит использовать jQuery только для Ajax, спецффектов и т.д., а для работы со стандартными элементами UI использовать что-то более для этого подходящее?
  5. CTAPbIu_MABP
    11 Декабрь 2009 в 11:54 | #5
    Ответить | Цитата
    @Морозов Ух...
    всё ближе и ближе подходит к тупику
    да, у меня это ощущение уже давно. А теперь попробую обьяснить почему
    Мне не нравиться что каждый объект IU атомарный, то есть сам в себе. Я надеюсь ты понимаешь что означает "объект в себе". Это обусловлено идеологией jQuery возвращать объкт себя.
    Мне очень не нравиться что пытаются обойти эту идеологию сами же авторы библиотеки которые делают метод который в зависимости от параметров является и конструктором и сетером и богом одновременно. Это хорошо иллюстрирует второй кусок твоего кода.
    Другие плагины делают иначе 
    
$(".selector").plugin("methodName",{/*params*/})
    Это нарушает инкапсуляцию объекта плагина, более того далеко не ко всем методамможно получить доступ, но я видел более правильный подход 
    
$(".selector").plugin("setNewParams",{/*params*/}).plugin("refresh")
    Это уже лучше но все еще неправильно.
    Моё ИМХО что это должно выглядеть так как я описал вот тут, на селектор к которому создан плагин навешивуются события, которым передаются параметры 
    
$(".selector").trigger("myCustomEvent",{/*param*/})
    это не нарушает ни инкапсуляцию, ни идеологию, и дает достаточно гибкий механизм передачи параметров во внуть плагина
    Из вышесказанного: я считаю что впринципе не надо отказываться от JUI и он способен на создание нормального UI но не в таком виде как сейчас
  6. Морозов
    11 Декабрь 2009 в 12:31 | #6
    Ответить | Цитата
    @CTAPbIu_MABP Да, подписка на события — это довольно правильный способ взаимодействия компонентов: низкая связность, возможность детальной декомпозиции и все такое. Но тем не менее, тот факт, что jQuery-объекты — "объекты в себе", не позволяет по-человечески создавать классы (классы плагинов), описывать их публичные интерфейсы и в последствии позволять их использовать.
    Смысл в том, что jQuery реализует поверх ОО-языка javascript свой язык запросов, который в принципе не предназначен для описания каких-то повторно используемых элементов кода, таких как классы в привычном ОО-понимании. Язык запросов описывает последовательность действий, и именно поэтому спецэффекты так удачно описываются на нем.
    Кроме того, отсутствие возможности описывать интерфейсы плагинов на уровне кода (по аналогии с интерфейсами классов) и отсутствие стандартизации (открытое решение с большим сообществом) приводит к тому, что каждый автор пишет свой плагин в той манере, как ему нравится, и только подробная документация делает этот код доступным для использования.
    Действительно, JUI быть должен и будет, просто пока не поздно, идеологам стоило бы задуматься о дополнительном API, который бы не позволил разрастись нынешней куче разношерстных решений до неуправляемого состояния.
  7. CTAPbIu_MABP
    11 Декабрь 2009 в 14:34 | #7
    Ответить | Цитата
    @Морозов вообщето я где-то видел рекомендации по написанию плагинов а-ля стандарт, тока все на него срали. я думаю что хорошим толчком к повышению качества кода было бы брать в репозитоий плагины которые соответствуют этому стандарту. с другой стороны далеко не все плагины в репозитории есть.
    Слушай, если тебе близка идеология создания плагинов как объектов может тебе использовать classy query или нечто в этом духе
  8. alexpts
    27 Декабрь 2009 в 16:49 | #8
    Ответить | Цитата
    Пример работы интересный
  9. CTAPbIu_MABP
    27 Декабрь 2009 в 21:07 | #9
    Ответить | Цитата
    надо плагин обновить а то уже rc16 вышел
Комментирование отключено.