YUI - the Yahoo! User Interface Library

YUI - The Yahoo! User Interface Library

Ciudad de Buenos Aires ITBA

25 de Octubre de 2007

YUI - The Yahoo! User Interface Library Temario 1 Introducción Quées y cómola obtengo? 2 Cómoestácompuesta? Cómoestácompuesta? 3 YUI Core The Yahoo Global Object DOM Collection Event Utility 4 YUI Library Utilities Animation Utility Browser History Manager * Connection Manager Drag and Drop Utility ImageLoader Utility The YUILoader Utility 5 YUI Library Controls & Widgets YUI Library Controls & Widgets 6 YUI Library CSS Tools YUI Library CSS Tools

YUI - The Yahoo! User Interface Library Introducción Cómoestácompuesta? YUI Core Quées y cómola obtengo? YUI Library Utilities YUI Library Controls & Widgets YUI Library CSS Tools Quées y cómola obtengo?

Qu´ees? Es un set de utilidades y controles escritos en JavaScript, para crear aplicaciones web interactivas usando DOM, DHTML, AJAX y CSS.

Por qu´eYUI? Es OpenSource bajo la licencia BSD y es libre para cualquier tipo de uso Es soportada por los principales browsers Tiene la comunidad de desarrolladores de Yahoo como respaldo y soporte Estructura modularizada y ordenada

Cómola obtengo? En la seccióndeveloper de Yahoo! - http://developer.yahoo.com/yui/ donde tambiénse pueden encontrar ejemplos y una completa documentación

YUI - The Yahoo! User Interface Library Introducción Cómoestácompuesta? YUI Core Cómoestácompuesta? YUI Library Utilities YUI Library Controls & Widgets YUI Library CSS Tools Cómoestácompuesta?

Elementos principales YUI Core YUI Library Utilities YUI Library Controls & Widgets YUI Library CSS Tools

YUI - The Yahoo! User Interface Library Introducción Cómoestácompuesta? The Yahoo Global Object YUI Core DOM Collection YUI Library Utilities Event Utility YUI Library Controls & Widgets YUI Library CSS Tools The Yahoo Global Object

Es la base de la libreria y debe ser incluida ante de utilizar cualquier otra parte de la libreria YUI. Incluir

M´etodos

YAHOO.namespace() - Creaciónde namespaces dentro de la libreria YAHOO.lang() - Extensiones al lenguaje (isArray, isBoolean, isFunction, isNull, isNumber, isObject, isString, isUndefined) YAHOO.lang.hasOwnProperty() - Analizar el prototype del objeto YAHOO.lang.extend() - Extiende una clase a partir de otra YAHOO.log() - Utiliza el control YUI Logger Control YAHOO config() - Callback para cuando se inserta un nuevo componente YAHOO.env() - Mantiene informacióndel entorno

La colecci´onYAHOO.util.Dom permite manipular la posici´ony clase de los objetos dentro de la DOM.

Incluir

M´etodos getXY(), setXY(), setX() getStyle(), setStyle() getElementsByClassName() hasClass(), addClass(), removeClass(), replaceClass() getViewportHeight(), getViewportWidth()

Facilita la creaciónde una páginaorientada a eventos, brindando una única interface al DOM para el manejo de eventos por medio de handlers.

Incluir

M´etodos YAHOO.util.Event.addListener() YAHOO.util.Event.removeListener() YAHOO.util.Event.getListeners() YAHOO.util.Event.purgeElement() YAHOO.util.Event.onAvailable() YAHOO.util.Event.onDOMReady() YAHOO.util.CustomEvent()

YUI - The Yahoo! User Interface Library Introducción Animation Utility Cómoestácompuesta? Browser History Manager * YUI Core Connection Manager YUI Library Utilities Drag and Drop Utility YUI Library Controls & Widgets ImageLoader Utility YUI Library CSS Tools The YUILoader Utility Animation Utility *

Facilita la creaciónde animaciones en un objeto modificando su tamao, posición, color, opacidad y otras propiedades del mismo para generar distintos efectos visuales. Incluir

M´etodos YAHOO.util.Anim() YAHOO.util.ColorAnim() YAHOO.util.Motion() YAHOO.util.Scroll()

Ayuda a la creaciónde páginasdonde el funcionamiento del historial de navegacióndel browser, sobretodo cuando la url no varia a lo largo del tiempo.

Incluir

M´etodos

YAHOO.util.History.getBookmarkedState() - Crea el objeto YAHOO.util.History.register() - Registra un handler para el evento onStateChange YAHOO.util.History.initialize() - Inicializa el objeto YAHOO.util.History.navigate - Guarda un nuevo estado en el historial

Simplifica la creacióndel objeto XMLHttpRequest para los pedidos HTTP, utilizando una llamada a una funcióncallback para procesar los datos.

Incluir

M´etodos

YAHOO.util.Connect.asyncRequest() - Inicia una transacciónXMLHttpRequest YAHOO.util.Connect.setForm() - Realiza un pedido GET o POST a travésde un FORM YAHOO.util.Connect.initHeader() - Crea un header a medida YAHOO.util.Connect.isCallInProgress() - Verifica si hay una transacción en progreso

Permite crear realizar Drag & Drop sobre un objeto, moviendolo via CSS, especiﬁcando la l´ogicadel mismo y sin preocuparse por el browser destino.

Incluir

M´etodos

YAHOO.util.DD() - Establece el id del objeto a draguear YAHOO.util.DDProxy() - Establece el objeto que ser´aarrastrado junto al mouse YAHOO.util.DragDropMgr() - Conﬁgura la forma en que se realiza el Drag & Drop YAHOO.util.DDTarget() - Objeto destino que recibira al objeto dragueado

Eventos nMouseDown, startDrag, onDrag, onDragEnter, onDragOver, onDragOut, onDragDrop, onInvalidDrop, endDrag, onMouseUp

Permite cargar imagenes en la p´aginaa pedido, permitiendo as´ı,realizar una carga m´asrapida de las mismas.

Incluir

M´etodos

YAHOO.util.ImageLoader.group() - Define el evento para cargar un grupo registerBgImage() - Vincula una imagen a un objeto HTML donde se cargará addTrigger() - Determina que evento DOM dispararála carga del grupo registerBgImage() - Registra la imagen de fondo de un div registerPngBgImage() - Registra la imagen en formato PNG de fondo de un div registerSrcImage() - Registra la imagen de un tag ¡img¿

Es un script del lado del cliente que permite cargar alg´uncomponente de la libreria junto con sus dependencias del mismo.

Incluir

M´etodos

YAHOO.util.YUILoader() - Inicializa la utilidad require() - Establece que componentes se necesita que se carguen addModule() - Para agregar componentes propios y sus dependencias

YUI - The Yahoo! User Interface Library Introducción Cómoestácompuesta? YUI Core YUI Library Controls & Widgets YUI Library Utilities YUI Library Controls & Widgets YUI Library CSS Tools YUI Library Controls & Widgets

Librer´ıade controles o widgets que dan a nuestra p´aginauna apariencia y funcionalidad similar a las encontradas en las aplicaciones de escritorio. Cada control es un m´oduloseparado que debe ser incluido y junto con sus dependencias, o bien cargado por medio del YUILoader.

M´etodos

AutoComplete * - Campo de texto que permite realizar sugerencias y autocompletar la entrada del usuario en base a un set de posibilidades Button Control * - Botóncon la posibilidad de agregarle imagenes, checkboxes, radio-button Calendar * - Control que permite la selecciónde una o másfechas en modo gráfico Color Picker * - Control que permite la selecciónde un color y saturación Container - Control que sirve como contenedor de otros controles DataTable * - Despliega una tabla que permite ordenamiento por columna, paginación,selecciónpor filas Logger - Control que permite escribir o leer un log Menu * - Permite crear menúsy menúscontextuales Rich Text Editor * - Control que permite darle formato al texto que contiene, entre otros, listas, italica, negrita, drag & drop Slider - Control que despliega una barra deslizadora con un rango de valores determinado TabView * - Control que permite crear ”solapas” TreeView - Control que presenta informaciónen forma jerárquica

YUI - The Yahoo! User Interface Library Introducción Cómoestácompuesta? YUI Core YUI Library CSS Tools YUI Library Utilities YUI Library Controls & Widgets YUI Library CSS Tools YUI Library CSS Tools

Incluir css">

M´etodos

YUI Reset CSS - Elimina los estilos por defecto para los elementos HTML del browser YUI CSS Base - Establece una base para todos los elementos HTML YUI CSS Fonts - Establece una base de las tipograf´ıasusadas YUI CSS Grids - M´asde 1000 de layouts y templates para darle estilo a nuestra p´aginavia CSS

YUI - The Yahoo! User Interface Library Introducción Cómoestácompuesta? YUI Core YUI Library CSS Tools YUI Library Utilities YUI Library Controls & Widgets YUI Library CSS Tools Agradecimientos

Muchas Gracias

YUI - The Yahoo! User Interface Library