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;
}
Related
I created a custom dialog with my own panes and controls in it. But the dialog has a white border default which I want to remove. Here is an example with a single image:
I tried using ScenicView but couldn't find a way to catch the dialog layer and modify it:
public class MainView extends View {
Image img = new Image("https://i.stack.imgur.com/7bI1Y.jpg", 300, 500, true, true);
public MainView(String name) {
super(name);
Button b = new Button("Pop");
b.setOnAction(e -> {
Dialog<Void> dialog = new Dialog<>();
dialog.setOnShown(e2 -> {
Parent parent = getParent();
Pane p = (Pane) parent.lookup(".dialog");
p.setPadding(new Insets(0));
});
dialog.setGraphic(new ImageView(img));
dialog.showAndWait();
});
setCenter(b);
}
}
Best i got was removing the flowpane child to remove some of the lower part
dialog.setOnShown(e2 -> {
Parent parent = getParent();
Pane p = (Pane) parent.lookup(".dialog");
p.getChildren().removeIf(c -> (c instanceof FlowPane));
System.out.println(p.getChildren());
});
Removing the VBox moves the dialog which i don't want to do and changing its padding also dose nothing.
As you can see with ScenicView, the Dialog has the dialog style class.
One easy way to modify the dialog style is via css. Just add a css file to your view, and set:
.dialog {
-fx-background-color: transparent;
}
That will set the background transparent, instead of the default white color.
If you want to remove the borders instead, then you can play with padding. As you can also see with ScenicView, the dialog has a VBox with style class container for the content in the center, and the flow pane for the buttons at the bottom, with style class dialog-button-bar.
Before anything, just use the setContent method to add the image instead of the setGraphic one:
dialog.setContent(new ImageView(img));
And this will be required to remove all the borders, and let the image take the whole dialog:
.dialog,
.dialog > .container,
.dialog > .dialog-button-bar {
-fx-padding: 0;
}
I have added a popup window to my main UI as follows:
Window component = new Window();
UI.getCurrent().addWindow(component);
Now, I want my popup to be centered horizontally and e.g. 40 pixels from the top of the screen. As far as I can see Vaadin has 4 methods for positioning my window.
component.center()
component.setPosition(x, y)
component.setPositionX(x)
component.setPositionY(y)
None of these are really what I want. I was hoping at first that setPositionY might help me. This does allow me to get the right distance from the top, but the x-position is now set to 0, where I wanted it to be centered.
The setPosition might have helped if I was able to calculate what the x-position should be, but this would require me to know the width of the component in pixels, but component.getWidth just tells me 100%.
Next I tried to use CSS styling on the component, writing and explicit css rule and adding it to the component with addStyleName. It seems though that Vaadin overrides whatever I wrote in my css with its own defaults...
Any ideas how to get my Window component positioned correctly?
I used the methods getBrowserWindowWidth() and getBrowserWindowHeight() from the com.vaadin.server.Page class for this.
I centered my "log" window horizontally in the lower part of the browser window with
myWindow.setHeight("30%");
myWindow.setWidth("96%");
myWindow.setPosition(
(int) (Page.getCurrent().getBrowserWindowWidth() * 0.02),
(int) (Page.getCurrent().getBrowserWindowHeight() * 0.65)
);
Solution 1: Use SizeReporter
Indeed, setPositionY() will reset the window's centered property to false. As the width of your pop-up and that of your browser window are not know before they appear on the screen, the only way I know to get those values is to use the SizeReporter add-on. Its use is quite straightforward:
public class MyUI extends UI {
private Window popUp;
private SizeReporter popUpSizeReporter;
private SizeReporter windowSizeReporter;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
addWindow(popUp);
popUpSizeReporter = new SizeReporter(popUp);
popUpSizeReporter.addResizeListenerOnce(this::centerPopUp);
windowSizeReporter = new SizeReporter(this);
windowSizeReporter.addResizeListenerOnce(this::centerPopUp);
}
private void centerPopUp(ComponentResizeEvent event) {
int popUpWidth = popUpSizeReporter.getWidth();
int windowWidth = windowSizeReporter.getWidth();
if (popUpWidth == -1 || windowWidth == -1) {
return;
}
popUp.setPositionX((windowWidth - popUpWidth) / 2);
}
}
This piece of code will be okay as long as you don't resize the pop-up. If you do, it will not be automatically recentered. If you replace addResizeListenerOnce() by addResizeListener() then it will automatically recenter the pop-up but you'll get some "UI glitches" as the add-on sends resize events almost continually while you're resizing your pop-up...
You could try to do it using CSS, but I personally avoid CSS as much as I can with Vaadin :).
You'll need to recompile the widgetset after you've added the add-on as a dependency.
Solution 2: Use com.vaadin.ui.JavaScript
I won't vouch for the portability of this solution but I guess it will work on most modern browsers.
public class MyUI extends UI {
private Window popUp;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
popUp.addStyleName("window-center");
addWindow(popUp);
// Add a JS function that can be called from the client.
JavaScript.getCurrent().addFunction("centerWindow", args -> {
popUp.setPositionX((int) ((args.getNumber(1) - args.getNumber(0)) / 2));
});
// Execute the function now. In real code you might want to execute the function just after the window is displayed, probably in your enter() method.
JavaScript.getCurrent().execute("centerWindow(document.getElementsByClassName('window-center')[0].offsetWidth, window.innerWidth)");
}
}
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.
Hi a have two buttons at the bottom of the screen and each time I open this screen, view is scrolled to the bottom to show those focused buttons, is there any method to disable this behaviour and firstly display top of the screen?
You have to add a focusable field to the top of your screen. Its up to you how you want to achieve this, but generally you can put a NullField as the first view of your screen.
The NullField should receive the initial focus for you, but note a user can still scroll back to it as with any other view. So it might look like your focus is "lost" depending on how your design looks.
public class MyScreen extends MainScreen
{
public MyScreen()
{
super(VERTICAL_SCROLL | NO_HORIZONTAL_SCROLL);
add(new NullField()); // Nullfield to be initially focused
// Screen content with focusable button at the bottom
add(new LabelField("Label"));
ButtonField button = new ButtonField("Button");
button.setMargin(1000, 0, 0, 0);
add(button);
}
}
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);