I have a TabSheet and a tab item.
There is a table inside the tab.
I have set all height to setFullSize but the height of the table does not occupy the whole tab.
Code is here:
public class GvApplication extends Application {
private static Logger log = Logger.getLogger(GvApplication.class.getName());
Window mainWindow;
TabSheet tabsheet;
#Override
public void init() {
setTheme("gv");
mainWindow = new Window("Test");
mainWindow.getContent().setHeight("100%");
tabsheet = new TabSheet();
tabsheet.setSizeFull();
mainWindow.addComponent(tabsheet);
initSMSTab();
setMainWindow(mainWindow);
}
private void initSMSTab() {
VerticalLayout tab = new VerticalLayout();
tab.setMargin(true);
Table table = new Table("Naam");
table.setWidth("100%");
table.setHeight("100%");
table.setSizeFull();
tab.addComponent(table);
tabsheet.addTab(tab);
Tab smsTab = tabsheet.getTab(tab);
smsTab.setCaption("SMS");
}
}
There is a lot of space left under the table. How can I make table use the whole content of the tab?
If a component should occupy all the available space in a layout, you have to invoke setExpandRatio on the layout in addition to invoking setSizeFull on the component. In your case:
tabsheet.setSizeFull();
VerticalLayout rootLayout = new VerticalLayout();
rootLayout.setSizeFull();
rootLayout.addComponent(tabsheet);
rootLayout.setExpandRatio(tabsheet, 1f);
mainWindow.setContent(rootLayout);
By default, when you create new table component, table "page length", it mean rows count, value is 15, this is a reason why table do not set full size of your tab. Only way to set full size is increase table "page length" by table.setPageLength(30).
PS. You can remove this lines, because you already use "table.setSizeFull();"
table.setWidth("100%");
table.setHeight("100%");
EDIT 1
Case with you show on your screens in comment will be only when you resize parent or table component. Try fist of all add ResizeListener to your window and inside listener write something like
// This will return current rendered rows count
int shownRowsCount = table.getVisibleItemIds().size();
table.setPageLength(shownRowsCount);
Related
Vaadin 11.0.1
Layout is one top grid and to bottom grid (one on left, one on right)
Here is how I create my page:
public class InformationMainView extends VerticalLayout {
private Grid<AdmisRejet> gridRejet = new Grid<>();
private Grid<Entry<String, String>> admisPropertiesGrid = new Grid<>();
private Grid<AdmisHistory> gridJobHistory= new Grid<>();
public InformationMainView() {
// history (top)
gridJobHistory.setItems(admisHistoryRepository.findAllByOrderByJobExecutionDateDesc());
gridJobHistory.addColumn(AdmisHistory::getJobExecutionDate).setHeader("Date Importation");
gridJobHistory.addColumn(AdmisHistory::getCreatedBy).setHeader("Par");
gridJobHistory.addColumn(AdmisHistory::getUai).setHeader("UAI");
gridJobHistory.addColumn(admisHistory -> admisRejetRepository.findAdmisRejetByAdmisHistory(admisHistory).size()).setHeader("Nb Rejets");
// reject (bottom left)
gridRejet.addColumn(AdmisRejet::getTypeRejet).setHeader("Type rejet");
gridRejet.addColumn(AdmisRejet::getInformation).setHeader("Valeur");
gridRejet.addColumn(getBlockingIconRenderer()).setHeader("Bloquant");
// details (bottom right)
admisPropertiesGrid.addColumn(Entry::getKey).setHeader("Clé");
admisPropertiesGrid.addColumn(Entry::getValue).setHeader("Valeur");
add(gridJobHistory, new HorizontalLayout(gridRejet, admisPropertiesGrid));
The bottom are not render (not even the headers). There is no data in them (normal, because data are populated when I click on the top grid).
But I expected to see at lest column headers...
Here is the render:
I made it work by forcing the width:
HorizontalLayout bot = new HorizontalLayout();
bot.setWidth("100%");
bot.add(gridRejet, admisPropertiesGrid);
add(gridJobHistory, bot);
I already create the tab sheet. The problem is I cannot scroll the page so I can see only half of my page. So I have decided to create Panel inside the tab sheet but every time I insert the Panel source code it always error.
public PersonRegistration()
{
VerticalLayout tab = new VerticalLayout();
tab.setSizeFull();
TabSheet tabsheet = new TabSheet();
tabsheet.addStyleName("center-aligned-tabs");
addComponent(tabsheet);
VerticalLayout tab1 = new VerticalLayout();
tab1.addComponent(new PICConfirm());
tabsheet.addTab(tab1, "IC Confirmation",null);
VerticalLayout tab2 = new VerticalLayout();
tab2.addComponent(new PDemography());
tabsheet.addTab(tab2, "Demography",null);
VerticalLayout tab3 = new VerticalLayout();
tab3.addComponent(new PContact());
tabsheet.addTab(tab3, "Contact",null);
Panel panel = new Panel();
panel.setSizeFull();
panel.getContent().setSizeUndefined();
tab.addComponent(panel);
tab.setExpandRatio(panel, 1);
}
Is it okay to put panel inside the tab sheet?
Try calling simply setSizeFull(); // if you are implementing View
in that method and see if it works.
I need to align a button to the right of my page in a vertical layout.
Please tell me method to do this.
private Button createBackButton() {
Button bButton = new Button("Back");
bButton.setIcon(FontAwesome.ARROW_LEFT);
bButton.addClickListener(new ClickListener() {
#Override
public void buttonClick(ClickEvent event) {
doSomething();
}
});
return bButton;
}
Null,
In order to align your button to the top-right of your VerticalLayout, use VerticalLayout's setComponentAlignment() method. Also note that the VerticalLayout itself needs to be big enough so that the button can even have some space to move around in there so it looks like it's being aligned to the top-right. By default the VerticalLayout will just get as big as the components inside it. You need to give it a bigger size using setWidth() and setHeight(), or make it take up the whole space as its parent component/layout using setSizeFull() (note that the parent layout, if any, also needs to be big enough so it has space inside it too).
So the code would look like:
VerticalLayout vl = new VerticalLayout();
vl.setSizeFull();
Button backButton = createBackButton();
vl.addComponent(backButton);
vl.setComponentAlignment(backButton,Alignment.TOP_RIGHT);
Hope that helps.
If I use following code to create a UI using Vaadin,
#Override
protected void init(VaadinRequest request) {
HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.addComponent(new Label("Why am I not shown?"));
Button button = new Button("expanding button");
horizontalLayout.addComponent(button);
horizontalLayout.setExpandRatio(button, 1);
horizontalLayout.setWidth(100, Unit.PERCENTAGE);
setContent(horizontalLayout);
}
The label I added to horizontalLayout is not shown in the created UI. Why is that? What I expect to happen in this case is the label to take its required width and the button to take the rest of the width. But the label is not shown at all.
Please don't ask me why I want to expand the button. This is just a MCVE and my real UI is somewhat more complex.
The Button has undefined size by default. So space will be shared by the 100% sized Label (by default) with expand ratio of 0 and the excess space of the Button cell with expand ratio 1. So all space is given to the excess space of the button.
Set the Label to have a undefined size with label.setSizeUndefined() and will work as you expect.
Note that relative sized components can lost all his space when using a expand ratio.
For example:
HorizontalLayout horizontalLayout = new HorizontalLayout();
Label l1 = new Label("one");
Label l2 = new Label("two");
Label l3 = new Label("three");
horizontalLayout.addComponent(l1);
horizontalLayout.addComponent(l2);
horizontalLayout.addComponent(l3);
horizontalLayout.setExpandRatio(l2, 1);
Will show only label "two".
Does any one know about how to create hide and collapse content using vaadin api.
All components inherit the setVisible() method which can trigger visibility on and off. This means all components and component containers at least. This happens without animations, though.
If you like some animations, you have to rely to add-ons, e.g. Henrik Paul's Drawer does some kind of hide and show animations.
Is this what you were thinking about?
I achieved it by using TabSheet functionality of vaadin.I created two tabs '+' and '-' whenever user clicks on '-' Tab It am setting the TabSheet height to 100% and whenever the user clicks on the '+' Tab I am setting the height of the TabSheet to 20% (visible height of the tabsheet) so whatever the content in the TabSheet will be hided in user perspective.
// Create an empty tab sheet.
TabSheet tabsheet = new TabSheet();
// Defining Vertical Layout for Tab 1 content
final VerticalLayout verLayout1 = new VerticalLayout();
// Tab 2 content
VerticalLayout verLayout2 = new VerticalLayout();
verLayout2.setSizeUndefined();
verLayout2.setMargin(true);
tabsheet.addTab(verLayout1, "+", null);
tabsheet.addTab(verLayout2, "-", null);
tabsheet.addListener(listenerForTab());
/**
* Method to handle tab sheet hide/show event
*
* #return TabSheet.SelectedTabChangeListener
*/
public TabSheet.SelectedTabChangeListener listenerForTab() {
_logger.info("Entering in to tabChangeListener of WizardUtil");
// Instance of TabSheet.SelectedTabChangeListener
TabSheet.SelectedTabChangeListener listener = new TabSheet.SelectedTabChangeListener() {
public void selectedTabChange(SelectedTabChangeEvent event) {
TabSheet tabsheet = event.getTabSheet();
Tab tab = tabsheet.getTab(tabsheet.getSelectedTab());
// Tab content displayed on setting height to the tab sheet
if(tab.getCaption().equals("+")) {
tabsheet.setHeight("100%");
} else {
tabsheet.setHeight("33px");
}
}
};
_logger.info("Exiting from tabChangeListener of WizardUtil");
return listener;
}