Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (499)
Games in Android Showcase (118)
games submitted by our members
Games in WIP (568)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Libgdx: Table layout confusion  (Read 4294 times)
0 Members and 1 Guest are viewing this topic.
Offline Cero
« Posted 2013-11-09 15:15:22 »

As someone who is quite experienced with CSS, I'm trying to understand the "table layout" which scene2d ui in libgdx uses.

However everything I do seems to yield counter-intuitive results. Like using left(), top, right, bottom whatever or width(float) and its being completely ignored
So I have this simple test code:

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
60  
61  
public class CopyOfLetsDoMenus extends ApplicationAdapter
{
   Stage stage;

    public void create ()
    {
            stage = new Stage();
            Gdx.input.setInputProcessor(stage);

            Skin skin = new Skin(Gdx.files.internal("data/uiskin.json"));
           
          Table rootTable = new Table();
          rootTable.setFillParent(true);
          rootTable.debug();
         
          Table table = new Table();
          table.debug();
         
          Label nameLabel = new Label("Name:", skin);
          TextField nameText = new TextField("ble", skin);
          Label addressLabel = new Label("Address:", skin);
          TextField addressText = new TextField("bla", skin);

          table.add(nameLabel);
          table.add(nameText).width(100);
          table.row();
          table.add(addressLabel);
          table.add(addressText).width(100);
         
          rootTable.addActor(table);
          stage.addActor(rootTable);
    }

    public void render () {
            Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
            stage.act(Gdx.graphics.getDeltaTime());
            stage.draw();
            Table.drawDebug(stage);
    }

    public void resize (int width, int height) {
            stage.setViewport(width, height, true);
    }

    public boolean needsGL20 () {
            return true;
    }

    public void dispose () {
            stage.dispose();
    }
   
   public static void main(String[] args)
   {
      LwjglApplicationConfiguration cfg = new LwjglApplicationConfiguration();
      cfg.useGL20 = true;
      cfg.width = 480;
      cfg.height = 320;
      new LwjglApplication(new CopyOfLetsDoMenus(), cfg);
   }
}


Very short very sweet.

However, the result is this :



It seems to think the frame is twice it's size and then center the stuff... Why ?

I'm actually just trying to follow the official guide: https://code.google.com/p/table-layout/

Offline mojo
« Reply #1 - Posted 2013-11-09 15:59:39 »

The TableLayout is pretty powerful, but for me it is always trial&error to get it right. If I remember correctly, I don't use setFillParent method and do a lot of defaults

For example here is how i fight for a simple "add attribute row" :

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
Table attributeTable= new Table(skin);
attributeTable.setBackground(skin.getDrawable("console2"));

attributeTable.defaults().expand().fill().padBottom(4f);
attributeTable.columnDefaults(0).left();
attributeTable.columnDefaults(1).right().width(50f);
attributeTable.columnDefaults(2).right().width(40f);

label = new Label("Strength: ", skin);
attributeTable.add(label);

strLabel = new Label("", skin);
strLabel.setAlignment(Align.center, Align.center);
attributeTable.add(strLabel);

strButton = new TextButton("+", skin);
attributeTable.add(strButton);      

attributeTable.row();

add(attributeTable).expand().fill().padRight(5f);


Offline Nate

JGO Kernel


Medals: 149
Projects: 4
Exp: 14 years


Esoteric Software


« Reply #2 - Posted 2013-11-09 16:50:33 »

@Cero, because of this:
1  
rootTable.addActor(table);

This adds table as a child of rootTable using Group#addActor. The child will not be in a table cell in rootTable and won't be laid out by rootTable. Use Table#add to add table to a table cell in rootTable.

You can make it slightly smaller:
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
Table rootTable = new Table().debug();
rootTable.setFillParent(true);

TextField nameText = new TextField("ble", skin);
TextField addressText = new TextField("bla", skin);

Table table = new Table(skin).debug();
table.add("Name:");
table.add(nameText).width(100).row();
table.add("Address:");
table.add(addressText).width(100);

rootTable.add(table);
stage.addActor(rootTable);

The table is given a skin, then you can create labels a little easier, since that is so common. Careful calling row() on a cell though. It can make code a little smaller but isn't as clear where the row ends. Also row() returns the row, not the cell, so something like row().pad(5) will set the default padding for all cells in the next row.

@mojo, it shouldn't be trial and error. Have you gone through the docs?
https://code.google.com/p/table-layout/

Cero's example had better organization. mojo's example mixes layout with creation, which makes it harder to read.

There is no point in using column defaults if you only have a single row. You could move right() to cell defaults, then left() on the first column. However, there is no point in using right/left at all since you are using fill(), which sizes the widget to the cell. If the widget is the size of the cell, it isn't useful to align the widget within the cell.

Finally, I'm not sure you really need .expand().fill() since you set the width of two of the columns, but maybe you do.

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
// Create.

label = new Label("Strength: ", skin);

strLabel = new Label("", skin);
strLabel.setAlignment(Align.center, Align.center);

strButton = new TextButton("+", skin);

// Layout.

Table attributeTable = new Table(skin);
attributeTable.setBackground("console2");

attributeTable.defaults().expand().fill().padBottom(4f);
attributeTable.add(label);
attributeTable.add(strLabel).width(50f);
attributeTable.add(strButton).width(40f);

add(attributeTable).expand().fill().padRight(5f);

// Usually setting event listeners is next.


With this it is way easy to see your table has 3 cells in one row. I often use separate methods for create, layout, and events.

Note the setBackground(String) shortcut, since we give the table constructor a skin. Also you could use add("labeltext") to reduce the amount of code unless you actually need a reference to the label (eg, to change later).

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline mojo
« Reply #3 - Posted 2013-11-09 17:18:27 »

@nate, yes I read all the docs  Tongue. The code I posted is a part of an larger UI.

Great advices, I will look into it, next time I procrastinate trough refactoring Smiley



Offline Mads

JGO Ninja


Medals: 26
Projects: 3
Exp: 6 years


One for all!


« Reply #4 - Posted 2013-11-11 09:30:25 »

I had this problem just last night. When using nested tables, make sure to expand().fill().  Smiley

Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

Pippogeek (40 views)
2014-09-24 16:13:29

Pippogeek (31 views)
2014-09-24 16:12:22

Pippogeek (21 views)
2014-09-24 16:12:06

Grunnt (47 views)
2014-09-23 14:38:19

radar3301 (29 views)
2014-09-21 23:33:17

BurntPizza (65 views)
2014-09-21 02:42:18

BurntPizza (37 views)
2014-09-21 01:30:30

moogie (44 views)
2014-09-21 00:26:15

UprightPath (53 views)
2014-09-20 20:14:06

BurntPizza (55 views)
2014-09-19 03:14:18
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!