Daw U4

UNIVERSIDAD PRIVADA TELESUP

Introducción
a) Presentación y contextualización:
En esta unidad el alumno conocerá los diversos componentes en el desarrollo de

las aplicaciones, también podrá conocer los programas de más uso y adecuados
para el desarrollo eficiente de las aplicaciones de interés tales como; JQUERY,
Jfreechart, etc
b) Competencia:
Identifica las propiedades de las bibliotecas más utilizadas y realizar gráficos
utilizando Jfreechart.
c) Capacidades:
1. Reconoce el uso adecuado del reporteador IText.

2. Emplea JFreeChart adecuadamente para la elaboración de gráficos.
3. Conoce los procesos adecuados para la creación de gráficos con base de
datos.
4. Describe las características y funcionalidades de JQUERY.
d) Actitudes:
 Incentiva la investigación de los componentes en el desarrollo de aplicaciones.

 Promueve la práctica constante de los procesos de programación de gráficos.
e) Presentación de Ideas básicas y contenidos esenciales de la Unidad:
La Unidad de Aprendizaje 04: Uso de Otros Componentes en el Desarrollo de

Aplicaciones, comprende el desarrollo de los siguientes temas:
TEMA 01: Uso del Reporteador IText.

TEMA 02: JFreeChart.
TEMA 03: Gráfico con Base de Datos.
TEMA 04: jQuery
Uso del TEMA 1

Reporteador
IText
Competencia:
Reconocer el uso adecuado del reporteador

IText.
Desarrollo de los Temas
Tema 01: Uso del Reporteador IText
iText es una librería escrita en java por Bruno Lowagie y otros,

que permite a los desarrolladores generar dinámicamente
documento en formato PDF, ofrece ventajas como:
El documento puede contener entradas escrita por el
usuario a través de variables.
El contenido puede ser personalizado
El documento puede ser ejecutado desde un entorno Web o Desktop
Se puede generar un documento a partir de archivos XML o Bases de datos
Agregar firmas digitales al PDF
Dividir, concatenar y manipular páginas del PDF
Puede obtener esta librería desde su página oficial en:

http://itextpdf.com
A continuación haremos un ejemplo donde utilizaremos los párrafos, tablas y veremos
cómo insertar una imagen además de agregarle una fuente en específico.
Primeramente recuerde tener a la mano la librería de iText en este caso he utilizado la
versión 5.0,2:
import java.io.*;
import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.Paragraph;
import com.itextpdf.text.Phrase;
import com.itextpdf.text.pdf.*;
import com.itextpdf.text.Font;
import com.itextpdf.text.Chunk;
import com.itextpdf.text.PageSize;
import com.itextpdf.text.Image;
import com.itextpdf.text.pdf.PdfPTable;
import com.itextpdf.text.FontFactory;
import com.itextpdf.text.BaseColor;
import javax.swing.JOptionPane;
public class docItext {

public void generarPDF()throws Exception{
/*Primero definimos todas las cadenas del encabezado del documento y los demas datos a
utilizar*/
String encabezado="Geniz Software - Http://ajdgeniz.wordpress.com"+"\n"+ "Esta es una
frase que estara en el encabezado del documento"+"\n"+"\n"+"\n"+"\n" +"\n"+"\n"+"\n";
/*colocaremos tambien la fecha de creacion*/
java.util.Date date = new java.util.Date();
/*Fuente utilizada para formatear el encabezado en este caso sera arial 12 en negrita*/
Font fuente= new Font(Font.getFamily("ARIAL"), 12, Font.BOLD);
/*Definimos un texto que se incluira antes de la tabla*/
String choro="Mi primer documento en iText\n" + "Este es un documento elaborado con

iText 5.0 por Geniz"+"\n" + "No olviden visitar mis demas tutoriales y codigos fuentes
en http://ajdgeniz.worpdress.com" +"\n"+"\n"+"\n"+"\n";
/*Tambien haremos una tabla a partir de un par de arreglos en otro caso podria haber
sido un resultset de una base de datos*/
String[] columna1={ "id1","id2","id3","id4","id5"};
String[] columna2={ "valor1","valor2","valor3","valor4","valor5"};
/*Ahora almacenaremos la imagen que ira en la parte superior y la alineamos a la
izquierda*/
Image imagen=Image.getInstance(("logo.png"));
imagen.setAlignment(Image.LEFT | Image.TEXTWRAP);
/*Ahora que ya tenemos el contenido del documento empezaremos a estructurarlo*/
try{
/*Primero pasaremos nuestras cadenas a elementos de iText*/
/*definimos una frase que sera el string encabezado y le aplicamos la fuente*/
Paragraph linea = new Paragraph(encabezado,fuente);
/*Definimos un parrafo*/
Phrase para=new Phrase(choro);
/*Pasamos la fecha a un String y la agregamos a un parrafo*/
Paragraph fecha=new Paragraph(String.valueOf(date)+"\n"+"\n");
/*Ahora definimos la tabla donde el arguemento recibido indica el número de columnas y
la propiedad setWidthPercentage permite indicarle que ocupe todo el ancho de la página*/
PdfPTable tabla=new PdfPTable(2);
tabla.setWidthPercentage(100);
/*Ahora que ya tenemos todos los elementos es hora de agregarlos al documento, para ello
primeramente definimos un documento e indicando el tamaño*/
Document documento = new Document(PageSize.LETTER);
/*Definimos el nombre del archivo de salida con extension .PDF*/
String file="Hola.pdf";
/*a traves del siguiente metodo (getInstance)y un flujo de salida del paquete .io
asociamos el documento de iText con el archivo de java*/
PdfWriter.getInstance(documento, new FileOutputStream(file));
/*Definimos las celdas que seran los encabezados de la tabla*/
PdfPCell celda1 =new PdfPCell (new Paragraph("Columna1-
ID",FontFactory.getFont("arial",10,Font.BOLD,BaseColor.RED)));;
PdfPCell celda2 =new PdfPCell (new Paragraph("Columna2-
Valor",FontFactory.getFont("arial",10,Font.BOLD,BaseColor.RED)));
/*Abrimos el documento y agregamos los elementos en el orden que deben aparecer*/

documento.open();
documento.add(imagen);
documento.add(linea);
documento.add(para);
documento.add(fecha);
tabla.addCell(celda1);
tabla.addCell(celda2);
/*Ahora a traves de un for insertaremos el contenido del arreglo en la tabla*/
for(int i=0;i<columna1.length;i++){
tabla.addCell(columna1[i]);
tabla.addCell(columna2[i]); }
documento.add(tabla);
/*Cerramos el documento*/
documento.close();
/* LaunchApplication.execute(file);
//Ignoren esta linea de codigo es una de mis clases para pruebas*/
}catch(DocumentException e){ JOptionPane.showMessageDialog(null,e.getMessage(),"Error",
JOptionPane.ERROR_MESSAGE);
return;
}
catch(IOException e){
JOptionPane.showMessageDialog(null,e.getMessage(),"Error", JOptionPane.ERROR_MESSAGE);
return;
}}
public static void main(String[]args)throws Exception{

/*invocamos al metodo generarPDF*/
docItext app=new docItext();
app.generarPDF();
}}
JFreeChart TEMA 2
Competencia:
Emplear JFreeChart adecuadamente para la

elaboración de gráficos.
Tema 02: JFreeChart
El Proyecto JFreeChart que vio la luz en el año 2000 es una librería de

código abierto (Open Source) para Java, que permite crear diagramas
de forma práctica y sencilla. Con JFreeChart podremos hacer
diferentes tipos de gráficos que van desde los tipos comunes tales
como gráficos circulares , gráficos de barras , áreas , gráficos de línea
, histogramas, diagramas de Gantt y más específicos y menos
frecuentemente utilizados como tipos Candlestick , Viento y Wafer Map
.
Configuración en NetBeans
Para poder trabajar con los gráficos que ofrece el JfreeChart necesitamos 2 librerías
básicamente:
Nos creamos un proyecto web de ahí nos vamos a la carpeta library – add Jar/Folder y
agregamos esas librerías.
Implementación de Grafico en JSP

Ahora nos vamos a la página JSP y programaremos
Se necesita importar las librerías del jfreechart para hacer el grafico.

<%@page import="org.jfree.data.general.*" %>
En esta importacion debemos de poner la librería que se necesita según el tipo de
reporte
En el código fuente que observamos se aprecia que se está llenando 3 valores (3

categorías cada uno con un valor numérico y justamente ese valor definirá los
tamaños del gráfico)
El resultado sería:
Ahora si queremos el mismo grafico pero en barras la programación seria:

Hay que notar que la programación es casi la misma.
El resultado seria
Gráfico con TEMA 3

Base de Datos
Competencia:
Conocer los procesos adecuados para la
creación de gráficos con base de datos.
Tema 03: Gráfico con Base de Datos
Si se quiere un gráfico de barras pero con base de datos el único cambio que
deberíamos de hacer es el siguiente:
Lo cambiamos de la siguiente manera

No debemos de olvidar de hacer una importación al SQL.

<%@page import="java.sql.*" %>,
el resto del código fuente es el mismo.
El resultado sería el siguiente:

jQuery TEMA 4
Competencia:
Describir las características y
funcionalidades de JQUERY.
Tema 04: JQUERY
JQuery es un framework de javascript, que nos va a permitir interactuar con los

elementos HTML de una manera muy cómoda y simplificando mucho nuestro trabajo.
Además jQuery, tiene una implementación propia de la tecnología AJAX, lo que nos va
a servir para que la comunicación entre JSP y jQuery sea mucho más atractiva.
Comunicar JSP con jQuery, no nos supone ningún problema, es una acción directa. El
problema viene a la hora de tratar de comunicar jQuery con JSP. La explicación es
muy sencilla y reside en la diferencia sutil pero tremendamente importante, que hay
entre estas dos tecnologías.
jQuery es una tecnología que se ejecuta en el lado del cliente, en su navegador y por
tanto cualquier variable que definamos con jQuery va a pertenecer al ámbito del cliente
y nuestro servidor no tiene porqué conocerla. Sin embargo, cualquier código que
escribamos en JSP, se va a ejecutar en el lado del servidor. Por tanto, cuando el
cliente solicite nuestra página JSP, nuestro contenedor (Tomcat, JBoss,..) compilará el
código JSP que nosotros hayamos incluido en la página, creará el código HTML
correspondiente y lo enviará al cliente.
Implementación de una página JSP con JQuery

Primero necesitamos la librería JQuery que es una librería que está hecha en
javaScript
La bajamos de internet de esta dirección: http://jquery.com/
Una vez que hemos bajado el archivo lo descomprimimos y lo guardamos en una

carpeta, en este caso la carpeta se llamara “librería”,
Ahora nos creamos un proyecto web y

copiamos esa carpeta “librería” en la carpeta
web
Una vez que tenemos las librerías de Jquery

desarrollaremos algunos ejemplos:
Ejemplo 1: ThickBox
Se tendrá un pagina donde se mostrara un link al hacer click se mostrara otra
pagina encima poniendo de un color oscuro la pagina de atrás
Se necesita importar las librerías:

<script type="text/javascript" src="libreria/jquery.js"></script>
<script type="text/javascript" src="libreria/ui/thickbox.js"></script>
Se necesita estas 2 librerías que la tenemos en la carpeta “librerías” . Notemos que
cuando se hace el hipervínculo tenemos lo siguiente: <a href="listado.jsp>"
class="thickbox">
Esto hace que salga el efecto que queremos

El resultado seria
Cuando se haga clic en “ver datos” se llamara a otra página llamada “Listado”
Ejemplo 2 : datepicker
Se tendrá una página donde se ingresara una fecha en una caja de texto y al
hacer click en la caja de texto se mostrara un calendario.
El resultado seria
Ahora si queremos ver el calendario más atractivo podríamos ponerle un estilo

“css”
Notemos la referencia:
<link type="text/css" href="libreria/themes/base/ui.all.css" rel="stylesheet" />
Además que se debería de crear un div
<div class="demo">
El resultado sería:

Daw U4

Cargado por

Copyright:

Formatos disponibles

Daw U4

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Daw U4

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD PRIVADA TELESUP

UNIVERSIDAD PRIVADA TELESUP

En esta unidad el alumno conocerá los diversos componentes en el desarrollo de

1. Reconoce el uso adecuado del reporteador IText.

 Incentiva la investigación de los componentes en el desarrollo de aplicaciones.

e) Presentación de Ideas básicas y contenidos esenciales de la Unidad:

La Unidad de Aprendizaje 04: Uso de Otros Componentes en el Desarrollo de

TEMA 01: Uso del Reporteador IText.

Uso del TEMA 1

Reconocer el uso adecuado del reporteador

iText es una librería escrita en java por Bruno Lowagie y otros,

Puede obtener esta librería desde su página oficial en:

public class docItext {

String choro="Mi primer documento en iText\n" + "Este es un documento elaborado con

/*Abrimos el documento y agregamos los elementos en el orden que deben aparecer*/

public static void main(String[]args)throws Exception{

Emplear JFreeChart adecuadamente para la

Tema 02: JFreeChart

El Proyecto JFreeChart que vio la luz en el año 2000 es una librería de

Implementación de Grafico en JSP

Se necesita importar las librerías del jfreechart para hacer el grafico.

En el código fuente que observamos se aprecia que se está llenando 3 valores (3

Ahora si queremos el mismo grafico pero en barras la programación seria:

Hay que notar que la programación es casi la misma.

Gráfico con TEMA 3

Tema 03: Gráfico con Base de Datos

Lo cambiamos de la siguiente manera

No debemos de olvidar de hacer una importación al SQL.

El resultado sería el siguiente:

Tema 04: JQUERY

JQuery es un framework de javascript, que nos va a permitir interactuar con los

Implementación de una página JSP con JQuery

Una vez que hemos bajado el archivo lo descomprimimos y lo guardamos en una

Ahora nos creamos un proyecto web y

Una vez que tenemos las librerías de Jquery

Se necesita importar las librerías:

Esto hace que salga el efecto que queremos

Ahora si queremos ver el calendario más atractivo podríamos ponerle un estilo

También podría gustarte

/Abrimos el documento y agregamos los elementos en el orden que deben aparecer/