Yahoo! User Interface блог (YUIBlog)

YUIConf 2011 Ранняя регистрация Птица теперь открыт

30 сентября 2011 в 9:31 вечера Дженни Донелли | В развитие , Юй События | 4 комментария

Ранней регистрации для YUIConf 2011 открыт на Eventbrite! В этом году мероприятие будет проходить 2-4 ноября в Yahoo! в университетском городке Great America. Мы рады предложить Вам полный день практических обучающих семинаров (Ср), затем два полных дня технологий говорит о YUI (чт / пт). Регистрация для участия в конференции стоит 75 долларов в этом году, с ранних птиц размере $ 50. Регистрация на семинары будет отделена от конференции и подробности в ближайшее время.

Мы заняты выстраиваются большие темы, в том числе:

• YUI компоненты глубоких погружений, в том числе набор и календарь
• YUI в мобильной среде
• Тестирование с помощью YUI
• Реальные истории миграции
• и многое, многое другое!

Как всегда, сессий конференции будет видеообращении и доступны на YUI театр и наши YouTube канал для всех желающих.

Надеюсь увидеть вас там!

(ВАЖНО! внутренних еху пожалуйста, зарегистрируйтесь на билет сотрудников Yahoo! и предоставить рабочий адрес электронной почты).

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

Делите и расширить: закладки с del.icio.us | Digg It! | Reddit!

YUI 3.4.1 теперь жить

27 сентября 2011 в 2:37 вечера Аллен Рабинович | В развитие | 8 Комментариев

YUI 3.4.1 короткий цикл выпуска теперь доступен на CDN и для загрузки , более чем на неделю раньше! Вот несколько основных моментов в этом выпуске:

• Более 150 ошибка исправления для контроллера , группы , DataTable , календарь и ряд других модулей.
• Ошибка закрепляет Y.substitute () на YUI вклад Satyam .
• Поддержка японского языка для календаря и консоли , любезно YUI вклад Ryuichi Окумура .
• Разные хитрости, чтобы документация и примеры.

Вы можете также просмотреть список всех изменений, отмеченных в истории компонент файлы YUI 3.4.1 , а также полный список билетов рассмотрены в ходе YUI 3.4.1 развития . Как всегда, мы были бы признательны, что вы подаете любые предложения, возможно, придется или дефекты можно обнаружить в нашей базе данных билетов. Обратная связь для YUI 3.4.1 могут быть введены в YUI 3 билета базы данных .

Мы также хотели бы сообщить, что в следующей версии YUI, DataType.Date, DataType.Number и DataType.XML будет прекращено в пользу Y.Date, Y.Number и Y.XML соответственно. Обратная совместимость будет сохранена для одной версии, чтобы дать каждому возможность переключения.

Да, и еще одна вещь: мы находимся на нашем пути в переносе содержания YUI театр на YouTube . Для начала, проверьте Дуглас Крокфорда лекций "Crockford на JavaScript" - в комплекте с субтитрами!

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

Делите и расширить: закладки с del.icio.us | Digg It! | Reddit!

Голосуйте за YUI в Open Source Awards финал

26 сентября 2011 в 9:21 вечера Дженни Донелли | В сборник | 1 комментарий

Спасибо всем, кто номинирован Юй на Packt Издательский открытого источника наград. Проголосовать за Юй, как ваши любимые библиотеки JavaScript!

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

Делите и расширить: закладки с del.icio.us | Digg It! | Reddit!

YUI 3.4.1 PR1 теперь доступна на CDN

22 сентября 2011 в 1:35 вечера Дженни Донелли | В развитие | 1 комментарий

YUI 3.4.1 PR1 теперь доступен для тестирования сообществом и обратной связи. Это доступно на Yahoo! CDN в http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js , и вы можете увидеть изменения, происходящие в 3.4.1 из списка билетов проверено в за освобождение .

3.4.1 релиз будет меньше исправить ошибку-релиз с укороченным циклом развития, запланированного на go-жить по 5 октября. Пожалуйста, файл ошибок и регрессий в билете базы данных по YUILibrary.com к утру понедельника, 26 сентября, чтобы мы могли убедиться, что любые критические вопросы решаются до общего выпуска. Если нет актуальных вопросов, как сообщается, будет выпущена 3.4.1 уже 27 сентября.

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

Делите и расширить: закладки с del.icio.us | Digg It! | Reddit!

Юй: Часы работы Чт 15 сентября

12 сентября 2011 в 9:58 вечера Люк Смит | В развитии , Часы | 2 комментария

MakeNode Satyam в расширение

Если вы не знаете, Satyam , вы должны быть новыми для YUI. Он был столпом общества YUI с первых дней YUI 2. Его статьи о YUIBlog являются одними из самых читаемых и сослался на источники, "как на самом деле использовать библиотеку" стиль содержания. Если вы видите, что Satyam написал, что это стоит читать, и, скорее всего, повторное чтение и закладки.

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

Вот что мы собираемся говорить. Особенности, история, и рассуждения. Если вы используете компоненты инфраструктуры, и, в частности, Y.Widget , вы, вероятно, встречается по крайней мере некоторые из препятствий Satyam намеревался обратиться с MakeNode . Это будет лучшей практики фестиваля, так что возьмите свой блокнот, и вашим собственным опытом поделиться.

Время и Подробнее

Мы будем находиться в режиме онлайн в четверг с 10 утра до 11 утра PDT.

Регистрация совещание

Запись

Запись доступна в YUILibrary YouTube канал .

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

Делите и расширить: закладки с del.icio.us | Digg It! | Reddit!

Отправить Talk для YUIConf 2011

12 сентября 2011 в 3:48 вечера Дженни Донелли | В развитие , Юй События | Комментариев нет

Покажите код, который вы работали или доли, что вы узнали в процессе работы с Юй! Отправить Ваше предложение юй-события (в) Yahoo-inc.com к пятнице, 23 сентября 2011 года. Будьте уверены, в том числе:

• Название
• Описание
• Целевая аудитория
• Ваше имя
• Краткое био

YUIConf 2011 года состоится 3 ноября и 4 на Yahoo! в Санта-Кларе, штат Калифорния кампуса. Ваша презентация должна длиться около 45 минут. Мы будем иметь до 15 минут после презентации для Q & A. Сообщение любые вопросы в комментариях или напишите нам прямо на юй-события (в) Yahoo-inc.com.

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

Делите и расширить: закладки с del.icio.us | Digg It! | Reddit!

Обновлено: "MakeNode" Widget расширение

12 сентября 2011 в 3:18 вечера по Satyam | В развитии , YUI 3 Галерея | 8 Комментариев

Примечание редактора: Эта статья была впервые опубликована в начале этого года . С тех пор, модуль MakeNode был опубликован в галерею YUI и получил некоторые улучшения. Сегодняшняя статья отражает все последние изменения в MakeNode.

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

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

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

  Y.Spinner = Y.Base.create (
      "Паук",
      Y.Widget,
      [Y.MakeNode]
      {
         / / Членов экземпляров ...
      }
      {
          / / Статические члены
      }
 ); 

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

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

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

Первое, что вы обычно делаете это, чтобы определить шаблон для компонента. Для 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> '
 ]. Join ('\ п'), 

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

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

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

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

• {c classNameKey} CSS ClassName полученные от _CLASS_NAMES статические свойства (см. _CLASS_NAMES имущество ниже)

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

• {? condition valueIfTrue valueIfFalse } так же, как ?: оператор JavaScript, вычисляется в valueIfTrue если условие truish, valueIfFalse иначе.

• {1 condition valueIfOne valueIfMore } используется для производства особого / множественное число слова в зависимости от значения условия.

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

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

Когда прототипы имеют аргументы, как и {m} , {?} и {1} , строки должны быть заключены в двойные кавычки. Номера, логические и null (все без кавычек) будет разбираться в их соответствующих типов данных. Маркеры могут быть вложенными. {?} и {1} заполнителей, как правило, содержат вложенные заполнителя за состояние и, вполне возможно, их значения, например:

  {Р шт} {1 {р} Кол-во "единицу" "единицы"} 

Если свойство qty 1, он будет оценивать на "1 unit" , на 2 или более он вернется "2 units" и так далее. Более сложная версия дело с нуля было бы:

  {?  {Р шт} "{р шт} {1 {р} Кол-во" единицу "" единицы "}" "нет"} 

Обратите внимание, что результат обработки внутренней заполнителей, если строка должна быть заключена в свой собственный набор цитат.

Чтобы включить двойные кавычки в кавычках, используйте \\" , двойные кавычки, потому что время требует JavaScript будет интерпретировать ни одного и отбрасывает его, прежде чем попадает в MakeNode только двойные кавычки допускаются;. MakeNode не использовать eval() так анализатор ограничено, но в безопасности. Что угодно, но цифры, null , логические и двойные кавычки, будут проигнорированы.

{?} заполнителя также удобно использовать с флажками и переключателями. Он может быть использован для получения строки "checked" в зависимости от истинности код инструкции по обработке, следующим образом. Таким образом, <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> даст заметный флажок, если 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 , такие, как 'input' , "ключи ClassName", так как они могут использоваться в качестве ключа для обозначения фактического ClassName или элементы, содержащие эти названий класса, как мы увидим позже.

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

Если WidgetStdMod модуль загружен, MakeNode также будет создавать записи для HEADER , BODY и FOOTER разделы с теми же ключами, которые также являются константами, определенными в том же модуле.

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

{S} заполнителя

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

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

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

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

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

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

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

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

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

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

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

Первый вызов _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 (СВХ), добавление (this._makeNode ());
     this._locateNodes ();
 } 

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

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

  _EVENTS: {
     вход: "изменения", / / ​​вызов this._afterInputChange
     BoundingBox: [
         {
             типа: "ключ",
             п: '_onDirectionKey', / / ​​звонки this._onDirectionKey
             аргументы: ((Y.UA.opera) "вниз":? "прессы:") + "38, 40, 33, 34"
         }
         "MouseDown '/ / звонки this._afterBoundingBoxMousedown
     ]
     Документ: "MouseUp ', / / ​​звонки this._afterDocumentMouseup,
     Y: "broadcastingObject: someEvent" / / Вызов этого ["_afterYBroadcastingObject: someEvent"]
 } 

_EVENTS является объект (хэш) с любым количеством записей. Имена свойств, то есть ключи хэша, определить узлы, события которого мы будем слушать. Они такие же ключи ClassName определены в _CLASS_NAMES . Есть несколько дополнительных специальных клавиш:

• "boundingBox" будет относиться к ограничительной рамки себя.

• "document" ссылается на документ, содержащий этот виджет.

• "THIS" относится к виджета

• "Y" относится к Y инстанции.

Если виджет был расширен с WidgetStdMod, а также, ключи HEADER , BODY и FOOTER будет ссылаться на тех участках, так как они будут доступны в _classNames хэш. JavaScript не нужны ключи, которые будут указаны, если они являются допустимыми идентификаторами, так что никто из выше должны быть в кавычках.

_EVENTS собственности обрабатывается после renderUI , bindUI и syncUI методы были названы так виджет как ожидается, будет уже вставлен в тело документа, в противном случае "document" идентификатор не удастся.

Для каждого из этих элементов есть идентификатор события или события массив идентификаторов. Событие можно определить по типу события, чтобы прослушать или объект с более подробной информацией. По умолчанию MakeNode будет использовать в качестве слушателя метод именуется "_after" префикс следует идентификатор элемента с его первым символом капитализируются затем тип события с первого символа буквы. Блок кода выше, показывает методы, вызываемые для каждого события.

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

MakeNode будет использовать Node.delegate слушать события элементов в boundingBox , в то время как он будет использовать Node.after слушать события boundingBox и тело документа. Она будет использовать this.after прислушиваться к событиям в THIS ключ и Y.after для слушателей, перечисленных в Y ключ. Все события слушал использования после слушателей событий, так как они предназначены, чтобы сделать виджет реагировать на события, а не для фильтрации поведение объекта, который запускает их, чтобы ни в коем случае эти события могут быть предотвращены или остановлены. (Примечание: слушать 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});
 } 

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

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

  _ATTRS_2_UI: {
     BIND: значение,
     SYNC: ЗНАЧЕНИЕ
 } 

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

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

Атрибуты, перечисленные в BIND будут иметь _uiSet Xxxx методы, называемые в любом порядке, как атрибуты могут быть установлены в любом порядке. Атрибуты, перечисленные в SYNC будет вызываться один раз в порядке, в котором они перечислены с тех предков, перед наследниками, так что если один зависит от другого (который они не должны), то порядок может быть важно.

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

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

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

Заключение

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

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

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

Об авторе: Daniel Barreiro (псевдоним Satyam) была вокруг в течение довольно продолжительного времени. ENIAC был отключен за день до его рождения, так что он пропустил это, но он не пропустил много с тех пор. He's had a chance to punch cards, program 6502 chips (remember the Apple II?), own a TRS-80 and see some fantastic pieces of operating equipment in his native Argentina which might have been in museums elsewhere. When globalization opened the doors to the world, his then barely usable English (plus an Electrical Engineering degree) put him on the career path which ended in a 5-year job in the Bay Area back in the days of NCSA Mosaic. Totally intrigued by the funny squiggles a friend of his wrote in his plain text editor, full of <'s and >'s, he ended up learning quite a lot about the world of frontend engineering. It's been a long journey since COBOL and Fortran. Now he lives quite happily semi-retired in the Mediterranean coast close to Barcelona, Spain.

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

Делите и расширить: закладки с del.icio.us | Digg It! | Reddit!