Yahoo User Interface(YUI) es una biblioteca escrita en JavaScript para la construcción de aplicaciones interactivas (RIA). Se utilizaba para el desarrollo de aplicaciones web con apariencia de aplicaciones de escritorio, con componentes vistosos y personalizables y con una fuerte presencia de llamadas AJAX. Fue liberada por Yahoo con licencia BSD en el año 2005. En agosto de 2014 Yahoo anunció el cese de su desarrollo, motivado por los cambios en la industria, las mejoras en la adopción de estándares por parte de los navegadores, la progresiva pérdida de interés en una biblioteca grande como YUI, y la proliferación de soluciones server-side.[1]
La biblioteca está completamente documentada en su página web y se compone de seis componentes: Núcleo YUI, utilidades, controles UI, componentes CSS, herramientas de desarrollo y de construcción.
Núcleo
El núcleo de YUI es un ligero conjunto de herramientas (31KB la versión compacta) para manejar eventos y manipular el árbol DOM.
YAHOO Global Object: Los Objetos Globales Yahoo contienen utilidades y otras infraestructuras base para la biblioteca.
Dom Collection: Ayuda para la manipulación del árbol DOM, incluyendo posicionamiento de elementos y gestión de estilos CSS.
Event Utility: Permite acceder de forma segura y sencilla a los eventos de un navegador web y, mediante el objeto Custom Event, publicar y suscribirse a eventos customizados.
Utilidades
Animation: Ayuda a crear efectos animados.
Browser History Manager: Ayuda complementaria para el botón Atrás y la gestión de Marcadores/Favoritos de los navegadores web.
Connection Manager: Ayuda para manejar el objeto XMLHttpRequest.
: Proporciona una interfaz común para que otros componentes puedan interactuar con diferentes tipos de datos.
Drag and Drop: Facilita la creación de eventos y elementos que pueden ser arrastrados.
Element: Proporciona una capa para los elementos que facilita el añadido de escuchadores, manipulación del árbol DOM y atributos 'get' y 'set'.
Get: La utilidad Get soporta la carga asíncrona de datos y archivos de estilos CSS externos.
ImageLoader: Permite aplazar la carga de imágenes que no son visibles durante la carga de la página, proporcionando un aumento del rendimiento.
JSON: Proporciona métodos para el tratamiento de datos JSON. Estos métodos están basados en el trabajo de Douglas Crockford.
Resize: Permite redimensionar los elementos HTML.
Selector: Permite referenciar elementos HTML mediante la sintaxis CSS3.
YUI Loader: Es un cargador del lado cliente que permite la carga de forma dinámica de cualquier componente y dependencia de la biblioteca al vuelo.
Controles
AutoComplete: Proporciona la función de auto completado (lista de sugeridos) para los usuarios. Soporta varios formatos de datos, tanto del lado cliente como del lado servidor (vía XMLHttpRequest).
Button: Permite la creación de botones gráficos que funcionan como un botón tradicional en HTML.
Calendar: Un calendario gráfico y de control dinámico.
Charts: Permite la creación de diferentes tipos de gráficos (lineales, de barras, etc.).
Color Picker: Proporciona una interfaz gráfica para la selección de colores.
Container: Proporciona una interfaz gráfica como Tooltip, paneles, cuadros de diálogo, etc.
DataTable: Una potente herramienta para mostrar tablas tabulares en una página web. Permite la ordenación de columnas tanto en el lado cliente como en el servidor, paginación, scroll, selección de filas, redimensionado de columnas y edición inline.
A continuación se muestra un ejemplo de declaración con el uso del componente DataTable:
//Declaración del conector al DataTablevarmyDataSource=newYAHOO.util.DataSource(myHugeDataSet);//Tipo de respuesta del DataSourcemyDataSource.responseType=YAHOO.util.DataSource.TYPE_JSARRAY;//Definiendo la estructura del DataSourcemyDataSource.responseSchema={fields:["id","nombre","edad"]};//Definición de cada columna del DataTable que debe ser igual a la del DataSourcevarmyColumnDefs=[{key:"id"},{key:"nombre"},{key:"edad"}];//Cantidad de Registros en la variable de configuración del DataTablevarmyTableConfig={renderLoopSize:20};/*Creación del DataTable pasándole como parámetros el nombre, la definición de las columnas, el datasource o recurso de donde se obtienen los datos, y por último la configuración general del DataTable*/varmyDataTable=newYAHOO.widget.DataTable('tbl',myColumnDefs,myDataSource,myTableConfig);
ImageCropper: Proporciona una interfaz gráfica para recortar una imagen desde el lado cliente.
Layout Manager.
Menú: Proporciona una API para la creación de menús flotantes, barras de menú y menús de contexto.
Rich Text Editor: Es un sofisticado editor de texto rico modular del lado cliente y muy configurable.
Slider: Proporciona un elemento genérico que permite al usuario elegir entre un rango de valores.
TabView: Permite la navegación entre pestañas, soportando la carga dinámica de contenido vía XMLHttpRequest.
TreeView: Añade un árbol de contenido con nodos que se pueden contraer y expandir para navegar por los elementos.
Uploader: Permite la carga de varios archivos mostrando una barra de progreso.
Recursos CSS
CSS Base: Utilidades para la manipulación de la hoja de estilos de la forma clásica.
Important Announcement Regarding YUI, Yahoo Engineering, 29 de agosto de 2014.
Enlaces externos
Yahoo User Interface Página oficial
Blog Oficial de YUI
Datos:Q2300096
Multimedia:YUI Library
Noviembre 10, 2021
yahoo, library, yahoo, user, interface, biblioteca, escrita, javascript, para, construcción, aplicaciones, interactivas, utilizaba, para, desarrollo, aplicaciones, apariencia, aplicaciones, escritorio, componentes, vistosos, personalizables, fuerte, presencia,. Yahoo User Interface YUI es una biblioteca escrita en JavaScript para la construccion de aplicaciones interactivas RIA Se utilizaba para el desarrollo de aplicaciones web con apariencia de aplicaciones de escritorio con componentes vistosos y personalizables y con una fuerte presencia de llamadas AJAX Fue liberada por Yahoo con licencia BSD en el ano 2005 En agosto de 2014 Yahoo anuncio el cese de su desarrollo motivado por los cambios en la industria las mejoras en la adopcion de estandares por parte de los navegadores la progresiva perdida de interes en una biblioteca grande como YUI y la proliferacion de soluciones server side 1 Yahoo UI Library YUI Informacion generalTipo de programaBiblioteca de JavascriptDesarrolladorYahoo LicenciaBSD LicenseInformacion tecnicaProgramado enJavaScriptVersionesUltima version estable3 8 0 11 de diciembre de 2012 EnlacesSitio web oficial Repositorio de codigo editar datos en Wikidata Indice 1 Caracteristicas 1 1 Nucleo 1 2 Utilidades 1 3 Controles 1 4 Recursos CSS 1 5 Herramientas de desarrollo 1 6 Herramientas de construccion 2 Vease tambien 3 Referencias 4 Enlaces externosCaracteristicas EditarLa biblioteca esta completamente documentada en su pagina web y se compone de seis componentes Nucleo YUI utilidades controles UI componentes CSS herramientas de desarrollo y de construccion Nucleo Editar El nucleo de YUI es un ligero conjunto de herramientas 31KB la version compacta para manejar eventos y manipular el arbol DOM YAHOO Global Object Los Objetos Globales Yahoo contienen utilidades y otras infraestructuras base para la biblioteca Dom Collection Ayuda para la manipulacion del arbol DOM incluyendo posicionamiento de elementos y gestion de estilos CSS Event Utility Permite acceder de forma segura y sencilla a los eventos de un navegador web y mediante el objeto Custom Event publicar y suscribirse a eventos customizados Utilidades Editar Animation Ayuda a crear efectos animados Browser History Manager Ayuda complementaria para el boton Atras y la gestion de Marcadores Favoritos de los navegadores web Connection Manager Ayuda para manejar el objeto XMLHttpRequest Cookie Permite gestionar las cookies DataSource Proporciona una interfaz comun para que otros componentes puedan interactuar con diferentes tipos de datos Drag and Drop Facilita la creacion de eventos y elementos que pueden ser arrastrados Element Proporciona una capa para los elementos que facilita el anadido de escuchadores manipulacion del arbol DOM y atributos get y set Get La utilidad Get soporta la carga asincrona de datos y archivos de estilos CSS externos ImageLoader Permite aplazar la carga de imagenes que no son visibles durante la carga de la pagina proporcionando un aumento del rendimiento JSON Proporciona metodos para el tratamiento de datos JSON Estos metodos estan basados en el trabajo de Douglas Crockford Resize Permite redimensionar los elementos HTML Selector Permite referenciar elementos HTML mediante la sintaxis CSS3 YUI Loader Es un cargador del lado cliente que permite la carga de forma dinamica de cualquier componente y dependencia de la biblioteca al vuelo Controles Editar AutoComplete Proporciona la funcion de auto completado lista de sugeridos para los usuarios Soporta varios formatos de datos tanto del lado cliente como del lado servidor via XMLHttpRequest Button Permite la creacion de botones graficos que funcionan como un boton tradicional en HTML Calendar Un calendario grafico y de control dinamico Charts Permite la creacion de diferentes tipos de graficos lineales de barras etc Color Picker Proporciona una interfaz grafica para la seleccion de colores Container Proporciona una interfaz grafica como Tooltip paneles cuadros de dialogo etc DataTable Una potente herramienta para mostrar tablas tabulares en una pagina web Permite la ordenacion de columnas tanto en el lado cliente como en el servidor paginacion scroll seleccion de filas redimensionado de columnas y edicion inline A continuacion se muestra un ejemplo de declaracion con el uso del componente DataTable Declaracion del conector al DataTable var myDataSource new YAHOO util DataSource myHugeDataSet Tipo de respuesta del DataSource myDataSource responseType YAHOO util DataSource TYPE JSARRAY Definiendo la estructura del DataSource myDataSource responseSchema fields id nombre edad Definicion de cada columna del DataTable que debe ser igual a la del DataSource var myColumnDefs key id key nombre key edad Cantidad de Registros en la variable de configuracion del DataTable var myTableConfig renderLoopSize 20 Creacion del DataTable pasandole como parametros el nombre la definicion de las columnas el datasource o recurso de donde se obtienen los datos y por ultimo la configuracion general del DataTable var myDataTable new YAHOO widget DataTable tbl myColumnDefs myDataSource myTableConfig ImageCropper Proporciona una interfaz grafica para recortar una imagen desde el lado cliente Layout Manager Menu Proporciona una API para la creacion de menus flotantes barras de menu y menus de contexto Rich Text Editor Es un sofisticado editor de texto rico modular del lado cliente y muy configurable Slider Proporciona un elemento generico que permite al usuario elegir entre un rango de valores TabView Permite la navegacion entre pestanas soportando la carga dinamica de contenido via XMLHttpRequest TreeView Anade un arbol de contenido con nodos que se pueden contraer y expandir para navegar por los elementos Uploader Permite la carga de varios archivos mostrando una barra de progreso Recursos CSS Editar CSS Base Utilidades para la manipulacion de la hoja de estilos de la forma clasica CSS Grids CSS Fonts CSS Reset Herramientas de desarrollo Editar Logger Permite escribir mensajes de log en una consola o utilizar las que proporcionan la extension Firebug para el navegador Mozilla Firefox o la consola JavaScript del navegador Safari Profiler Para perfilar el codigo JavaScript ProfilerViewer Usado con el anterior componente Profiler proporciona un perfilado visual YUI Test Permite anadir unidades de testeo al codigo JavaScript Herramientas de construccion Editar YUI Compressor Es un compresor de codigo JavaScript y CSS disenado para proporcionar un resultado 100 seguro Vease tambien EditarGoogle Web Toolkit JavaScript DHTML AJAXReferencias Editar Important Announcement Regarding YUI Yahoo Engineering 29 de agosto de 2014 Enlaces externos EditarYahoo User Interface Pagina oficial Blog Oficial de YUI Datos Q2300096 Multimedia YUI Library Obtenido de https es wikipedia org w index php title Yahoo UI Library amp oldid 125248791, wikipedia, wiki, leyendo, leer, libro, biblioteca,
