YUI2

В YUI2 YAHOO.util.Event -- обьект, который отвечает за вобытия.
С помошью его можно прикручивать как существующие браузреные события, так и собственные-кастомные

YAHOO.util.Event.addListener("id_of_container", "click", handler); // так прикручиваются события

В хендлере мы можем исользовать:
stopEvent
preventDefault
stopPropagation  --- яваскипт стандарт прочитать в jquery об этом.
Они реализованы через яху обьект, что позволяют срабатывать им даже в тех браузерах, в которых не реализована поддержка.
YAHOO.util.Event.preventDefault(e); -- так вызывается превентДефолт в хендлере, где е- это событие которое приходит первым аргументом в обработчик(хендлер)




Можно также создавать собственные события:
var onSizeChange = new YAHOO.util.CustomEvent("onSizeChange");
А так тригерятся события:
onSizeChange.fire({width: newWidth, height: newHeight});
Так прикручиваются обработчики:
onSizeChange.subscribe(fnSubscriberWidth);
onSizeChange.subscribe(fnSubscriberHeight);


Чтобы страница загружалась более продуктивно(выполнялись скрипты в нужное время) есть три момента,  в которые можно вызывать яваскрипт:

YAHOO.util.Event.on(window, "load", handler, "Msg for handler"); -- когда страница полносью загрузилась
YAHOO.util.Event.onDOMReady(handler, "Msg for handler"); -- когда готово дом дерево
YAHOO.util.Event.onContentReady("id_of_element", handler, "Msg for handler"); -- когда загрузился элемент и его дети
YAHOO.util.Event.onAvailable("id_of_element", handler, "Msg for handler"); -- когда готов элемент, но дети еще не доступны


Пузырение событий может послужить хорошую службу ускорения продуктивности обработки. В ЮАЙ есть понятие делегирования
Суть вот в чем мы обработчик привязываем контейнеру, который будет реагировать на поднавшееся пызырьком событие от его потомка, и
по фильтры примянять хендлер, если событие было выпущенно нужным потомком. Так нам не нужно навешивать каждый раз
обработчик на однотипные потомки, а цепляем только на отцовский контейнер:
YAHOO.util.Event.delegate("id_of_container", "event(f.e. 'click')", handler, "filter (f.e. 'li')");
Следующие аргументы передаются делегейтом в обработчик:
function handler(event, el_src_of_ev, container){...}


Есть юай лоадер -- штука для подгрузки ресурсов.
Он подгружает такие понятия как модули, они могут быть типа сиесес и джеес(может еще какие, но пока других не встречал).
Этот умный лоадер также смотрит зависимости и если какой-то скприт был уже загружен, то не подгружает, а если нет -- то грузит
нужные модули.
document.documentElement -- ссылка на корень документа(html)
полезная картинка: http://www.mkgt.ru/files/material-static/423/js/window.htm

Юай-комбо - это пхп скрипт, который позволяет предоставлять сборки для юай-лоадера.

--------------------------------------------------------
YUI2
--------------------------------------------------------
YAHOO.util.Dom
--------------------------------------------------------
1.YAHOO.util.Dom.setXY(domEl|"id_of_el", [x,y]) -- прелесть метода в том, что он размещает елемент в коортинатах относительно
документа, учитывая всех позиционированных|смещенных родителей и влияния марджинов собственных или родителей.

YAHOO.util.Event.getXY(e) -- так можно получить координаты относительно документа в момент срабатывания события "e"

2.YAHOO.util.Dom.getXY(domEl|"id_of_el") -> [x,y] -- получает координаты левого верхнего угла элемента относительно документа.

3.YAHOO.util.Dom.setStyle(domEl|"id_of_el", "key", "value");
Прелесть в том, что внтри реализована кросбраезерность влияния -- мы можем писать ('opacity', '0.5'), ('float', 'left') и т.д. и
не беспокоится о кросбраузерности.

4.YAHOO.util.Dom.getStyle(domEl|"id_of_el", "key") -> "value"

5.YAHOO.util.Dom.hasClass(domEl|"id_of_el", "class_name") -- > true/false
6.YAHOO.util.Dom.addClass(domEl|"id_of_el", "class_name")
7.YAHOO.util.Dom.removeClass(domEl|"id_of_el", "class_name")
8.YAHOO.util.Dom.getElementByClassName("class_name", ["tag_name",[domEl|"id_of_el"]])
первый парамент имя класса
второй искать только среди определенных тегов, что значительно ускорит поиск
третий - искать в контексте тега(только среди его детей)
---------------------------------------------------------


Итог:
На сколько понял, есть портал лайфрей, в него подгружаются портлеты.
Наш портлет материалс, у него есть собственные страницы, которые хранятся как джееспе. к ним можно обращаться через меню нашего
портлета(в урле идет имя-"путь к портлету", а дальше после # хеш нужной страницы портлета).
При этом страница не перегружается а происходит аякс запросы, серверная сторона отслеживает и если находит заголовок
хшр, то отдает только кусок нужного хтмл, а не всю страницу портала. Если заголовка не будет, то соберется вся страница.
Еогда мы приходим на портлет, то сразу подгружается весь жаваскрипт, по крайней мере мне так сказал Андрей. Тут все страницы
представлены обьектами, когда мы обращаемся в меню к какой-нибудь странице, то по этому хешу выбирается к с каким обьектом
связать полученный кусок хтмл. Когда произошла связка, то все изменения в хтмл автоматически через события отображаются в
нашем обьекте. При этом наверно есть и обратный механизм)

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


----------------------------------------
Варианты загрузки компонентов в юай.
На примере принямения юай виджета табс.

1) В голову страницы вставить ссылку на юай-лоадер (это яху, гет, юай-лоадер)
После этой ссылки сразу в теге срипт проинициализировать лоадер на табс и сделать лоадер.инсерт.
В таком примере я увидел, что в лоадере в поле рекваед не было Ивента(только табс), а в поле онСексесс, он используется - на домреди
применяется виджет табс. С этого следует, что внутри инициализации юай-лоадера происходит автозагрузка юай-модулей, которые мы явно не указали
в поле реквайед.

2) В голову страницы всатвить ссылку на юай-лоадер+юай-кор(яху, дом, ивент, гет, юай-лоадер)
После этой ссылки сразу в теге срипт проинициализировать лоадер на табс и сделать на ивент.домреади лоадер.инсерт. В онСексессе же просто
применяем виджет табс на нужный контейнер.
Именно комбинация этих двух примеров попогла мне осознать, о вероятном существовании автозагрузки -- ведь тут идет обращение на Ивент.домРеди вне
тела лоадера, по той причине, что то этого ивент уже подгрузился через первую ссылку.
~~~~~~~~~~~~~~~~~~~~~~
не понятно только вот, что почему за ссылкой идет прямое обращение на результаты ее загрузки, а вдруг на момент вызова содрежимое ссылки не успеет
еще загрузится?

Может от этого предохраняет (function(){...code here.....})();? Ведь я так и не понял почему код брался в тело функции и сразу выполнялся,
причин для этого я не вижу, возможно причина именно в дожидании догрузки предыдущего срипта?
!!!!!Сделать тест!!!!!
~~~~~~~~~~~~~~~~~~~~~~

3) Валить все в один файл, чтобы секономить на домейн-резолюшине, а этот файл пихать в конец хтмл, чтобы дом был сформирован на момент загрузки нашего
большого скипта.
----------------------------------------


Утилита YUI2 DataSource -- она предоставляет унифицированный интерфейс получения данных для виджетов.
Данный можно получать как с локального источника, так и с удаленного.
Локальный:
YAHOO.util.LocalDatasource() -- сюда могут передавать локальные массивы, обьекты(ну типа джейсон), дом-обьект таблицы
Удаленный:
YAHOO.util.XHRDatasource
YAHOO.util.ScriptNodeDatasource


YAHOO.util.FunctionDatasource(function(){....;return data;}) -- еще один вариант, когда данные получаются с результатов вычисления

В датасорса есть еще следующий параметр responseType, обычно его можно и не указывать, датасорс и сам в состоянии
его определить из источника.
Существуют следующие:
* TYPE_JSARRAY
* TYPE_JSON
* TYPE_XML
* TYPE_TEXT
* TYPE_HTMLTABLE

А если все же нужно указывать, то делается это вот так:

var xmlDataSource = new YAHOO.util.XHRDataSource("http://myxmlwebservice");
xmlDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_XML;

responseSchema -- этот параметр датаСорса, определяет как парсить с источника данные и в каком виде предоставлять пользователю
этого датасорса.
вот примеры:
1) простой явасрипт еррей.

// A simple array of strings is only considered to contain one field of data
["apples", "broccoli", "cherries"]

myDataSource.responseSchema = {
    fields: ["name"]
};

2) сложный еррей.

// Nested arrays - field order matters and must be one-to-one to the data
[
    [ "apples", "fruit", "red" ],
    [ "broccoli", "vegetable", "green" ],
    [ "cherries","fruit", "red" ]
]
myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: [ "name", "type", "color" ]
};
 
// Nested objects - field order doesn't matter and not all data is required to have a field
[
    { type: "fruit", color: "red", name: "apples" },
    { name: "broccoli", color: "green", type: "vegetable" },
    { color: "red", name: "cherries", type: "fruit" }
]

3) Джейсон

{
    "Response" : {
        "Results" : [
            { "id":0, "obj": { "nested":"foo" }, "arr": [null, { "nested 2": 0 } ] },
            { "id":1, "obj": { "nested":"bar" }, "arr": [null, { "nested 2": 3 } ] },
            { "id":2, "obj": { "nested":"baz" }, "arr": [null, { "nested 2": null } ] },
            //...
        ],
        "Total" : 1358,
        "Important" : {
            "to": {
                "me": "pot o' gold"
            }
        }
    },
    "Session" : "12345678"
}

myDataSource.responseSchema = {
    resultsList : "Response.Results", // String pointer to result data
    // Field order doesn't matter and not all data is required to have a field
    fields : [
        { key: "id" },                    // simple location
        { key: "obj.nested" },            // dot notation works
        { key: "['arr'][1]['nested 2']" } // bracket notation works
    ],
    metaFields : {
        // oParsedResponse.meta.totalRecords === 1358
        totalRecords : "Response.Total",
 
         // oParsedResponse.meta.something === "pot o' gold"
        something : "Important.to.me"
    }
};

по следующей схеме есть еще иксемель, делимитид текст и хтмл тейбл.

Еще одна фича датасорса, это тайпконвершин, вот встроенные:
"date" - YAHOO.util.DataSource.parseDate
"number" - YAHOO.util.DataSource.parseNumber
"string" - YAHOO.util.DataSource.parseString

А вот пример:

{
    "Inventory" : {
        "Produce" : [
            { "name": "apples", type: "fruit", color: "red", quantity: "50" },
            { "name": "broccoli", type: "fruit", color: "green", quantity: "35" },
            { "name": "cherries", type: "fruit", color: "red", quantity: "100" },
        ],
        "Total" : 20
    }
}
myDataSource.responseSchema = {
    resultsList : "Inventory.Produce",
    fields : [
        "name",
        "type",
        // This field will convert incoming data using a custom function 
        {key: "color", parser: myColorToRGB },
        // This field will convert incoming data to type Number
        {key: "quantity", parser: "number" }
    ],
    metaFields : {
        // oParsedResponse.meta.totalRecords === 1358
        totalRecords : "Response.Total",
 
         // oParsedResponse.meta.something === "pot o' gold"
        something : "Important.to.me"
    }
};

Можно сделать кастомный тайпконвершин через обьект парсер:

// this is where the data will go 
 YAHOO.example.data  = null; 
  
 // Add a new parser to DataSource to parse numbers that are prefixed with 
 // currency symbols (or any other non-numeric characters) 
 DataSource.Parser.currency = function (cur) { 
     if (YAHOO.lang.isString(cur)) { 
         var neg = !cur.indexOf('-'); 
         cur = (neg?-1:1) * cur.slice(neg).replace(/^[^0-9.]+|,/g,''); 
     } else if (!YAHOO.lang.isNumber(cur)) { 
         return 0; 
     } 
  
     return cur; 
 }; 
  
 var myDataSource = new DataSource(Dom.get('accounts'), { 
     responseType   : DataSource.TYPE_HTMLTABLE, 
     responseSchema : { 
         fields : [ 
             { key : 'due',      parser : 'date' }, 
             { key : 'account' }, 
             { key : 'quantity', parser : 'number' }, 
             { key : 'amount',   parser : 'currency' } // use our new parser 
         ] 
     } 
 }); 

Так все это хорошо, но я так и не упомянул о том, как отправлять все что мы тут настроили, чтобы получить результат:

DataSource.sendRequest(null,{ 
         success : function (req,res) { 
             YAHOO.example.data = res.results; 
         } 
     }); 

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

Property	Type	Description
success	Function	The function to call when the response is ready.
failure	Function	The function to call upon a response failure condition.
scope	Widget instance	The object to serve as the scope for the success and failure handlers.
argument	Object	Arbitrary data to be passed back to the success and failure handlers.

sendRequest имеет и третьий аргумент(oCaller) - это деприкейтид аргумент, вместо него лучше использовать расширение второго
oCallback.scope


Ну и посмотрим дальнейшие шаги работы датасорса.
2. Второй момент проверяется нет ли в кеше под таким индексом как oRequest уже ответа. (кстати есть maxCacheEntries -
макс количетсво индексов в кеше, если переполняется кеш то удаляется первый)

3. Если нет то происходит обращение к источнику за ответом. Создается соединение и получается сырой ответ.

4. Потом три хука: а). до парсинга ответа(можем подправить сырой); б). сам парсинг ( с учетом и типа и схемы)
в). после парсинга (можно подправить обьект наложенный на схему).

5. Потом в зависимости от успеха/поражения вызывается oCallback.success(oResponse) или oCallback.failure(oResponse)
Структура OResponse
oRequest -- таже сторока что была передана в запрос
oParsedResponse{
tId - иникальный идентификатор транзакции
results - обьект наложенный на схему
error -- тру если неудача
cahed -- тру если с кеша
meta -- метадата пропарсенная по схеме
}
oPayload = oCallback.argument -- клиент может неколько раз запрашивать это ему помогает понять на какой именно запрос
пришел ответ.


Дата сорсу также можно поставить опрос (Polling) -- по времени будет опрашиваться источник и обновлять данные
(понятное дело что в таком случае механизм кеширования отключается)
var idInterval = setInterval(milsec, oRequest, oCallback, oCaller)
Если что то clearInterval(idInterval) или clearAllInterval()