Christian192
(Christian Schlagkamp)
October 16, 2013, 11:23am
1
I want to create a Layout what looks like that. →
[url=http://www7.pic-upload.de/16.10.13/jmfxdrq9j9m4.png ]
This is a whole component loaded into a HTML Layout. The Problem is, that when I try to realize this with a verticalLayout it is splited evenly, and when I am trying to solve it with Expand Ratio = 1.0 for the tabSheet it is not filling the whole space available. How is it possible to generate such an layout?
[/url]
Thomas
(Thomas Mattsson)
October 16, 2013, 11:41am
2
Yes, expandratio for the tabsheet is what you need to do. So, something like:
mainLayout.setSizeFull();
mainLayout.addComponent(button);
mainLayout.addComponent(tabsheet);
mainLayout.setExpandRatio(tabsheet, 1);
tabsheet.setSizeFull();
Try that, and report back.
Christian192
(Christian Schlagkamp)
October 16, 2013, 12:39pm
3
Problem stil exists.
I’ve got a “mainLayout” which is a verticalLayout with setSizeFull. In this Layout I’ve got two other Layouts. One is containing the button with auto/auto. And the other is containing the tabsheet.
Only the Tabnavigation is visible now. Not the content.
I want to have a design which is variable and not set to a specific size.
Thomas
(Thomas Mattsson)
October 16, 2013, 12:55pm
4
what’s the size of the content? Can you post sample code?
Charles
(Charles Anthony)
October 16, 2013, 1:01pm
5
Please post the code.
I suspect the problem lighs with the second layout containing the tabsheet. Do you really need it - can’t you just add it to the mainLayout, as Thomas suggests in his example?
Christian192
(Christian Schlagkamp)
October 16, 2013, 1:01pm
6
I started using designer… “Shame on me :D”
package com.example.callcenterdialog;
import com.vaadin.annotations.AutoGenerated;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomComponent;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.VerticalLayout;
public class ui_calls extends CustomComponent {
/*- VaadinEditorProperties={"grid":"RegularGrid,20","showGrid":true,"snapToGrid":true,"snapToObject":true,"movingGuides":false,"snappingDistance":10} */
@AutoGenerated
private VerticalLayout mainLayout;
@AutoGenerated
private VerticalLayout verticalLayout_2;
@AutoGenerated
private TabSheet tabSheet_1;
@AutoGenerated
private VerticalLayout verticalLayout_3;
@AutoGenerated
private Button button_5;
@AutoGenerated
private Button button_4;
@AutoGenerated
private HorizontalLayout horizontalLayout_1;
@AutoGenerated
private Button button_1;
/**
* The constructor should first build the main layout, set the
* composition root and then do any custom initialization.
*
* The constructor will not be automatically regenerated by the
* visual editor.
*/
public ui_calls() {
buildMainLayout();
setCompositionRoot(mainLayout);
mainLayout.setSizeFull();
// TODO add user code here
mainLayout.setSizeFull();
verticalLayout_2.setSizeFull();
verticalLayout_2.setExpandRatio(tabSheet_1, 1);
tabSheet_1.setSizeFull();
}
@AutoGenerated
private VerticalLayout buildMainLayout() {
// common part: create layout
mainLayout = new VerticalLayout();
mainLayout.setImmediate(false);
mainLayout.setWidth("100%");
mainLayout.setHeight("100%");
mainLayout.setMargin(false);
// top-level component properties
setWidth("100.0%");
setHeight("100.0%");
// horizontalLayout_1
horizontalLayout_1 = buildHorizontalLayout_1();
mainLayout.addComponent(horizontalLayout_1);
// verticalLayout_2
verticalLayout_2 = buildVerticalLayout_2();
mainLayout.addComponent(verticalLayout_2);
return mainLayout;
}
@AutoGenerated
private HorizontalLayout buildHorizontalLayout_1() {
// common part: create layout
horizontalLayout_1 = new HorizontalLayout();
horizontalLayout_1.setImmediate(false);
horizontalLayout_1.setWidth("-1px");
horizontalLayout_1.setHeight("-1px");
horizontalLayout_1.setMargin(true);
horizontalLayout_1.setSpacing(true);
// button_1
button_1 = new Button();
button_1.setCaption("Button");
button_1.setImmediate(true);
button_1.setWidth("-1px");
button_1.setHeight("-1px");
horizontalLayout_1.addComponent(button_1);
return horizontalLayout_1;
}
@AutoGenerated
private VerticalLayout buildVerticalLayout_2() {
// common part: create layout
verticalLayout_2 = new VerticalLayout();
verticalLayout_2.setImmediate(false);
verticalLayout_2.setWidth("-1px");
verticalLayout_2.setHeight("-1px");
verticalLayout_2.setMargin(false);
// tabSheet_1
tabSheet_1 = buildTabSheet_1();
verticalLayout_2.addComponent(tabSheet_1);
return verticalLayout_2;
}
@AutoGenerated
private TabSheet buildTabSheet_1() {
// common part: create layout
tabSheet_1 = new TabSheet();
tabSheet_1.setImmediate(true);
tabSheet_1.setWidth("100.0%");
tabSheet_1.setHeight("-1px");
// verticalLayout_3
verticalLayout_3 = buildVerticalLayout_3();
tabSheet_1.addTab(verticalLayout_3, "Tab", null);
return tabSheet_1;
}
@AutoGenerated
private VerticalLayout buildVerticalLayout_3() {
// common part: create layout
verticalLayout_3 = new VerticalLayout();
verticalLayout_3.setImmediate(false);
verticalLayout_3.setWidth("-1px");
verticalLayout_3.setHeight("-1px");
verticalLayout_3.setMargin(false);
// button_4
button_4 = new Button();
button_4.setCaption("Button");
button_4.setImmediate(true);
button_4.setWidth("-1px");
button_4.setHeight("-1px");
verticalLayout_3.addComponent(button_4);
// button_5
button_5 = new Button();
button_5.setCaption("Button");
button_5.setImmediate(true);
button_5.setWidth("-1px");
button_5.setHeight("-1px");
verticalLayout_3.addComponent(button_5);
return verticalLayout_3;
}
}
Christian192
(Christian Schlagkamp)
October 16, 2013, 1:07pm
7
I played around with the addressbook tutorial of vaadin and tried to style it as I want…
The problem exists if I change
HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();
to
VerticalLayout splitPanel = new VerticalLayout()
And the problem exists also when changing HorizontalSplitPanel to normal Panel…
Christian192
(Christian Schlagkamp)
October 16, 2013, 1:13pm
8
Full Space is used with:
private void initLayout() {
Panel splitPanel = new Panel("");
splitPanel.setSizeFull();
setCompositionRoot(splitPanel);
VerticalLayout leftLayout = new VerticalLayout();
splitPanel.setContent(leftLayout);
leftLayout.addComponent(table_calls);
HorizontalLayout bottomLeftLayout = new HorizontalLayout();
leftLayout.addComponent(bottomLeftLayout);
bottomLeftLayout.addComponent(searchField);
bottomLeftLayout.addComponent(addNewContactButton);
leftLayout.setSizeFull();
leftLayout.setExpandRatio(table_calls, 1);
table_calls.setSizeFull();
bottomLeftLayout.setWidth("100%");
searchField.setWidth("100%");
bottomLeftLayout.setExpandRatio(searchField, 1);
}
Christian192
(Christian Schlagkamp)
October 16, 2013, 1:15pm
9
But there is no table shown…
also I wrote
leftLayout.addComponent(table_calls);
...
leftLayout.setExpandRatio(table_calls, 1);
table_calls.setSizeFull();
I want to show a table even if it is empty.
Thomas
(Thomas Mattsson)
October 16, 2013, 1:43pm
10
I don’t have time to look at the code today, sorry… In the meanwhile, use something like FireBug to check which Layout is too small and work from there. You can also use the Vaadin Debug window (add ?debug to the URL, and find the ‘analyze layouts’ button to get a report of possible sizing conflicts).
Christian192
(Christian Schlagkamp)
October 16, 2013, 2:19pm
11
Okay Thanks.
I got it now looking like this.
But as you can see there is a lot of space between the tabsheet and the footer. The Vertical Layout is as long, but the tabsheet only is about 408 px heigh. How can I solve this? And where does this height come from?
private void initLayout()
{
Panel pl_group = new Panel("");
pl_group.setSizeFull();
setCompositionRoot(pl_group);
VerticalLayout vl_content = new VerticalLayout();
VerticalLayout vl_tabsheet_content = new VerticalLayout();
VerticalLayout vl_tab1_content = new VerticalLayout();
HorizontalLayout hl_menubar = new HorizontalLayout();
TabSheet ts_tabs = new TabSheet();
pl_group.addStyleName("backgroundcolor_dark2");
vl_content.addStyleName("backgroundcolor_dark2");
hl_menubar.addStyleName("backgroundcolor_dark3");
hl_menubar.addStyleName("box_shadow_grey");
hl_menubar.addStyleName("round_border_10");
pl_group.setContent(vl_content);
vl_content.addComponent(hl_menubar);
vl_content.addComponent(vl_tabsheet_content);
vl_tabsheet_content.addComponent(ts_tabs);
ts_tabs.addComponent(vl_tab1_content);
vl_tab1_content.addComponent(table_calls);
vl_content.setExpandRatio(vl_tabsheet_content, 1);
vl_tabsheet_content.setExpandRatio(ts_tabs, 1);
vl_tab1_content.setExpandRatio(table_calls, 1);
hl_menubar.addComponent(bt_menu);
ts_tabs.setSizeFull();
vl_content.setMargin(true);
vl_content.setSpacing(true);
vl_content.setSizeFull();
vl_tab1_content.setMargin(true);
table_calls.setSizeFull();
table_calls.setSortEnabled(false);
Charles
(Charles Anthony)
October 16, 2013, 3:26pm
12
I think it’s coming from the vl_tab1_content; eliminate by doing v1_tab1_content.setSizeFull();
Mind you - you don’t really need the vl_tab1_content at all, here : you should be able to do
ts_tabs.addComponent(table_calls)
Christian192
(Christian Schlagkamp)
October 18, 2013, 6:10am
13
Sorry Charles,
but adding v1_tab1_content.setSizeFull(); doesnt’ help…
Thomas
(Thomas Mattsson)
October 18, 2013, 6:33am
14
vl_tabsheet_content is default sized as well, when it should be full size. In fact, that layout isn’t even needed, just add the tabsheet directly to vl_content.
Christian192
(Christian Schlagkamp)
October 18, 2013, 7:05am
15
Hay Thomas,
thanks so much. It WORKS like a charm.
I’ve got the same problems on another UI and now I was looking for any rules when to set SizeFull and when to set expand ratio.
Are there any rules?
best regards
Christian
Thomas
(Thomas Mattsson)
October 18, 2013, 7:48am
16
The rules depend entirely on what you want to achieve. You need to learn how Vaadin layouting works first; then you know what you need to do in order to achieve a layout you want. When you’ve understood how vaadin calculates sizes, the rest is easy
The Book of Vaadin has some chapters on layouting, and it is also covered in the Vaadin Fundamentals course.
Christian192
(Christian Schlagkamp)
October 28, 2013, 11:10am
17
Same Problem as ever,…
I need a vertical Layout in the tabsheet to add a table and later maybe some other components.
Why is it only a standard height?
I haven’t understood when size is autoset and when it is not.
Can someone of you take a look over my sourcecode?
Thanks in advance
private void initLayout()
{
Panel pl_group = new Panel("");
pl_group.setSizeFull();
setCompositionRoot(pl_group);
VerticalLayout vl_content = new VerticalLayout();
VerticalLayout vl_tabsheet_content = new VerticalLayout();
VerticalLayout vl_tab1_content = new VerticalLayout();
HorizontalLayout hl_menubar = new HorizontalLayout();
TabSheet ts_tabs = new TabSheet();
pl_group.setContent(vl_content);
vl_content.addComponent(hl_menubar);
vl_content.addComponent(ts_tabs);
ts_tabs.addComponent(vl_tab1_content);
vl_tab1_content.addComponent(table_calls);
vl_content.setExpandRatio(ts_tabs, 1);
hl_menubar.addComponent(bt_menu);
hl_menubar.addComponent(bt_make_call);
hl_menubar.setSpacing(true);
vl_content.setMargin(true);
vl_content.setSpacing(true);
vl_content.setSizeFull();
vl_tab1_content.setMargin(true);
table_calls.setSizeFull();
table_calls.setSortEnabled(false);
table_calls.setSelectable(true);
}
Thomas
(Thomas Mattsson)
November 1, 2013, 7:39am
18
You are missing a setSizeFull() for ts_tabs and vl_tab1_content.