Polymer Dart

Cоздание собственных элементов

29 March 2014 г. 18:11:50

Создание собственных HTML элементов используя Polymer

Вы можете самостоятельно создавать собственные HTML элементы, определяя внешний вид и/или поведение в семантике HTML.

Пользовательские элементы это одна из возможностей Polymet - нового типа библиотеки построенной на Web компонентах. Polymer.dart это имплементация Polymer в Dart. (Polymer является Web UI)

Пример

Установка Polymer.dart

Подключение Polymer.dart в вашем приложении

Создание экземпляров пользовательского элемента

Объявление пользовательского элемента

Предоставление шаблона для пользовательского элемента

Предоставление скрипта для пользовательского элемента

Переопределение методов жизненного цикла

Связывания данных

Настройка и объявление обработчиков событий

Стили пользовательских элементов

Пример

Ниже пример приложения, в голубой области показан пользовательский элемент созданный при помощи Polymer.

Попробуйте!. Запускайте и останавливайте секундомер. Сбросить секундомер в 00:00 можно при помощи кнопки Reset.

Чтобы поместить пользовательский элемент на HTML страницу, необходимо импортировать файл где объявлен элемент и использовать имя элемента в виде HTML тэга.

<link rel="import" href="tute_stopwatch.html">
...
<tute-stopwatch></tute-stopwatch>

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

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

Пользовательский элемент Polymer

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

Обзор файлов в примере

Вот основные иходные файли используемые для реализации примера секундомера:

index.html Основной HTML файл приложения. Включает начальный скрипт загрузки Polymer и инициализацию пользовательского элемента

tute_stopwatch.html HTML код определяющий пользовательский элемент

tute_stopwatch.html Класс Dart который объявляет пользовательский элемент

Следующая диаграмма показывает структуру приложения и использования пользовательских элементов.

Схема приложения polymer

Установка Polymer.dart

Для использования возможностей предоставленных в Polymer.dart, вам надо установить пакет Polymer. Если вы не знакомы с установкой пакетов, прочтите стать об установке, в ней рассказываются детали процесса установки.

Вкратце для установки пакета Polymer требуется:

  • Добавить в список зависимостей приложения требуемый пакет polymer в файле pubspec.yaml*. YAML чувствителен к отступам, поэтому проследите чтобы пакет был добавлен как показано ниже

Требуется пакет polymer

  • Запустите pub get, который рекурсивно установит polymer.dart и все остальные пакеты от которых он зависит. Если вы используете Dart Editor, можете просто сохранить pubspec.yaml и редактор автоматически запустит pub get за вас.

Подключение Polymer.dart в вашем приложении

Также для использования возможностей Polymer.dart в частности определения пользовательских элементов Вам понадобиться включить Polymer как на стороне HTML приложения, так и на стороне Dart.

  • В главном HTML файле вашего приложения выполните экспорт package:polymer/init.dart внутри тэга <script> секции <head>. Этот скрипт содержит функцию приложения main() для инициализации Polymer.

Инициализация скрипта polymer

  • Добавьте файл packages/browser/dart.js в главный HTML файл вашего приложения внутри секции <head>.

Скрипт начальной загрузки

  • В коде Dart надо импортировать библиотеку Polymer:

Библиотека Polymer

Создание экземпляров пользовательского элемента

Для создания пользовательского элемента используется имя элемента как будто это обычный HTML тэг. В этом примере тэг называется tute-stopwatch

Произвольный тэг

Рекомендуется объявлять пользовательский элемент в отдельном файле и импортировать его в HTML как было показано, при помощи link [rel="import"]

Объявление пользовательского элемента

Объявление элемента <tute-stopwatch> происходит в файле tute_stopwatch.html. Пользовательский элемент должен быть объявлен в своем собственном файле и он и включен вместе с остальными файлами. В HTML файле, содержащем объявление пользовательского элемента, нет нужды создавать тэги <html>, <head>, или <body>.

Для объявления пользовательского элемента используется тэг <polymer-element> внутри которого предоставляется имя элемента.

<polymer-element name="tute-stopwatch">
...
</polymer-element>

Пользовательский элемент должен содержать хотя-бы один дефис (-). Мы рекомендуем использовать какой-то специфический признак, чтобы избежать конфликта между элементами созданными другими и чтобы помочь идентифицировать проект в котором элемент создается. Например, для учебного пособия по пользовательским элементам используется префикс tute.

Внутри тэга <polymer-element> Вы можете создать шаблон (внешний вид) и скрипт (поведение). Виджеты пользовательского интерфейса, такие как секундомер используют и шаблон и скрипт, хотя это и не обязательно. Шаблоны со скриптами и без шаблона являются чисто функциональными. А пользовательские элементы с шаблоном, но без скрипта полностью визуальными.

<polymer-element name="tute-stopwatch">
<template>
...
</template>
<script type="application/dart" src="tute_stopwatch.dart">
</script>
</polymer-element>

<template>

Определяет структуру пользовательского элементом и является пользовательским интерфейсом. Шаблон может включать любой валидный HTML код внутри тэга <template>. При создании экземпляра пользовательского интерфейса, экземпляр создается из шаблона. Шаблон может включать CSS стили внутри тэга <Style>

<script>

Определяет скрипт Dart. Для пользовательского элемента скрипт Dart представляет собой класс Dart который определяет поведение элемента. Обычно класс определяет некоторые методы жизненного цикла и предоставляет обработку событий которые соединяют пользовательский интерфейс с программным поведением. В этом примере скрипт находится в tute_stopwatch.dart.

Предоставление шаблона для пользовательского элемента

Вот код шаблона для элемента tute-stopwatch:

Шаблон элемента Polymer

В шаблоне tute-stopwatch используется тэг <styles>, хотя это и не обязательно. Эти стили находятся внутри области видимости элемента, они влияют только на внешний вид пользовательского элемента и вложенных элементов. Больше о стилях пользовательских элементов можно прочитать в разделе Стили пользовательских элементов.

Остальная часть кода внутри тэга <template> это обычный HTML за несколькими исключениями:

{{counter}} Данный синтаксис используется в Polymer для связи данных в Dart с HTML страницей. Двойные фигурные скобки также известны как “Двойные усы”
on-click Используется в Polymer для декларативного сопоставления событий, которое позволяет Вас добавлять обработчики элементов пользовательского интерфейса. **on-click** настраивает обработчик события для нажатия мышки. В Polymer есть сопоставления для остальных типов, таких как **on-input** для изменения текстовых полей

Давайте взглянем на структуру кода Dart прежде чем погрузимся в детали связывания данных, обработки событий и областях действия CSS.

Предоставление скрипта для пользовательского элемента

На стороне Dart классы определяют поведение пользовательских элементов. Вы ассоциируете класс Dart с пользовательским элементом при помощи аннотации @CustomTag и имени пользовательского элемента.

Назначение файлов  polymer

Эта диаграмма показывает внешний вид класса TuteStopwatch:

Диаграмма класса tute-stopwatch

Любой класс Dart являющийся элементом Polymer должен быть унаследован от PolumerElement.

Класс может реагировать на события при помощи переопределения методов жизненного цикла. Например класс TuteStopwatch переопределяет метод enteredView(), который вызывается когда элемент добавляется в DOM, то есть при инициализации приложения.

Метод start() является обработчком нажатия кнопки Start. Обработчик декларативно связан с кнопкой. Обратитесь к разделу декларативная настройка обработчиков событий чтобы получить больше информации.

Переопределение методов жизненного цикла

Для пользовательских элементов существует четыре события жизненного цикла, которые можно переопределить

**created()** Вызывается при создании пользовательского элемента
**enteredView()** Вызывается когда экземпляр пользовательского элемента добавляется в DOM
**leftView()** Вызывается когда экземпляр пользовательского элемента выгружается из DOM
**attributeChanged()** Вызывается при создании, удалении или изменении атрибута пользовательского элемента, например **clаss**

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

Приложение секундомера переопределяет метод enteredView() потому что ему требуется ссылка для каждой кнопки, которая из которых может быть как активна так и неактивна. Кнопки создаются когда пользовательский элемент tute-stopwatch добавляется в DOM, таким образом ссылки на них будут доступны при вызове метода enteredView().

void enteredView() {
super.enteredView();
startButton = $['startButton'];
stopButton = $['stopButton'];
resetButton = $['resetButton'];
stopButton.disabled = true;
resetButton.disabled = true;
}

Этот кода использует автоматический поиск узла Polymer, для добавления ссылки для каждой кнопки. Каждый узел пользовательского элемента отмечен атрибутом id, таким образом можно ссылаться на него используя ID $['ID'].

Связывания данных

Для встраивания данных из Dart в станицу, при объявлении пользовательских элементов в HTML, используются двойные фигурные скобки. Для встраивания данных из Dart используется аннотация @observable. Вот как выглядит встраивание счетчика counter.

Связывание данных Polymer

Елемент tute-stopwatch использует для обработки событий каждую секунду Timer. Когда таймер срабатывает он вызывает метод updateTimer(), модифицирующий строку counter. Polymer берет на себя обновление новой строки в HTML на странице.

Такой тип связи называется односторонняя связь, так как изменение данных может происходить только на стороне Dart. Polymer также поддерживает двухстороннее связывание. В двухстороннем связывании при изменении данных на стороне HTML, например при вводе данных в input, эти изменения так же происходят и в Dart. Больше информации о двустороннем связывании данных и примеры использования можно найти в статье Двухсторонняя привязка данных используя Polymer

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

{{myObject.aProperty}} Доступ к свойствам
{{!empty}} Операторы, например логический оператор *не*
{{myList[3]}} Индексированный список
{{myFilter()}} Фильтрация данных

Настройка и объявление обработчиков событий

В этом примере три кнопки, каждая из них имеет собственный обработчик событий написанный на Dart, но событие привязывается к кнопке в HTML.

Настройка обработчиков событий

Для обработки нажатия кнопки мыши в HTML используется атрибут on-click соответствующего HTML элемента. Значение атрибута должно содержать имя метода класса, в котором объявлен элемент. Когда пользователь нажимает кнопку, этот метод вызывается с тремя параметрами

  • Event - содержит информацию о событии, такую как тип события и когда событие произошло

  • Опционально может передаваться дополнительная информация о событии

  • Node - Узел в котором было вызвано событие, в данном случае кнопка Start Вы также можете привязывать обработчики различных типов событий. Например, вы можете использовать событие on-input для обработки текстовых элементов ввода при изменении текста.

Стили пользовательских элементов

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

Стили элемента Polymer

:host ссылается на собственный пользовательский элемент и имеет самую низкую специфику. Но позволяет пользователям переопределять стили из вне. Вы можете менять стили внутри пользовательского элемента используя соответствующие селекторы элемента. Вам не нужно беспокоиться о конфликтах в именах на странице. Любой CSS селектор используемый внутри секции <style> применяется только для этого элемента в шаблоне.


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

comments powered by Disqus
Меню

Cult of digits 2014 Яндекс.Метрика