2011 »Enero» Yahoo! User Interface Blog (YUIBlog)

Treeble con YUI DataTable 3

24 de enero 2011 a las 10:41 am por Juan Lindal | En Desarrollo , la Galería de YUI 3 | 7 comentarios

La versión beta de DataTable de YUI 3.3.0 nos da un componente muy potente para jugar. Para dar inicio a los neumáticos de una manera útil, decidí actualizar mi Treeble ejemplos para usar DataTable. (Treeble permite mostrar los datos jerárquicos en una tabla .)

Para mi deleite, que era una brisa! Todo el trabajo duro se hace en TreebleDataSource , que se extiende 3 YUI DataSource, por lo que todo lo que tenía que hacer era conectarlo a DataTable mediante Y.Plugin.DataTableDataSource y luego configurar las columnas:

 var ds = new Y.TreebleDataSource (...),
	 pg = new Y.Paginator (...),
	 mesa;

 sendRequest function () {
	 table.datasource.load ({
		 solicitud: {
			 startIndex: pg.getStartIndex (),
			 resultCount: pg.getRowsPerPage ()
		 }
	 });
 }

 var cols = [
     {Key: 'yui33-hack ", etiqueta:''},
     {
         clave: "treeblenub", etiqueta:'',
         formateador: Y.Treeble.buildTwistdownFormatter (sendRequest)
     },
     {
         clave: 'title', la etiqueta: 'Título',
         formateador: Y.Treeble.treeValueFormatter
     },
     ...
 ];

 tabla = new Y.DataTable.Base ({ColumnSet: cols});
 table.plug (Y.Plugin.DataTableDataSource, {fuente de datos: ds});

Para ver el código fuente completo, consulte el ejemplo en vivo .

Las moscas sólo en la pomada son las siguientes:

La columna yui33-hack. Debido a un error en YUI DataTable 3.3.0 , el td elemento pasa a un formateador de la columna es en realidad de la columna anterior. Así, la primera columna de la tabla muestra el twistdown, y la segunda columna está vacía.
Los valores indefinidos en los datos se muestran como {value} en lugar de espacios en blanco ( error 2529858 ).

Con el fin de Treeble más fácil de usar, he añadido una piel de Sam que los estilos a las clases CSS escritos por los Y.Treeble formateadores.

Disfrute!

Sobre el autor: John Lindal ( @ jafl5272 en Twitter) es uno de los ingenieros de plomo en la construcción de los cimientos sobre los que Yahoo! APT se construye. Anteriormente, trabajó en el Yahoo! Publisher Network.

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUI: Horario Jueves 27 de enero

21 de enero 2011 a las 4:04 pm por Luke Smith | En Desarrollo , los horarios de entrada | Comments Off

El próximo YUI: Horario de apertura será el próximo jueves, día 27.

La semana pasada tratamos de llevar demasiado en el reducido espacio de tiempo una hora, y se acabó el tiempo antes de que uno de los segmentos más importantes: el 2011 YUI 3 comentarios hoja de ruta y parte sugerencia. Así que vamos a continuar donde lo dejamos, con Satyen observando todas las actualizaciones del plan de trabajo en bruto de la semana pasada, luego todo se trata de lo que piensas.

Así que venga con preguntas y sugerencias. Queremos saber cuáles son sus prioridades para el próximo año y cómo podemos ayudar y cuáles son sus pensamientos en la fabricación de YUI como un producto (o familia de productos) más completa y excepcional.

Vamos a estar en línea 10 a.m.-11 a.m. PDT jueves. Los detalles de la conexión son los mismos, como de costumbre.

Marque 1-888-371-8922 para (Skype funciona muy bien para no estadounidenses participantes *)
Ingrese el código de participante 47188953 #
Únete a la sesión de compartir pantalla (esto le preguntará si desea instalar el plugin de Adobe Connect, si esta es tu primera vez de usarlo). Nota: Esta dirección ha cambiado, así que por favor, actualice sus marcadores, si usted todavía está utilizando la dirección URL anterior.

Greh Hinch llegó a iniciar la conversación en los foros , por lo que llegar a una lluvia de ideas ya y nos vemos jueves!

ACTUALIZACIÓN (26.01)

Usted puede encontrar el proyecto de la hoja de ruta 2011 que Satyen discutimos la semana pasada en el wiki YUILibrary.com. No vamos a pasar mucho tiempo de verlo, así que echar un vistazo antes de la llamada.

* - Si Skype no es una opción, enviarme un correo electrónico a un número local.

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Anuncio de Yahoo! Interfaz de Usuario de la Biblioteca 2.x Cookbook

21 de enero 2011 a las 9:00 am por Matt Snider | En Desarrollo | 6 comentarios

Packt Publishing se complace en anunciar el lanzamiento de mi nuevo libro, Yahoo! Interfaz de Usuario de la Biblioteca 2.x libro de cocina . El libro contiene numerosas recetas de codificación, ofrecer a los lectores con ejemplos detallados de más de veinticinco componentes YUI 2.x, incluidos los contenedores , Drag & Drop , Connection Manager , DataTable , TreeView , y mucho más.

Lo que usted aprenderá de este libro

He escrito este libro para que le ayudará a aprender cómo utilizar YUI 2.x para construir aplicaciones web más ricas y más interactivas que impresionan a los clientes y sorprender a tus amigos. Ha recetas explicando más de veinticinco componentes YUI, que muestra cómo los utilizan, y cómo se pueden configurar para satisfacer sus necesidades. Cada componente cubierto, se extraerán muestras extraíbles de código que muestran las formas más comunes de que el componente se utiliza.

Además, el código de trabajo completo se puede descargar por separado para cada capítulo, por lo que es más fácil seguir adelante. Para cada una de las recetas, no es un ejemplo de introducción, a continuación ejemplos más avanzados, seguido de una explicación de cómo el componente que funciona y lo que está haciendo YUI. Para desarrolladores más experimentados, la mayoría de las recetas incluyen también una discusión adicional de la solución, que explica cómo personalizar y mejorar aún más el componente.

Práctico y lleno de fáciles de seguir las recetas, el libro le ayudará a crear aplicaciones ricas de Internet modernos, utilizando los componentes más potentes de la Biblioteca de interfaz de usuario Yahoo! (YUI).

Quién este libro está escrito para

El libro es más adecuado para los desarrolladores de JavaScript, que son relativamente nuevos en YUI 2 o interesados en ponerse en marcha rápidamente. Sin embargo, contiene ejemplos de casi todos los componentes y es ideal como referencia para los desarrolladores experimentados que buscan poner al día o de explorar algunas de las características más potentes de cada componente.

Obtener 15% de descuento!

Packt Publishing está ofreciendo un descuento del 15% para cualquier lector YUIBlog, y encontrarás mi libro está disponible en libro electrónico y los formatos tradicionales. Para recibir su descuento, sólo tiene que comprar Yahoo! Interfaz de Usuario de la Biblioteca 2.x libro de cocina a través de Packt Publishing, y proporcionar el código YUI2XCBK15 en la caja. (Nota: Debe estar registrado para que el código funcione.)

¿Quieres un ejemplo?

Para ayudarle a tener una idea de los contenidos ofrecidos dentro de mi libro, Packt es lo suficientemente generoso como para proporcionar una muestra de lo que puede esperar:

" YUI 2.X: El uso de componentes de eventos "

Sobre el autor: Matt Snider es un desarrollador web y aficionado JavaScript. Matt ha sido el desarrollo de aplicaciones web en una variedad de marcos y lenguajes de los últimos 7 años, y también ha estado escribiendo un blog sobre desarrollo web desde hace casi 4 años. Matt es el ingeniero principal en Mint.com . Él ha contribuido ampliamente al tanto YUI 2 y 3, incluyendo el componente de almacenamiento de YUI 2 (cubierto en este libro). Matt equilibra su tiempo entre su trabajo diario, su blog, y las contribuciones a la comunidad de código abierto. Cuando no está trabajando le gusta mochila lejos de todo, o quedarse en casa y explorar su amplia colección de videojuegos.

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUI Theater - Satyen Desai: (. 55 min) "" Un teléfono, una tableta y un paseo portátil en un bar ... "Enfoque-YUI para el Desarrollo de Web Móvil"

17 de enero 2011 a las 8:37 am por Eric Miraglia | En Desarrollo y YUI Theater | Comments Off

Satyen Desai ( @ dezziness ), creador de la YUI 3 de los componentes y subsistemas de widgets, habla de enfoque de YUI a apoyar el nuevo conjunto de dispositivos habilitados para Internet en el mercado hoy, y como nos gusta pensar en ellos en términos de características y limitaciones como oposición a un problema de espacio aislado.

Si el vídeo incrustar a continuación no se muestran correctamente en su lector de RSS de su elección, asegúrese de hacer clic a través de ver la versión de alta resolución del vídeo en el YUI Theater .

Otros recientes Videos de YUI Theater:

Luke Smith: YUI 3: Debajo de la Superficie - Luke Smith, un ingeniero de equipo de YUI, ofrece una de las conversaciones más valoradas en YUIConf 2010, mirar dentro de algunos de los patrones básicos de infraestructura y obras que se encuentran en el corazón de YUI 3.
Ryan Grove: Introducción YUI 3 Autocompletar - En esta charla de YUIConf 2010, YUI 3 Autocompletar autor Ryan Grove te lleva en un viaje relámpago de algunos de los patrones de autocompletado de muchos posibles gracias a este componente y proporciona una inmersión profunda en su poderosa integración YQL nueva , filtrado, y poner de relieve las capacidades.
Pablo Donnelly y Susarla Nagesh: YQL + YUI: Construcción de extremo a extremo de aplicaciones - En el desarrollo de widgets, que no se explica cómo utilizar los datos YQL que surge como una pregunta, sino más bien cómo acceder a él. En este YUIConf sesión de 2010, los ingenieros de YQL Pablo Donnelly y Nagesh Susarla análisis que empiece su consulta en la consola YQL, el acceso a datos a través de los puntos finales YQL diversos, y van a través de capas de autenticación de varios de YQL.
Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 y YQL - En este período de sesiones del YUIConf 2010, TipTheWeb cofundador y colaborador de Eric YUI Ferraiuolo discute la creación de una base de código del proyecto a escala usando YUI 3, Galería de YUI 3, y YQL.
Reid Burke: Yeti: Interfaz de prueba fácil de YUI - Pruebas de cross-browser aplicaciones web ha sido muy difícil por mucho tiempo: Está bien volver a cargar manualmente los navegadores o luchando con el software de automatización complicado. En este período de sesiones del YUIConf 2010, YUI ingeniero Burke Reid habla sobre cómo Yeti YUI proyecto ayuda a solucionar estos problemas. Reid explica cuándo se debe utilizar pruebas automatizadas para obtener el código frontend, ¿cómo Yeti trabaja con YUI prueba, cómo configurar las pruebas de cross-browser en cuestión de minutos y cómo el equipo utiliza YUI Yeti enviar un producto mejor.

Contenido de CC / Usado con permiso:

Subscribirse a YUI Theater:

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUI Theater - Luke Smith: "YUI 3: Bajo la Superficie" (48 min.)

14 de enero 2011 a las 2:33 pm por Eric Miraglia | En Desarrollo y YUI Theater | Comments Off

En este video YUI Theater, YUI ingeniero de Luke Smith ( @ ls_n ) ofrece una de las conversaciones más valoradas en YUIConf 2010, mirar dentro de algunos de los patrones básicos de infraestructura y obras que se encuentran en el corazón de YUI 3.

Si el vídeo incorporar a continuación no se muestran correctamente en su lector de RSS, asegúrese de hacer clic a través de ver la versión de alta resolución del vídeo en el YUI Theater .

Otros recientes Videos de YUI Theater:

Satyen Desai: "Un teléfono, una tableta y un paseo portátil en un bar ..." Enfoque-YUI a Mobile Web Development - Satyen Desai, creador de la YUI 3 de los componentes y subsistemas de widgets, habla de enfoque de YUI a apoyar el nuevo conjunto de habilitado para la web dispositivos en el mercado hoy, y cómo nos gustaría pensar en ellos en términos de características y limitaciones frente a un problema de espacio aislado.
Ryan Grove: Introducción YUI 3 Autocompletar - En esta charla de YUIConf 2010, YUI 3 Autocompletar autor Ryan Grove te lleva en un viaje relámpago de algunos de los patrones de autocompletado de muchos posibles gracias a este componente y proporciona una inmersión profunda en su poderosa integración YQL nueva , filtrado, y poner de relieve las capacidades.
Pablo Donnelly y Susarla Nagesh: YQL + YUI: Construcción de extremo a extremo de aplicaciones - En el desarrollo de widgets, que no se explica cómo utilizar los datos YQL que surge como una pregunta, sino más bien cómo acceder a él. En este YUIConf sesión de 2010, los ingenieros de YQL Pablo Donnelly y Nagesh Susarla análisis que empiece su consulta en la consola YQL, el acceso a datos a través de los puntos finales YQL diversos, y van a través de capas de autenticación de varios de YQL.
Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 y YQL - En este período de sesiones del YUIConf 2010, TipTheWeb cofundador y colaborador de Eric YUI Ferraiuolo discute la creación de una base de código del proyecto a escala usando YUI 3, Galería de YUI 3, y YQL.
Reid Burke: Yeti: Interfaz de prueba fácil de YUI - Pruebas de cross-browser aplicaciones web ha sido muy difícil por mucho tiempo: Está bien volver a cargar manualmente los navegadores o luchando con el software de automatización complicado. En este período de sesiones del YUIConf 2010, YUI ingeniero Burke Reid habla sobre cómo Yeti YUI proyecto ayuda a solucionar estos problemas. Reid explica cuándo se debe utilizar pruebas automatizadas para obtener el código frontend, ¿cómo Yeti trabaja con YUI prueba, cómo configurar las pruebas de cross-browser en cuestión de minutos y cómo el equipo utiliza YUI Yeti enviar un producto mejor.

Contenido de CC / Usado con permiso:

Subscribirse a YUI Theater:

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUI: Horario Lun Ene 19

13 de enero de 2011 a las 4:10 pm por Luke Smith | En Desarrollo | 3 comentarios

Acogiendo con beneplácito en el año 2011, Yui: horario de apertura será la puesta en marcha de nuevo, y la primera del nuevo año será el próximo miércoles, día 19.

Naturalmente, con el lanzamiento de YUI 3.3.0 , que será el tema principal de los primeros Horario de este año. Voy a tratar de bregar tantos del equipo de YUI y colaboradores externos como lo que pueda para unirse a la llamada, y vamos a repasar nuestras lugares favoritos a continuación, abra la conversación para escuchar acerca de lo que ya han jugado con el de la vista previa lanzamientos. Vamos a tener una actualización de 2,9, entonces (y estoy muy entusiasmado con esto), empieza a hablar hoja de ruta 3.x para 2011. Y queremos que sus ideas, su retroalimentación. ¿Dónde quieres ver YUI va de este año? ¿Cuáles son los artículos de precio calientes en su lista de deseos?

Así que ven y charlar con el equipo de YUI acerca de lo que es nuevo y lo que el futuro se mantenga!

En otras noticias desde el frente de logística del programa, habrá algunos cambios en el formato Horario de apertura:

En primer lugar, vamos a acortar la llamada de 2 horas a una más empresarial hora de usar una hora
Voy a incorporar un enfoque de implementación sección de estilo en cada llamada, para que todos podamos aprender YUI 3 está siendo utilizado en las trincheras (sujeto a temas especiales, como las nuevas versiones
Y, por último, y asombrosamente, Eric Ferraiuolo , de TipTheWeb la fama, se me acompaña como co-anfitrión permanente. Él ha estado viviendo el sueño desde YUI 3 3.0 beta 1, y añadir la voz y la experiencia de aplicación en el mundo real.

Vamos a estar en línea de 10 a 23:00 PST a menos que la conversación es demasiado bueno para parar. Los detalles de la conexión son los mismos, como de costumbre.

Marque 1-888-371-8922 para (Skype funciona muy bien para no estadounidenses participantes *)
Ingrese el código de participante 47188953 #
Únete a la sesión de compartir pantalla (esto le preguntará si desea instalar el plugin de Adobe Connect, si esta es tu primera vez con él)

No te olvides de suscribirte al calendario YUI y siga @ yuilibrary en Twitter para las últimas actualizaciones de Horario y otros Intereses YUI.

Nos vemos allí!

* - Si Skype no es una opción, enviarme un correo electrónico a un número local.

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Tabla de pie de página las estadísticas de YUI DataTable 2

13 de enero de 2011 a las 4:00 pm por Matt Parker | En Desarrollo | 2 comentarios

El YUI DataTable 2 hace mucho. Pero una de las cosas que no hacer nada es con un pie de la tabla, donde se espera encontrar los totales, promedios y otros datos de resumen. Así que me he extendido DataTable para agregar los datos de resumen para datos numéricos.

Cómo se va

En primer lugar, se debe utilizar: necesitarás algo de código de github - hay tres js, y tendrás todos ellos en su página después de que el archivo de YUI DataTable js. Y es posible que desee cambiar el espacio de nombres - que utilizamos YAHOO.LPLT.DataTable como la extensión de YAHOO.widget.DataTable . Voy a explicar un poco más acerca de estos archivos de abajo.

Configurar su tabla de datos de forma normal, pero hay tres cosas que hay que hacer para conseguir el resumen de trabajo:

Asegúrese de que su fuente de datos especifica "número" analizadores para todos los campos que desea resumir, sobre todo si está realizando la edición en línea de células:
```
  myDataSource.responseSchema = {campos: [
    {Clave: la "cantidad", programa de análisis: el "número"}
    / * Etc ..  * /
 ]};
```
Añadir una configuración de clave y valor de la columnStats: cierto en la matriz de definición de la columna:
```
  var myColumnDefs = [
     {Clave: la "cantidad", etiqueta: "Cantidad", columnStats: true} 
     / * Etc ..  * /
 ];
```
para las columnas que le gustaría resumida. (El total de su 'id' de la columna no es probablemente muy útil!).
Dile a la tabla de datos que las estadísticas para calcular:
```
 var = new myDataTable YAHOO.LPLT.DataTable ("exampleEl",
     myColumnDefs, 
     MyDataSource, 
     {ColumnStats: {on: true, estadísticas: ['suma']}}
 );
```
Esta es la forma más simple posible configurar las estadísticas de las columnas, pero usted puede agregar las estadísticas adicionales, personalizar las etiquetas, y mucho más.

Hay un ejemplo en github para jugar.

Algunos puntos:

El pie de página va a cambiar con la tabla. Así que si usted mostrar / ocultar las columnas, moverlos, añadir otros nuevos, añadir / eliminar filas, ordenar o utilizar editores en línea de células, el pie de página se actualizará la interfaz de usuario y las estadísticas en consecuencia.
Usted puede agregar tantas filas al pie de página que desee, una fila para cada estadística. Tal como está, se puede tener media, suma la mediana, mínimo, máximo, rango, STDEV, la varianza, o varianceUnbiased. El 'estadísticas' elemento de la configuración es un arreglo: sólo tiene que añadir las estadísticas que le gustaría a esta matriz (por ejemplo, stats: ["min", "median", "stdev"] ).
El pie de la tabla va a usar ninguna formateadores especificados para esa columna.
Si usted tiene un paginador, puede elegir si las estadísticas se muestran son para toda la tabla o sólo la página actualmente visible. Añadir pagedTotals: true a los columnStats se oponen a que las estadísticas de la página.
La serie de 'estadísticas' en el objeto de configuración también puede incluir literales de objetos, con 'label' llaves y 'fn'. fn es la función que va a calcular las estadísticas - ya sea una cadena como 'min' o una función que devuelve un número. El ejemplo en github muestra cómo se podría hacer utilizando los datos de una "total ponderado" a partir de dos columnas.

Más información sobre el código de la extensión real

El archivo principal, YAHOO_DataTable_colStats.js, añade un par de propiedades protegidas a la tabla de datos, algunos métodos protegidos, y dos métodos públicos, colStatsRefresh que volverá a calcular y dibujar el pie de la tabla, y colStatsGetRecordSet , que devuelve una matriz que sea de todos registros, o sólo aquellos visibles, dependiendo del valor de pagedTotals . El primero puede ser útil si usted está haciendo cambios a la tabla que no se activan los eventos útiles (por ejemplo, cambiar directamente los datos en el conjunto de registros subyacente), el segundo si usted está utilizando las funciones habituales de resumen.

YAHOO_DataSource_patch.js añade un parseField(key, value) método para DataSource. Esto es necesario cuando se tienen los editores de cuadro de texto en línea de células para los datos numéricos, el editor devuelve una cadena, que no se analiza de forma automática, por lo que no se puede añadir. El parseField proporciona acceso a los programas de análisis especificados en el origen de datos, para convertir los datos editados.

YAHOO_util_Stats.js proporciona un independiente YAHOO.util.Stats clase que envuelve un conjunto (ordenado) de los datos numéricos y proporciona las estadísticas de resumen. Es sólo la dependencia se YAHOO.lang. Una instancia de YAHOO.util.Stats es mantenido por el DataTable para cada columna que se va a resumir, y almacena en caché algunas de las más difíciles de matemáticas para mejorar el rendimiento. Las cadenas pasa a la matriz de estadísticas ('min', 'media', etc) son los métodos de la clase YAHOO.util.Stats, por lo que fácilmente podría añadir otras adicionales mediante la adición al prototipo. Tenga en cuenta sin embargo, que sólo tienen acceso a los datos de "su" columna.

Y finalmente

Estoy bastante seguro de que esto no va a trabajar con tablas de datos de desplazamiento, así que no hemos siquiera intentado! Pero si usted encuentra cualquier problema o tiene ideas, hacer, por favor ponerlos en el seguimiento de incidencias github.

Sobre el autor: Matt Parker ( @ Lamplightdb en Twitter ) es el fundador y desarrollador de sistemas de bases de datos Lamplight , una pequeña empresa proporcionando una con todas las funciones basado en la web sistema de gestión para organizaciones no lucrativas en el Reino Unido. Matt vive y trabaja en el noroeste de Londres.

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Página siguiente »

Desarrollado por WordPress en Yahoo! Web Hosting .

Interfaz de usuario de Yahoo! Blog (YUIBlog)

Treeble con YUI DataTable 3