Построение гибких интерфейсов с помощью макетов

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

Текстовые шаблоны на основе HTML-кода со специальными переменными позволяют создавать внешнее представление для объектов (верстку). Верстка, получаемая с помощью текстовых шаблонов, являются статичной, поэтому она не способна обрабатывать внешние события, например, щелчки мыши. Добавить поведение шаблону можно с помощью системы макетов, доступной в API Яндекс.Карт.

Макет – это объект, позволяющий создавать динамическое внешнее представление для объектов-оверлеев, способное реагировать на воздействия со стороны пользователя.

Макеты реализуют интерфейс YMaps.ILayout, который состоит из трех методов:

• onAddToParent() – вызывается при добавлении макета в родительский элемент;
• onRemoveFromParent() – вызывается при удалении макета из родительского элемента;
• update() – обновляет макет.

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

function ExampleLayout (context, map, owner) {
    var text = owner.name || "";
    this.$nodes = YMaps.jQuery("<div></div>").text(text);
 
    this.onAddToParent = function (parentNode) {
        this.$nodes.appendTo(parentNode);
    };
   
    this.onRemoveFromParent = function () {
        this.$nodes.remove();
        this.$nodes = null;
    };
   
    this.update = function () {}
}

В конструктор макета передается три параметра:

• context – контекст;
• map – указатель на карту;
• owner – cсылка на объект (метку, балун, и пр.), для которого создается макет.

Эти параметры позволяют с легкостью манипулировать как самим объектом, так и его отображением на карте. В классе ExampleLayout используется только параметр owner, который позволяет получить доступ к названию объекта.

Применим созданный макет к метке. Создать макет класса ExampleLayout можно с помощью вспомогательного класса YMaps.LayoutTemplate. Макеты присваиваются объекту через стиль по аналогии с текстовыми шаблонами:

var placemark = new YMaps.Placemark(map.getCenter(), {
    style : {
        balloonContentStyle : {
            template : new YMaps.LayoutTemplate(ExampleLayout)
        }
    }
});
placemark.name = "Имя объекта";
map.addOverlay(placemark);

 

Классы YMaps.LaoutTemplate и YMaps.Template в целом очень похожи, потому что оба реализуют интерфейс YMaps.ITemplate. Отличаются эти классы только входными данными в конструктор: в одном случае это HTML – строка с переменными, а во втором – указатель на класс макета.

Можно реализовать интерфейс YMaps.ITemplate и получить свою собственную «фабрику» макетов. На вход конструктору может приходить представление в каком-то особенном формате (например, объекты определенного класса), а на выходе – макет. Главное, реализовать метод build(), который будет преобразовывать данные в макет.

Также в API есть несколько предопределенных интерфейсов макетов для соответствующих объектов: YMaps.IBalloonLayout для балуна, YMaps.IHintLayout для всплывающей подсказки и YMaps.IPlacemarkLayout для значка метки.

Реализовав интерфейс YMaps.IBalloonLayout, можно полностью изменить внешний вид балуна. Созданный макет будет обрабатывать событие закрытия балуна, а также можно будет установить контент с помощью стандартного метода setBalloonContent().

На странице примеров документации доступен пример макета для балуна.

Методы для установки контента setBalloonContent(), setHintContent() и setIconContent() в качестве аргумента также могут принимать макет. Вы можете отключить автозамену png-изображений на элементы div, которая в API Яндекс.Карт делается автоматически для браузера Internet Explorer 6.x, если создадите свой макет:

function SafeLayout (text) {
    this.onAddToParent = function (parentNode) {
        this.$nodes = YMaps.jQuery(text);
        this.$nodes.appendTo(parentNode);
    };
   
    this.onRemoveFromParent = function () {
        this.$nodes.remove();
        this.$nodes = null;
    };
   
    this.update = function () {}
}
 
var placemark = new YMaps.Placemark(map.getCenter());
placemark.setBalloonContent(new SafeLayout("<img src=\"http://img.yandex.net/i/www/logo.png\"/>"));
map.addOverlay(placemark);

 

Подведем итог. С помощью макетов можно изменять внешний вид объектов-оверлеев на карте и делать их интерактивными, обрабатывая различные события и действия пользователя. Макеты позволяют получить полный контроль над версткой объектов, что позволяет создавать любое внешнее представление для оверлеев. Область применения макетов не ограничивается только сменой внешнего вида, их можно применять и в других прикладных задачах, например, в статье Создание простого редактора меток макет использовался для создания интерфейса редактирования.