Yahoo! User Interface блог (YUIBlog)

"MakeNode" Виджет Расширение

8 июля 2011 в 2:11 вечера по Satyam | В развитие | 6 Комментариев

Примечание редактора: Так как эта статья была первоначально опубликована, модуль MakeNode был опубликован в Галерею YUI и получил некоторые улучшения. Пожалуйста, обратитесь к обновленной статье Обновлено: "MakeNode" Виджет расширения .

В моей предыдущей статье, Рецепт для YUI 3 Применение , я показал способ использования Y.substitute как очень простой шаблон процессора. Идея унесла жизнь оттуда, с предложениями от людей в # юй IRC канал, и я сделал это виджет расширение, которое доступно на моем сайте, называется MakeNode . MakeNode не является универсальным процессором шаблонов и он не предназначен, как один. С другой стороны, она тесно интегрирована с YUI Виджет Foundation Class, в том числе класса и события помощников и интернационализации. В этой статье я возьму Spinner пример и изменить его, чтобы следовать указаниям из моей предыдущей статьи и использовать MakeNode. Изменение Spinner компонент ( JS , CSS , спрайты ), а также пример доступны с моего сайта. Ссылки на дополнительные ресурсы можно найти в конце этой статьи.

Расширение компонента

После MakeNode загружен, вам необходимо включить модуль в YUI().use() заявление, используя имя 'makenode' . Затем, чтобы расширить ваш виджет, вы перечисляете его в третий аргумент Y.Base.create() , например так:

  Ю. Spinner = Y.Base.create (
      «Spinner»,
      Ю. Widget,
      [Ю. MakeNode]
      {
         / / Члены например ...
      },
      {
          / / Статические члены
      }
 ); 

Вы можете добавить MakeNode вдоль любого количества подходящих расширений для виджетов, таких как WidgetParent, WidgetChild, WidgetStdMode и т.д. MakeNode добавляет две защищенные методы, _makeNode и _locateNodes, и она будет прочитана на нескольких статические свойства, если он найден.

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

Определение шаблона

Первое, что вы обычно делаете это определить шаблон для вашего компонента. Для Spinner, наш шаблон будет:

  _TEMPLATE: [
     '<input Type="text" title="{s input}" class="{c input}">,
     "<button Type="button" title="{s up}" class="{c up}"> </ Button> ',
     "<button Type="button" title="{s down}" class="{c down}"> </ Button> '
 ]. Присоединиться ('\ п'), 

Шаблон по умолчанию, как правило, назвать _TEMPLATE и объявил по другой статические свойства класса, такие как ATTRS . MakeNode будет использовать этот шаблон, если не кто иной, прямо предусмотрено. Шаблон состоит из простой HTML, а также ряд заполнителей в фигурных скобках, каждый сделанный из одного символа (код обработки), а затем один или несколько аргументов. Заполнителей и то, что они производят, являются:

• {@ attributeName} значение атрибут конфигурации

• {p propertyName} значение свойства экземпляра

• {m methodName arg1 arg2 ….} возвращаемым значением данного метода. Код обработки следует имя метода и любое число аргументов, разделенных пробелами. Строки должны быть заключены в двойные кавычки. Числа, логические и null будут преобразованы из строки в их надлежащей типы данных

• {c classNameKey} CSS ClassName полученные от _CLASS_NAMES статического свойства

• {s key} строки из strings атрибутов, используя key , как суб-атрибута.

• {? other placeholder } Производит строку checked , когда результат обработки остальной заполнитель это правда.

• {} любое другое значение будет обрабатываться так же, как Y.substitute делает.

Например, {@ value} будет перевести на this.get('value') в то время как {p value} переводит к this['value'] .

{m} заполнитель немного сложнее. Первый аргумент после m код обработки название метода и остальные аргументы, все, разделенных пробелами, которые будут переданы в данном методе. Эти аргументы могут быть числами, null , true , false или строки, заключенные в двойные кавычки. MakeNode будет анализировать их и преобразовать их в соответствующие виды, таким образом, {m myMethod 123.45 true “this is a string”} приведет вызова this.myMethod(123.45, true, “this is a string”) , так что первые два аргумента преобразуются в их правильных типов данных и строка может содержать пробелы. Чтобы включить двойные кавычки, используйте \\" , двойные кавычки время требуется, поскольку JavaScript будет интерпретировать ни одного и отбрасывает его, прежде чем доберется до MakeNode. Только двойные кавычки будут разрешены, MakeNode не использует eval() так анализатор ограничен но безопасный. Что угодно, но цифры, null , логические и двойные кавычки, будут игнорироваться.

{?} заполнитель удобно использовать с флажками и переключателями. Он будет производить строку “checked” в зависимости от истинности код инструкции по обработке, следующим образом. Таким образом, <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/> будет производить отмечен флажок, если getLength метод возвращает ничего, кроме нуля. {?} будет принимать любые другие заполнители, хотя и это имеет смысл только с первыми тремя.

Для {c} заполнителя, мы должны иметь _CLASS_NAMES собственности определены.

Далее заполнители могут быть добавлены в MakeNode, добавив их в _templateHandlers хэш.

_CLASS_NAMES Собственности

Наряду с ATTRS и _TEMPLATE статических атрибутов, мы можем определить _CLASS_NAMES имущество, которое указывает на массив строк. Каждая из этих строк будет использоваться для генерации ClassName. Таким образом _CLASS_NAMES: ['input'] будет производить ClassName “yui3-spinner-input” . Те, названий класса хранятся в свойство экземпляра this._classNames . {c input} заполнителя в шаблоне выше, будут заменены “yui3-spinner-input” .

Вы можете использовать _CLASS_NAMES собственности для создания любого количества названий класса, используете ли вы их в шаблон или нет. Вы все еще ​​можете достичь этих дополнительных имен классов из this._classNames . ClassName создан с помощью yui3 префикса за которым следует значение NAME статического имущества, обращенного в нижнем регистре, а затем строки, приведенные в _CLASS_NAMES (эта последняя не будет превращен в нижнем регистре), то все, разделенных дефисом. _classNames хэш будет также содержать названий класса для boundingBox и contentBox , сначала под "." ключа и второй по “content” ключ. Виджет присваивает boundingBox названий класса происходит от значения NAME собственностью каждого из классов в цепочке наследования, начиная с yui3-widget . MakeNode магазинов в this._classNames только самый верхний ClassName для boundingBox .

Если компонент несколько уровней от виджетов, таких как SuperSpecialSpinner наследования от SuperSpinner который наследуется от Spinner который наследуется от Widget, и если какие-либо или все из них имеют _CLASS_NAMES свойства определены, MakeNode будет производить имен классов для всех из них и сохранять их в this._classNames . Вам не нужно включать на каждом уровне названий, уже объявленных в предыдущих уровнях. На самом деле, лучше, что вы не так названий класса производятся на каждом уровне будет использовать значение NAME собственности этого уровня. Таким образом, в SuperSpecialSpinner , {c input} будет по-прежнему приводит к “yui3-spinner-input” , а не “yui3-superspecialspinner-input” и поэтому он будет держать ваш CSS файл остается в силе.

{С} заполнитель

Виджет имеет strings атрибутов конфигурации определена, хотя это и не инициализируется любое значение. Этот атрибут предназначен для хранения строк, которые видны (или, с помощью программы чтения с экрана, читать) пользователя. Важно, чтобы вы никогда не включают видимых строк непосредственно в шаблоне. Это не требование MakeNode - она ​​никогда не была хорошей идеей. Все строки, которые должны быть просмотрены или читали, чтобы пользователь всегда должен быть помещен в strings атрибута. strings атрибут содержит хэш, где каждый отдельный текст находится ее ключом. Spinner Компонент имеет следующие строки, которые вы можете видеть, используемые в шаблоне выше.

  строки: {
     значение: {
         вход: ". Нажмите стрелку вверх / вниз для несовершеннолетних шагом, страница вверх / вниз по основным шагом»,
         до: "Увеличение",
         вниз: "Уменьшить"
     }
 }, 

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

  уаг mySpinner = новый Spinner ({строки: Y.Intl.get ('Счетчик')}); 

Настройка конфигурации атрибут strings , таким образом, заменяет по умолчанию strings значений с теми из файла ресурсов языка с использованием языка определено ранее. {s} заполнитель доступ строки, хранящиеся в strings атрибута, либо стандартная или переведенные из них, если он установлен. {s xxxx} заполнитель, по сути, не более чем ярлык для {@ strings.xxxx} заполнителя. Тем не менее, первый имеет доступ только к строк на высшем уровне, в то время как, например, {@ strings.xxxx.yyyy.zzzz} позволит Вам получить доступ к строке глубже.

Использование _makeNode в renderUI

Мы используем шаблон для создания разметки для нашего компонента. Чтобы сделать это, мы можем назвать MakeNode в _makeNode метода, например:

  renderUI: функция () {
     . this.get ('ContentBox') добавления (this._makeNode ());
 }, 

Это позволит заполнить contentBox нашего виджета с разметкой от обработки шаблона. _makeNode метод возвращает экземпляр Y.Node , которые могут быть добавлены или вставить где-нибудь или просто предназначенные для дальнейшего использования. Он не возвращает строку, она производит Node экземпляр.

_makeNode метод принимает два необязательных аргумента: ссылку на шаблон и объект для заполнения заполнителей, как Y.substitute делает. В нашем простом примере Spinner есть один шаблон для всего виджета, но и других виджетов может потребовать биты и куски, изготовленные из нескольких шаблонов. В этом случае, вы бы обычно называем _makeNode без каких-либо аргументов в пользу основной части и называют его еще раз с различных шаблонов для заполнения дополнительных частей. Пример содержит этот renderUI метода:

  renderUI: функция () {
     уаг FIELDSET = this._makeNode ();
     this.each (функция (пункт) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, поз));
     }, Это);
     . this.get ('ContentBox') добавления (FIELDSET);
 } 

Первый вызов _makeNode возвращает Node Например, хранящиеся в переменной fieldset . Образец компонент также расширен Y.ArrayList так RADIO_TEMPLATE будут заполнены значениями, взятыми из элементов, хранящихся в массиве список и в результате узлы добавляются к fieldset раньше она, наконец, добавляется к contentBox . Специальные заполнители, такие как {@} или {p} -прежнему будет ссылаться на атрибуты или свойства в основной объект. Вложенные элементы будут обрабатываться так же, как Y.substitute бы.

Метод _locateNodes

MakeNode также предусматривается _locateNodes метод, который поможет найти все элементы с названий класса объявлена ​​в _CLASS_NAMES . Чтобы найти конкретные элементы, вы можете передать любое количество ClassName ключи, в противном случае, _locateNodes пытается их всех. За каждый найденный элемент каждого ClassName, _locateNodes будет производить частная собственность экземпляр, используя префикс подчеркивания следуют имя ключа и “Node” суффикс. Таким образом, в нашем Spinner Например, _locateNodes будет генерировать свойства _inputNode , _upNode и _downNode . Если несколько элементов имеют одинаковое имя класса, _locateNodes вернет ссылку на первую из них. Если элемент не найден, нет переменной будет создан.

В Spinner компонент мы используем _locateNodes после создания разметки:

  renderUI: функция () {
     . this.get (CBX) добавления (this._makeNode ());
     this._locateNodes ();
 }, 

_EVENTS Статического свойства

Еще одно свойство может быть определено по линиям _TEMPLATE и _CLASS_NAMES и это _EVENTS . _EVENTS будет содержать хэш состоит из ключей имя класса, каждый из которых содержит хэш типов событий и методов для их обработки. Лучше объяснить на примере:

  _EVENTS: {
     '.': {
         ключ: {
             п: '_onDirectionKey »,
             аргументы: ((Y.UA.opera) "вниз":? "прессы:") + "38, 40, 33, 34"
         },
         MouseDown: "_onMouseDown"
     },
     '..': {
         MouseUp: "_onDocMouseUp"
     },
     вход: {
         изменения: '_onInputChange "
     }
 }, 

_EVENTS является объект (хэш) с любым количеством свойств. Имена свойств, то есть ключи хэша, выявить элементы, события которого мы будем слушать. Они такие же идентификаторы, используемые в _CLASS_NAMES . Есть два дополнительных специальных клавиш "." и ".." . Хотя ClassName ключи ссылаются на элементы вложенные в contentBox , "." Ключ ссылается на boundingBox себя в то время как ".." относится к документа, содержащего этот виджет. Думайте о них как делать chdir команду, когда находится в boundingBox уровне. _EVENTS собственности обрабатывается после renderUI , bindUI и syncUI методы были названы так виджет как ожидается, будет уже вставлен в тело документа, в противном случае ".." не удастся.

Каждая из записей в _EVENTS является еще одним объектом, который использует тип события в качестве ключа и имя метода экземпляра с ним обращаться. _EVENTS , будучи статической переменной, не имеет доступа к this поэтому он не может принимать фактическое ссылки функции, только название метода слушателя событий. Некоторые типы событий, нужны дополнительные аргументы, такие как key события. В этом случае, вместо предоставления имя обработчика события вы можете предоставить объект со свойствами fn и args для хранения имени функции и дополнительные аргументы, когда это необходимо.

MakeNode будет использовать Node.delegate прислушиваться к событиям вложенных элементов, в то время как он будет использовать Y.on для прослушивания события из boundingBox и тело документа. (Примечание: слушали key событием на любой вложенный элемент работает только с версией 3.4.0pr1 и выше, так как делегация key .. событии не была доступна, прежде чем все другие возможности работать с предыдущими версиями, а)

_EVENTS деклараций являются кумулятивными, когда компоненты наследуют друг от друга. Каждый класс в цепочке наследования будет иметь свой ​​собственный _EVENTS декларация обрабатывается отдельно.

_ATTRS_2_UI Статического свойства

События в обоих направлениях, от пользовательского интерфейса для компонента и из компонента для пользовательского интерфейса. Первый обрабатываются _EVENTS собственности. Тогда Есть события уволен по значению атрибута изменения, которые должны быть отражены в пользовательском интерфейсе. Как я упоминал в предыдущей статье, когда Есть любые вторичные эффекты от изменения конфигурации атрибутов, они должны быть обработаны слушателей события изменения, а не дополнительным setter метода атрибут, который должен иметь дело только с нормализации стоимость устанавливается. Пользовательский интерфейс должен отражать состояние атрибуты конфигурации, сначала в syncUI , когда инициализации, а затем на каждое событие, изменение атрибутов. Что касается последнего, нам нужно прикрепить приемник событий, который мы делаем в bindUI . Виджет уже предоставляет механизм, чтобы сделать эту простую, которую я описал в комментариях к предыдущей статье.

Виджет использует свойство экземпляра _UI_ATTRS , который содержит объект с двумя дальнейшие свойства, SYNC и BIND . Каждый из них представляет собой массив список имен атрибутов настройки, чтобы быть изначально синхронизированы, а затем слушал, чтобы сохранить пользовательский интерфейс отражает текущие значения. Виджет ожидает каждого из этих записей, чтобы метод, связанный с ним, названный в честь имени атрибута с префиксом _uiSet с первого символа имени атрибута преобразуется в верхний регистр, чтобы имя метода в надлежащем случае верблюда. Таким образом, если "value" была зарегистрирована ни в одном из _UI_ATTRS массивы (в любом SYNC или BIND ), виджет будет ожидать, чтобы найти _uiSetValue метод. Этот метод получает два аргумента, value задается, и src изменения. Это код для нашего Spinner _uiSetValue метода:

  _uiSetValue: функция (значение, SRC) {
     если (SRC === UI) {
         возвращение;
     }
     this._inputNode.set (VALUE, this.get (форматирования) (значение));
 }, 

Все заглавные идентификаторы вы видите в этот кусок кода соответствуют строке константы, объявленные в другом месте, чтобы YUI компрессор делать свою работу лучше. Метод, в основном, устанавливает value HTML атрибута в <input> окно для нового установленного значения, был отформатирован. Ссылка на текстовое поле было предоставлено _locateNodes . src аргумент предварительно проверяются, чтобы убедиться, установлен в значение строки 'ui' . Если это так, не будут приняты меры. Это позволит избежать бесконечных циклов. Если пользователь вводит что-то в поле ввода, его стоимость войдет в value атрибут конфигурации, которая затем будет стрелять valueChange событие, которое получит _uiSetValue называют которая, если ее не остановить, затем пойти и изменить значение в поле ввода, которое повлечет за весь процесс снова. Таким образом, в _uiSetValue , если мы знаем, изменения происходят из пользовательского интерфейса, мы ничего не делаем и так разрыв петли. Однако, это требует другой кусок кода в другом месте. В слушателя для события DOM, когда мы устанавливаем атрибут конфигурации, мы используем третий необязательный аргумент для установки, например:

  _afterValueChange: функция (эв) {
     this.set (VALUE, ev.newVal, {SRC: UI});
 } 

Это зависит только от нас зависит, чтобы изменения, ближайшие из пользовательского интерфейса помечены таким образом, а затем проверить, что же флагом, чтобы избежать петель.

Что все это сказал, я еще не упомянул статическое свойство _ATTRS_2_UI упомянутые в заголовке этого раздела. Как указано в комментарии в моей предыдущей статье показано (через ошибки я сделал в них), убедившись, что все атрибуты, влияющие UI правильно перечисленных несколько неаккуратно. Вы никогда не должны инициализировать _UI_ATTRS с нуля, так как виджет уже списках много атрибутов, и те были бы потеряны. Вы должны объединить новые имена атрибутов через существующие, что несколько трудно вспомнить, как сделать это правильно. Чтобы сделать его простым, MakeNode будет читать из статического свойства _ATTRS_2_UI и делают, что объединение для вас. Это будет объединить все эти списки от каждого класса в цепочке наследования так на каждом уровне каждый класс может обрабатывать свои собственные атрибуты. В Spinner, мы имеем:

  _ATTRS_2_UI: {
     BIND: ЗНАЧЕНИЕ,
     SYNC: ЗНАЧЕНИЕ
 }, 

MakeNode будет принимать как массив имен или одно имя атрибута, как в этом случае.

Естественно, возникает вопрос, почему два списка, один для связывания других для синхронизации? Довольно часто SYNC массив имеет меньше записей, чем BIND списка и это потому, что шаблон для компонента, возможно, уже в тот же значение по умолчанию, как атрибут конфигурации и нет необходимости для выполнения первоначальной синхронизации. Таким образом, если значение по умолчанию для value атрибута конфигурации представляет собой пустую строку и <input> элемент в шаблоне не имеет value атрибута, то нет необходимости синхронизировать их при инициализации.

MakeNode будет проверять наличие повторяющихся записей в любой из этих массивов. Если какой-либо появится, это означает, что класс компонент нашей наследует от уже обрабатывает этот атрибут и любое новое заявление, скорее всего, выходить _uiSetXxxx обработчик для него. Кстати, MakeNode также проверяет наличие повторяющихся записей в _CLASS_NAMES , которые также могут вызывать конфликты в некоторых, хотя и не все обстоятельства. MakeNode напишет сообщение журнала для любой такой ошибки.

Заключение

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

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

В качестве бонуса для тех, кто имел терпение дочитали до этого места, я также измененные кнопки Энтони Pipkin это набор галерея компонентов:

• button.js
• button.css
• Кнопка-group.js
• Кнопка-group.css
• background.png
• фон-active.png
• значок-sprite.gif
• пример

API документы можно найти здесь .

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!