Заметки с тегом «yui»

Рецепт приготовления YUI 3 приложения

В блоге «Yahoo! User Interface» появилась большая статься о создании приложений под YUI3.

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

Оставте свой комментарий

CSS Grid — модульная сетка в YUI3

CSS Grid появился в YUI3 еще когда пакет был на ранней стадии тестирования и перекочевал туда из второй версии YUI. Он открывал широкие перспективы перед программистами верстальщиками в организации структуры страницы. Можно было делить страницу или блок на колонки, сменой всего лишь одного класса менять их местами и много другое. Там применялась обычная техника позиционирования через float: left или float: right.

Однако через некоторое время после официального выпуска разработчики объявили этот компонент устаревшим и не рекомендовали его применять в реальных проектах на базе YUI3.

The current Grids system was designed with the needs of older browsers (including Firefox 2) in mind. With Firefox 2 coming off the A-Grade in the next GBS update (due in July), there are structural changes that we want to make in engineering a successor to the 2.x version of Grids.

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

Теперь CSS Grid ориентирован только на работу в современных браузерах и основан на блоках с display: inline-block.

В место гибкости позиционирования колонок слева или справа (сейчас все колонки располагаются только слева направо согласно своему порядку в документе) мы получили возможность выравнивать их по вертикали с помощью vertical-align.

Как и прежде колонке необходимо явно задать ширину или можно воспользоваться заготовленными классами 24-х колончатой модульной сетки. Имя класса задает пропорции блока относительно родительского контейнера.

<div class="yui3-g">
    <div class="yui3-u-1-4">
        <div>колонка 25%</div>
    </div>
    <div class="yui3-u-1-2">
        <div>колонка 50%</div>
    </div>
    <div class="yui3-u-1-8">
        <div>колонка 12.5%</div>
    </div>
    <div class="yui3-u-1-8">
        <div>колонка 12.5%</div>
    </div>
</div>

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

Интересным моментом этого компонента является то, как разработчики легко избавились от нежелательных зазоров в несколько пикселей между колонками. Так как элементы уже не блочные, то лишние пробелы в коде между блоками с классом yui3-u не игнорируются, а учитываются при отрисовке, как если бы это были пробелы между словами. От этих артефактов можно избавиться, удалив эти пробелы и пожертвовав читаемостью кода. Но такой пробел мог бы случайно возникнуть на любом этапе разработки. В Yahoo поступили гораздо хитрее. Все зазоры между колонками убираются с помощью правил letter-spacing или word-spacing, в зависимости от браузера.

Комментарии к заметке: 8

Инфраструктура виджетов в YUI3

Интересную инфраструктуру для создания виджетов предоставляет фреймворк YUI3. В заметке я хочу кратко описать шаблон для создания и назначение методов жизненного цикла.

Пример минимального виджета:

YUI.add("mywidget", function (Y) {

    var App = Y.namespace("App");

    /* MyWidget конструктор */
    function MyWidget(config) {
        MyWidget.superclass.constructor.apply(this, arguments);
    }

    /* Имя виджета, которое будет использоваться для генерации названий классов и т.п. */
    MyWidget.NAME = "mywidget";

    Y.extend(MyWidget, Y.Widget, {
        initializer: function (config) {},
        destructor: function () {},
        renderUI: function () {},
        bindUI: function () {},
        syncUI: function () {}
    });

    App.MyWidget = Y.Base.build(MyWidget.NAME, MyWidget, []);

}, "0.1", {use: ["widget"]});

Важными методами жизненного цикла виджета являются:

  • initializer

    Метод автоматически вызывается конструктором и может быть использован для настойки экземпляра. Параметры, с которыми был вызван конструктор, передаются без изменений. Зачастую метод может оставаться пустым.

  • destructor

    Метод вызывается во время удаления виджета и используется для очистки экземпляра от созданных DOM-элементов и обработчиков событий. Если все DOM-элементы создавались внутри «bounding box», то нужно будет только «занулить» ссылки на них. Сами элементы и обработчики событий будут удалены автоматически.

  • renderUI

    Часть реализации «renderer», ответственная за создание представления виджета. Метод добавляет DOM-элементы, которые необходимы виджету, или изменяет существующие.

  • bindUI

    Часть реализации «renderer», ответственная за подключение обработчиков событий изменения атрибутов или DOM-событий.

  • syncUI

    Часть реализации «renderer», ответственная за обновление интерфейса виджета на основании его текущего состояния.

Получение данных о состоянии виджета в методах renderUI, bindUI, syncUI выполняется с помощью метода get, наследованного у класса Attribute. Следует отметить, что если используется статическое поле ATTRS у виджета, которое определяет начальное состояние, то в нем следует описать все используемые атрибуты. Если какой-то из них не будет описан, то получить доступ к нему не будет возможности.

Наиболее часто используемыми атрибутами, пожалуй, являются boundingBox и contentBox. Первый содержит ссылку на объект типа Node, который служит контейнером для виджета, а второй — ссылку на контейнер содержимого. Задать разметку для этих контейнеров можно через конфигурационные свойства BOUNDING_TEMPLATE и CONTENT_TEMPLATE соответственно. По умолчанию для них используется просто элемент DIV.

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

YUI().use("mywidget", function (Y) {
    var widget = new Y.App.MyWidget({
        a: 10,
        title: "Sample widget"
    });
    widget.render();
});

В конструкторе указываются, если это необходимо, конфигурационные параметры виджета. Метод render может быть вызван с параметром, определяющий DOM-элемент, где будет отображен виджет. Если он вызван без параметров, как в примере, то виджет отображается в элементе BODY.

Оставте свой комментарий

Модули в YUI3

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

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

YUI.add("mymodule", function(Y) {
    Y.MyModule = function() {
        // конструктор
    };
});

В дальнейшем он используется так:

YUI().use("mymodule", function (Y) {
    var o = new Y.MyModule();
});

Основная задача шаблона — это изолировать модуль и подключать его к экземпляру YUI (переменная Y в YUI.add и YUI.use) только при необходимости.

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

YUI({
    modules: {
        "mymodule":{
            // полный путь к файлу
            fullpath:"mymodule.js",
            // зависимости модуля
            requires: ["dd", "widget"]
        }
    }
}).use("mymodule", function () {
    // код приложения
});

Указав необходимые модулю зависимости (requires) мы тем самым позволяем загрузчику оптимизировать список файлов, которые требуется загрузить и минимизировать число HTTP подключений.

Так же эти зависимости нужно указать в YUI.add

YUI.add("mymodule", function(Y) {
    Y.MyModule = function() {
        // конструктор
    };
}, "1.0", {requires: ["dd", "widget"], use: ["dd", "widget"]});

Данные, которые передаются при объявлении, указывают на то, что требуется для работы модуля, когда он загружен и используется в методе YUI.use. Так код модуль может быть явно подключен на странице.

Оставте свой комментарий