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.
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);
Using Vaadin 8 to develop simple application with horizontal menubar on top and grid in the center. I am finding it hard to get a simple Horizontal Menu bar with icon. I am using the default CRUD View example with some modification and here is the snippet below :
public MainScreen(MyUI ui) {
setSpacing(false);
setStyleName("main-screen");
setMargin(false);
setSizeFull();
addComponent(getMenu());
HorizontalLayout menuLayout = new HorizontalLayout();
menuLayout.addStyleName("valo-content");
menuLayout.setWidth("100%");
menuLayout.setSpacing(false);
HorizontalLayout viewContainer = new HorizontalLayout();
viewContainer.addStyleName("valo-content");
viewContainer.setWidth("100%");
final Navigator navigator = new Navigator(ui, viewContainer);
navigator.setErrorView(ErrorView.class);
menu = new Menu(navigator);
menu.addView(new SampleCrudView(), SampleCrudView.VIEW_NAME, SampleCrudView.VIEW_NAME, VaadinIcons.EDIT);
menu.addView(new AboutView(), AboutView.VIEW_NAME, AboutView.VIEW_NAME, VaadinIcons.INFO_CIRCLE);
navigator.addViewChangeListener(viewChangeListener);
Image image = new Image(null, new ThemeResource("img/example.jpg"));
menuLayout.addComponent(image);
menuLayout.addComponent(menu);
menuLayout.setSizeFull();
addComponent(menuLayout);
addComponent(viewContainer);
setExpandRatio(menuLayout, 1);
setSizeFull();
}
Appreciate if any one could help me understand layouts and how to fix this issue.
Here is the snapshot the below with weird spacing and layout
I want to create a popup screen in BlackBerry like the screen appear on long click (see the picture)
My screen contain 3 items
image description
image description
image description
Can any one help me by an example or link to do this popup?
Use the below code and call the GetPopup wherever you want to show the pop up screen
final class Getpopup extends PopupScreen
{
EditField edf;
AutoTextEditField edf1;
HorizontalFieldManager hfm;
public Getpopup()
{
super( new VerticalFieldManager());
LabelField lf = new LabelField("Contact Info", LabelField.FIELD_HCENTER);
SeparatorField sf = new SeparatorField();
edf1= new AutoTextEditField("Name:","" ,20,EditField.NO_NEWLINE);
edf = new EditField("Number:",ThirdScreen.get3);
edf.setEditable(false);
VerticalFieldManager vfm =new VerticalFieldManager(VerticalFieldManager.FIELD_HCENTER);
hfm=new HorizontalFieldManager(HorizontalFieldManager.FIELD_HCENTER);
ButtonField bf1 = new ButtonField("Save", ButtonField.FIELD_HCENTER);
ButtonField bf2 = new ButtonField("Cancel", ButtonField.FIELD_HCENTER);
hfm.add(bf1);
hfm.add(bf2);
vfm.add(lf);
vfm.add(sf);
vfm.add(edf1);
vfm.add(edf);
vfm.add(hfm);
add(vfm);
}
}
Find the code here to create creating-borderless-transparent-popup screen in blackberry
If your looking for custmizing the Buttons as appeared in image then visit custom-image-buttonfield-in-blackberry
You have to make use of GridFieldManager.java for the layout you have used, Also you can customize your own layout.
Create a PopupDialog class which extends Dialog and then in the constructor, add the Buttons. If you would like your buttons to look like the above image, extend a field or button field and in paint method, draw the button and then the button text below the button. Add this custom button control in the PopupDialog.
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);
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;
}