Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Scout/Concepts/Layout"

(Grid Weight X Example)
(Replaced content with "The Scout documentation has been moved to https://eclipsescout.github.io/.")
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
[[Category:Scout]]
+
The Scout documentation has been moved to https://eclipsescout.github.io/.
{{ScoutPage|cat=Concepts}}
+
 
+
The Concepts pages define concepts and elements used in the Eclipse Scout Framework.
+
 
+
== Abstract ==
+
Scout provides a generic layout on any composite fields as:
+
* {{ScoutLink|Concepts|GroupBox|GroupBox}}
+
* {{ScoutLink|Concepts|TabBox|TabBox}}
+
* {{ScoutLink|Concepts|SequenceBox|SequenceBox}}
+
* {{ScoutLink|Concepts|SplitBox|SplitBox}}
+
* {{ScoutLink|Concepts|RadioButtonGroup|RadioButtonGroup}}
+
 
+
The layout is mainly related to a grid layout with some additional features as <b>weight related resize behavior</b> and <b>some optimizations reducing the used space</b>. There are currently a horizontal and a vertical implementation of the grid layout.
+
 
+
== Layout properties ==
+
 
+
=== Groupbox Properties ===
+
The following group box properties affect the layout of the container. So the fields in the container getting layouted respecting the properties.
+
 
+
{|{{BMTableStyle}}
+
|-{{BMTHStyle}} valign="top"
+
! Config method
+
! Meaning
+
! Default value
+
|-
+
| getConfiguredBodyGrid
+
| The layout orientation vertical vs. horizontal. Scout provides two layout strategies:
+
* Vertical {{ScoutLink|Concepts|Layout#VerticalSmartGroupBoxBodyGrid}}
+
* Horizontal {{ScoutLink|Concepts|Layout#HorizontalGroupBoxBodyGrid}}
+
* Own implementations can implement <code>IGroupBoxBodyGrid</code>
+
| VerticalSmartGroupBoxBodyGrid.class
+
|-
+
| getConfiguredColumnCount
+
| Column count of the layout where child fields are placed in respective to their layout data.
+
| -1 Will be replaced with either the parent groupbox column count or if any of the parent group boxes has a grid column count 2.
+
|-
+
|}
+
 
+
==== VerticalSmartGroupBoxBodyGrid====
+
The fields are placed in column first in the grid. The number of rows is variable and calculated from the fields and its layout properties placed in this layout.
+
E.g.
+
{|{{BMTableStyle}}
+
|-
+
| Field01
+
| Field04
+
| Field07
+
|-
+
| Field02
+
| Field05
+
| Field08
+
|-
+
| Field03
+
| Field06
+
| Field09
+
|-
+
|}
+
 
+
 
+
==== HorizontalGroupBoxBodyGrid====
+
The fields are placed in row first in the grid. The number of rows is variable and calculated from the fields and its layout properties placed in this layout.
+
E.g.
+
{|{{BMTableStyle}}
+
|-
+
| Field01
+
| Field02
+
| Field03
+
|-
+
| Field04
+
| Field05
+
| Field06
+
|-
+
| Field07
+
| Field08
+
| Field09
+
|-
+
|}
+
 
+
 
+
=== Form Field Properties ===
+
The form field properties define how a certain form field has to be layout in its container.
+
 
+
{|{{BMTableStyle}}
+
|-{{BMTHStyle}}
+
! Config method
+
! Meaning
+
! Default value
+
|-
+
| getConfiguredGridX
+
| Configures the x position (horizontal) of this field in the logical grid of the surrounding group box.<br>
+
If the value is set to -1, the property will be ignored. If the value is >= 0, it's considered as grid column. <br>
+
It is not necessary to explicitly set a column count by <code>AbstractGroupBox#getConfiguredGridColumnCount()</code>.
+
 
+
This property only has an effect if every field inside the group box has a fix position which means every field
+
inside the group box need to have x and y to be set which can be configured by <code>getConfiguredGridX()</code> and
+
<code>getConfiguredGridY()</code>.
+
{{note|This property is for static layout only and should only be used in spacial cases!}}
+
| -1 means no static grid position.
+
|-
+
| getConfiguredGridY
+
| Configures the y (vertical) position of this field in the logical grid of the surrounding group box.
+
If the value is set to -1, the property will be ignored. If the value is >= 0, it's considered as grid row.
+
This property only has an effect if every field inside the group box has a fix position which means every field
+
inside the group box need to have x and y to be set which can be configured by </code>getConfiguredGridX()</code> and
+
<code>getConfiguredGridY()</code>.
+
{{note|This property is for static layout only and should only be used in spacial cases!}}
+
| -1 means no static grid position.
+
|-
+
| getConfiguredGridW
+
| Configures the column span of this group box.
+
The value defined by this property refers to the number of columns defined by the container of this field.
+
The column count of the container, which actually is the parent group box, can be configured by
+
<code>getConfiguredGridColumnCount()</code> (you need to configure that in the parent group box).
+
The maximum value is the number of columns of the containing container (group box) otherwise the value will be set runtimely to the number of columns of the container.
+
| 1
+
|-
+
| getConfiguredGridH
+
| The number of rows the field takes of the parent group box logical layout.
+
| 1
+
|-
+
| getConfiguredGridWeightX
+
| Configures how much a field should horizontally grow or shrink. 0 means fixed width and the grid cell won't grow or shrink. A value > 0 means how much of the extra space the field will take in comparison to other fields in the same row and their <code>getConfiguredGridWeightX</code> values.
+
 
+
Example: A group box with 3 columns contains 3 fields: Every field has gridW = 1 and weightX = -1. This leads to 1 row and 3 grid cells which would grow and shrink proportionally because weightX is automatically set to 1.
+
| -1 will be set runtimely to 1.
+
|-
+
| getConfiguredGridWeightY
+
| desc
+
|
+
|-
+
| getConfiguredGridUseUiWidth
+
| desc
+
|
+
|-
+
| getConfiguredGridUseUiHeight
+
| desc
+
|
+
|-
+
|}
+
 
+
== Examples ==
+
=== Grid Weight X Example ===
+
<source lang="java">
+
  public abstract class GroupBox extends AbstractGroupBox {
+
 
+
    @Override
+
    protected int getConfiguredGridColumnCount() {
+
      return 2;
+
    }
+
 
+
    @Order(10)
+
    public class Field01 extends AbstractStringField {
+
      @Override
+
      protected String getConfiguredLabel() {
+
        return "Field 01";
+
      }
+
 
+
      @Override
+
      protected double getConfiguredGridWeightX() {
+
        return 2;
+
      }
+
    }
+
 
+
    @Order(20)
+
    public class Field02 extends AbstractStringField {
+
 
+
      @Override
+
      protected String getConfiguredLabel() {
+
        return "Field 02";
+
      }
+
 
+
      @Override
+
      protected double getConfiguredGridWeightX() {
+
        return 0;
+
      }
+
    }
+
  }
+
</source>
+
 
+
 
+
{|{{BMTableStyle}}
+
|-
+
| Initial
+
| [[File:Layout GridWeightX01.jpg]]
+
|-
+
| After resizing horizontally
+
| [[File:Layout GridWeightX02.jpg]]
+
|-
+
|}
+
 
+
 
+
{{note| '''Conclusion:'''
+
'Field 02' with <nowiki>getConfiguredGridWeightX = 0</nowiki> does not care about resizing horizontally and keeps it's size. 'Field01' with <nowiki>getConfiguredGridWeightX = 2</nowiki> is the only field resizable horizontally and will be adjusted to the horizontal space not used by 'Field 02'.
+
}}
+
 
+
=== Grid Weight Y Example ===
+
<source lang="java">
+
  public abstract class GroupBox extends AbstractGroupBox {
+
 
+
    @Override
+
    protected int getConfiguredGridColumnCount() {
+
      return 1;
+
    }
+
 
+
    @Order(10)
+
    public class Field01 extends AbstractStringField {
+
      @Override
+
      protected String getConfiguredLabel() {
+
        return "Field 01";
+
      }
+
    }
+
 
+
    @Order(20)
+
    public class Field02 extends AbstractStringField {
+
      @Override
+
      protected String getConfiguredLabel() {
+
        return "Field 02";
+
      }
+
 
+
      @Override
+
      protected boolean getConfiguredMultilineText() {
+
        return true;
+
      }
+
 
+
      @Override
+
      protected double getConfiguredGridWeightY() {
+
        return 2;
+
      }
+
    }
+
 
+
    @Order(30)
+
    public class Field03 extends AbstractStringField {
+
 
+
      @Override
+
      protected String getConfiguredLabel() {
+
        return "Field 03";
+
      }
+
 
+
      @Override
+
      protected boolean getConfiguredMultilineText() {
+
        return true;
+
      }
+
 
+
      @Override
+
      protected double getConfiguredGridWeightY() {
+
        return 4;
+
      }
+
    }
+
  }
+
</source>
+
 
+
 
+
{|{{BMTableStyle}}
+
|-
+
| Initial
+
| [[File:Layout GridWeightY01.jpg]]
+
|-
+
| After resizing vertical
+
| [[File:Layout GridWeightY02.jpg]]
+
|-
+
|}
+
 
+
{{note| '''Conclusion:'''
+
Initially all fields take vertical 1 logical grid cell space. Since 'Field 02' has a weight Y of 2 it is generally interested in raising vertically. 'Field 03' has a weight Y of 4 and is also interested in raising vertically. Additional vertical space will be distributed to 'Field 02' and 'Field 03' in proportion to their weight Y.
+
}}
+
 
+
== Layout Inspector==
+

Latest revision as of 04:17, 14 March 2024

The Scout documentation has been moved to https://eclipsescout.github.io/.

Back to the top