ARCmop Java Programacion Solaris Linux

Java-linux-programacion

Ejemplo simple Java-JSF-Facelets-Html-Javascript-CSS-JqGrid-JQPlot

Posted by Cmop en agosto 26, 2013


26-08-2013 12-09-13 p.m.

Buenos días, a raíz que me encuentro capacitando a unos amigos extranjeros en lo que es programación web, surgió este ejemplo, el cual he querido compartir, pues puede servir de punto de partida.

Algunas cosas ha explicar en el código:

En este código se aprecia la utilización del componente h:datatable,h;outputLabel, los cuales pertenecen a JSF, asi como f:facet l cual pertenece a Facelets, en este caso indica que queremos agregar será la cabecera de la tabla, es decir lo que pondríamos en HTML como <thead><tr><td>XXXXXXXXX</td></tr></thead>, notese el uso de #{} y ${}.

26-08-2013 11-56-00 a.m. En el siguiente fragmento se aprecia, el uso de JSTL, para asignar el valor de una variable y después utilizar su valor para alguna decisión. 26-08-2013 11-57-46 a.m. Ahora veremos el codigo javascript, usando jquery, jqgrid y jgplot.

$(document).ready(function() {
$("#btnExportarPng").button();
tableToGrid(".tbDatos", {
datatype: 'local',
rownumbers: true,
height: 'auto',
userdata: "userdata",
width: 'auto',
rowNum: 15,
rowList: [5, 10, 15],
viewrecords: true,
pager: '#tbDatosPager',
recordtext: "{0} {1}/{2}",
sortable: false,
colNames: ['Nombres', 'Edad', '¿Mayor Edad?'],
colModel: [
{name: "Nombres", index: "Nombres", width: "200"},
{name: "Edad", index: "Edad", sorttype: "int", align: "center", width: "80"},
{name: "MayorEdad", index: "MayorEdad", align: "center", width: "120"}
],
gridview: true,
onSortCol: function(index, iCol, sortorder) {
console.log(index, iCol, sortorder);
var datos = $(".tbDatos").jqGrid("getGridParam", "data");
if (sortorder === "asc") {
if (index === "Edad") {
datos.sort(function(a, b) {
var aa = parseInt(decodificaHtml(a[index]));
var bb = parseInt(decodificaHtml(b[index]));
return  aa - bb;
});
} else {
datos.sort(function(a, b) {
var aa = decodificaHtml(a[index]);
var bb = decodificaHtml(b[index]);
return  aa.localeCompare(bb);
});
}
} else if (sortorder === "desc") {
if (index === "Edad") {
datos.sort(function(a, b) {
var aa = parseInt(decodificaHtml(a[index]));
var bb = parseInt(decodificaHtml(b[index]));
return  bb - aa;
});
} else {
datos.sort(function(a, b) {
var aa = decodificaHtml(a[index]);
var bb = decodificaHtml(b[index]);
return  bb.localeCompare(aa);
});
}
}
console.log(datos);
dibujaEdades(datos);
},
onSelectRow: function(rowid, status, e) {
console.log(rowid);
},
loadComplete: function(data) {
console.log("Tabla Cargada");
}
});
//Agregar el Boton Exportar a Excel//
var paginador = $(".tbDatos").getGridParam('pager');
$(".tbDatos").navGrid(paginador, {
edit: false,
add: false,
del: false,
search: false,
refresh: false
}).navButtonAdd(paginador, {
caption: "Exportar Excel",
buttonicon: "ui-icon-export",
onClickButton: function() {
$(".tbDatos").jqGrid('exportarExcelCliente', {nombre: "HOJATEST", formato: "excel"});
},
position: "last"
});
var datos = $(".tbDatos").getGridParam("data");
dibujaEdades(datos);
});
function dibujaEdades(datos) {
$("#gfEdades").html("");
var datosPlot = new Array();
for (var i in datos) {
datosPlot.push([decodificaHtml(datos[i].Nombres), parseInt(decodificaHtml(datos[i].Edad))]);
}
$.jqplot('gfEdades', [datosPlot], {
title: "Grafico con JQPlot",
animate: true,
series: [{renderer: $.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}});
}
$("#btnExportarPng").bind('click', {chart: $("#gfEdades")}, function(evt) {
var imgelem = evt.data.chart.jqplotToImageElem();
$("#graficoExport").attr("href", imgelem.src)[0].click();
});
function decodificaHtml(cadenaHTML) {
return $("<div/>").html(cadenaHTML).text();
}

Se ha utilizado JQgrid a través de la función tableToGrid, la cual es la responsable de convertir una tabla HTML, a una tabla Estilizada en JQGrid, asi como de dotarle de muchas otras funcionalidades, que por ser aún un ejemplo sencillo no serán comentadas.
Por otro lado se ha utilizado JQPlot para dibujar los datos de la tabla Nombres y Edad, pero agregando el comportamiento dinamico a la tabla JQGrid, para que al ordenarse en forma ascendente o descendente, por alguna columna, la gráfica sea actualiza, ésta gráfica utiliza el componente CANVAS, y permite la exportación a una imagen PNG de base64.

Notar la personalización del método SORT de los arrays en javascript, y el uso de “localeCompare”.

Link del archivo de proyecto: http://www.mediafire.com/download/99t9upv5a3jth69/PrimerJSF2.0.war

Bueno eso es todo, espero les sirva de ayuda.

Una respuesta to “Ejemplo simple Java-JSF-Facelets-Html-Javascript-CSS-JqGrid-JQPlot”

  1. Hola Cmop, he leido este post y el anterior donde explicas la exportacion a excel y son justo lo que necesito. Me parece excelente trabajo. Al descargarme el fichero comprimido PrimerJSF2.0.war lo único que descarga son librerias, pero sin ejemplos. ¿Podrias por favor subir un ejemplo completo?
    Muchisimas gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: