Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

TUTORIALVaadin lets you build secure, UX-first PWAs entirely in Java.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Calling javascript synchronously by Enver Haase, 1 month ago
unable to layout components properly
Hi!
I want to make a layout like in `preferable.PNG`.
Left side - form layout with user data, middle - table with a button(vertical layout), right side - form layout with npc data.
I've created this window.
@SuppressWarnings("serial")
public class DialogWindow extends Window {
private TextQuestUi tqu = (TextQuestUi) TextQuestUi.getCurrent();
private TextArea playerName;
private TextArea playerLevel;
private TextArea playerGender;
private TextArea interlocutorName;
private TextArea interlocutorLevel;
private TextArea interlocutorGender;
private TextArea interlocutorAge;
public DialogWindow(Npc interlocutor) {
setCaption("Dialog");
setHeight("500");
setWidth("900");
HorizontalLayout windowLayout = new HorizontalLayout();
windowLayout.setSizeFull();
HorizontalLayout componentLayout = new HorizontalLayout();
componentLayout.setWidth("880");
// left player frame
FormLayout playerLayout = new FormLayout();
playerLayout.setWidth("270");
playerLayout.addComponent(new Label(" "));
Image pImage = buildPlaceholderImage();
playerLayout.addComponent(pImage);
Player p = tqu.getResourceHolder().getPlayer();
playerName = buildDefaultTextField("Player", p.getName());
playerLayout.addComponent(playerName);
playerLevel = buildDefaultTextField("Level", String.valueOf(p.getLevel()));
playerLayout.addComponent(playerLevel);
playerGender = buildDefaultTextField("Gender", p.getGender());
playerLayout.addComponent(playerGender);
componentLayout.addComponent(playerLayout);
// dialog frame
VerticalLayout dialogLayout = new VerticalLayout();
dialogLayout.setWidth("340");
Table table = new Table();
table.setWidth("100%");
table.setHeight("400");
table.addContainerProperty("Speaker", String.class, null);
table.addContainerProperty("Dialog", String.class, null);
dialogLayout.addComponent(table);
dialogLayout.setComponentAlignment(table, Alignment.TOP_LEFT);
Button continueBtn = new Button();
continueBtn.setIcon(FontAwesome.ARROW_RIGHT);
continueBtn.setWidth("100");
dialogLayout.addComponent(continueBtn);
dialogLayout.setComponentAlignment(continueBtn, Alignment.BOTTOM_RIGHT);
componentLayout.addComponent(dialogLayout);
componentLayout.setComponentAlignment(dialogLayout, Alignment.MIDDLE_CENTER);
// right npc frame
FormLayout npcLayout = new FormLayout();
npcLayout.setWidth("270");
npcLayout.addComponent(new Label(" "));
Image nImage = buildPlaceholderImage();
npcLayout.addComponent(nImage);
Npc npc = interlocutor;
interlocutorName = buildDefaultTextField("Npc", npc.getName());
npcLayout.addComponent(interlocutorName);
interlocutorLevel = buildDefaultTextField("Level", String.valueOf(npc.getNpcData().getLevel()));
npcLayout.addComponent(interlocutorLevel);
interlocutorGender = buildDefaultTextField("Gender", npc.getNpcData().getGender());
npcLayout.addComponent(interlocutorGender);
interlocutorAge = buildDefaultTextField("Age", String.valueOf(npc.getNpcData().getAge()));
npcLayout.addComponent(interlocutorAge);
componentLayout.addComponent(npcLayout);
windowLayout.addComponent(componentLayout);
windowLayout.setComponentAlignment(componentLayout, Alignment.MIDDLE_RIGHT);
setContent(windowLayout);
center();
setModal(true);
setResizable(false);
}
private Image buildPlaceholderImage() {
String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
Image image = new Image(null, new FileResource(new File(basepath + "/WEB-INF/placeholder.jpg")));
image.setWidth("100");
image.setHeight("100");
return image;
}
private TextArea buildDefaultTextField(String title, String value) {
TextArea built = new TextArea(title);
built.setHeight("40");
built.setWidth("100");
built.setEnabled(false);
built.setValue(value);
return built;
}
}
But as a result I've got a window which looks like in `dialog.PNG`.
No matter what I do can't move table to left - it always overlaps with NPC form layout.
What's the problem?
Last updated on
You cannot reply to this thread.