GFX-Layout

Die Dojo-Diagrammer-API für GFX-Layouts erweitert die API "dojox.gfx". Diese API stellt die Klasse "GFX Group" (und damit die Klasse "Node") bereit - mit der Möglichkeit, die zugehörigen untergeordneten Elemente entsprechen der Positions- und Größenvorgaben automatisch anzuordnen.
Mit dieser erweiterten API müssen Position und Größe der Knotenunterkomponenten nicht fest codiert werden. Der Knoten passt seine Größe automatisch an den Inhalt an, sobald eine Änderung vorgenommen wird, die sich auf die Größe auswirkt. Wenn die Knotenbezeichnung beispielsweise länger wird, wird die Knotengröße dynamisch an die neue Bezeichnungsgröße angepasst.
Die API gfxlayout ist standardmäßig nicht aktiviert, obwohl sie in den meisten Mustern verwendet wird. Zum Aktivieren der API setzen Sie die Eigenschaft useGfxLayout von djConfig, wie im folgenden Code gezeigt, auf true:
<script type="text/javascript">
	    var djConfig = {
	        parseOnLoad:true,
               useGfxLayout:true
	    }
</scrip>
	

Untergeordnete Elemente eines Knotens anordnen

Beim Anordnen der untergeordneten Elemente einer Knoteninstanz ist das direkte untergeordnete Element des Knotens gewöhnlich eine Gruppeninstanz, die als Ausgangsanzeige für die untergeordneten Formen agiert. Diese Anzeige verarbeitet die Größe und die Position der untergeordneten Objekte zusammen mit dem Layoutalgorithmus Ihrer Wahl.
Das folgende Beispiel veranschaulicht, wie eine Schablone für die Erstellung eines Basisknotens geschrieben wird, die sich aus einer Hintergrundform und einer Textbezeichnung zusammensetzt. Diese Schablone ist eine vereinfachte Version der Standardknotenschablone. Ihre Layoutvorgaben sind so definiert, dass die Knotengröße immer an die Bezeichnungsgröße angepasst ist.
{
layout: { type:'ibm_ilog.diagram.gfxlayout.GridLayout' },
children: [
    { 
        dojoAttachPoint: 'baseShape',
        minimumSize:{width:80, height:40},
        shape: { width:1, height:1, r: 5, type:'rect'}, 
        fill: '{{backgroundColor}}', 
        stroke: {'color': '{{borderColor}}', 
        'width': 2 }
    },
    {
        dojoAttachPoint: 'textShape', 
        margins:[5,5,5,-2],
        shape: {type:'text', text:'{{label}}', align:'middle'}, 
        fill:'{{textColor}}', 
        font:{type:'font', size:'10pt', family:'sans-serif'}
    }
]
}
Die Schablone definiert zuerst eine Gruppe als das eindeutige direkte untergeordnete Element. Eine Instanz der Klasse GridLayout wird auf diese Gruppe gesetzt. Die Gruppe setzt sich aus zwei untergeordneten Elementen zusammen:
  • Eine rechteckige Form, deren Größenparameter zur Anpassung an die Bezeichnungsgröße auf 1 gesetzt sind. Es ist jedoch auch eine Mindestgröße angegeben, so dass der Knoten auch dann seine Standardgröße behält, wenn die Bezeichnungsgröße kleiner ist. Die Layout-Engine verwendet die Eigenschaft minimumSize, um die Größe einer Form zu steuern.
  • Eine Textform, die an die Bezeichnungseigenschaft des Knotens gebunden ist. Die Eigenschaft margins wird im Text gesetzt, um den Abstand zwischen der Bezeichnung und dem Anzeigenrand zu definieren.
Die folgende Abbildung veranschaulicht das Ergebnis und zeigt eine Knotengröße, die an die Bezeichnungslänge angepasst ist.
Abbildung, die
zwei rechteckige Knoten zeigt, einen oben links und den anderen unten rechts in der Abbildung.
Beide Knoten haben einen blauen Hintergrund.
Der obere linke Knoten hat die Beschriftung "Knoten 1", und der untere rechte Knoten hat die Beschriftung
"Neu hinzugefügter Knoten 1". Die Größe jeder Form wird an die Länge ihrer Beschriftung angepasst.
In dem Beispiel werden zwei Eigenschaften spezifiziert, die dem Layout einige Vorgaben hinzufügen: minimumSize und margins. Diese Eigenschaften sind Teil eines Satzes von Eigenschaften, die in jeder Form definiert werden können und die von allen Layoutalgorithmen unterstützt werden:
  • halign und valign: die horizontale bzw. vertikale Ausrichtung.
    Diese Eigenschaften werden verwendet, um die horizontalen und vertikalen Positionen der Form innerhalb des Bereichs der Anzeige zu berechnen.
    Gültige Werte für halign: left (links), center (zentrieren), right (rechts), stretch (dehnen).
    Gültige Werte für valign: top (oben), center (zentrieren), bottom (unten), stretch (dehnen).
    Wenn die Eigenschaft auf "stretch" gesetzt wird, füllt die Form den gesamten Bereich.
  • margins: Randeinstellungen der Form innerhalb des Bereichs.
    Dies ist der Platz zwischen den Bereichsgrenzen und der Form selbst. Der Wert dieser Eigenschaft ist entweder eine Zahl, die linken, oberen, rechten und unteren Rand auf denselben Wert setzt, oder ein Array von vier nacheinander angegebenen Zahlen, die jeweils den linken, oberen, rechten und unteren Rand festlegen.
  • minimumSize: Mindestgröße der Form.
  • maximumSize: Maximale Größe der Form.

StackLayout

Die Klasse ibm_ilog.diagram.gfxlayout.StackLayout ordnet die untergeordneten Elemente eines Containers in einem horizontalen oder vertikalen Stack an. Die Ausrichtung wird während der Erstellung mithilfe der Eigenschaft horizontal angegeben.
Die folgende Abbildung zeigt zwei Gruppeninstanzen mit einem Stack-Layout, dessen Eigenschaft horizontal in der ersten Instanz auf false und in der zweiten Instanz auf true gesetzt ist:
Abbildung, die eine Gruppe von vier rechteckigen
Formen mit derselben Länge, aber mit unterschiedlichen Höhen zeigt. Die Formen sind vertikal
mit jeweils einem Abstand zwischen ihnen ausgerichtet.
(Stack-Layout mit der Eigenschaft "horizontal", die auf "false" gesetzt ist.)
Abbildung, die eine Gruppe von vier rechteckigen
Formen mit derselben Höhe, aber mit unterschiedlichen Längen zeigt. Die Formen sind horizontal
mit jeweils einem Abstand zwischen ihnen ausgerichtet.
(Stack-Layout mit der Eigenschaft "horizontal", die auf "true" gesetzt ist.)
Die Klasse StackLayout definiert die Eigenschaften paddingLeft, paddingRight, paddingTop und paddingBottom, um die internen Randeinstellungen der Anzeige festzulegen, relativ zu denen die untergeordneten Elemente positioniert werden. Eine globale Eigenschaft padding definiert dieselbe Auffüllung in allen Richtungen. Der Platz zwischen den untergeordneten Elementen kann mithilfe der Eigenschaft gap angepasst werden. Diese Eigenschaften werden in der folgenden Abbildung veranschaulicht:
Abbildung, die drei rechteckige Formen
zeigt, die in einem vertikalen Stapel angeordnet sind.
Die Abbildung veranschaulicht den Abstand zwischen den Formen sowie die Auffüllung links, rechts, oben und unten relativ zu
der Anzeige, die diese Gruppe von Formen enthält.
Ein horizontales Stapellayout richtet die untergeordneten Objekte vertikal im berechneten Layoutbereich an dem Wert ihrer Eigenschaft valign und ihrer Eigenschaft margins aus. Ein vertikales Stapellayout richtet die untergeordneten Objekte horizontal im berechneten Layoutbereich an dem Wert ihrer Eigenschaft halign und ihrer Eigenschaft margins aus.
Die folgende Abbildung veranschaulicht, wie die horizontalen und vertikalen Ausrichtungswerte vom Layout verwendet werden, um die Formen im Container zu positionieren:
Abbildung, die
ein vertikales Stapellayout und ein horizontales Stapellayout zeigt. Das vertikale Stapellayout hat vier übereinander gestapelte
Formen verschiedener Größe.
Jede Form enthält eine Beschriftung: Mitte (die Form ist horizontal in der Containeranzeige zentriert), Dehnen (die form
ist horizontal am rechten und am linken Rand der Containeranzeige ausgerichtet),
Links (die Form ist horizontal am linken Rand der Containeranzeige ausgerichtet), Mitte
(die Form ist horizontal in der Containeranzeige zentriert).
Ganz oben in diesem vertikalen Stapellayout steht die Beschriftung "Eigenschaft halign". Das horizontale
Stapellayout zeigt vier rechteckige Formen unterschiedlicher Größe nebeneinander.
Jede Form enthält eine Beschriftung: Mitte (die Form ist vertikal in Containeranzeige zentriert), Dehnen
(die Form ist vertikal am oberen und am unteren Rand der Containeranzeige ausgerichtet), Unten
(die Form ist vertikal am unteren Rand der Containeranzeige ausgerichtet),
Oben (die Form ist vertikal am oberen Rand der Containerform ausgerichtet).
Ganz oben in diesem horizontalen Stapellayout steht die Beschriftung "Eigenschaft valign".
Der folgende Schablonencode erstellt den in dieser Abbildung gezeigten horizontalen Stapel:
{
layout:{
horizontal:true,
gap:10,
padding:[5,5,5,5]},
children:[
{
valign:'center',
shape:{x:0, y:0, width:60, height:40, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},

{
valign:'stretch',
shape:{x:0, y:0, width:110, height:65, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},

{
valign:'bottom',
shape:{x:0, y:0, width:40, height:40, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},

{
valign:'top', 
shape:{x:0, y:0, width:80, height:20, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},
]}

GridLayout

Die Klasse ibm_ilog.diagram.gfxlayout.GridLayout ordnet die untergeordneten Elemente eines Containers als Rasterelemente an.
Die Rasterlayoutstruktur wird durch eine Sammlung von Spalten- und Zeilendeskriptoren definiert, die angeben, wie die Metrik jeder einzelnen Zeile bzw. Spalte berechnet wird. Diese Deskriptorobjekte unterstützen die folgenden Eigenschaften:
  • width und height: Wenn die Containerbreite oder -höhe nicht fest ist, richtet sich die Spaltenbreite bzw. Zeilenhöhe nach dem Wert dieser Eigenschaft. Beim Wert -1 werden die Abmessungen an den Abmessungen des größten untergeordneten Elements ausgerichtet.
  • weight: Wenn die Containerbreite oder -höhe fest ist, definiert diese Eigenschaft, wie der Platz, der verbleibt, nachdem alle festen Breiten oder Höhen von der Containerbreite bzw. -höhe abgezogen wurden, auf die Spalten bzw. Zeilen verteilt wird. Eine Spalte mit der Wertigkeit 2 nimmt beispielsweise doppelt so viel Platz ein wie eine Spalte mit der Wertigkeit 1 und derselben festen Breite. Eine Zeile mit der Wertigkeit 2 nimmt doppelt so viel Platz ein wie eine Zeile mit der Wertigkeit 1 und derselben festen Höhe.
Sehen Sie sich die folgende Rasterstruktur an:
cols:[{ width:250}, {weight:2}, {weight:1}, {weight:2} ],  
rows:[{ height:90}, {height:-1}]
Die gesamte Anzeige hat eine feste Breite von 600. Die erste Spalte ist 250 Pixel breit, und die anderen Spalten teilen sich den verbleibenden Platz unter der folgenden Vorgabe: die zweite und die vierte Spalte müssen jeweils doppelt so breit sein wie die dritte Spalte.
Wenn die Anzeigenhöhe auf -1 eingestellt ist, wird die Anzeige an die Größe ihrer untergeordneten Elemente angepasst. In diesem Beispiel hat die erste Zeile eine feste Höhe von 90, und die zweite Zeile nimmt die maximale Höhe der Form in dieser Zeile an. Die folgende Abbildung veranschaulicht diese Rasterstruktur:
Abbildung der zuvor beschriebenen
Rasterstruktur.
Die Klasse GridLayout definiert die Eigenschaften paddingLeft, paddingRight, paddingTop und paddingBottom so, dass sie die internen Randeinstellungen der Anzeige festlegen, relativ zu denen die untergeordneten Elemente positioniert werden. Eine globale Eigenschaft padding definiert dieselbe Auffüllung in allen Richtungen. Diese Auffüllung wird zu den speziellen Randeinstellungen addiert, die für jede Form definiert sind. Die folgende Abbildung veranschaulicht die Beziehungen zwischen diesen Eigenschaften:
Abbildung zur Auffüllung in einem
Rasterlayout, das vier quadratische Formen verschiedener Größe enthält.
Es gibt eine Auffüllung oben, unten, links und rechts vom Rastercontainer.
Zwischen den Formen im Rastercontainer sind Ränder vorhanden.
Die untergeordneten Elemente im Raster werden entsprechend den Eigenschaften column und row der untergeordneten Elemente in den Rasterzellen platziert. Wenn diese Eigenschaften für eine Form nicht definiert sind, wird die Form automatisch entsprechend ihrer Rangfolge in der Liste untergeordneter Elemente des Containers im Raster platziert. Die Richtung der Platzierung wird mit der Eigenschaft horizontalFlow definiert, die standardmäßig den Wert "true" hat.
Wenn die Eigenschaft horizontalFlow den Wert "true" hat und die untergeordneten keinen speziellen Zeilen- oder Spaltenindex definieren, wird das erste untergeordnete Element in der Zelle (0,0), das zweite in der Zelle (1,0) usw. platziert.
Ein untergeordnetes Element kann sich je nach seiner Eigenschaft colspan oder rowspan über mehrere Zeilen bzw. Spalten erstrecken. Diese Eigenschaften geben die Anzahl der Spalten bzw. Zeilen an, die das untergeordnete Element überlappen muss.
Wenn die Eigenschaft colspan bzw. rowspan den Wert -1 hat, muss sich das untergeordnete Element über alle verbleibenden Spalten bzw. Zeilen erstrecken. In der folgenden Abbildung ist eine Form in der Zelle (0,0) so konfiguriert, dass sie sich über zwei Spalten erstreckt (die Eigenschaft colspan der Form ist auf 2 gesetzt). Eine weitere Form in der Zelle (2,0) ist so konfiguriert, dass sie sich vertikal über alle verbleibenden Zeilen erstreckt (die Eigenschaft rowspan der Form ist auf -1 gesetzt).
Abbildung der zuvor beschriebenen Rasterbelegung