tablelayout not spanning

[howud...@gmail.com]

The following code doesn't render as I would have expected.  Not sure how many columns it's actually showing:

TableLayout layout = new TableLayout(4,4);

    private Label lblVersion = new Label();

    private Label lblEmployee = new Label();

    Picker cmbTheme = new Picker();

    private Container cnt1 = new Container(layout);

    Button btnSave = new Button("Save", FontImage.createMaterial(FontImage.MATERIAL_FOLDER, UIManager.getInstance().getComponentStyle("Command")));

    Button btnRestart = new Button("Restart", FontImage.createMaterial(FontImage.MATERIAL_SWAP_VERTICAL_CIRCLE, UIManager.getInstance().getComponentStyle("Command")));

protected void initManualComponents() {

TableLayout.Constraint cn1 = layout.createConstraint().horizontalSpan(1).widthPercentage(25);

TableLayout.Constraint cn2 = layout.createConstraint().horizontalSpan(2).widthPercentage(25);

TableLayout.Constraint cn3 = layout.createConstraint().horizontalSpan(3).widthPercentage(25);

TableLayout.Constraint cn4 = layout.createConstraint().horizontalSpan(4).widthPercentage(25);

cmbTheme.setType(Display.PICKER_TYPE_STRINGS);

cmbTheme.setStrings("Native", "Blue", "Chrome", "Dark", "Green");

lblVersion.setText(GLOBALS.version);

lblEmployee.setText(GLOBALS.employee.toString());

    layout.setGrowHorizontally(true);

cnt1.add(cn1, new Label("Version:"));

cnt1.add(cn3, lblVersion);

cnt1.add(cn1, new Label("Employee:"));

cnt1.add(cn3, lblEmployee);

cnt1.add(cn1, new Label("Theme:"));

cnt1.add(cn3, cmbTheme);

cnt1.add(cn4, new Label("Note: Theme changes require a restart"));

cnt1.add(cn2, btnSave);

cnt1.add(cn2, btnRestart);

this.add(BorderLayout.CENTER, cnt1);

    }

 

[Shai Almog]

You can't reuse a constraint for two separate components. We should probably detect and fail on such cases.

[howud...@gmail.com]

I think that the problem is somewhere else as using new constraints did not help any

TableLayout layout = new TableLayout(4,4);

    private Label lblVersion = new Label();

    private Label lblEmployee = new Label();

    Picker cmbTheme = new Picker();

    private Container cnt1 = new Container(layout);

    Button btnSave = new Button("Save", FontImage.createMaterial(FontImage.MATERIAL_FOLDER, UIManager.getInstance().getComponentStyle("Command")));

protected void initManualComponents() {

cmbTheme.setType(Display.PICKER_TYPE_STRINGS);

cmbTheme.setStrings("Native", "Blue", "Chrome", "Dark", "Green");

lblVersion.setText(GLOBALS.version);

lblEmployee.setText(GLOBALS.employee.toString());

btnSave.addActionListener(e -> onSave());

    layout.setGrowHorizontally(true);

cnt1.add(layout.createConstraint().horizontalSpan(1), new Label("Version:"));

cnt1.add(layout.createConstraint().horizontalSpan(3), lblVersion);

cnt1.add(layout.createConstraint().horizontalSpan(1), new Label("Employee:"));

cnt1.add(layout.createConstraint().horizontalSpan(3), lblEmployee);

cnt1.add(layout.createConstraint().horizontalSpan(1), new Label("Theme:"));

cnt1.add(layout.createConstraint().horizontalSpan(3), cmbTheme);

cnt1.add(layout.createConstraint().horizontalSpan(4), new Label("Note: Theme changes require a restart"));

cnt1.add(layout.createConstraint().horizontalSpan(2), btnSave);

this.add(BorderLayout.CENTER, cnt1);

    }

[Shai Almog]

I don't think you quite understand the idea of spanning here. If you want to increase the width of the table spanning will make no difference. You need to use the width constraint.

[howud...@gmail.com]

Of course I dont quite understand the idea...that's why I am asking for help, maybe what you dont quite understand is that I am asking for help???  All I am looking for is a very simple table layout (I preferr to walk before I run)

[ cell 1][ cell 2][ cell 3][ cell4     ]
[Version][String that spans 3 cells    ]
[ button 1      ][ button 2            ]

So now I tried this way:

     layout.setGrowHorizontally(true);

    Constraint c1 = layout.createConstraint().horizontalSpan(1); c1.setWidthPercentage(25);

cnt1.add(c1, new Label("Version:"));

  Constraint c2 = layout.createConstraint().horizontalSpan(3); c2.setWidthPercentage(75);

cnt1.add(c2, "Test");

    Constraint c3 = layout.createConstraint().horizontalSpan(2); c1.setWidthPercentage(50);

cnt1.add(c3, btnSave);

    Constraint c4 = layout.createConstraint().horizontalSpan(2); c1.setWidthPercentage(50);

cnt1.add(c4, btnSave2);

this.add(BorderLayout.CENTER, cnt1);

The problem is the same as always, it never shows anything beyond the first column.

And 2nd problem is that you dont allow function chaining on setWidthPercentage() :(

Peter

[howud...@gmail.com]

BTW, here is a complete Form that shows the problem

import com.codename1.ui.Button;

import com.codename1.ui.Container;

import com.codename1.ui.FontImage;

import com.codename1.ui.Label;

import com.codename1.ui.layouts.BorderLayout;

import com.codename1.ui.plaf.UIManager;

import com.codename1.ui.table.TableLayout;

import com.codename1.ui.table.TableLayout.Constraint;

public class FrmMain extends com.codename1.ui.Form {

TableLayout layout = new TableLayout(4,4);

    private Container cnt1 = new Container(layout);

    Button btnSave = new Button("Save", FontImage.createMaterial(FontImage.MATERIAL_FOLDER, UIManager.getInstance().getComponentStyle("Command")));

    Button btnSave2 = new Button("Save2", FontImage.createMaterial(FontImage.MATERIAL_FOLDER, UIManager.getInstance().getComponentStyle("Command")));

    public FrmMain() {

        this(com.codename1.ui.util.Resources.getGlobalResources());

    }

    

    public FrmMain(com.codename1.ui.util.Resources resourceObjectInstance) {

        initManualComponents();

    }

    protected void initManualComponents() {

    this.setLayout(new BorderLayout());

    layout.setGrowHorizontally(true);

    Constraint c1 = layout.createConstraint().horizontalSpan(1); c1.setWidthPercentage(25);

cnt1.add(c1, new Label("Version:"));

  Constraint c2 = layout.createConstraint().horizontalSpan(3); c2.setWidthPercentage(75);

cnt1.add(c2, new Label("Test"));

    Constraint c3 = layout.createConstraint().horizontalSpan(2); c3.setWidthPercentage(50);

cnt1.add(c3, btnSave);

    Constraint c4 = layout.createConstraint().horizontalSpan(2); c4.setWidthPercentage(50);

cnt1.add(c4, btnSave2);

this.add(BorderLayout.CENTER, cnt1);

    }

}

[Shai Almog]

You didn't actually indicate your expectations in the original question so I guessed them (correctly).

The cells do span. The problem in your case is that you gave varying widths to spanned columns assuming you are assigning them to the total of the columns when in fact width only applies to the current column. This becomes a bit tricky with spanning and varying rows so as a workaround I just added an invisible row to set the widths as such:

        TableLayout tl = new TableLayout(4, 4);
        tl.setGrowHorizontally(true);
        Form f = new Form("Table", tl);  
        f.add(tl.createConstraint().widthPercentage(25), new Label()).
                add(tl.createConstraint().widthPercentage(25), new Label()).
                add(tl.createConstraint().widthPercentage(25), new Label()).
                add(tl.createConstraint().widthPercentage(25), new Label());
        f.add(new Label("Version:")).
                add(tl.createConstraint().horizontalSpan(3), new Label("Test")).
                add(tl.createConstraint().horizontalSpan(2), new Button("Save 1")).
                add(tl.createConstraint().horizontalSpan(2), new Button("Save 2"));
                       
        f.show();                        

[howud...@gmail.com]

that resolved it, thank you