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)
(Grid Weight X Example)
Line 181: Line 181:
 
|-
 
|-
 
| Initial
 
| Initial
| [[File:Layout GridWeightY01.jpg]]
+
| [[File:Layout GridWeightX01.jpg]]
 
|-
 
|-
 
| After resizing horizontally
 
| After resizing horizontally
| [[File:Layout GridWeightY02.jpg]]
+
| [[File:Layout GridWeightX02.jpg]]
 
|-
 
|-
 
|}
 
|}

Revision as of 09:39, 4 April 2014

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

The Concepts pages define concepts and elements used in the Eclipse Scout Framework.

Abstract

Scout provides a generic layout on any composite fields as:

The layout is mainly related to a grid layout with some additional features as weight related resize behavior and some optimizations reducing the used space. 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.

Config method Meaning Default value
getConfiguredBodyGrid The layout orientation vertical vs. horizontal. Scout provides two layout strategies: 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.

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.

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.

Config method Meaning Default value
getConfiguredGridX Configures the x position (horizontal) 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 column.
It is not necessary to explicitly set a column count by AbstractGroupBox#getConfiguredGridColumnCount().

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 getConfiguredGridX() and getConfiguredGridY().

Note.png
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 getConfiguredGridY().

Note.png
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 getConfiguredGridColumnCount() (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 getConfiguredGridWeightX 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

  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;
      }
    }
  }
Initial Layout GridWeightX01.jpg
After resizing horizontally Layout GridWeightX02.jpg
Note.png


Grid Weight Y Example

  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;
      }
    }
  }


Initial Layout GridWeightY01.jpg
After resizing vertical Layout GridWeightY02.jpg
Note.png
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

Copyright © Eclipse Foundation, Inc. All Rights Reserved.