Label can take the size of the containing string?

ui

#1

Hi guys,

Do you know if the Label can take the size of the containing string?

Thank you,
Catalin


#2

Hi Catalin,

By default the Label is always returning a size large enough to display its string to its parent. However depending on the container the label is included in, the Label may be resized to fit in the layout (resulting in the string not being completely displayed).

So what container are you using?

Gaëtan for MicroEJ


#3

Hi Gaëtan,

Thank you for the quick answer.

I have two labels into a Grid container but I have also tried with a List. It’s a text and his suffix.
I have something like this.

Label text = new Label("Text");
Label suffix = new Label("Suffix");

Grid grid = new Grid();
grid.add(text);
grid.add(suffix);

The issue is that the distance between the text and his suffix is to big.


#4

Hi again,

In this case the label will be centered inside each part of the grid:

|   x   |   x   |

Using a Flow container you could have something like this:

| x | x |       |

Or even a centered version:

|   | x | x |   |

Hope it’ll help.

Gaëtan


#5

Thank you Gaëtan.

It worked with Flow container.


#6

Hi

How do you make the centered version of the flow container ?


#7

Hi Christophe,

You can put the flow container into a Wrapper, making it as adjustedToChild not adjustedToChild.

Regards,


#8

Thanks Pierre.

I have a class that extends from Wrapper, Unfortunatly, adjusted to child doesn’t center the text. Here is the constructor :

public MyWidget() {
Flow flow = new Flow();
flow.setHorizontal(false);
flow.add(new Label(“AAAAAAAAAAAAAA”));
flow.add(new Label(“BBBBBBBBBBBBBBB”));
flow.add(new Label(“CCCCCCCCCCCCCCC”));
setAdjustedToChild(true);
setWidget(flow);
}

What’s wrong with that ? :stuck_out_tongue:


#9

Hi Christophe,

Indeed I did a mistake, you need to set the adjustedToChild field to false.

MicroUI.start();

Desktop desktop = new StyledDesktop();

Stylesheet stylesheet = StyleHelper.getStylesheet();
EditableStyle style = new EditableStyle();
style.setAlignment(GraphicsContext.VCENTER | GraphicsContext.HCENTER);
stylesheet.addRule(new ClassSelector("CENTER"), style);
Flow flow = new Flow();
flow.setHorizontal(false);
flow.add(new Label("AAAAAAAAAAAAAA"));
flow.add(new Label("BBBBBBBBBBBBBBB"));
flow.add(new Label("CCCCCCCCCCCCCCC"));
Wrapper wrapper = new Wrapper();
wrapper.setWidget(flow);
wrapper.setAdjustedToChild(false);

StyledPanel styledPanel = new StyledPanel();
styledPanel.addClassSelector("CENTER");
styledPanel.setWidget(wrapper);
styledPanel.showFullScreen(desktop);
desktop.show();

This will look like that image


#10

Also, if you just want to jump lines, you can use a ComplexTextManager:

MicroUI.start();

Desktop desktop = new StyledDesktop();

Stylesheet stylesheet = StyleHelper.getStylesheet();
EditableStyle style = new EditableStyle();
style.setAlignment(GraphicsContext.VCENTER | GraphicsContext.HCENTER);
stylesheet.addRule(new ClassSelector("CENTER"), style);
style.setTextManager(new ComplexTextManager());
style.setAlignment(GraphicsContext.TOP | GraphicsContext.LEFT);
stylesheet.addRule(new ClassSelector("CTM"), style);

Label label = new Label("AAAAAAAAAAAAAA\nBBBBBBBBBBBBBBB\nCCCCCCCCCCCCCCC");
label.addClassSelector("CTM");
Wrapper wrapper = new Wrapper();
wrapper.setAdjustedToChild(false);
wrapper.setWidget(label);

StyledPanel styledPanel = new StyledPanel();
styledPanel.addClassSelector("CENTER");
styledPanel.setWidget(wrapper);
styledPanel.showFullScreen(desktop);
desktop.show();

#11

Both solutions are working fine, I have a preference for the second one with centers the text horizontally.

Thanks.