Webkit Report Engine

De castillowiki
Saltar a: navegación, buscar

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/