“Trabajando con YUI2”

1. On agosto 18th, 2010 at 10:21 pm Luis Leon Says:

   Investigación Domingo 15 de Agosto del 2010

   YUI
   • Yui es una librería de Yahoo para la interfaz de Usuario.
   • Es un set de utilidades y controles escritos en Java Script, para crear aplicaciones web interactivas usando DOM, DHTML, AJAX y CSS.
   • 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.

   Bueno estos son aspectos Generales acerca de YUI LIBRARY

   A continuación veremos cómo podemos poner insertar tablas de datos en nuestra página web.

   El primer paso es agregar las respectivos archivos js existen dos formas la primera forma es descargarse la librería y la otra trabajar directamente con el link .

   Vamos a realizar la implementación de este ejercicio:
   Como mencionamos anterior mente el primer paso es añadir las referencias a los archivos js.

   Este es el método en el cual la referencia es llamada desde la página de Yahoo.

   Bueno es necesario tener un div en donde vamos a colocar la tabla de datos de Yui.

   A continuación el código js

   YAHOO.example.Data = {
   2 bookorders: [
   3 {id:»po-0167″, date:new Date(1980, 2, 24), quantity:1, amount:4, title:»A Book About Nothing»},
   4 {id:»po-0783″, date:new Date(«January 3, 1983″), quantity:null, amount:12.12345, title:»The Meaning of Life»},
   5 {id:»po-0297″, date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:»This Book Was Meant to Be Read Aloud»},
   6 {id:»po-1482″, date:new Date(«March 11, 1985″), quantity:6, amount:3.5, title:»Read Me Twice»}
   7 ]
   8 }

   “Agregamos un evento que se va realizar cuando carge la ventana de Windows”

   ”YAHOO.util.Event.addListener(window, load», function() { YAHOO.example.Basic = function() { var myColumnDefs = [ {key:»id», sortable:true, resizeable:true},
   {key:»date», formatter:YAHOO.widget.DataTable.formatDate,
   sortable:true,
   sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},

   {key:»quantity», formatter:YAHOO.widget.DataTable.formatNumber,
   sortable:true, resizeable:true}, {key:»amount»,
   formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true,
   resizeable:true}, {key:»title», sortable:true, resizeable:true} ]; var
   myDataSource = new
   YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
   myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
   myDataSource.responseSchema = { fields:
   [«id»,»date»,»quantity»,»amount»,»title»] }; var myDataTable = new
   YAHOO.widget.DataTable(«basic», myColumnDefs, myDataSource,
   {caption:»DataTable Caption»}); return { oDS: myDataSource, oDT:
   myDataTable }; }();
   });
   El código observado anteriormente es para realizar una tabla simple de consulta

2. On agosto 18th, 2010 at 10:22 pm Luis Leon Says:

   Martes 17 Agosto del 2010
   Procedemos a realizar la tabla de datos de Yui con ajax

   function cargar(){

   YAHOO.example.XHR_XML = new function() {

   var myColumnDefs = [
   {key:»nombre», label:»Name», sortable:true},
   {key:»latitud»},
   {key:»longitud»}

   ];

   this.myDataSource = new YAHOO.util.DataSource(«mapa»);
   this.myDataSource.connMethodPost = false;
   this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
   this.myDataSource.responseSchema = {
   resultNode: «universidad»,// colocamos el nodo raiz
   fields: [«nombre»,»latitud»,»longitud»]
   // con la etiqueta fields accedemos a los tag del xml
   };

   this.myDataTable = new YAHOO.widget.DataTable(«xml», myColumnDefs,
   this.myDataSource, {initialRequest:»»});
   };
   lookup();
   }