If I create a settings pane and add new DefaultOption(...) to it with an icon and text then the controller on the right takes more space than it needs and trims the text in the middle.
Option<BooleanProperty> antiAliasingOption = new DefaultOption<>(MaterialDesignIcon.BLUR_OFF.graphic(),
"Anti-aliasing", "Toggle anti-Aliasing", null, new SimpleBooleanProperty(), true);
You can see that there's a lot of space (red line) for the toggle button which is not used and the text is cut off. I want the controls to be justified to the right like in a border pane where the center takes all unallocated space.
If you use Scenic View to inspect the Settings control, you will find that for every Option there is an HBox that contains a left HBox for the icon, a central VBox for the text and a right HBox for the editor.
All these containers have style classes, so an easy way to modify any of them on runtime is by using lookups.
As for the right HBox, you can look for the secondary-graphic and then set the preferred width:
public BasicView(String name) {
super(name);
Option<BooleanProperty> antiAliasingOption = new DefaultOption<>(MaterialDesignIcon.BLUR_OFF.graphic(),
"Anti-aliasing", "Toggle anti-Aliasing", null, new SimpleBooleanProperty(), true);
SettingsPane settings = new SettingsPane(FXCollections.<Option>observableArrayList(antiAliasingOption));
settings.setSearchBoxVisible(false);
setCenter(settings);
setOnShown(e -> {
HBox rightBox = (HBox) settings.lookup(".secondary-graphic");
rightBox.setPrefWidth(60);
});
}
Another option is to override the default styling within your css file:
.settings-pane .options-grid > .option-row > .secondary-graphic {
-fx-pref-width: 60;
}
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;
}
If I set the ExtendedDescription text for a DefaultOption clicking the option opens a view where the text is displayed in an HBox and is centered there. I would like to customize the HBox area where the text is: align the text not only to center, color the text or bold/italicise parts of it, add a small image maybe...
I didn't see any API to access anything relating to customization except for maybe OptionEditor but when I try to call editorFactoryProperty() the optional is always empty. Am I supposed to create one myself and set it? What is the process for that?
So far there is no API for the Extended View.
If you check it with ScenicView, you can see that the view nodes have custom style classes applied though, so you will be able to use lookups on runtime to get a hold of the BorderPane (id: extended-pane), the HBox at the top (id: extended-top), the one at the center (id: extended-center), and its Text child (styleClass: extended-text).
Something like this should work:
viewProperty().addListener((obs, ov, nv) -> {
if (nv != null && nv.getName().startsWith("Extended_View_Gender")) {
BorderPane pane = (BorderPane) nv.lookup(".extended-pane");
if (pane != null) {
Text text = (Text) pane.lookup(".extended-text");
text.setStyle("-fx-fill: red");
}
}
});
I have something similar to this code:
TextArea textArea = new TextArea();
textArea.setSizeFull();
Panel dataPanel = new Panel("Panel", textArea);
dataPanel.setSizeFull();
textArea.setValue(... some very long text...);
The problem is that this TextArea appears without vertical scrollbar (and mouse-wheel scrolling also doesn't work), although inner text is longer than TextArea height (I can navigate lower using cursor and keyboard down arrow).
How do I enable scrolling in this component?
A bit weird, but as per the documentation if you disable word-wrapping in a text-area, you'll get the vertical scroll-bar:
Word Wrap
The setWordwrap() sets whether long lines are wrapped ( true - default) when the line length reaches the width of the writing area. If the word wrap is disabled (false), a vertical scrollbar will appear instead. The word wrap is only a visual feature and wrapping a long line does not insert line break characters in the field value; shortening a wrapped line will undo the wrapping.
The following code sample illustrates this behaviour with Vaadin 8.0.6. Please note my class extends Panel to match your sample but at this point you can eliminate it:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setSizeFull();
setContent(textArea);
setSizeFull();
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
P.S. I know it's a bit weird to grasp, but panels are used to scroll surfaces that are larger then the panel size, so if we'd get it working, you'd be scrolling the text area itself, not its content. You can see below a sample to better understand what I mean:
public class PanelWithScrollableTextField extends Panel {
public PanelWithScrollableTextField() {
TextArea textArea = new TextArea();
textArea.setWordWrap(false);
textArea.setHeight("500px"); // fixed size with height larger than the panel
setContent(textArea);
setHeight("100px"); // fixed height smaller than the content so we get a scroll bar
StringBuffer buffer = new StringBuffer();
IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
textArea.setValue(buffer.toString());
}
}
Result:
You can change it CSS also like below .
.v-textarea { overflow-y: auto ! important;}
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;
}