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: 21 hét 2 napja
  • Effector