Tiskové sestavy v Deko the CRM

19.5.2014

foto Petr Bravenec

Petr Bravenec
Twitter: @BravenecPetr
+420 777 566 384
petr.bravenec@hobrasoft.cz

Každá aplikace by měla poskytovat svému uživateli nějaké užitečné výstupy - a jedním z typicky požadovaných výstupů je výstup na tiskárnu. Aplikace Deko the CRM je napsaná v C++. Jazyk je to krásný a výkonný, ale pro tvorbu tiskových sestav má pár nevýhod:

  • musí se překládat, potřebuje vývojové prostředí
  • je určený na tvorbu aplikací, ne na tvorbu dokumentů
  • naprosto netoleruje chyby
  • dělat v něm tiskové výstupy je velmi pracné
  • je zcela nereálné, že by tvorbu sestavy zvládnul obyčejný uživatel

Jak z takové situace vybruslit? Už dlouhé roky používám pro různá rozšíření vlastních aplikací v C++ jazyk Javascript. Připojit do Qt aplikace interpreter Javascriptu je jednoduché, ale jeho možnosti při programování sestav mi dlouho unikaly. Jenomže ona asi každá myšlenka potřebuje nějaký heuréka moment. Hned jak jsem přestal nahý a mokrý pobíhat po městě s výkřiky "to ja tak jednoduché, že mě to nenapadlo dříve!", dal jsem se do ověřování svého nápadu.

Tisková sestava je tvořená kombinací HTML a Javascriptu

Hlavním požadavkem je, aby byl sestavu schopný vytvořit průměrně zdatný programátor s tím, co zná. Programátorů, kteří znají html je obrovské množství, mnoho z nich dovede použít i Javascript. Deko proto dostalo nový typ dokumentu, report - vestavěný webový prohlížeč a několik datových struktur pro získání dat z databáze.

Tisková sestava je tvořená jako obyčejná HTML stránka s doplňujícími částmi v Javascriptu. HTML slouží jako šablona - v HTML a CSS je popsaný vzhled sestavy, a v Javascriptu se doplňuje HTML o konkrétní data. Masochisti mohou pro modifikaci stránek použít přímo Javascript, ale existuje i množství různých knihoven pro usnadnění práce - my jsme zvolili jQuery.

Jaké výhody dává kombinace HTML a Javascriptu pro tvorbu sestav?

  • Základní znalost HTML a Javascriptu je velmi rozšířená, sestavu vytvoří kde kdo
  • Práci si lze usnadnit různými knihovnami (jQuery)
  • Sestava se nemusí překládat, vytváří se ve vestavěném webovém prohlížeči
  • HTML je jazyk určený pro tvorbu dokumentů, nemusí se přiohýbat
  • Chyba v Javascript nezablokuje ani neshodí aplikaci
  • Tvorba sestav je jednoduchá a rychlá

K datům v databázi se lze dostat dvěma způsoby:

Vlastní URL schéma deko.

Použít je lze pro přístup k obrázkům, knihovnám a css souborům, například takto: 

<img src="deko:///id-dokumentu/jmeno-prilohy.svg" alt="logo">

Vlastní knihovna v Javascriptu

Z C++ části aplikace Deko je v Javascriptu viditelný objekt deko, jehož pomocí lze vytahovat data přímo z databáze, například takto: 

var dokument = deko.get('id-meho-pozadovaneho-dokumentu');

Spolu s jQuery je tato kombinace velice mocná, kompletní sestava může vypadat třeba takto:

Ukázka kompletní sestavy

<html>
<head>
<script type="text/javascript" 
    src="deko:///podklady-pro-sestavy/jquery-2.1.0.min.js"></script>
</head>
<body>

<h1>Seznam firem</h1>

<table class="report">
<thead>
<tr><th>Název</th><th>Stránky</th><th>Město</th></tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr><th colspan="4"> <th></tr>
</tfoot>
</table>

<!-- ******* Tady končí html a začíná Javascript ******* -->
<script type="text/javascript">
$(document).ready(function(){
    deko.begin();
    var id = deko.id();
    var doc = deko.get(id);
    var parent = deko.linksToMe(id);
    var parentid = parent.rows[0].value.docid;
    var parentlinks = deko.linksFromMe(parentid);
    for (var i=0; i<parentlinks.rows.length; i++) {
        var xtype = parentlinks.rows[i].value.doctype;
        var xid   = parentlinks.rows[i].value.docid;
        if (xtype == 'company') {
            var xdoc = deko.get(xid);
            var city = (xdoc.city == undefined) ? '' : xdoc.city;
            var wwww = (xdoc.www  == undefined) ? '' : xdoc.www;
            $("table.report tbody").append(
                '<tr>' +
                '<td>' + xdoc.name + '</td>' +
                '<td>' + wwww + '</td>' +
                '<td>' + city + '</td>' + 
                '</tr>\n'
                );
            }
        }
});
</script>
</body>
</html>

Odkazy

http://dokumentace.hobrasoft.cz/index.php/Tisková_sestava - dokumentace Deko, tiskové sestavy
http://www.hobrasoft.cz/cs/deko/sestavy/ - hotové tiskové sestavy ke stažení
http://www.w3schools.com/js/default.asp - učebnice Javascript
http://www.w3schools.com/jQuery/ - učebnice jQuery
http://jquery.com/download/ - jQuery, domácí stránka

Hobrasoft s.r.o. | Kontakt