Yahoo! Пользовательский интерфейс блог (YUIBlog)

YUI 3.4.0 Предварительный просмотр Release 3 теперь доступен на CDN

Команда YUI только что завершил заключительный спринт развития 3.4.0 релиз. На этот раз мы рассмотрим код функционально полной. Мы планируем провести наш следующий спринт сосредоточившись на нашем заключительном раунде тестирования и создания других примеров и документации. Мы оставили сообщений: FC (функциональные полное) построить на CDN на разведку сообщества и обратной связи. Вы можете получить доступ к этой версии на http://yui.yahooapis.com/3.4.0pr3/build/yui/yui-min.js .

Есть несколько конкретных областей в библиотеку, где мы хотели бы иметь обратную связь:

• Погрузчик оказала значительное обновление для 3.4.0. Если вы делаете ручной спецификации нагрузки с помощью use("*") или использовать подмодуль конфигураций, мы будем очень благодарны вам пытаются ваш код с нового погрузчика должны быть уверены, что мы правильно обработки всех вариантов использования. Для получения более подробной информации о Loader изменений в этой версии можно найти в блоге описывающих изменения Loader 3.4.0 .
• Календарь и группа полностью работоспособны и готовы к разработчику использовать.
• Графика:. Там были некоторые изменения API, которые будут влиять на любые экспериментальные код, написанный на графических API распространяется в PR2 релиз getShape() была переименована addShape() . Там были также несколько замен атрибут.
• Переход: Родной переходы теперь поддерживаются в FireFox.
• WidgetButtons была выпущена в качестве нового расширения Виджет, который позволяет размещать CSS-стиль кнопки в верхнем и нижнем колонтитулах любой виджет, который реализует стандартный модуль поддержки.
• Виджет-Модальность и виджет-автоскрытия плагины были преобразованы в расширениях.
• Widget: Добавлена ​​поддержка для уничтожения (истина), которая будет удалить и уничтожить все дочерние узлы (не только BoundingBox и ContentBox), содержащиеся в BoundingBox виджета. уничтожить () сохранит свое сегодняшнее поведение из-за потенциально высокой во время выполнения путем разрушения всех дочерних узлов. Если вы уничтожите виджеты в вашем приложении или пользовательские разработчика виджетов, ваша помощь в тестировании этого изменения будут оценены.
• ScrollView теперь поддерживает вертикальную подкачки, включает в себя scrollview-лист плагина для добавления CSS названий класса немедленному элементы списка, а также несколько исправляет ошибку и рефакторинг
• App Framework: Мы хотим расширить искреннее спасибо всем разработчикам сообщества, которые нашли время, чтобы тест-драйв новой рамочной App. Мы получили отличные отзывы после PR2 релизе. Пожалуйста, продолжайте исследовать эти компоненты и присылайте нам свои замечания и предложения.

Вы можете получить дополнительную информацию о содержании этого выпуска, просмотрев накопительный История и полный список билетов рассматриваются в PR3 . Пожалуйста, файл аксессуара запросов, ошибок и регрессий в билете базы данных по YUILibrary.com .

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

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

Юй: Часы работы Чт 28 июля

Y.Calendar подходит к 3.4.0

Календарь является одним из наиболее популярных виджетов в YUI 2 семьи, и это вносит свой ​​дебют на YUI 3 архитектуры 3.4.0. Аллен Рабинович является владельцем компонент, автор и будет на вызов повторного нас на эту старую любимую, показаны некоторые новые подходы к проблемам, с которыми сталкиваются 2.x календарь. Я особенно Jazzed о поддержке интернационализации, но новые правила оказания также довольно увлекательный.

Заходите, и привести свой ​​выбора даты, события календаря, импорт-с-ских-и-косметики блины вопросы и пожелания с вами, как мы конкретизировать сейчас и в будущем Y.Calendar . (Нет, это не будет импортировать ческих, но если кто-то хочет создать галерею модуль приручить это животное, там обязательно будет YUIConf билет в этом для Вас;))

Мы вернулись к нашему обычному времени на этой неделе, поэтому мы будем видеть Вас в Connect в 10 утра PDT.

Время & Подробности

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

1. Набор номера 1-888-371-8922 (Skype прекрасно работает для неамериканских участников *)
2. Введите код участника 47188953 #
3. Регистрация сессии разделения экрана (это вам будет предложено установить плагин Adobe Connect, если это ваш первый раз, используя его)

Примечание: Потому что это открытое онлайн-конференции, мы просим абонентов немой их линии, если они не участвуют в активной дискуссии.

* - Если Skype не вариант, напишите мне, или поймать меня (ls_n) в # юй IRC-канал на FreeNode на местный номер.

Запись

Спасибо всем, для вызова в систему! Онлайн запись сессии теперь доступен.

Высокое качество, iPhone / IPad совместимые, загружаемые записи здесь .

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

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

Юй: Часы работы Чт 21 июля

DataTable и обновления галереи витрина

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

Мы знаем, что DataTable является невероятно важным виджет для большого количества клиентов, поэтому мы понимаем, стоимость задержки целенаправленное развитие. Это Часы работы будет обновление на том, что работа становится все сделано для 3.4.0, то, что запланировано на 3.5.0, а также введение в большую работу, которая начала появляться в Галерее добавлять новые функции и исправление ошибок для DataTable (и свое семейство вспомогательных классов).

Мы будем находиться в Интернете на час раньше на этой неделе на благо Eamon Броснан (ака, mosen с # юй), который представили ряд патчей Галерея мы рассмотрим более. В противном случае, мы будем иметь другие # юй обитателей и галерея участников с указанием их изделий. Если у вас есть решение DataTable или работать в прогресс, которого вы хотели бы поделиться, пожалуйста, сообщите мне, чтобы я мог блокировать график уложиться (ls_n в # юй или щебет ).

Время & Подробности

Мы будем находиться в оперативном режиме с 9 утра до 10 утра PDT четверг. Соединительные детали такие же, как обычно.

1. Набор номера 1-888-371-8922 (Skype прекрасно работает для неамериканских участников *)
2. Введите код участника 47188953 #
3. Регистрация сессии разделения экрана (это вам будет предложено установить плагин Adobe Connect, если это ваш первый раз, используя его)

Примечание: Потому что это открытое онлайн-конференции, мы просим абонентов немой их линии, если они не участвуют в активной дискуссии.

* - Если Skype не вариант, напишите мне, или поймать меня (ls_n) в # юй IRC-канал на FreeNode на местный номер.

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

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

Next-Gen YSlow питание от YUI

Пару недель назад, Yahoo объявила о YSlow для мобильного на скорости 2011 , в результате чего сила анализа производительности YSlow для мобильного мира.

YSlow для мобильных работает как букмарклет , что позволяет работать на браузерах, отличных от Firefox (как дополнение) или Chrome (как расширение) .

Архитектура YSlow был частично переработан, чтобы работать кросс-платформенным и Юй был существенным фактором сделать песочницу, кросс-браузерный абстракции и простой доступ YQL возможно.

Песочница

Для того, чтобы быть встроен на странице, не мешая анализа производительности и без возиться с самой страницы, YSlow является букмарклет, который вводит JavaScript и CSS в любую страницу, используя силу YUI песочницы:

Закладка URL:

 JavaScript: (функция (у, р, о) {
     р = y.body.appendChild (y.createElement ("IFRAME '));
     p.id = 'YSlow-букмарклет';
     'дисплей: нет "p.style.cssText =;
     о = p.contentWindow.document;
     o.open (). Write ('
         <head>
         <Тела OnLoad = "
             YUI_config = {
                 выиграть: window.parent,
                 документ: window.parent.document
             };
             уаг г = документа;
             d.getElementsByTagName (\ 'голова \') [0]
                 . AppendChild (
                     d.createElement (\ 'скрипт \')
                 ). SRC = \ 'http://d.yimg.com/jc/yslow-bookmarklet.js \' "
         >
     ');
     o.close ()
 } (Документ))

Приведенный выше код:

• создает пустой IFRAME;
• добавляет его в теле страницы;
• скрывает IFRAME *;
• получает свое окно обработчика;
• пишет в ее содержание тело IFRAME;
• это тело пуст, но onload событие
• onload событие определяет как придать YSlow JS:
  • наборы YUI_config , поэтому win и doc указывает на страницу анализируемого window и document соответственно
  • динамично внедряет YSlow URL путем создания script элемент в IFRAME в head

* IFRAME отображается время все активы YSlow презентации загружаются

Это будет место IFRAME на странице анализируются. Это IFRAME будет действовать как изолированную среду и YSlow будет проживать в нем. С IFRAME динамически создается без src атрибут, он будет иметь доступ к его родителю (страница анализируемого), потому что нет же политика происхождения нарушение происходит.

YUI_config объект удобно, поскольку он устанавливает win и doc на один уровень IFRAME (в анализируемой страницы), что любой новый экземпляр Юй будет привязан к основному документу по умолчанию, электрические любой вызов Y.all и Y.one через Y.config.win или Y.config.doc из YUI use обратного вызова.

Презентация YSlow является обрабатываются IFRAME window и document ссылки, позволяющие YSlow главный сценарий для визуализации разметки, а также получать внешние CSS в этом IFRAME не вступая в конфликт со стилями родителей страницы. YSlow сканирует родительской страницы для того, чтобы получить все компоненты (изображения, скрипты, ссылки, фон-изображения, Flash и т.д.), необходимые для последующего анализа производительности. Это делается путем доступа Y.config.win и Y.config.doc , так как они относятся к родительской страницы.

Кросс-браузерный абстракции

Будучи букмарклет, YSlow для мобильных должен работать в любом браузере *. YUI тезисов кросс-браузерные проблемы путем нормализации различий браузеров, в результате чего чистый, легкий для чтения и сопровождения кода.

YSlow не был полностью перенесен на YUI 3 - только уровень контроллера (от предстоящего компонент App) на данный момент - но все же, все манипуляции с DOM и обработки событий делаются node и event модулей. В будущих версиях мы планируем в порт больше возможностей для YSlow YUI 3.

* Не все браузеры в настоящее время поддерживаются

YQL

YSlow анализ страниц, проверки HTTP заголовков для компонентов, найденных на странице. Заголовки HTTP-ответа не доступны на странице, следовательно, эти компоненты должны быть запрошена вновь для того, чтобы YSlow получить информацию в заголовке ответа. Это может быть достигнуто путем запроса список компонентов URL-адресов через XMLHttpRequest (AJAX), но к сожалению из-за той же политики ограничения происхождения , это не представляется возможным, если все компоненты находятся в одном домене, что и страница, что очень маловероятно.

Общий способ решения той же политики ограничения происхождения использованием JSONP, где внешний сервер работает как прокси-запроса списка URL, компоненты и извлечения их HTTP заголовки ответа от имени YSlow. В связи с популярностью YSlow и последние мобильные усилия анализа производительности, мы ожидаем достаточно тяжелый трафик для YSlow для мобильных букмарклет. Для того, чтобы поддерживать такие движения, YQL был масштабируемым решением принятым YSlow через открытые данные таблицы имени data.headers , который извлекает заголовки ответа и содержанию в отношении данного списка URL-адресов при олицетворении агента пользователя для обеспечения ожидаемого содержания получены.

YQL запроса компонент выполняет всю работу по управлению YQL запросов при управлении JSONP запросов под капотом, что делает код YSlow контроллер гораздо проще и простой в обслуживании.

Будущие усовершенствования: Новый YSlow для мобильных дружественный интерфейс

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

Выполнение производительность инструмента

YSlow для развертывания мобильной было сделано тщательно с учетом своих влияния на производительность время загрузки страницы анализируется. YUI 3 модулей, используемых на YSlow были тщательно изучены, чтобы включать только модули, необходимые для загрузки YSlow как можно быстрее. Файл YUI семян и Loader не были включены , так как все необходимые модули и подмодули были объединены следующие Райан Гроува Производительность Zen советы, которые дали возможность загрузить все вместе в одном небольшом один запрос: YSlow-bookmarklet.js: 204KB, 66KB ( GZIP), где:

• Юй: 75KB, 27KB (GZIP)
• YSlow: 129Кб, 39KB (GZIP)

Подробнее о YSlow

Оставайтесь в курсе последних объявлений YSlow по:

• Посещение переработан YSlow странице getyslow.com
• Симпатия YSlow на Facebook: facebook.com / getyslow
• После YSlow на Twitter: twitter.com / getyslow

Об авторе: Марсель Duran является фронта Ведущие End для Yahoo! в исключительных Выступление команды. Он был в веб-оптимизации производительности на высоких участках движения в Yahoo! страницу Передние и поиск команд, где он применяется и исследованы веб-производительности передового опыта принятия страницы даже быстрее. Сейчас он посвященная YSlow и другие производительность средства разработки, исследования и евангелизации. Его целью является сделать веб-даже быстрее, чем это может быть и считает, что нет такого понятия, как "всего несколько миллисекунд не повредит".

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

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

Градуированные поддержки обновлений браузера

Изменения GBS

Конкретные изменения для этого обновления включают в себя:

• Больше не назначать опыт классах
• Снято назначения конкретных операционных систем (за исключением мобильной)
• Добавлен покрытие для Internet Explorer 9
• Добавлен покрытие для Firefox 4. †
• Добавлен покрытие для Firefox 5. †

Примечания:

• Символ кинжал (как в "Firefox 4. †") показывает, что наиболее тока не бета версия на отраслевом уровне, что получает поддержку.
• Нет руководство дается на IOS или Android OS использования устройства. Рекомендации, которые вы выбираете устройства, которые наилучшим образом представляют базы пользователей для каждой ОС.

Удаление классов из базового теста браузера

Это издание GBS обновление представляет собой отход от наших предыдущих обновлений, что мы движемся от отображения браузеров непосредственно к опыту классы (например, "-класса" и "C-класса"). Вместо того, предписывают то, что пользователей, насколько это подходит для какие браузеры, мы сосредоточимся на определении эффективной стратегии контрольного испытания, которая максимизирует тестового покрытия и минимизирует тестирование поверхности. К примеру, IE6 до сих пор значимых глобальной доли рынка ордера продолжает тестирование; GBS однако сегодня позволяет для IE6 пользовательский опыт будет отличаться от IE9 опыт.

Удаление Операционные системы от базового теста браузера

Для того, чтобы Облегчить тестирование и свести к минимуму потребности в ресурсах, мы больше не указать, какая операционная система должна быть протестирована на. Единственным исключением является браузер тесно связана с версией ОС, и в этом случае мы говорим о версии ОС, а не версию браузера (например, "Сафари IOS 4"). Это позволяет нам сосредоточиться тестового покрытия по версии браузера, и свести к минимуму redudant тестирования на разных платформах. Проблемы с одного браузера в разных версиях можно пренебречь, и, как правило, связанные с более высокого уровня OS различий, таких, как ключевые обработки и доступных шрифтов. Код, который, как известно, касаются кросс-платформенные вопросы должны быть проверены, как на многих платформах, как это возможно, но это тестирование в целом могут быть выделены на конкретные вопросы, вместо того чтобы выполнять полный регрессионного тестирования всех функций. Мы рекомендуем выравнивание операционной системы тестирования приоритет с базы пользователей.

Почему IE6 Тем не менее в перечне?

IE6 до сих пор достаточно значительным долю на мировом рынке, чтобы оправдать проверено приемлемой работы пользователей. Существует общее заблуждение с прогрессивной стратегией повышения стало то, что когда-то браузер входит "C-класса", что она становится "не поддерживается", хотя на самом деле это действительно означает, что он должен быть доставлен HTML-только опыт. Теперь, когда мы больше не назначают, какие браузеры получить то, что опыт, это остается для проектов, решать на основе их пользователями и ресурсами. GBS фокусируется на указания, какие браузеры необходимо проверить использовать опыт, основанный на такие факторы, как доля рынка и влияния. Определение того, что "использование" и specifiying приемлемых уровней деградации остаются для команд, чтобы решить. Мы по-прежнему способствовать простой прогрессивного улучшения модели, и препятствовать проектов от создания новых уровней без учета дополнительных расходов на разработку, тестирование и обслуживание ресурсов.

Прогноз GBS

Мы рассчитываем внести следующие изменения в следующие обновления:

• Прекратите покрытие для Safari на IOS 3.
• Добавить покрытия для Webkit на Android 3.
• Добавить покрытия для Firefox 6.
• Добавить покрытия для Safari IOS 5.

GBS Архив

• GBS обновления 2010-11-03
• GBS обновления 2010-02-16
• GBS обновления 2009-10-16
• GBS обновления 2009-07-02
• GBS обновления 2009-01-28
• GBS обновления 2008-07-03
• GBS обновления 2008-02-19

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

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

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

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

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

Виджет имеет 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!

YUI Loader и изменений для 3.4.0

В 3.4.0 мы начали процесс перехода некоторых из логики Loader вокруг, чтобы не только сделать его более производительным, но и сделать его более надежным и простым в использовании и в других местах (например, на сервере). Мы будем выкатывает больше изменений в будущих версиях, но я хотел бы занять некоторое время, и объяснить, что было изменено, то почему оно было изменено и как она может повлиять на разработчиков. Для большинства сценариев использования, разработчики ничего не заметит другой, за исключением того, что вещи немного быстрее, и их загрузки требованию, немного меньше.

Семенной файла

Первое, что я хочу адрес файла YUI семени. В предыдущих версиях YUI, наше семя файл был очень маленький и не содержали Loader или любого из его мета-данных. Мы обнаружили, что в 90% прецедентов это не было как производительной, как мы надеялись. Обычный пользователь включает в себя семя файл, то запросы их модули, которые, в свою очередь, означает, что семя должно первой выборке Loader, затем вычислить все его зависимости, то за ними все. Теперь мы считаем, что этот дополнительный запрос HTTP это неправильно, что нужно делать, поэтому новый стандарт файл семя содержит Loader и его мета-данных. Да, это будет сделать первоначальный запрос немного больше, но это сделает загрузку модулей, что значительно быстрее, поскольку все ее мета-данные требования в настоящее время уже находится на странице.

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

     / Строить / юй / юй-min.js / / YUI Семени + Loader
     / Строить / юй-база / юй-Base-min.js / / Старые Семени с YUI Loader получать поддержку
     / Строить / юй-ядро / юй-Core-min.js / / Старые юй-базу без Loader принести поддержку

Следует отметить, что эти адреса отличаются от предыдущего URL. Любой, кто использовал yui/yui-base.js файлы должны repoint их yui-core/yui-core.js . Если вы хотите старше способ загрузки семян и получения Loader, вы должны использовать yui-base/yui-base.js файл семени.

Другие рассуждения на это изменение нашего плана для принятия YUI работать в стольких местах, как это возможно. Старый файл семян плюс Loader в один запрос сервер комбо все хорошо и хорошо, если у вас есть комбо-сервер, доступный в вашем приложении. А как же на сервере? Или в офлайн приложение на мобильном устройстве? Эти места необходимо свести к минимуму доступ к файлам в то же время получать нужную им информацию.

Накопительные

Следующее, что мы изменили было удаление накопительные пакеты из системы и дефолт allowRollup к ложным в Loader конфигурации. Что это значит для вас? Что ж, надеюсь, ничего вообще. Прежде чем объяснить, воздействие изменений, позвольте мне объяснить рассуждения за ней. The primary reason is, again, performance, along with payload delivery. Take this example:

     Module A: requires event-a, event-b
     Module B: requires event-c, event-d

When you request both, the rollup logic prior to 3.4.0 used to determine that you should get the event rollup. Which actually meant that you were getting:

     event.a, event.b, event.c, event.d, event.e, event.f, event.g, event.h

You ended up with more on your page than you actually needed. By turning off the rollup support, YUI will now ask for only what you actually requested and nothing more. In most cases, you will not notice this . Module developers, may run into a situation where things that worked in the past may not work now. The reason for this is that they actually worked by accident before. Let me use a real world example: Dial .

In 3.3.0, Dial required this:

    requires: [
        'widget',
        'dd-drag',
        'substitute',
        'event-mouseenter', 
        'transition',
        'intl'
     ]

For the most part, Dial worked in 3.4.0, however keyboard support did not work. After doing some simple investigating, it turned out that the rollup support was actually requesting the entire Event rollup (which includes event-move and event-key). Without the rollup logic pulling in all of event, 3.4.0 Dial no longer had all of its requirements. Making Dial's requirements more specific and defining all of its actual dependencies properly makes it work as expected.

    requires: [
        'widget',
        'dd-drag',
        'substitute',
        'event-mouseenter',
        'event-move',
        'event-key',
        'transition',
        'intl'
     ]

For module developers, it is a best practice to make sure that your module requires exactly what it needs to function. Do not assume that an upstream module requirement is there. It's always better to make sure that you ask for what you need.

This also means that module requirements are more well defined. For example, datatype-date has Intl support built in. In previous versions you would access the Intl like this:

    Y.Intl.getAvailableLangs('datatype-date');

But since this module doesn't actually have a language (the datatype-date-format module does), this will fail. It needs to be more specific and actually ask for languages for the correct module:

    Y.Intl.getAvailableLangs('datatype-date-format');

Build File Explosion and Submodule Removal

After making this change, the next change we made was exploding the build directory and removing submodules from the core system. Submodule logic was not removed, only our meta-data structure was changed. This will provide backward compatibility for current installations.

Submodules in the core system caused a couple of issues that we needed to resolve. The first reason was performance. Each time Loader needed to calculate dependencies, it needed to walk the submodule/plugin structure of each module. Doing this thousands of times was hurting our performance during the Loader calculate routine. By removing support for submodules in the core system we saved tens of thousands of function calls and iterations.

Loader was changed so that if a use property in a module's meta-data defined more modules, it will use those modules instead of trying to load the original module. So, if you requested “ dd ” Loader would inspect “ dd “'s meta-data and see a use property that looks something like this:

    "dd-ddm-base,dd-ddm,dd-ddm-drop,dd-drag,dd-proxy,dd-constrain,dd-drop,dd-scroll,dd-drop-plugin"

In the core YUI seed file, we are also including what we are calling virtual rollups or aliases . These module definitions are exactly the same as the meta-data in Loader. This way you can include all the files exported from our Dependency Configurator and still use these rollups without having Loader present on the page. In future releases, we will be refining this approach even more.

After making this change, we then preceeded to explode our build files. In previous releases, the submodules determined the modules file path. Например:

    "dd": {
        "submodules": {
            "dd-drag": 
            // Module data
         }
     }

In 3.3.0 when you built “dd”, the file structure looked something like this:

    /build/dd/dd-drag.js
    /build/dd/dd-ddm.js
    /build/dd/dd-drop.js

With the build system exploded in 3.4.0, “dd”'s build files now look like this:

    /build/dd-drag/dd-drag.js
    /build/dd-ddm/dd-ddm.js
    /build/dd-drop/dd-drop.js

This allowed us to remove the “path” property from all of our module meta-data as well, saving file size and reducing the logic required to assemble the modules url paths.

If you are including a pre-configured combo URL, you must recalculate your URL when you upgrade.

The downside to this change is that if you are including a combo URL of modules to “prep” your page you can not just change the version number and upgrade. You will need to revisit the Dependency Configurator and generate a new URL with new module structure.

Будущее

I will be continuing to refine, refactor and maximize every aspect of our Loader and Seed strategy. These first steps were needed to aid in future changes that need to be made for not only our client-side strategy but also our server, command-line and mobile device strategies as well.

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

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