User Tools

Site Tools


v020:layout

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
v020:layout [2015/11/05 15:26]
deva [Simple layout constraints for nodes]
v020:layout [2015/11/07 13:39] (current)
gregobalu [Constraints for links]
Line 27: Line 27:
   * ''​@Left(val = A.class, from = B.class)''​ : box **A** is //west// from **B** and is right next to it.   * ''​@Left(val = A.class, from = B.class)''​ : box **A** is //west// from **B** and is right next to it.
  
 +Example: Model contains these classes: **A**, **B** and **C**.
 +{{ :​v020:​examplesimplediagram.png?​200|}}
 +<​code>​
 +class MyDiagram extends Diagram {
 +  @North(val = A.class, from = B.class)
 +  @Below(val = A.class, from = C.class)
 +  @West(val = C.class, from = B.class)
 +  class MyLayout extends Layout {}
 +}
 +</​code>​
 ===== Compound layout constraints for nodes ===== ===== Compound layout constraints for nodes =====
  
 In this section **A**, **B**, **C** and **D** are classes already defined in a txtUML model. Complex layout for these classes (boxes) can be given as presented: In this section **A**, **B**, **C** and **D** are classes already defined in a txtUML model. Complex layout for these classes (boxes) can be given as presented:
  
-  * ''​@Column({A.class,​ B.class, C.class})''​ : The boxes **A**, **B** and **C** are arranged in a column ​formation, with the top being **A** and preserving the order. Any number of classes can be given here. +  * ''​@Column({A.class,​ B.class, C.class})''​ : The boxes **A**, **B** and **C** are arranged in a column, with the top being **A** and preserving the order. Any number of classes can be given here. 
-  * ''​@Row({A.class,​ B.class, C.class, D.class})''​ :  The boxes **A**, **B**, **C** and **D** are arranged in a row formation, with the left most being **A** and preserving the order. Any number of classes can be given here.+  * ''​@Row({A.class,​ B.class, C.class, D.class})''​ : The boxes **A**, **B**, **C** and **D** are arranged in a row, with the left most being **A** and preserving the order. Any number of classes can be given here.
   * ''​@Diamond(top = A.class, right = B.class, bottom = C.class, left = D.class)''​ : The boxes **A**, **B**, **C** and **D** are arranged in a diamond shape where the four boxes are in the corners and an empty spot remains between them.   * ''​@Diamond(top = A.class, right = B.class, bottom = C.class, left = D.class)''​ : The boxes **A**, **B**, **C** and **D** are arranged in a diamond shape where the four boxes are in the corners and an empty spot remains between them.
   * ''​@TopMost(A.class)''​ : Box **A** is //north// from every other box.   * ''​@TopMost(A.class)''​ : Box **A** is //north// from every other box.
Line 42: Line 52:
 <​code>​ <​code>​
 class MyDiagram extends Diagram { class MyDiagram extends Diagram {
- 
   @Row({R.class,​ E.class, D.class})   @Row({R.class,​ E.class, D.class})
   @Column({C.class,​ R.class, O.class, S1.class, S2.class})   @Column({C.class,​ R.class, O.class, S1.class, S2.class})
Line 48: Line 57:
 } }
 </​code>​ </​code>​
-TODO:​IMAGE_HERE 
- 
 ===== Constraints for links ===== ===== Constraints for links =====
  
Line 58: Line 65:
   * ''​@North(val = L.class, from = A.class, end = LinkEnd.End)''​ : reflexive link **L**'​s ending point will connect to box **A** on **A**'​s northern side.   * ''​@North(val = L.class, from = A.class, end = LinkEnd.End)''​ : reflexive link **L**'​s ending point will connect to box **A** on **A**'​s northern side.
   * Can be used similarly with ''​@East'',​ ''​@South''​ and ''​@West''​.   * Can be used similarly with ''​@East'',​ ''​@South''​ and ''​@West''​.
-  * ''​@Priority(val = L.class, prior = 50)''​ : gives link **L** a priority value of **50**. Higher priority means shorter route and less turns. ​+  * ''​@Priority(val = L.class, prior = 50)''​ : gives link **L** a priority value of **50**. Higher priority means shorter route and less turns.
  
 Example: Model contains these classes: **A** and **B**. Model contains these links: **L** (A - B) and **R** (A -A). Example: Model contains these classes: **A** and **B**. Model contains these links: **L** (A - B) and **R** (A -A).
 +{{ :​v020:​examplelinkdiagram.png?​150|}}
 <​code>​ <​code>​
 class MyDiagram extends Diagram { class MyDiagram extends Diagram {
- 
   @North(val = L.class, from = A.class)   @North(val = L.class, from = A.class)
   @East(val = L.class, from = B.class)   @East(val = L.class, from = B.class)
   @Above(val = A.class, from = B.class)   @Above(val = A.class, from = B.class)
-  @West(val = R.class, from = A.class, LinkEnd.Start) +  @West(val = R.class, from = A.class, ​end = LinkEnd.Start) 
-  @South(val = R.class, from = A.class, LinkEnd.End)+  @South(val = R.class, from = A.class, ​end = LinkEnd.End)
   class MyLayout extends Layout {}   class MyLayout extends Layout {}
 } }
 </​code>​ </​code>​
-TODO:​IMAGE_HERE 
- 
 ===== Groups ===== ===== Groups =====
  
-In this section **A**, **B**, **C** are classes already defined in a txtUML model and **L** and **J** are associations with an endpoint at class **A**. Relative layout for the associations (links) and classes (boxes) can be given as presented.+In this section **A**, **B**, **C** are classes already defined in a txtUML model and **L** and **J** are associations with an endpoint at class **A**.
  
-There'​s two way to define a group. The first method is by inheriting ​a class from either ''​NodeGroup''​ or ''​LinkGroup''​. The elements of the group can be specified with the ''​@Contains''​ annotation. A group can contain model elements of the corresponding type or other groups containing ​such type of elements. In the latter case, the contained groups are '​flattened',​ which means that only members ​of the contained groups are added to the given group instead of adding the contained group objects themselves.+group can be defined ​by defining ​a class inheriting ​either ​from ''​NodeGroup''​ or from ''​LinkGroup''​. The elements of the group can be specified with the ''​@Contains''​ annotation. A group can contain model elements of the corresponding type or other groups containing elements of the corresponding type.
  
 <​code>​ <​code>​
Line 90: Line 95:
 </​code>​ </​code>​
  
-If the given group is a ''​NodeGroup'',​ the annotation ''​@Alignment''​ can be used to set an alignment ​on its elements, using items of enum //​hu.elte.txtuml.layout.lang.AlignmentType//,​ i.e. ''​TopToBottom'',​ ''​BottomToTop'',​ ''​RightToLeft''​ or ''​LeftToRight''​.+If the given group is a ''​NodeGroup'',​ the annotation ''​@Alignment''​ can be used to set the alignment ​of its elements, using items of enum //​hu.elte.txtuml.layout.lang.AlignmentType//,​ i.e. ''​TopToBottom'',​ ''​BottomToTop'',​ ''​RightToLeft''​ or ''​LeftToRight''​.
  
 <​code>​ <​code>​
Line 98: Line 103:
 </​code>​ </​code>​
  
-With these groups we can use the previously mentioned statements.+The previously mentioned statements ​can be used with these groups as parameters as well.
  
   * ''​@North(val = {A.class, B.class}, from = C.class)''​ : both boxes **A** and **B** are north from **C**. The layout between **A** and **B** is not defined.   * ''​@North(val = {A.class, B.class}, from = C.class)''​ : both boxes **A** and **B** are north from **C**. The layout between **A** and **B** is not defined.
Line 122: Line 127:
   //...   //...
 </​code>​ </​code>​
-TODO:​IMAGE_HERE 
  
 ===== Other ===== ===== Other =====
Line 138: Line 142:
 } }
 </​code>​ </​code>​
-TODO:​IMAGE_HERE(B missing) 
  
 ===== Contradictions and other errors ===== ===== Contradictions and other errors =====
v020/layout.1446733605.txt.gz · Last modified: 2015/11/05 15:26 by deva