« GLayout » : différence entre les versions

De GENIUS
Aller à la navigation Aller à la recherche
(Page créée avec « TBW ... Return to the introduction ↑ Go to the next page → »)
 
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
TBW ...
<font color=#556B2F>**GENIUS**</font> gives a specific <font color=#FF0000>Layout</font> (based on [[http://www.miglayout.com|MigLayout]]) well adapted to conditional display.
 
'''Remark''': since the V1.2 version, a new API is availaible to manage it. The old one (using strings) is yet available via the <font color=#4169E1>setStringContraint()</font> method. It is preferable to use the new API. Anyway, the old one will allow to access to all Miglayout funnctionalities.
 
By default, every new graphic widget will be set to the next line,
 
<syntaxhighlight lang="java">
public class MyPanel extends GPanel {
  private GButton but1;
  private GButton but2;
  private GButton but3;
  public myPanel() {
    but1 = new GButton("Bouton 1");
    but2 = new GButton("Bouton 2");
    but3 = new GButton("Bouton 3");
  }
  public void display() throws GException {
    put(but1);
    put(but2);
    put(but3);
  }
  public void generic() { }
};
</syntaxhighlight>
 
Thus, the result of such code will give us:
 
{{:user_manual:miglayout1.jpg|}}
 
Anyway, be careful of the fact that this layout is based on on a <u>grid cell</u> => the size of a cell may depend on another component situated below …
 
{{:user_manual:miglayout2.jpg|}}
 
=== The setConstraint method ===
 
We may use, for each object, the <font color=#4169E1>setConstraint()</font> method:
 
<syntaxhighlight lang="java">
but2.setConstraint(null); // No more “by default” way => on the same line
but3.setConstraint(new GConstraint(GConstraint.newline(), GConstraint.width(150)));
</syntaxhighlight>
 
So, we see that to use this method, we must give it a GConstraint object as a single argument. This object will wait itself for one or several arguments which implement the GBasicConstraintInterface Interface. Most of the [http://www.miglayout.com MigLayout] constraints are available via static methods already proposed by the GConstraint class as in the previous example <font color=#4169E1>GConstraint.newline()</font> or <font color=#4169E1>GConstraint.width()</font>.
 
{{:user_manual:miglayout3.jpg|}}
 
For information, the "old fashion" will use the following syntax:
 
<syntaxhighlight lang="java">
but2.setConstraint(""); // No more “by default” way => on the same line
but3.setConstraint("newline, width 150");
</syntaxhighlight>
 
We can also take into account all the objects of a given type included in a  [[javadoc>fr/cnes/genius/current/fr/cnes/genius/lowLevel/GPanel.html|GPanel]] by calling another <font color=#4169E1>setConstraint()</font> method:
 
<syntaxhighlight lang="java">
// Height of all the buttons of the panel "pan" fixed to 50 pixels
this.setConstraint(GButton.class, new GConstraint(GConstraint.height(50)));
</syntaxhighlight>
 
Old fashion ...
 
<syntaxhighlight lang="java">
pan.setConstraint(GButton.class, "height 50");
</syntaxhighlight>
 
=== Some available « constraints » ===
 
The following table gives an overview of some basic [[http://www.miglayout.com|MigLayout]] constraints. To get the exact API of the GBasicConstraintInterface methods proposed by GConstraint class, see the Java doc.
 
| **wrap** [gapsize] | Go to the next line after the component (gapsize => amount of pixel after it)    |
| **newline** [gapsize] | Go to the next line before the component (gapsize => amount of pixel before it)  |
| **skip** [count] | Skip one or several columns (depending of the value of count, 1 by default).      |
| **span** [countx [county]],\\ **spanx** [countx], **spany** [county] | Allows to the component to spread on several cells (countx for horizontal axis and county for vertical axis)                                    |
| **split** [count] | Allows to put several components on a single cell                                |
| **flowx**, **flowy** | Direction when a component is added (flowx by default)                            |
| **height**, **width** size | Specify the height (resp. width) of the component in pixel (preferred size)  |
| **push** (**pushx**, **pushy**) | « Push » the next components (visible when the main window is enlarged) |
| **grow** (**growx**, **growy**) | Fill the cell with the component                                        |
| **gap** left [right] [top] [bottom],\\ **gaptop**, **gapbottom**,\\ **gapleft**, **gapright** [gap] | Specify the gap  (in pixels by default)                                                                    |
| **align** [alignx, aligny],\\ **alignx**, **aligny** [align] | Specifiy alignment: (left, center, right) for alignx and (top, center, bottom) for aligny                                                                |
 
For more constraints, one may read the [[http://www.miglayout.com|MigLayout]] user manual.
 
On the following window, we can see several examples of such use of these layout constraints ...
 
{{:user_manual:miglayout4.jpg|}}
 
We can see that the management of a [[javadoc>fr/cnes/genius/current/fr/cnes/genius/highLevel/GEntryReal.html|GEntryReal]] (for example) may be more confuse than for a simple [[javadoc>fr/cnes/genius/current/fr/cnes/genius/lowLevel/GButton.html|GButton]]. Indeed, this widget is composed of several other subwidgets :
 
<syntaxhighlight>
=> subwidget 0: GLabelWithIndicator
  => subwidget 0.0: GLabel
  => subwidget 0.1: GIndicator (the "*" when the value is modified)
=> subwidget 1: GTextField
=> subwidget 2: GUnit
</syntaxhighlight>
 
So, with the old fashion, it was possible (more or less easily) to access to such subwidgets using "|", "?", "+" syntax. We will not give more details about it here.
 
With the new API, it is easier to explain it with the <font color=#4169E1>setInnerDescendantContraint()</font> method:
 
For example, if we want:
  - to apply "newline" to the global widget
  - to set 200 pixels for the textfield width
  - to skip a cell to the Gunit field
the solution is this one :
 
<syntaxhighlight lang="java">
GEntryReal real = new GEntryReal(...);
 
// Applying "newline" to the GLabel
real.setInnerDescendantConstraint(new GConstraint(GConstraint.newline(), 0, 0);
// Applying "width 200" to the texfield
real.setInnerDescendantConstraint(new GConstraint(GConstraint.width(200)), 1);
// Applying "skip"to the texfield
real.setInnerDescendantConstraint(new GConstraint(GConstraint.skip(1)), 2);
</syntaxhighlight>
 
At last, be careful by using <font color=#4169E1>Constraint.gap()</font>, <font color=#4169E1>Constraint.alignx()</font>
and <font color=#4169E1>Constraint.aligny()</font> methods as they allways used strings as arguments (will be modified in a next version).
 
<syntaxhighlight lang="java">
// Corresponds to gap left=0 right=10 top=20 bottom=30
// ... will be replaced by gap(i1, i2, i3, i4)
wid.setConstraint(new GConstraint(GConstraint.gap("0 10 20 30"));
 
// Corresponds to gap top 10
// ... will be replaced by gaptop(i)
wid.setConstraint(new GConstraint(GConstraint.gap("top 20"));
 
// Does not work as the first gap is cleared by the second one
// ... will be replaced by gaptop(i), gapbottom(j)
wid.setConstraint(new GConstraint(GConstraint.gap("top 20"), GConstraint.gap("bottom 30"));
 
// Will be replaced by enums ...
wid.setConstraint(new GConstraint(GConstraint.alignx("right"), GConstraint.aligny("center"));
</syntaxhighlight>


[[WELCOME_TO_THE_GENIUS_WIKI|Return to the introduction ↑]]  
[[WELCOME_TO_THE_GENIUS_WIKI|Return to the introduction ↑]]  
[[Conditional_Display|Go to the next page →]]
[[Conditional_Display|Go to the next page →]]

Version du 5 mai 2017 à 08:11

**GENIUS** gives a specific Layout (based on [[1]]) well adapted to conditional display.

Remark: since the V1.2 version, a new API is availaible to manage it. The old one (using strings) is yet available via the setStringContraint() method. It is preferable to use the new API. Anyway, the old one will allow to access to all Miglayout funnctionalities.

By default, every new graphic widget will be set to the next line,

public class MyPanel extends GPanel {
 
  private GButton but1;
  private GButton but2;
  private GButton but3;
 
  public myPanel() {
    but1 = new GButton("Bouton 1");
    but2 = new GButton("Bouton 2");
    but3 = new GButton("Bouton 3");
  }
 
  public void display() throws GException {
    put(but1);
    put(but2);
    put(but3);
  }
 
  public void generic() { }
 
};

Thus, the result of such code will give us:

User manual:miglayout1.jpg

Anyway, be careful of the fact that this layout is based on on a grid cell => the size of a cell may depend on another component situated below …

User manual:miglayout2.jpg

The setConstraint method

We may use, for each object, the setConstraint() method:

but2.setConstraint(null); // No more “by default” way => on the same line
but3.setConstraint(new GConstraint(GConstraint.newline(), GConstraint.width(150)));

So, we see that to use this method, we must give it a GConstraint object as a single argument. This object will wait itself for one or several arguments which implement the GBasicConstraintInterface Interface. Most of the MigLayout constraints are available via static methods already proposed by the GConstraint class as in the previous example GConstraint.newline() or GConstraint.width().

User manual:miglayout3.jpg

For information, the "old fashion" will use the following syntax:

but2.setConstraint(""); // No more “by default” way => on the same line
but3.setConstraint("newline, width 150");

We can also take into account all the objects of a given type included in a [[javadoc>fr/cnes/genius/current/fr/cnes/genius/lowLevel/GPanel.html|GPanel]] by calling another setConstraint() method:

// Height of all the buttons of the panel "pan" fixed to 50 pixels
this.setConstraint(GButton.class, new GConstraint(GConstraint.height(50)));

Old fashion ...

pan.setConstraint(GButton.class, "height 50");

Some available « constraints »

The following table gives an overview of some basic [[2]] constraints. To get the exact API of the GBasicConstraintInterface methods proposed by GConstraint class, see the Java doc.

| **wrap** [gapsize] | Go to the next line after the component (gapsize => amount of pixel after it) | | **newline** [gapsize] | Go to the next line before the component (gapsize => amount of pixel before it) | | **skip** [count] | Skip one or several columns (depending of the value of count, 1 by default). | | **span** [countx [county]],\\ **spanx** [countx], **spany** [county] | Allows to the component to spread on several cells (countx for horizontal axis and county for vertical axis) | | **split** [count] | Allows to put several components on a single cell | | **flowx**, **flowy** | Direction when a component is added (flowx by default) | | **height**, **width** size | Specify the height (resp. width) of the component in pixel (preferred size) | | **push** (**pushx**, **pushy**) | « Push » the next components (visible when the main window is enlarged) | | **grow** (**growx**, **growy**) | Fill the cell with the component | | **gap** left [right] [top] [bottom],\\ **gaptop**, **gapbottom**,\\ **gapleft**, **gapright** [gap] | Specify the gap (in pixels by default) | | **align** [alignx, aligny],\\ **alignx**, **aligny** [align] | Specifiy alignment: (left, center, right) for alignx and (top, center, bottom) for aligny |

For more constraints, one may read the [[3]] user manual.

On the following window, we can see several examples of such use of these layout constraints ...

User manual:miglayout4.jpg

We can see that the management of a [[javadoc>fr/cnes/genius/current/fr/cnes/genius/highLevel/GEntryReal.html|GEntryReal]] (for example) may be more confuse than for a simple [[javadoc>fr/cnes/genius/current/fr/cnes/genius/lowLevel/GButton.html|GButton]]. Indeed, this widget is composed of several other subwidgets :

=> subwidget 0: GLabelWithIndicator
   => subwidget 0.0: GLabel
   => subwidget 0.1: GIndicator (the "*" when the value is modified)
=> subwidget 1: GTextField
=> subwidget 2: GUnit

So, with the old fashion, it was possible (more or less easily) to access to such subwidgets using "|", "?", "+" syntax. We will not give more details about it here.

With the new API, it is easier to explain it with the setInnerDescendantContraint() method:

For example, if we want:

 - to apply "newline" to the global widget
 - to set 200 pixels for the textfield width
 - to skip a cell to the Gunit field

the solution is this one :

GEntryReal real = new GEntryReal(...);

// Applying "newline" to the GLabel
real.setInnerDescendantConstraint(new GConstraint(GConstraint.newline(), 0, 0);
// Applying "width 200" to the texfield
real.setInnerDescendantConstraint(new GConstraint(GConstraint.width(200)), 1);
// Applying "skip"to the texfield
real.setInnerDescendantConstraint(new GConstraint(GConstraint.skip(1)), 2);

At last, be careful by using Constraint.gap(), Constraint.alignx() and Constraint.aligny() methods as they allways used strings as arguments (will be modified in a next version).

// Corresponds to gap left=0 right=10 top=20 bottom=30
// ... will be replaced by gap(i1, i2, i3, i4)
wid.setConstraint(new GConstraint(GConstraint.gap("0 10 20 30"));

// Corresponds to gap top 10
// ... will be replaced by gaptop(i)
wid.setConstraint(new GConstraint(GConstraint.gap("top 20"));

// Does not work as the first gap is cleared by the second one
// ... will be replaced by gaptop(i), gapbottom(j)
wid.setConstraint(new GConstraint(GConstraint.gap("top 20"), GConstraint.gap("bottom 30"));

// Will be replaced by enums ...
wid.setConstraint(new GConstraint(GConstraint.alignx("right"), GConstraint.aligny("center"));

Return to the introduction ↑ Go to the next page →