Extensão vReport

Publicado em: 2009-09-6 — 3.045 visualizacoes

VReport: Documentação
por Vinícius Nunes Lage
op.vini@gmail.com / www.isecretaria.net/vinicius

VReport é uma extensão openSource escrita em javaScript(pequena biblioteca) voltada para desenvolvedores Web que necessitam criar relatórios com cabeçalho e rodapé, para serem impressos em todas as páginas na impressão. A extensão torna simples e profissional essa tarefa que a primeira vista parece simples de implementar, mas que na realidade pode se tornar complexa de acordo com o estilo do relatório a ser criado.

A página oficial da extensão, para download e informações adicionais é:
http://www.isecretaria.net/VReport/

A extensão é composta por 3 arquivos, não altere de forma alguma nenhum deles:

VReport.js: biblioteca escrita em javaScript que executa todo o processamento
VReport_print.css: folha de estilo que define as propriedades corretas para impressão
VReport_screen.css: folha de estilo que define as propriedades corretas para exibição na tela do navegador

Na página do relatório é necessária a inclusão destes três arquivos citados, da seguinte forma:

As folhas de estilos devem ser incluídas dentro da tag <head> da seguinet forma:
<link rel="stylesheet" type="text/css" href="VReport_print.css" media="print" />
<link rel="stylesheet" type="text/css" href="VReport_screen.css" media="screen" />
O arquivo VReport.js, responsável pelo processamento do relatório, deve ser incluído ao final da página do relatório, por exemplo antes de </body> ou </html>, pois ele organiza todo o arquivo depois que o relatório já foi criado. Se ele for inserido dentro da tag <head>, como é normal, ele não vai organizar o relatório de forma correta, já que “tal ainda não foi criado”. Este arquivo deve ser inserido da seguinte forma:
<script src="VReport.js" type="text/javascript"></script>

O cabeçalho, o rodapé e o conteúdo de todo o relatório podem conter qualquer tag HTML, bem como qualquer tipo de código dinâmico, seja PHP, ASP[.NET], JSP etc, e devem ser inseridos dentro da tag <body>, na ordem correta(cabeçalho, conteúdo, rodapé) da seguinte forma:

O cabeçalho deve ser definido dentro de uma div com id=”_VReportHeader”:
<div id=”_VReportHeader”>aqui vem o cabeçalho</div>
O conteúdo deve ser definido por completo dentro de uma div com id=”_VReportConten”:
<div id=”_VReportContent”>aqui vem o conteúdo completo</div>
O rodapé deve ser definido dentro de uma div com id=”_VReportFooter”:
<div id=”_VReportFooter”>aqui vem o rodapé</div>

Os estilos dessas 3 div’s podem ser criados sem problemas, com uma pequena restrinção quanto à propriedade position. Se essa propriedade for setada para qualquer uma dessas três div’s, o relatório pode não sair como esperado.

Para visualizar a impressão de seus relatórios criados com o VReport, procure “visualizar impressão” ou “print preview” em seu navegador.

Exemplo simples de um relatório usando VReport

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VReport blank example</title>
<!--
Aqui vem alguns estilos definidos para as div's do cabeçalho, conteúdo e rodapé, essas propriedas podem ser alteradas sem problemas
 -->

<style>
#_VReportHeader {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	border-bottom: 1px dashed gray;
	width: 100%;
	padding: 3px;
	text-align: center;
}
#_VReportFooter {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	border-top: 1px dashed gray;
	width: 100%;
	text-align: center;
}
#_VReportContent{
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 14px;
}
</style>

<!-- Aqui vem o include com as folhas de estilos necessárias -->
<link rel="stylesheet" type="text/css" href="VReport_print.css" media="print"/>
<link rel="stylesheet" type="text/css" href="VReport_screen.css" media="screen" />
<!-- Fim da inclusão das folhas de estilos ncessárias -->
</head>
<body>
<!--
Agora são criadas as div’s importantes relativas ao cabeçalho, conteúdo e rodapé, nesta ordem
-->
<div id="_VReportHeader">cabeçalho</div>
<div id="_VReportContent">conteúdo</div>
<div id="_VReportFooter">rodapé</div>
<!-- Aqui vem o arquivo responsável pelo processamento do relatório -->
<script src="VReport.js" type="text/javascript"></script>
</body>
</html>
<!-- Fim do relatório -->

Agradecimentos importantes:

Câmara Municipal de Ouro Preto
Leonardo Basílio
Rafael Capucho
Rafael Gomes

IMPORTANTE: procure visitar a página oficial da extensão com uma freqüência razoável, para ficar atualizado com as novas versões que podem sair. Qualquer bug pode ser notificado pelo e-mail citado logo no início deste documento.

LICENÇA: o VReport pode ser utilizado por qualquer pessoa, para qualquer fim, sendo necessário apenas a citação no sistema ou site que utiliza a extensão.

Nota do Maujor: o texto desta matéria é de autoria do autor da extensão e publiquei, a pedido dele, para divulgar a extensão.

Retweet this post

----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------

Livros do Maujor

Enquete

Lamento. Não há enquetes no momento.

Ver arquivos de enquetes

Esta matéria foi publicada em: 2009-09-6 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/09/06/extensao-vreport/trackback no seu site.