Általános működési leírás

Adatbázis leírás

Rendszer architektúra

Fejlesztői kézikönyv 6.2

XML Referencia 6.2

Effector Studio 3.2 összefoglaló

Effector Studio 3.2 kézikönyv

Fejlesztői kézikönyv 5.5

XML referencia 5.5

Effector Studio 2.0 kézikönyv

Effector Studio 2.0 összefoglaló

GraphDisplay v5.4.001

A GraphDisplay típusú megjelenítő alapvetően Effector-os kártyák gráf szerű megjelenítésére szolgál. A megjelenítő paraméterezéséhez a megszokottól eltérően két DDO szükséges, melynek oka a kártyák közötti kapcsolatok könnyebb leírása. Az egyik DDO definiálja a kártyák megjelenítéséhez szükséges adatokat, míg a másik az összeköttetéseket írja le.

A megjelenítő a platform 5.4-es verziójától érhető el. A fájlok az XML csomag GraphDisplay könyvtárában találhatóak és kötelezően GD-vel kezdődnek.

Elérhető funkciók

  • Gráfok megjelenítése Effectoros kártyákból
  • Kicsinyítés/nagyítás
  • Munkaterület mozgatás
  • Snap-to-grid

Kártyák paraméterezése

A kártyák kinézetét a \GraphDisplay\Element\TemplateURL node segítségével állíthatjuk be. A node értéke a kártyát definiáló HTML template elérési útvonala. A régebbi CardViewHTML szerinti (közvetlen) kártya definícióra itt nincs lehetőség.

A template-ben a rugalmasabb paraméterezés érdekében card.scale hivatkozással elérhető a jelenlegi nagyítási szint.

Példa:

project_card.html

<div class="event" style="height:100%; background-color: #fff;border: 2px solid #ccd; padding: 4px 6px;">
    <a chainlistnode='Description' ng-if="card.scale>0.5">{{card.data.Description}}</a>
</div>

A CardTemplateURL-ről bővebben a Táblázatok és PSearch-ök / CardView TemplateURL oldalon olvashat.

A kártyákhoz tartozó adatokat a \GraphDisplay\Element\DDO node-ban hivatkozott DDO segítségével lehet megadni. Az \GraphDisplay\Element\IDColumn node jelöli az egyedi azonosítóként használt oszlop nevét. Ezt kötelező megadni.

Pozíció:

A kártyák méretét és pozícióját szintén ezen DDO segítségével paraméterezhetjük. A pozícióként értelmezendő oszlopokat a \GraphDisplay\Element\PositionXColumn, illetve a \GraphDisplay\Element\PositionYColumn node-okban adhatjuk meg rendre vízszintes és függőleges koordináták szerint.

Méret:

A kártyák méreteit a \GraphDisplay\Element\WidthColumn és a \GraphDisplay\Element\HeightColumn node-okban megadott oszlopok szabályozzák, melyek sorrendben szélességet és magasságot jelentenek.

Nyilak (összeköttetések) paraméterezése

A nyilakhoz tartozó adatokat a \GraphDisplay\Link\DDO node-ban megadott DDO szolgáltatja, egy sor egy nyíl alapon.

Ennek a DDO-nak mindenképpen tartalmaznia kell két oszlopot, melyek a nyíl két végén lévő kártyát határozzák meg. A \GraphDisplay\Link\SourceIDColumnnode-ban szereplő oszlop határozza meg a nyíl kiindulási pontját, míg a \GraphDisplay\Link\TargetIDColumn node-ban megadott oszlopban a végpontját.

Ezekkel a kártyát azonosító oszlopban lévő értékekre hivatkozunk, melyet a \GraphDisplay\Element\IDColumn node-ban adtunk meg.

Nyíl címke:

A \GraphDisplay\Link\LabelTextColumn és a \GraphDisplay\Link\LabelPositionColumn node-okban megadott oszlopok segítségével opcionálisan cimkéket is rakhatunk a nyilakra. Az első a címke szövegét, míg a második a cimke pozícióját határozza meg a nyíl méretének százalékában.

További lehetőségek

Zoom

A nagyítási beállításokat a \GraphDisplay\ScaleSettings node-ban adhatjuk meg.

Lehetőség van a maximálisan ránagyított érték(\GraphDisplay\ScaleSettings\Max), a minimálisan ránagyított érték(\GraphDisplay\ScaleSettings\Min), a lépésköz(\GraphDisplay\ScaleSettings\Step), illetve az alapértelmezett nagyítási szint(\GraphDisplay\ScaleSettings\Default) beállítására.

Snap-to-grid

A \GraphDisplay\GridSize node segítségével a kártyák mozgatási egységét van lehetőség testre szabni.

PSearch, Chainlistnode

A PSearch és a Chainlistnode funkciók megegyeznek a dgvc-n megvalósított működéssel. Erről bövebben a DGVC és PSearch típusok oldalon olvashat.

Egyedi megjelenítés logika fejlesztése

Figyelem! A következő rész alapvető AngularJS (1) ismeretek meglétét feltételezi!

A \GraphDisplay\TemplateURL node segítségével egyedi Angular View adható meg. Ezzel a megjelenítő kliens oldali része kiegészíthető.

Kontroller öröklődés

Az egyedi kontrollereinket a - platform által biztosított alapvető funkciók megőrzése érdekében - egy különleges módszerrel kell inicializálnunk, ami betölti platform által eredetileg használt kontrollert(EffectorGraphDisplayCtrl) is. Ez a $controller service-el tehető meg a kontroller függőségeinek átadásával:

//parent controller betöltése
$controller('EffectorGraphDisplayCtrl', {
    $scope: $scope,
    $q: $q, 
    $rootScope: $rootScope, 
    $location: $location, 
    $timeout: $timeout, 
    effectorCoreService: effectorCoreService, 
    EffectorCoreFilter: EffectorCoreFilter, 
    effectorCoreEnums: effectorCoreEnums, 
    GraphDisplayCoreService: GraphDisplayCoreService, 
    effectorDGVCService: effectorDGVCService, 
    effectorCoreRuleValue: effectorCoreRuleValue, 
    bootboxFactory: bootboxFactory, 
    effectorPSearchesService: effectorPSearchesService, 
    effectorCoreBusService: effectorCoreBusService, 
    effectorViewmenuService: effectorViewmenuService, 
    cacheFactory: cacheFactory, 
    $compile: $compile, 
    $interval: $interval
});

Beépített események - kivezetési pontok

A megjelenítő a fontosabb pontokon $scope események segítségével biztosít lehetőséget egyedi logika hozzáadására. Ezek az események a következőek:

  • GRAPHDISPLAY:BEFORE_ELEMENTS_CREATED

    Kártya nézeti-objektumok generálása előtt közvetlenül fut le. A paraméterben kapott kártyák, illetve összeköttetések nem kerülnek további előfeldolgozásra(közvetlenül a megjelenítési réteghez kerülnek), ezért használata különös körültekintést igényel. (Például a snap-to-grid méretének figyelembe vételéről egyedi kódunknak kell gondoskodni. Az aktuálisan paraméterezett méret megtalálható a $scope.gridSize változóban.)

    Esemény paraméterek:

    • data.ElementsToRender: Array - A kirajzolandó kártyákat tartalmazó tömb.
    • data.LinksToRender: Array - A kirajzolandó nyilakat tartalmazó tömb.
  • GRAPHDISPLAY:ELEMENT_CREATED

    Kártya nézeti-objektum generálása után közvetlenül fut le(kártyánként). Itt lehet állítani a generált JOINTJS objektumot (kártyát).

    Esemény paraméterek:

    • data.JointElement: effector.effectorElementBase - Az éppen létrejött kártya objektum. (A kirajzolandó kártyákhoz már hozzá lett adva.)
    • data.ElementsToRender: Array - A kirajzolandó kártyákat tartalmazó tömb.
    • data.LinksToRender: Array - A kirajzolandó nyilakat tartalmazó tömb.
  • GRAPHDISPLAY:BEFORE_LINKS_CREATED

    A LinksToRender lista itt már nem tartalmazza azokat a nyilakat, amelyek nem létező kártyára mutatnak.

    Esemény paraméterek:

    • data.ElementsToRender: Array - A kirajzolandó kártyákat tartalmazó tömb.
    • data.LinksToRender: Array - A kirajzolandó nyilakat tartalmazó tömb. A nyilak itt még a szervertől kapott dataset formában vannak, melynek DDORecord attribútuma tartalmazza a hozzá tartozó sort a DDO-ból.
  • GRAPHDISPLAY:LINK_CREATED

    Nyíl nézeti-objektum generálása után közvetlenül fut le(nyilanként). Itt lehet állítani a generált JOINTJS nyilat.

    Esemény paraméterek:

    • data.JointLink: effector.effectorLinkBase Az éppen létrejött nyíl objektum. (A kirajzolandó nyilakhoz már hozzá lett adva.)
    • data.ElementsToRender: Array - A kirajzolandó kártyákat tartalmazó tömb.
    • data.LinksToRender: Array - A kirajzolandó nyilakat tartalmazó tömb.
  • GRAPHDISPLAY:BEFORE_RENDER

    Renderelés előtt közvetlenül fut le. (Mielőtt az elkészült kártya, illetve nyíl nézeti-objektumok átadásra kerülnének a megjelenítési rétegnek.

    Esemény paraméterek:

    • data.ElementsToRender: Array - A kirajzolandó kártyákat tartalmazó tömb.
    • data.LinksToRender: Array - A kirajzolandó nyilakat tartalmazó tömb.
  • GRAPHDISPLAY:AFTER_RENDER

    Renderelés után fut le. Ekkor már az elkészült objektumok át lettek adva a megjelenítési rétegnek.

    Esemény paraméterek:

    • data.ElementsToRender: Array - A kirajzolandó kártyákat tartalmazó tömb.
    • data.LinksToRender: Array - A kirajzolandó nyilakat tartalmazó tömb.

Példa:

$scope.$on("GRAPHDISPLAY:ELEMENT_CREATED", function (event, data) {
    var JointElement = data.JointElement,
    LinksToRender = data.LinksToRender,
    StepsToRender = data.ElementsToRender;

    /* Egyedi logika ide...*/

}

Kártyák és nyilak létrehozása egyedi kódból

Egyedi kódban, ha a DDO-ban definiáltakon kívül további nyilakat/kártyákat kell dinamikusan létrehozni a platform által is használt beépített eljárások használata javasolt. Ezek az alábbiak:

  • GraphDisplayCoreService.CreateElement(item, scope): effector.effectorElementBase

    Itt item egy { position: {x: <x>, y: <y>}, DDORecord: <DDORecord>} alakú JSON objektum.

    A scope paraméter értéke mindig az adott kontroller scope-ja (általában $scope).

  • GraphDisplayCoreService.CreateLink(link, scope): effector.effectorLinkBase

    Itt link egy { target: <target>, source: <source>, DDORecord: <DDORecord>} alakú JSON objektum.

    Ekkor <target> és <source> vagy egy {id: <id>} alakú objektum, ahol <id> egy kártya technikai azonosítója, vagy egy {x <x>:, y: <y>} alakú pont a vásznon(ezesetben a nyíl ezen vége szabad és a megadott pontba mutat).

A scope paraméter értéke mindig az adott kontroller scope-ja (általában $scope).

Az effector.effectorElementBase, illetve effector.effectorLinkBase osztályokból származtatással egyedi kártya, illetve nyíl működést is megvalósíthatunk.

Példák:

var card1 = GraphDisplayCoreService.CreateElement({
position: {x: 10, y: 10},
DDORecord: {EventID: 1234, Description: "sample event description"}
}, $scope);
var connection = GraphDisplayCoreService.CreateLink({
source: { id: card1.id },
target: { id: card2.id },
DDORecord: {
LinkProperties: null,
DisplayType: "effector.effectorLinkBase"
}}, $scope);

  • Legutóbb frissítve: 8 hét 6 napja
  • Effector