Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- techdoc:diagramyidc [28.08.2025 14:57] – turych
+++ techdoc:diagramyidc [29.08.2025 08:24] (aktuální) – turych
@@ Řádek 4: / Řádek 4: @@
 {{ :images:diagramy:tokdokldiagram2.jpg?direct&400 | Diagram 1}}\\
 {{ :images:diagramy:tokdokldiagram1.jpg?direct&400 | Diagram 2}}\\
-Celý diagram je samozřejmě dynamický nejen obsahově, ale i graficky. Protože je diagram realizován jako běžný soubor ve webu, platí pro něj stejná pravidla, jako pro běžné HTML předlohy včetně přetěžování aplikačním webem nebo překladů. Po grafické stránce se jedná o kompletně stylovatelné prvky, jejichž design si lze přizpůsobit v uživatelském CSS souboru. Všechny bloky v diagramu se také automaticky zvýrazní po najetí kurzorem myši.
+Celý diagram je samozřejmě dynamický nejen obsahově, ale i graficky. Protože je diagram realizován jako běžný soubor ve webu, platí pro něj stejná pravidla, jako pro běžné HTML předlohy včetně přetěžování aplikačním webem nebo překladů. Po grafické stránce se jedná o kompletně stylovatelné prvky, jejichž design si lze přizpůsobit v uživatelském CSS souboru. Všechny bloky v diagramu se také automaticky zvýrazní po najetí kurzorem myši.\\
+V rámci ESO9Start jsou k dispozici ukázkové diagramy v adresáři //Users//, předlohy //tokdokl1.mmd// a //tokdokl2.mmd//.
 === Předloha diagramu - soubor .MMD ===
 Jako předloha stránky s diagramem slouží soubory typu MMD, které obsahují popis diagramu v markdown syntaxi (podrobněji viz produktový web Mermaid). MMD soubor se odkazuje běžným způsobem přes parametr TURL (např.//esoform.asp?TURL=Users/tokdokl1.mmd//). Oproti standardní syntaxi Mermaid diagramů je pro účely ESO9 v záhlaví MMD souboru uveden pouze nadpis uvozený dvěma hashmarky (#).\\
@@ Řádek 29: / Řádek 30: @@
   class A,B,C largeBlock;
 </code>
-Prvky //ITEMx// obsahují popisy bloků (včetně požadovaného odřádkování textu), prvky //ITEMxURL// obsahují URL činností/formulářů, na něž uživatel po kliknutí přejde. V uvedeném příkladu jsou adresy zadání napevno z vybraných činností ESO9 Start, vhodnější by samozřejmě bylo použít dynamické načtení typů/vzorů dokladu pro přihlášeného uživatele a to včetně překladů do cizích jazyků.\\
+Jednotlivé bloky jsou označeny písmeny //A-Z//, prokliky na formuláře s daným typem dokladu jsou pak uvozeny klíčovým slovem //click A-Z//.\\
-=== Předloha diagramu - soubor .HTX ===
-Pro vizuální popis IDC sestav slouží soubory s příponou .HTX. Kromě očekávatelného bloku //<%begindetail%>// / //<%enddetail%>// bude v tomto případě obsahovat i několik HTML TAGů. Celý zdrojový kód stránky s jednoduchým diagramem bude vypadat následovně:\\
-<code>
-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
-  <title>Vstupní stránka uživatele 1</title>
-</head>
-<body>
-<script src="../eso9supp/LIB/script/UserStartPage.js">
-//odkaz na skript s obecnými funkcemi pro práci s bloky
-</script>
-<script>
-  function drawArrows(e){
-    drawArrowBetweenCanvases('arr1', 'rect1', 'rect2', FROM_BLOCK_RIGHT, TO_BLOCK_LEFT, LINE_TYPE_NORMAL)
-    drawArrowBetweenCanvases('arr2', 'rect2', 'rect3', FROM_BLOCK_RIGHT, TO_BLOCK_LEFT, LINE_TYPE_NORMAL)
-  };
-</script>
-<style>
-  #rect1 { top: 25%; left:10%; }
-  #rect2 { top: 25%; left:40%; }
-  #rect3 { top: 25%; left:70%; }
-  #ESO_BodyRep { background-image: url('./images/eso9_rgb.png'); }
-</style>
-<div class="ESO_BodyRep" id="ESO_BodyRep">
-  <canvas id="arr1"></canvas>
-  <canvas id="arr2"></canvas>
-  <canvas id="rect1"></canvas>
-  <canvas id="rect2"></canvas>
-  <canvas id="rect3"></canvas>
-<%begindetail%>
-  <span id="item1"><% ITEM1 %></span>
-  <span id="item2"><% ITEM2 %></span>
-  <span id="item3"><% ITEM3 %></span>
-  <span id="item1url"><% ITEM1URL %></span>
-  <span id="item2url"><% ITEM2URL %></span>
-  <span id="item3url"><% ITEM3URL %></span>
-<%enddetail%>
-</div>
-</body>
-</html>
-</code>
-Projdeme si nyní celý uvedený kód a zmíníme odlišnosti oproti běžným IDC sestavám tak, jak je známe z ESO9. Jednotlivé body nebudou reflektovat pořadí ve zdrojovém kódu, ale logiku tvorby a zpracování těchto sestav.\\
-  * Odkaz na skriptovací soubor //UserStartPage.js// - zajišťuje vykreslení vlastního grafického obsahu stránky. Musí být uveden v každé .HTX stránce, která zobrazuje diagramy.
-  * HTML TAG //DIV// s CSS třídou (a ID) //ESO_BodyRep// - obsahuje vlastní HTML kód každé IDC sestavy.
-  * Sekce //<%begindetail%>// / //<%enddetail%>// obsahuje všechny datové položky z IDC souboru uzavřené do HTML TAGu //SPAN//. Každý z prvků má kromě svého textu i ID, které je tvořeno názvem datové IDC položky, tj. //ITEMx// nebo //ITEMxURL//. Pokud obsahuje datová položka bloku (ID=//ITEMx//) navíc atribut //data-importance="1"//, bude takový blok vykreslen se zvýrazněným okrajem. V diagramu tak lze zvýraznit nejdůležitější doklady daného procesu.
-  * HTML TAGy //CANVAS// - slouží k vlastnímu vykreslení jednotlivých bloků a šipek, které je spojují. Prvky typu blok mají //ID="recX"//, prvky typu šipka mají //ID="arrX"//. HTX soubor musí obsahovat tolik bloků, kolik je datových prvků typu ITEM v .IDC souboru a tolik šipek, kolik je potřeba pro daný diagram.
-  * Sekce //<style>// - obsahuje vlastní grafické rozmístění bloků v diagramu. Pomocí atributů //TOP// a //LEFT// definuje pozici levého horního okraje bloku v rámci celé stránky. Pozici je třeba zadávat relativně v procentech tak, aby ji bylo možné dynamicky měnit podle aktuální velikosti stránky v prohlížeči. V našem příkladu jsou všechny všechny bloky umístěné v linii čtvrtiny výšky stránky (top: 25%) a rovnoměrně rozloženy na šířku s odstupem 30-ti procent.
-  * Odkaz na obrázek s pozadím stránky - dává autorovi předlohy možnost použít na pozadí logo vlastní firmy namísto standardně použitého loga ESO9. Obrázek se nachází standardně ve složce //IMAGES// v aplikačním webu.
-  * Skript s funkcí //drawArrows// - slouží k vykreslení šipek spojujících jednotlivé bloky. Zatímco bloky se vykreslí automaticky na své pozice dané stylem, šipky je třeba zadat explicitně tak, jak si je autor přeje v diagramu mít. Bez uvedené funkce se v diagramu zobrazí pouze bloky bez spojovacích šipek.
-  * Funkce //drawArrowBetweenCanvases// vykreslí jednu šipku spojující dva bloky. Parametry této funkce jsou:
-    * ID prvku typu //CANVAS// se šipkou, např.//arr1//. Pro každou šipku musí být použit unikátní prvek typu //CANVAS//.
-    * ID prvku typu //CANVAS// s blokem, z něhož šipka vychází, např.//rect1//.
-    * ID prvku typu //CANVAS// s blokem, v němž šipka končí, např.//rect1//.
-    * Strana počátečního bloku, odkud šipka vychází. Parametr může nabývat čtyř hodnot:
-      * //FROM_BLOCK_BOTTOM// - ze spodní hrany bloku
-      * //FROM_BLOCK_TOP// - z horní hrany bloku
-      * //FROM_BLOCK_LEFT// - z levé hrany bloku
-      * //FROM_BLOCK_RIGHT// - z pravé hrany bloku
-    * Strana koncového bloku, kde šipka končí. Parametr může nabývat čtyř hodnot:
-      * //TO_BLOCK_BOTTOM// - do spodní hrany bloku
-      * //TO_BLOCK_TOP// - do horní hrany bloku
-      * //TO_BLOCK_LEFT// - do levé hrany bloku
-      * //TO_BLOCK_RIGHT// - do pravé hrany bloku
-    * Typ čáry šipky. Parametr může nabývat dvou hodnot:
-      * //LINE_TYPE_NORMAL// - normální (plná) čára
-      * //LINE_TYPE_DASHED// - čerchovaná čára
-=== Předloha složitějšího diagramu - soubor .HTX ===
-Pro lepší představu si ukážeme předlohu mírně složitějšího diagramu z {{ :images:diagramyIDC:DiagramyIDC_2.png?linkonly | druhého obrázku}}:\\
-<code>
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
-<title>Vstupní stránka uživatele 2</title>
-</head>
-<body>
-<script src="../eso9supp/LIB/script/UserStartPage.js">
-//odkaz na skript s obecnými funkcemi pro práci s bloky
-</script>
-<script>
-  function drawArrows(e){
-    //šipka 1 - mezi bloky 1-2
-    drawArrowBetweenCanvases('arr1', 'rect1', 'rect2', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipka 2 - mezi  bloky 2-3
-    drawArrowBetweenCanvases('arr2', 'rect2', 'rect3', FROM_BLOCK_LEFT, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipka 3 - viz šipka 2 zrcadlově otočená
-    drawArrowBetweenCanvases('arr3', 'rect2', 'rect6', FROM_BLOCK_RIGHT, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipka 4 -  mezi  bloky 3-4
-    drawArrowBetweenCanvases('arr4', 'rect3', 'rect4', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipka 5 - viz šipka 4 zrcadlově otočené
-    drawArrowBetweenCanvases('arr5', 'rect6', 'rect7', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipky mezi bloky 4-5 a 7-5
-    drawArrowBetweenCanvases('arr6', 'rect4', 'rect5', FROM_BLOCK_BOTTOM, TO_BLOCK_LEFT, LINE_TYPE_NORMAL)
-    drawArrowBetweenCanvases('arr7', 'rect7', 'rect5', FROM_BLOCK_BOTTOM, TO_BLOCK_RIGHT, LINE_TYPE_NORMAL)
-    //šipky mezi bloky 2-5
-    drawArrowBetweenCanvases('arr8', 'rect2', 'rect5', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_DASHED)
-    //šipky mezi bloky 2-4
-    drawArrowBetweenCanvases('arr9', 'rect2', 'rect4', FROM_BLOCK_BOTTOM, TO_BLOCK_RIGHT, LINE_TYPE_DASHED)
-  };
-</script>
-<style>
-  #rect1 { top: 10%; left:40%; }
-  #rect2 { top: 25%; left:40%; }
-  #rect3 { top: 40%; left:10%; }
-  #rect4 { top: 55%; left:10%; }
-  #rect5 { top: 70%; left:40%; }
-  #rect6 { top: 40%; left:70%; }
-  #rect7 { top: 55%; left:70%; }
-  #ESO_BodyRep { background-image: url('./images/eso9_rgb.png'); }
-</style>
-<div class="ESO_BodyRep" id="ESO_BodyRep">
-  <canvas id="arr1"></canvas>
-  <canvas id="arr2"></canvas>
-  <canvas id="arr3"></canvas>
-  <canvas id="arr4"></canvas>
-  <canvas id="arr5"></canvas>
-  <canvas id="arr6"></canvas>
-  <canvas id="arr7"></canvas>
-  <canvas id="arr8"></canvas>
-  <canvas id="arr9"></canvas>
-  <canvas id="rect1"></canvas>
-  <canvas id="rect2"></canvas>
-  <canvas id="rect3"></canvas>
-  <canvas id="rect4"></canvas>
-  <canvas id="rect5"></canvas>
-  <canvas id="rect6"></canvas>
-  <canvas id="rect7"></canvas>
-<%begindetail%>
-  <span id="item1"><% ITEM1 %></span>
-  <span id="item2" data-importance="1"><% ITEM2 %></span>
-  <span id="item3"><% ITEM3 %></span>
-  <span id="item4"><% ITEM4 %></span>
-  <span id="item5" data-importance="1"><% ITEM5 %></span>
-  <span id="item6"><% ITEM6 %></span>
-  <span id="item7"><% ITEM7 %></span>
-  <span id="item1url"><% ITEM1URL %></span>
-  <span id="item2url"><% ITEM2URL %></span>
-  <span id="item3url"><% ITEM3URL %></span>
-  <span id="item4url"><% ITEM4URL %></span>
-  <span id="item5url"><% ITEM5URL %></span>
-  <span id="item6url"><% ITEM6URL %></span>
-  <span id="item7url"><% ITEM7URL %></span>
-<%enddetail%>
-</div>
-</body>
-</html>
-</code>