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.

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
undvalign
: 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ürhalign
: left (links), center (zentrieren), right (rechts), stretch (dehnen).Gültige Werte fürvalign
: 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:

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:
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:

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
undheight
: 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:

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:

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).
