ESO9 wiki

Uživatelské nástroje

Nástroje pro tento web

Umístění: start » techdoc » diagramyidc
Historie: • diagramyidc
techdoc:diagramyidc

Rozdíly

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

Odkaz na výstup diff

Obě strany předchozí revizePředchozí verze
Následující verze		Předchozí verze
techdoc:diagramyidc [28.08.2025 14:45] – turychtechdoc:diagramyidc [29.08.2025 08:24] (aktuální) – turych
Řádek 1: Řádek 1:
 ==== Diagramy s toky dokladů ==== ==== Diagramy s toky dokladů ====
-Ve vstupních obrazovkách nebo navigačních uživatelských stránkách lze jednoduše zobrazovat i diagramy. K jejich tvorbě je použit nástroj Mermaid ([[https://mermaid.js.org]]) +Ve vstupních obrazovkách nebo navigačních uživatelských stránkách lze jednoduše zobrazovat i diagramy. K jejich tvorbě je použit nástroj Mermaid ([[https://mermaid.js.org]]). Kromě diagramů tak lze stejným způsobem vytvářet i sequence diagramy, Ganttovy diagramy, ERM diagramy a další.\\ 
-Diagramy mohou  s toky dokladů s možností prokliku na formuláře jednotlivých typů dokladů. Jedná se o intuitivnější a jednodušší způsob, než je hledání daného formuláře ve stromu činností. Vstupní obrazovky mohou vypadat např. takto:\\+Diagramy použité jako jednoduchý rozcestník pro uživatele mohou zobrazovat toky dokladů s možností prokliku na formuláře. Jedná se o intuitivnější a jednodušší způsob, než je hledání daného formuláře ve stromu činností. Vstupní obrazovky mohou vypadat např. takto:\\
 {{ :images:diagramy:tokdokldiagram2.jpg?direct&400 | Diagram 1}}\\ {{ :images:diagramy:tokdokldiagram2.jpg?direct&400 | Diagram 1}}\\
 {{ :images:diagramy:tokdokldiagram1.jpg?direct&400 | Diagram 2}}\\ {{ :images:diagramy:tokdokldiagram1.jpg?direct&400 | Diagram 2}}\\
-Celý diagram je samozřejmě dynamický nejen obsahově, ale i graficky. Po obsahové stránce může stejný diagram zobrazovat různé popisy a odkazy podle přihlášeného uživatele a jeho oprávnění, popř. jazykového nastavení. Po stránce grafické reaguje např. na změnu velikosti stránky či na lupu v prohlížeči. 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.\\ 
-=== Předloha diagramu - soubor .IDC === +V rámci ESO9Start jsou k dispozici ukázkové diagramy v adresáři //Users//, předlohy //tokdokl1.mmd// a //tokdokl2.mmd//. 
-Jako předloha stránky s diagramem slouží běžná IDC/HTX sestava, nejedná se tedy o žádné speciální rozšíření technologie ESO9. K tvorbě stránek s diagramy tedy postačí znalosti stávajících implementačních postupů ESO9.\\ +=== Předloha diagramu - soubor .MMD === 
-Soubor .IDC obsahuje datový zdroj, v němž jsou uvedeny popisy bloků v diagramu a adresy URL, na něž se má po kliknutí na blok přejít. Pro jednoduchost si ukážeme tvorbu diagramu z {{ :images:diagramyIDC:DiagramyIDC_1.png?linkonly | prvního obrázku}}:\\+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 (#).\\ 
 +Příklad definice diagramu z {{ :images:diagramy:tokdokldiagram2.jpg?linkonly | prvního obrázku}}:\\
 <code> <code>
-Datasource: ESO9 +##Ukázkový diagram toku dokladů v ESO9## 
-SQLStatement: SELECT 'Prodejní' + CHAR(13)+CHAR(10) + 'objednávka' as ITEM1,  +--- 
-+'Faktura' + CHAR(13)+CHAR(10) + 'vydaná' as ITEM2,  +config: 
-+'Skladová' + CHAR(13)+CHAR(10) + 'výdejka' as ITEM3, +  theme: 'base' 
-+ 'esoform.asp?TPage=PRODEJ/POBJ.HTM&StartFilter=2&HDOKSTYLE=&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=52 AND IDHDOK_VZOR=257&IDTYPDOK_STAVHDOK=52&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=Prodejní objednávka tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 1. 2&DataAction=LAST&Title=Prodejní objednávka tuzemská' as ITEM1URL, +  themeVariables: 
-+ 'esoform.asp?TPage=PRODEJ/FAV.HTM&StartFilter=2&HDOKSTYLE=/*Neuhrazené po splatnosti FVU*/  CASE WHEN (not(dbo.fn_NespZavPohlVal(IDHDOK) <= 0)) AND DTSPLATNO < GETDATE() THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=7 AND IDHDOK_VZOR=7&IDTYPDOK_STAVHDOK=7&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=FVU tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 3. 1&DataAction=LAST&Title=FVU tuzemská' as ITEM2URL, +    primaryColor: '#399BCA' 
-+ 'esoform.asp?Tpage=sklad/vydejkas.htm&StartFilter=2&HDOKSTYLE=/*Záporné výdejky - STORNO*/  CASE WHEN HDKUHRADEVAL < 0 THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK = 9 and idhdok_vzor = 3485&ORDERBY=ORDER BY CIS_DOK&IDTYPDOK_STAVHDOK=9&vzortext=SVU - sklad 30 - prodej do tuzemska&RelType=Parameters&CINNOST=2. 3. 2. 1&dataaction=last&title=SVU - sklad 30 - prodej do tuzemska' as ITEM3URL +    primaryTextColor: '#FFFFFF' 
-Template: User1StartPage.htx +    lineColor: '#000000' 
-</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ů.\\ +  graph LR 
-=== Předloha diagramu - soubor .HTX === +  A[Prodejní objednávka] --> B[Faktura vydaná] 
-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ě:\\ +  B --> C[Skladová výdejka fyzická] 
-<code> +     
-<!DOCTYPE HTML> +  click A "esoform.asp?TPage=PRODEJ/POBJ.HTM&StartFilter=2&HDOKSTYLE=&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=52 AND IDHDOK_VZOR=257&IDTYPDOK_STAVHDOK=52&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=Prodejní objednávka tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 1. 2&DataAction=LAST&Title=Prodejní objednávka tuzemská" 
-<html>+  click B "esoform.asp?TPage=PRODEJ/FAV.HTM&StartFilter=2&HDOKSTYLE=/*Neuhrazené po splatnosti FVU*/  CASE WHEN (not(dbo.fn_NespZavPohlVal(IDHDOK) <= 0)) AND DTSPLATNO < GETDATE() THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=7 AND IDHDOK_VZOR=7&IDTYPDOK_STAVHDOK=7&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=FVU tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 3. 1&DataAction=LAST&Title=FVU tuzemská" 
 +  click C "esoform.asp?Tpage=sklad/vydejkas.htm&StartFilter=2&HDOKSTYLE=/*Záporné výdejky - STORNO*/  CASE WHEN HDKUHRADEVAL < 0 THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK = 9 and idhdok_vzor = 3485&ORDERBY=ORDER BY CIS_DOK&IDTYPDOK_STAVHDOK=9&vzortext=SVU - sklad 30 - prodej do tuzemska&RelType=Parameters&CINNOST=2. 3. 2. 1&dataaction=last&title=SVU - sklad 30 - prodej do tuzemska"
  
-<head> +  classDef largeBlock font-size:24px,padding:30px; 
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> +  class A,B,C largeBlock;
-  <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> </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.\\ +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//.\\
-  * 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> 
techdoc/diagramyidc.1756392354.txt.gz · Poslední úprava: 28.08.2025 14:45 autor: turych
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki
DokuWiki Appliance - Powered by TurnKey Linux