jueves, 19 de agosto de 2010

Mostrar datos XML con YUI DataTable Control

Una cosa que me gusta de YUI es que Yahoo será la sede de todas las bibliotecas, que exige que sólo se incluyen las bibliotecas que necesita. En este ejemplo, vamos a incluir las siguientes hojas de estilo y las bibliotecas YUI:

http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css
http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/datatable.css
http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js”>
http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js”>
http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js”>
http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js”>
http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js”>

Tenemos que decirle dónde mostrar la producción real. En este caso, vamos a utilizar un div con id localxml:

<div id=”localxml”></div>

Luego, tenemos el código JavaScript que llama a los usos y las diferentes funciones de las bibliotecas antes mencionadas:

<script type=”text/javascript”>
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Local_XML = new function() {
this.connectionCallback = {
success: function(o) {
var xmlDoc = o.responseXML;

var myColumnDefs = [
{key:"iduniversidad", sortable:true, formatter:this.formatUrl},
{key:"nombre", sortable:true, formatter:this.formatUrl},
{key:"ubicacion", sortable:true, formatter:this.formatUrl},
{key:"ciudad", sortable:true, formatter:this.formatUrl}
];

this.myDataSource = new YAHOO.util.DataSource(xmlDoc);
this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
this.myDataSource.responseSchema = {
resultNode: "Universidad",
fields: ["iduniversidad","nombre","ubicacion","ciudad"]
};

this.myDataTable = new YAHOO.widget.DataTable("localxml", myColumnDefs, this.myDataSource);

},
failure: function(o) {

}
};

this.getXML = YAHOO.util.Connect.asyncRequest("GET",
"http://localhost:8084/ProyectoFinal/Servlet1",
this.connectionCallback);
};
});
</script>

Fuente: http://brad.melendy.com/?p=101

No hay comentarios:

Publicar un comentario