Diferencia entre revisiones de «Webkit Report Engine»

De Jose Castillo Aliaga
Ir a la navegación Ir a la búsqueda
Sin resumen de edición
 
(No se muestran 23 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
Webkit és un motor de renderitzat d'html. La idea de Openerp és utilitzar html i css per donar format als informes i després descarregar un pdf per a imprimir. Per poder fer aixó, necessita el programa wkhtmltopdf.
Webkit és un motor de renderitzat d'html. La idea de [[OpenERP]] és utilitzar webkit per renderitzar html i css, donant format als informes i després descarregar un pdf per a imprimir. Per poder fer aixó, necessita el programa '''wkhtmltopdf'''.


== Instal·lació en Ubuntu ==
== Instal·lació en Ubuntu ==


* El wkhtmltopdf oficial d'Ubuntu falla. Per tant, cal descarregar-lo de la web oficial:
Aquest manual és per a Ubuntu 14.04 o Debian Wheezy


  # wget http://wkhtmltopdf.googlecode.com/files/wkhtmltopdf-0.11.0_rc1-static-amd64.tar.bz2
* El wkhtmltopdf oficial d'Ubuntu falla amb OpenERP. Per tant, cal descarregar-lo de la web oficial:
# bunzip2 wkhtmltopdf-0.11.0_rc1-static-amd64.tar.bz2
 
  # tar -xvf wkhtmltopdf-0.11.0_rc1-static-amd64.tar
  # wget http://downloads.sourceforge.net/project/wkhtmltopdf/0.12.1/wkhtmltox-0.12.1_linux-wheezy-i386.deb
# mv wkhtmltopdf-amd64 /usr/bin/wkhtmltopdf
  # dpkg -i wkhtmltox-0.12.1_linux-wheezy-i386.deb


* A continuació, cal instal·lar el mòdul '''report_webkit'''.
* A continuació, cal instal·lar el mòdul '''report_webkit'''.
Línea 26: Línea 26:
* Es reinicia el servici '''openerp'''
* Es reinicia el servici '''openerp'''


 
=== Informes d'exemple ===
<div class="toccolours mw-collapsible mw-collapsed" style="overflow: hidden;">
En aquest moment tenim el mòdul correctament instal·lat, però no tenim informes fets per a webkit. El que anem a fer és instal·lar uns mòduls bàsics per a provar webkit i entendre cóm funciona:
En aquest moment tenim el mòdul correctament instal·lat, però no tenim informes fets per a webkit. El que anem a fer és instal·lar uns mòduls bàsics per a provar webkit i entendre cóm funciona:


Línea 53: Línea 54:


Una vegada instal·lat, les factures i els pressupostos es poden imprimir amb webkit.
Una vegada instal·lat, les factures i els pressupostos es poden imprimir amb webkit.
</div>
== Crear els nostres informes ==
Per a crear un infome, cal utilitzar una plantilla '''mako'''. També necessitem declarar el report en un xml.
En el cas de l'exemple de school del DIA, aquest sería un informe bàsic per als estudiants:
'''__openerp__.py:'''
<syntaxhighlight lang="python">
...
        "update_xml" : ['school_view.xml', 'school_report.xml'],
...
</syntaxhighlight>
'''school_report.xml'''
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="utf-8"?>
<openerp>
<data>
<report id="school.report_student"
name="school.student.webkit"
auto="False"
model="school.student"
file="school/report/student.mako"
string="Student"
report_type="webkit"/>
</data>
</openerp>
</syntaxhighlight>
'''report/student.mako'''
<syntaxhighlight lang="html5">
  <html>
  <head>
  <style type="text/css">
  ${css}
  div.header {
  border-bottom: 2px solid black;
          width: 100%;
  }
 
  span.header {
  display: inline-block;
  text-align: left;
  font-size: 12;
  font-weight: bold;
  padding-left: 6px;
  }
  div.list {
  page-break-inside: avoid;
          width: 100%;
  border-bottom:1px solid gray;
  }
 
  span.list {
  display: inline-block;
  text-align: left;
  font-size: 12;
  padding-right: 6px;
          vertical-align: middle;
  margin-top: 7px;
  padding-bottom: 2px;
  page-break-inside: avoid;
          min-height: 30px;
  }
  </style>
  </head>
  <body>
  %for o in objects :
 
  <div class="address">
    <b>${o.name |entity}</b><br/>
    %if o.surname :
        ${o.surname or ''}<br> 
    %endif
    %if o.IDNum :
        ${o.IDNum or ''}<br> 
    %endif
 
  <div class="header">
  <span class="header" style="width: 40%;">${_("Description")}</span>
  <span class="header" style="width: 10%;">${_("Subject")}</span>
  <span class="header" style="width: 10%;">${_("Hours Total")}</span>
  <span class="header" style="width: 20%;">${_("Website")}</span>
  <span class="header" style="width: 10%;">${_("Date")}</span>
  </div>
 
 
  %for line in o.subscriptions :
 
  <div class="list">
  <span class="list" style="width: 40%;">${line.name}</span>
  <span class="list" style="width: 10%;">${line.subject}</span>
  <span class="list" style="width: 10%;">${line.hours_total}</span>
  <span class="list" style="width: 20%;">${line.website}</span>
  <span class="list" style="width: 10%;">${line.date}</span>
  </div>
  %endfor
 
 
  </div>
  %endfor
  </body>
  </html>
</syntaxhighlight>
== Crear Capçaleres i peus ==
Les capçaleres i els peus són independents del contigut en webkit. Per això, cal crear la capçalera, el peu i els logos.
En primer lloc, cal fer referència al mòdul de webkit per crear les capçaleres i que puguen ser instal·lades:
'''__openerp__.py:'''
<syntaxhighlight lang="python">
"depends" : ['base','report_webkit'],
...
  "update_xml" : ['school_view.xml', 'school_report.xml', 'report/header_school.xml'],
</syntaxhighlight>
A continuació, en l'XML del report, cal fer referència a la base:
'''school_report.xml'''
<syntaxhighlight lang="xml">
webkit_header="school.school_report_header"
</syntaxhighlight>
Després es crea el fixer header_school.xml. Podem utilitzar els exemples com a base per a modificar.
Si volen un logo personalitzat ha d'estar en base64 com una data més del model ir.header_img
Un XML per a definir els headers ha de ser un record amb els següents camps:
<syntaxhighlight lang="xml">
  <record id="championship_report_header" model="ir.header_webkit">
            <field name="name">Example Report Header</field>
            <field name="orientation">Portrait</field>
            <field name="format">A4</field>
            <field eval="55.0" name="margin_top"/>
            <field eval="0.0" name="margin_bottom"/>
            <field name="footer_html"><![CDATA[ (html del peu de pàgina) ]]></field>
            <field name="html"><![CDATA[ (html de la capçalera i del cos)]]></field>
            <field name="css"><![CDATA[ (css) ]]></field>
  </record>
</syntaxhighlight>
Es pot afegir javascript en el html o footer. Però el resultat és un PDF, per tant el javascript no pot ser interactiu.
La orientació pot ser Portrait o Landscape i el format:
<span style="font-size:9px">A0 A0 5 841 x 1189 mm
A1 A1 6 594 x 841 mm
A2 A2 7 420 x 594 mm
A3 A3 8 297 x 420 mm
A4 A4 0 210 x 297 mm, 8.26 x 11.69 inches
A5 A5 9 148 x 210 mm
A6 A6 10 105 x 148 mm
A7 A7 11 74 x 105 mm
A8 A8 12 52 x 74 mm
A9 A9 13 37 x 52 mm
B0 B0 14 1000 x 1414 mm
B1 B1 15 707 x 1000 mm
B2 B2 17 500 x 707 mm
B3 B3 18 353 x 500 mm
B4 B4 19 250 x 353 mm
B5 B5 1 176 x 250 mm, 6.93 x 9.84 inches
B6 B6 20 125 x 176 mm
B7 B7 21 88 x 125 mm
B8 B8 22 62 x 88 mm
B9 B9 23 33 x 62 mm
B10 :B10 16 31 x 44 mm
C5E C5E 24 163 x 229 mm
Comm10E Comm10E 25 105 x 241 mm, U.S. Common 10 Envelope
DLE DLE 26 110 x 220 mm
Executive Executive 4 7.5 x 10 inches, 190.5 x 254 mm
Folio Folio 27 210 x 330 mm
Ledger Ledger 28 431.8 x 279.4 mm
Legal Legal 3 8.5 x 14 inches, 215.9 x 355.6 mm
Letter Letter 2 8.5 x 11 inches, 215.9 x 279.4 mm
Tabloid Tabloid 29 279.4 x 431.8 mm</span>
== Insertar imatges ==
El webkit accepta logos predefinits e imatges de la base de dades.
Els logos es guarden en base64 en el model '''ir.header_img'''. Per guardar un logo es pot incluir en el XML del header, per exemple amb aquesta sintaxi:
<syntaxhighlight lang="xml">
<record id="ir_header_img_championlogo" model="ir.header_img">
            <field name="name">champion_logo</field>
            <field name="type">png</field>
            <field name="img">iVBORw0KGgoAAAANSUhEUgAAAMgAAAEbCAYAAACfhcurAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBI
WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3go
.......... La resta del base64 del logo ...................
          </field>
</record>
</syntaxhighlight>
Una vegada guardat el logo en la base de dades és accesible en la secció logos de webkit del menú configuració.
Per insertar el logo en el mako o en la plantilla header s'ha d'utilitzar el següent helper:
<syntaxhighlight lang="xml">
  ${helper.embed_logo_by_name('champion_logo')}
</syntaxhighlight>
Però si volem insertar imatges que estàn guardades en la base de dades, hem de fer una etiqueta <img> amb base64:
<syntaxhighlight lang="xml">
  <img src="data:image/png;base64,[${o.logo}]" />
</syntaxhighlight>
No és fàcil insertar una imatge directament amb l'etiqueta img i src típiques de HTML ja que és una plantilla mako interpretada per un mòdul de python i les rutes relatives al mòdul no van. Si fiquem la ruta absoluta en el sistema si que funciona, però el mòdul no seria portable. Per tant, si volem imatges fixes podem necessitar ficar-les com a logo de webkit.
== Enllaços ==
http://help.openerp.com/question/4724/how-to-configure-webkit-for-v7/

Revisión actual - 18:08 29 oct 2014

Webkit és un motor de renderitzat d'html. La idea de OpenERP és utilitzar webkit per renderitzar html i css, donant format als informes i després descarregar un pdf per a imprimir. Per poder fer aixó, necessita el programa wkhtmltopdf.

Instal·lació en Ubuntu

Aquest manual és per a Ubuntu 14.04 o Debian Wheezy

  • El wkhtmltopdf oficial d'Ubuntu falla amb OpenERP. Per tant, cal descarregar-lo de la web oficial:
# wget http://downloads.sourceforge.net/project/wkhtmltopdf/0.12.1/wkhtmltox-0.12.1_linux-wheezy-i386.deb
# dpkg -i wkhtmltox-0.12.1_linux-wheezy-i386.deb
  • A continuació, cal instal·lar el mòdul report_webkit.
  • Cal dir a OpenERP on està el wkhtmltopdf. Cal anar a Configuracion -> Técnico -> Parámetros -> Parámetros del sistema i crear una nova clau webkit_path amb la ruta absoluta del wkhtmltopdf.
No cal fer aquest pas si està /usr/bin/, ja que forma part del PATH
  • És recomanable fer els nous mòduls en un directori diferent al oficial d'OpenERP. Per tant, es recomana afegir una ruta al addons_path:
 # nano /etc/openerp/openerp-server.conf

Afegir: 

   addons_path = /usr/lib/pymodules/python2.7/openerp/addons,/opt/openerp-custom/addons
  • Es reinicia el servici openerp

Informes d'exemple

En aquest moment tenim el mòdul correctament instal·lat, però no tenim informes fets per a webkit. El que anem a fer és instal·lar uns mòduls bàsics per a provar webkit i entendre cóm funciona: 

  # apt-get install bzr
  # cd /opt/openerp-custom
  # mkdir sources
  # cd sources
  # bzr branch lp:account-invoice-report/7.0 account-invoice-report
  # bzr branch lp:sale-reports/7.0 sale-report
  # bzr branch lp:account-financial-report/7.0 account-financial-report
  # bzr branch lp:webkit-utils webkit-utils
  # cd ..
  # mkdir addons
  # cd addons
  # ln -s ../sources/sale-report/sale_order_webkit/ sale_order_webkit
  # ln -s ../sources/account-invoice-report/invoice_webkit/ invoice_webkit
  # ln -s ../sources/webkit-utils/base_headers_webkit/ base_headers_webkit
  # ln -s ../sources/webkit-utils/report_webkit_chapter_server/ report_webkit_chapter_server

A continuació, en OpenERP, instal·lem els 4 mòduls que hem descarregat. Aquest són:

  • sale_order_webkit : Un reemplaç per a l'impresió de ordres de venda.
  • invoice_webkit: Un reemplaç per al pressuposts.
  • base_headers_webkit: Les capçaleres i peu bàsics per a començar a fer informes.
  • report_webkit_chapter_server: Utilitat per a proporcionar una funció que necessita webkit.

Una vegada instal·lat, les factures i els pressupostos es poden imprimir amb webkit.

Crear els nostres informes

Per a crear un infome, cal utilitzar una plantilla mako. També necessitem declarar el report en un xml.

En el cas de l'exemple de school del DIA, aquest sería un informe bàsic per als estudiants:

__openerp__.py: 

 ...
        "update_xml" : ['school_view.xml', 'school_report.xml'],
 ...

school_report.xml 

 <?xml version="1.0" encoding="utf-8"?>
 <openerp>
 <data>
 <report id="school.report_student"
 name="school.student.webkit"
 auto="False"
 model="school.student"
 file="school/report/student.mako"
 string="Student"
 report_type="webkit"/>
 </data>
 </openerp>


report/student.mako 

  <html>
  <head>
  <style type="text/css">
  ${css}
  div.header {
  	 border-bottom: 2px solid black;
           width: 100%;
  	 }
  	 
  span.header {
  	display: inline-block;
  	text-align: left;
  	font-size: 12;
  	font-weight: bold;
  	padding-left: 6px;
  	 }
  div.list {
  	page-break-inside: avoid;
           width: 100%;
  	border-bottom:1px solid gray;
  	}
  
  span.list {
  	display: inline-block;
  	text-align: left;
  	font-size: 12;
  	padding-right: 6px;
          vertical-align: middle;
  	margin-top: 7px;
  	padding-bottom: 2px;
  	page-break-inside: avoid;
          min-height: 30px;
  	}
  </style>
  </head>
  <body>
  %for o in objects :
  
  <div class="address">
     <b>${o.name |entity}</b><br/>
     %if o.surname :
        ${o.surname or ''}<br>  
     %endif
     %if o.IDNum :
        ${o.IDNum or ''}<br>  
     %endif
  	
  	<div class="header">
  		<span class="header" style="width: 40%;">${_("Description")}</span>
  		<span class="header" style="width: 10%;">${_("Subject")}</span>
  		<span class="header" style="width: 10%;">${_("Hours Total")}</span>
  		<span class="header" style="width: 20%;">${_("Website")}</span>
  		<span class="header" style="width: 10%;">${_("Date")}</span>
  	</div>
  
  
  	%for line in o.subscriptions :
  
  	<div class="list">
  		<span class="list" style="width: 40%;">${line.name}</span>
  		<span class="list" style="width: 10%;">${line.subject}</span>
  		<span class="list" style="width: 10%;">${line.hours_total}</span>
  		<span class="list" style="width: 20%;">${line.website}</span>
  		<span class="list" style="width: 10%;">${line.date}</span>
  	</div>
  	%endfor
  
  
  </div>
  %endfor
  </body>
  </html>

Crear Capçaleres i peus

Les capçaleres i els peus són independents del contigut en webkit. Per això, cal crear la capçalera, el peu i els logos.

En primer lloc, cal fer referència al mòdul de webkit per crear les capçaleres i que puguen ser instal·lades:

__openerp__.py: 

 "depends" : ['base','report_webkit'],
 ...
  "update_xml" : ['school_view.xml', 'school_report.xml', 'report/header_school.xml'],

A continuació, en l'XML del report, cal fer referència a la base:

school_report.xml 

 webkit_header="school.school_report_header"

Després es crea el fixer header_school.xml. Podem utilitzar els exemples com a base per a modificar.

Si volen un logo personalitzat ha d'estar en base64 com una data més del model ir.header_img

Un XML per a definir els headers ha de ser un record amb els següents camps: 

  <record id="championship_report_header" model="ir.header_webkit">
            <field name="name">Example Report Header</field>
            <field name="orientation">Portrait</field>
            <field name="format">A4</field>
            <field eval="55.0" name="margin_top"/>
            <field eval="0.0" name="margin_bottom"/>
            <field name="footer_html"><![CDATA[ (html del peu de pàgina) ]]></field>
            <field name="html"><![CDATA[ (html de la capçalera i del cos)]]></field>
            <field name="css"><![CDATA[ (css) ]]></field>
  </record>

Es pot afegir javascript en el html o footer. Però el resultat és un PDF, per tant el javascript no pot ser interactiu.

La orientació pot ser Portrait o Landscape i el format: 


A0	A0 5 841 x 1189 mm
A1	A1 6 594 x 841 mm
A2	A2 7 420 x 594 mm
A3	A3 8 297 x 420 mm
A4	A4 0 210 x 297 mm, 8.26 x 11.69 inches
A5	A5 9 148 x 210 mm
A6	A6 10 105 x 148 mm
A7	A7 11 74 x 105 mm
A8	A8 12 52 x 74 mm
A9	A9 13 37 x 52 mm
B0	B0 14 1000 x 1414 mm
B1	B1 15 707 x 1000 mm
B2	B2 17 500 x 707 mm
B3	B3 18 353 x 500 mm
B4	B4 19 250 x 353 mm
B5	B5 1 176 x 250 mm, 6.93 x 9.84 inches
B6	B6 20 125 x 176 mm
B7	B7 21 88 x 125 mm
B8	B8 22 62 x 88 mm
B9	B9 23 33 x 62 mm
B10	:B10 16 31 x 44 mm
C5E	C5E 24 163 x 229 mm
Comm10E	Comm10E 25 105 x 241 mm, U.S. Common 10 Envelope
DLE	DLE 26 110 x 220 mm
Executive	Executive 4 7.5 x 10 inches, 190.5 x 254 mm
Folio	Folio 27 210 x 330 mm
Ledger	Ledger 28 431.8 x 279.4 mm
Legal	Legal 3 8.5 x 14 inches, 215.9 x 355.6 mm
Letter	Letter 2 8.5 x 11 inches, 215.9 x 279.4 mm
Tabloid	Tabloid 29 279.4 x 431.8 mm

Insertar imatges

El webkit accepta logos predefinits e imatges de la base de dades.

Els logos es guarden en base64 en el model ir.header_img. Per guardar un logo es pot incluir en el XML del header, per exemple amb aquesta sintaxi: 

<record id="ir_header_img_championlogo" model="ir.header_img">

            <field name="name">champion_logo</field>
            <field name="type">png</field>
            <field name="img">iVBORw0KGgoAAAANSUhEUgAAAMgAAAEbCAYAAACfhcurAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBI
WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3go
.......... La resta del base64 del logo ...................
           </field>
</record>

Una vegada guardat el logo en la base de dades és accesible en la secció logos de webkit del menú configuració.

Per insertar el logo en el mako o en la plantilla header s'ha d'utilitzar el següent helper: 

  ${helper.embed_logo_by_name('champion_logo')}

Però si volem insertar imatges que estàn guardades en la base de dades, hem de fer una etiqueta <img> amb base64: 

  <img src="data:image/png;base64,[${o.logo}]" />

No és fàcil insertar una imatge directament amb l'etiqueta img i src típiques de HTML ja que és una plantilla mako interpretada per un mòdul de python i les rutes relatives al mòdul no van. Si fiquem la ruta absoluta en el sistema si que funciona, però el mòdul no seria portable. Per tant, si volem imatges fixes podem necessitar ficar-les com a logo de webkit.

Enllaços

http://help.openerp.com/question/4724/how-to-configure-webkit-for-v7/

Obtenido de «https://castilloinformatica.es/wiki/index.php?title=Webkit_Report_Engine&oldid=1994»