Hi everyone I have this layout:
Here is the class MainLayout:
public class MainLayout extends VerticalLayout {
/**
*
*/
private static final long serialVersionUID = 1L;
private VerticalLayout upperSection = new VerticalLayout();
private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
private VerticalLayout menuLayout = new VerticalLayout();
private VerticalLayout contentLayout = new VerticalLayout();
public MainLayout() {
upperSection.addComponent(new Label("Header"));
menuLayout.addComponent(new Label("Menu"));
contentLayout.addComponent(new Label("Content"));
lowerSection.addComponent(menuLayout);
lowerSection.addComponent(contentLayout);
addComponent(upperSection);
addComponent(lowerSection);
showBorders();
setSizeFull();
lowerSection.setSizeFull();
// menuLayout.setSizeFull();
contentLayout.setSizeFull();
setExpandRatio(lowerSection, 1);
//lowerSection.setSplitPosition(30);
}
private void showBorders() {
String style = "v-ddwrapper-over";
setStyleName(style);
upperSection.setStyleName(style);
lowerSection.setStyleName(style);
menuLayout.setStyleName(style + "-menu");
contentLayout.setStyleName(style + "-content");
}
#SuppressWarnings("serial")
public void addMenuOption(String caption, final Component component) {
Button button = new Button(caption);
menuLayout.addComponent(button);
button.addClickListener(new ClickListener() {
#Override
public void buttonClick(ClickEvent event) {
contentLayout.removeAllComponents();
contentLayout.addComponent(component);
}
});
}
}
This layout class extends VerticalLayout and constructs the basic structure of the layout, the addMenuOption method adds a button to the left menu column and a click listener to it so that when the user clicks on the button the content layout on the right should switch its content from the current to the one bound with the button, now inside the init method of the UI:
protected void init(VaadinRequest request) {
MainLayout layout = new MainLayout();
layout.addMenuOption("Option 1", new Label("Component 1"));
layout.addMenuOption("Option 2", new Label("Component 2"));
setContent(layout);
}
Actually the result I obtain is this:
But my problem is that neither of the two buttons (Option 1, Option 2) are clickable.
Where is the problem?
Thanks for the attention!
You are right. Adding style "v-ddwrapper-over" to one of the components makes the buttons non-clickable. Lets take a look at definition of this style in style.css file.
.appName .v-ddwrapper-over:before, .so5 .v-ddwrapper-over:after {
content: "";
position: absolute;
z-index: 10;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 0 solid #197de1;
}
What's important is the fourth line with z-index. This brings a component (more specifficaly div in DOM) to the front covering all others components with less z-index value (usually they have 0).
If you really need this style to be applied to all your components (seems weird to me) consider adding additional style to the buttons with higher z-index value.
Learn more about z-index property here.
Related
I have a pretty simple class that basically is just an AppLayout with some Tab.
Now my issue. I am not able to find a smart way to display different contents for the Tabs-class. Is there any interface or something that can be called to differ the content for the Tab?
class MainAppView extends AppLayout {
public MainAppView()
{
createDrawerAndAddToAppView();
}
void createDrawerAndAddToAppView()
{
Tabs tabs = createTabsForDrawer();
tabs.setOrientation(Tabs.Orientation.VERTICAL);
addToDrawer(tabs);
H1 a = new H1("Test"); // Is displayed as content for every Tab
tabs.addSelectedChangeListener(selectedChangeEvent ->
/**
* How to get the specific content of a Tab here?
*/
//selectedChangeEvent.getSelectedTab(). //getContent() and put in super.setContent()?
super.setContent(a)); // Displays 'Test' as content for every Tab
// The Listener shall display the specific content of the getSelectedTab()
}
private Tabs createTabsForDrawer()
{
return new Tabs(
new Tab("Home"),
new Tab("Dummy"),
new Tab("Test"));
}
}
Here is one example, using a map to keep track of which content belongs to which tab. In reality your tab content would be more complicated, and maybe be created in it's own method.
#Route
public class TabTest extends VerticalLayout {
private Map<Tab, Component> tabComponentMap = new LinkedHashMap<>();
public TabTest() {
Tabs tabs = createTabs();
Div contentContainer = new Div();
add(tabs, contentContainer);
tabs.addSelectedChangeListener(e -> {
contentContainer.removeAll();
contentContainer.add(tabComponentMap.get(e.getSelectedTab()));
});
// Set initial content
contentContainer.add(tabComponentMap.get(tabs.getSelectedTab()));
}
private Tabs createTabs() {
tabComponentMap.put(new Tab("Show some text"), new H1("This is the text tab"));
tabComponentMap.put(new Tab("Show a Combo Box"), new ComboBox<String>());
tabComponentMap.put(new Tab("Show a button"), new Button("Click me and nothing happens"));
return new Tabs(tabComponentMap.keySet().toArray(new Tab[]{}));
}
}
You can do something similar with routes also, but then you would probably want your containing component to be a RouterLayout. Also this requires a bit more logic if you want to automatically select the correct tab after navigating from somewhere else.
#Route
public class TabTest extends VerticalLayout implements RouterLayout {
private Map<Tab, String> tabToUrlMap = new LinkedHashMap<>();
private Div contentContainer = new Div();
public TabTest() {
Tabs tabs = createTabs();
Div contentContainer = new Div();
contentContainer.setSizeFull();
add(tabs, contentContainer);
tabs.addSelectedChangeListener(e ->
UI.getCurrent().navigate(tabToUrlMap.get(e.getSelectedTab())));
}
private Tabs createTabs() {
RouteConfiguration routeConfiguration = RouteConfiguration.forApplicationScope();
tabToUrlMap.put(new Tab("View 1"), routeConfiguration.getUrl(TestView1.class));
tabToUrlMap.put(new Tab("View 2"), routeConfiguration.getUrl(TestView2.class));
tabToUrlMap.put(new Tab("View 3"), routeConfiguration.getUrl(TestView3.class));
return new Tabs(tabToUrlMap.keySet().toArray(new Tab[]{}));
}
#Override
public void showRouterLayoutContent(HasElement content) {
getElement().appendChild(content.getElement());
}
}
And an example view
#Route(layout = TabTest.class)
public class TestView3 extends VerticalLayout {
public TestView3() {
add("View 3");
}
}
In order for the end-user to constrain a search to some columns of the main TableView, I needed a treeview with checkboxes.
I decided to embed this TreeView in a popup, showing on click on a custom button.
I have created the following class, inspired from the question:
Java FX8 TreeView in a table cell
public class CustomTreeMenuButton extends MenuButton {
private PopupControl popup = new PopupControl();
private TreeView<? extends Object> tree;
private CustomTreeMenuButton me = this;
public void setTree(TreeView<? extends Object> tree) {
this.tree = tree;
}
public CustomTreeMenuButton() {
super();
this.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
if (!popup.isShowing()) {
Bounds b = me.localToScreen(me.getBoundsInLocal());
double x = b.getMinX();
double y = b.getMaxY();
popup.setAutoHide(true);
// popup.setAutoFix(true);
popup.setAnchorX(x);
popup.setAnchorY(y);
popup.setSkin(new Skin<Skinnable>() {
#Override
public void dispose() {
}
#Override
public Node getNode() {
return tree;
}
#Override
public Skinnable getSkinnable() {
return null;
}
});
popup.show(me.getScene().getWindow());
}
}
});
}
}
The tree I am working with contains CheckBoxTreeItem objects, and while the popup is working, there is some weird blur on all checkboxes, whenever the focus is not on a checkbox. (See GIF below)
First, I was thinking it was maybe an antialiasing problem, but popup.getScene().getAntiAliasing().toString() returns DISABLED
Then, I saw that non integer anchor points could cause problems. However popup.setAutoFix(true) did nothing, nor did the following:
popup.setAnchorX(new Double(x).intValue());
popup.setAnchorY(new Double(y).intValue());
It might be worth noting that I am working with FXML.
How can I get sharp checkboxes regardless of their focus ?
I would suggest a built-in control, CustomMenuItem, rather than reinventing the wheel:
A MenuItem that allows for arbitrary nodes to be embedded within it,
by assigning a Node to the content property.
An example
// Create the tree
CheckBoxTreeItem<String> rootItem = new CheckBoxTreeItem<String>("All stuff");
rootItem.setExpanded(true);
final TreeView<String> tree = new TreeView<String>(rootItem);
tree.setEditable(true);
tree.setCellFactory(CheckBoxTreeCell.<String>forTreeView());
for (int i = 0; i < 8; i++) {
final CheckBoxTreeItem<String> checkBoxTreeItem =
new CheckBoxTreeItem<String>("Stuff" + (i+1));
rootItem.getChildren().add(checkBoxTreeItem);
}
tree.setRoot(rootItem);
tree.setShowRoot(true);
// Create a custom menu item
CustomMenuItem customMenuItem = new CustomMenuItem(tree);
customMenuItem.setHideOnClick(false);
// Create the menu button
MenuButton mb = new MenuButton("Stuffs");
mb.getItems().add(customMenuItem);
And the output
Note: It is important to set the hideOnClickProperty to true, to avoid closing when the user clicks in the tree, which can be even done in the contructor, so you can shorten the initialization to:
CustomMenuItem customMenuItem = new CustomMenuItem(tree, false);
If you want to remove the hover glow, you can add the following CSS class:
.menu-item {
-fx-padding: 0;
}
I am new to Vaadin and trying to know if it can suit my needs for a webapp project migration.
Actually I'm already loosing my time on a simple goal: to have a layout with fixed headers and footers, and a scrollable content in the middle.
I made a very basic fiddle with what I want:
jsfiddle
Here is the main Vaadin class I came up with:
public class MyVaadinUI extends UI {
// attributes
#WebServlet(value = "/*", asyncSupported = true)
#VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "testvaadin.aep.com.AppWidgetSet")
public static class Servlet extends VaadinServlet {
}
#Override
protected void init(VaadinRequest request) {
buildMainLayout();
}
private void buildMainLayout() {
final VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setSizeFull();
//HEADER
final VerticalLayout headerLayout = new VerticalLayout();
final Resource res = new ThemeResource("img/logo.png");
final Image image = new Image(null, res);
headerLayout.addComponent(image);
//CONTENT
final VerticalLayout contentLayout = new VerticalLayout();
for(int i=0; i<80; i++){
contentLayout.addComponent(new Button("TEST " + i));
}
//FOOTER
final VerticalLayout footerLayout = new VerticalLayout();
footerLayout.addComponent(new Label("--------------------------- footer --------------------------"));
mainLayout.addComponent(headerLayout);
mainLayout.addComponent(contentLayout);
mainLayout.addComponent(footerLayout);
mainLayout.setExpandRatio(contentLayout, 1);
setContent(mainLayout);
}
}
The displayed page is OK on startup, but when I scroll down, the footer also scrolls (it is not fixed).
On startup:
When scrolled:
I browsed a lot of pages on this topic, but I did never see any correct answer. This seems to be rather complicated in Vaadin, although it is very simple in HTML; Vaadin may not suit my needs.
Anyway, do you know how can I achieve this behaviour?
Thanks!
You can use a Panel to create a scrollable center content area. See the example below.
For the panel to work, everything in the component hierarchy must be setSizeFull (or equivalent) and the content of the panel must not (in the example mainLayout and contentPanel are 100%, but contentLayout is not (implicit))
#Grapes([
#Grab('org.vaadin.spring:spring-boot-vaadin:0.0.3'),
#Grab('com.vaadin:vaadin-client-compiled:7.4.0.beta1'),
#Grab('com.vaadin:vaadin-themes:7.4.0.beta1'),
])
import com.vaadin.ui.*
#org.vaadin.spring.VaadinUI
class MyUI extends UI {
protected void init(com.vaadin.server.VaadinRequest request) {
final headerLayout = new VerticalLayout(new Label('HEADER'))
final footerLayout = new VerticalLayout(new Label('FOOTER'))
final contentLayout = new VerticalLayout()
80.times{ contentLayout.addComponent(new Button("TEST $it")) }
// XXX: place the center layout into a panel, which allows scrollbars
final contentPanel = new Panel(contentLayout)
contentPanel.setSizeFull()
// XXX: add the panel instead of the layout
final mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout)
mainLayout.setSizeFull()
mainLayout.setExpandRatio(contentPanel, 1)
setContent(mainLayout)
}
}
(runs standalone with spring run vaadin.groovy)
I'm creating a custom header for my TableColumns that is the label of the column plus a TextField that will allow users to perform searches. I'm setting the column headers like so:
getColumns().addListener(new ListChangeListener<TableColumn<S, ?>>() {
#Override
public void onChanged(final ListChangeListener.Change<? extends TableColumn<S, ?>> change) {
while (change.next()) {
Label label;
TextField search;
VBox graphic;
for (TableColumn<S, ?> column : change.getAddedSubList()) {
label = new Label(column.getText());
search = new TextField();
graphic = new VBox();
graphic.getStyleClass().add("k-column-graphic");
graphic.getChildren().addAll(label, search);
column.setGraphic(graphic);
}
}
}
});
So the column's graphic is what is displayed. I'm using the following CSS (the graphic itself has a "k-column-graphic" CSS class, while the TableView has a "k-table-view" CSS class)
/** Hide default text label in KTableView */
.k-table-view .column-header > .label {
-fx-content-display: graphic-only;
}
.k-column-graphic {
-fx-alignment: center-left;
-fx-spacing: 5;
-fx-padding: 2;
}
This works great, but I'm also allowing the columns to be hidden by enabling the TableView.setTableMenuButtonVisible(true); property, which adds a button to easily hide columns.
Whenever I try to hide a column, it hides successfully, but the graphic (the Label/TextField) remain. Both seem to have a width of 0 or 1, and are very small, but you can still see them.
How, either through CSS or somewhere in my code, do I make it to where the graphic Node for the TableColumn will hide as well?
When you toggle the CheckMenuItem to show/hide the column, your customized controls won't automatically change their values of VisibleProperty. So what you need to do is simply bind the VisibleProperty of your own controls to the TableColumn's VisibleProperty.
Following sample is based on your code. Hoping it can help.
getColumns().addListener(new ListChangeListener<TableColumn<S, ?>>() {
#Override
public void onChanged(final ListChangeListener.Change<? extends TableColumn<S, ?>> change) {
while (change.next()) {
Label label;
TextField search;
VBox graphic;
for (TableColumn<S, ?> column : change.getAddedSubList()) {
label = new Label(column.getText());
search = new TextField();
graphic = new VBox();
graphic.getStyleClass().add("k-column-graphic");
graphic.getChildren().addAll(label, search);
column.setGraphic(graphic);
/* ======= add the following two lines ============== */
label.visibleProperty().bind(column.visibleProperty());
search.visibleProperty().bind(column.visibleProperty());
}
}
}
});
I have a class that extends the smartgwt ImgButton. When the Button is pressed a popup should be shown that contains further buttons. The buttons in this popup should not be rendered like common buttons, but rather like text links - so I applied a custom CSS class. Everything works fine so far. But when I press any of the buttons in the popup, the background of the button gets transparent and the text behind the popup shines through. This is ugly, but I can't find a way to solve this.
Does anyone have an idea how to keep the background color when the button is pressed?
Here is the code:
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
public class MultiButton extends ImgButton {
private PopupPanel popup;
private VerticalPanel content;
public MultiButton() {
super();
popup = new PopupPanel();
popup.setAnimationEnabled(true);
popup.setAutoHideEnabled(true);
content = new VerticalPanel();
popup.add(content);
this.setWidth(18);
this.setHeight(18);
this.setShowRollOver(false);
this.setShowDown(false);
this.setSrc("person.png");
this.addClickHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent event) {
popup.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
#Override
public void setPosition(int offsetWidth, int offsetHeight) {
int left = event.getX() + 7;
int top = event.getY() + 7;
popup.setPopupPosition(left, top);
}
});
}
});
}
public void addMultiButtonEntry(String name, ClickHandler handler) {
Button b = new Button(popup.getStyleName());
b.addClickHandler(handler);
b.setShowHover(false);
b.setShowRollOver(false);
b.setBaseStyle("nt-multibutton-button");
b.setAlign(Alignment.LEFT);
content.add(b);
}
}
and this is the CSS definition:
.nt-multibutton-button {
border: 0px !important;
color: #657380;
font-size: 11px;
font-weight: bold;
text-align: left;
padding-left: 5px;
width:90%;
background-color: white;
}
Thank you for every hint!
PS: I know it isn't good style to mix SmartGWT and GWT components, but I didn't find a PopUp in SmartGWT and I don't want to code my own.
I just found out how to do it.
I added a style primary name and the style name to the buttons and now it works :)
So the buttons for the popup are now created as follows:
Button b = new Button(name);
b.addClickHandler(handler);
b.setShowHover(false);
b.setShowRollOver(false);
String css = "nt-multibutton-button";
b.setStylePrimaryName(css);
b.setBaseStyle(css);
b.setStyleName(css);
b.setAlign(Alignment.LEFT);
content.add(b);