I wanted to use a image as a button. I got it working, but it is not very well made, please take a look at the screenshot. As you can see the Button itself is a lot bigger than the image, but I wanted it to be as big as the image:
The actual Button is bigger than the Image. The goal here is that there is nothing but the image to click. How can I achieve this? Here is the code ofthe button on the screenshot:
Button testButton = new Button();
String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
testButton.setIcon(new FileResource(new File(basepath + "/VAADIN/themes/mytheme/img/Button.png")));
loginForm.addComponent(testButton);
I know that
testButton.setStyleName(BaseTheme.BUTTON_LINK)
makes the button invisible, but unfortunately that does not adjust the size of the button, just the visbility..
You can simply add a click listner to an image instead of using a button.
Image image = new Image(null, new ClassResource("/images/button-img.jpg");
image.addClickListener(e -> System.out.println("click"));
image.addStyleName("my-img-button");
And add this css, I use the #Stylesheet annotation to add in CSS.
.my-img-button {
cursor: pointer;
}
It works for me:
Button button = new Button();
button.setStyleName(ValoTheme.BUTTON_LINK);
button.setIcon(new ClassResource("/images/button-img.jpg"));
button.addClickListener(e -> System.out.println("click"));
Maybe you have additional css defined?
Maybe your button is contained in a layout with a fixed height?
Also make sure that your button has no width/height configured, so it can automatically adjust its size to that of the icon image.
The next problem you'll probably run into is the focus border:
Another approach would be to use a layout click listener, and add you own mouse-over/hover/focus styling via CSS.
VerticalLayout layout = new VerticalLayout(new Image(null, new ClassResource("/images/test.png")));
layout.addLayoutClickListener(e -> System.out.println("click"));
With Vaadin 14:
Image img = new Image("src");
Button testButton = new Button(img);
Quite straightforward.
Related
I was reading through the article here about JTaskPane.
I want to add an image icon close to the expanding/collapsing icon, instead of the default icon on the left of the title ('Product' as shown in the below image).
I found that I can remove the default icon by passing null to the setIcon method.
JTaskPaneGroup ProductMenu = new JTaskPaneGroup();
ProductMenu.setTitle("Product");
ProductMenu.setIcon(null);
Any idea how I could add a new icon close to the expanding/collapsing icon as follows?
I want to create a menu using TextButton. The menu should be accessible by mouse and keyboard. For the correct hovering behaviour, I set the style as usual:
TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();
textButtonStyle.up = skin.newDrawable("background", Color.GRAY);
textButtonStyle.down = skin.newDrawable("background", Color.DARK_GRAY);
textButtonStyle.checked = skin.newDrawable("background", Color.DARK_GRAY);
textButtonStyle.over = skin.newDrawable("background", Color.LIGHT_GRAY);
textButtonStyle.font = skin.getFont("default");
This works fine with mouse (the over style is toggled when the mouse is hovering). However, I want to be able to select a menu item by keyboard. The "currently selected" menu item should be selectable using the arrow keys and enter should confirm the item.
The keyboard interaction is not an issue here, but setting the "highlighted" mode on the button. I imagine selecting a button using the keyboard should behave the same as hovering over it with a mouse. But it looks like there is no way of "toggling" the state of the button using the API. There is an isOver() method, but no setOver() method.
Any ideas? Do I really have to create two styles and switch them out with setStyle()? I would consider that ugly..
Create a custom class for your actor and override your isOver method to return isFocused || super.isOver()
By the way, you might take a look at https://github.com/MrStahlfelge/gdx-controllerutils/wiki/Button-operable-Scene2d for not reinventing the wheel.
If you wish to programmatically make the button think that it has been hovered upon, send an InputEvent with type enter which signifies that the mouse has entered onto the button:
InputEvent event = new InputEvent();
event.setType(InputEvent.Type.enter);
event.setPointer(-1);
button.fire(event);
Use the exit InputEvent for defocusing it:
InputEvent event = new InputEvent();
event.setType(InputEvent.Type.exit);
event.setPointer(-1);
button.fire(event);
So basically, the easiest what you can do is just to retrieve the desired button style right from your skin and apply this to the button like this:
Skin skin = getYourSkin(); // or even button.getSkin() I believe should also work
button.setStyle(skin.get(styleName, ButtonStyle.class));
This way you don't need to create a style but you can just get it from your skin definition
In my JAVAFX application, i am having imageviews in a tilepane , i want to implement the multi select like functionality like in android for images . I tried adding border style to the imageView on click event but that didnt work. Is there any way to achieve this.
You can embed the Image in a JavaFX Button, and set the OnAction methods of the Button:
imageButton.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent e) {
System.out.println("Changing the color of the button's border :");
imageButton.setStyle("-fx-border-color:blue;");
System.out.println("For further reference, you can save the button or the image in a TreeSet:");
treeSet.add(imageButton);
}
});
If a simple click is enough to select the image, you can define the OnAction method of the Button like above. However if you need a long click (push and hold in Android style) to change the selection status of the image, you can find more information on 'push and hold' click here : how to achieve javafx mouse event "push and hold"? .
How do you change the button text of FileDialog (not JFileChooser)? The two modes specify the button text:
FileDialog.LOAD -> "Open"
FileDialog.SAVE -> "Save"
But I want the button to say something else. Is it possible to change this text?
You cant change button text only with FileDialog methods, the only text you can edit in it is window's title which opens when you press for example "Open".
FileDialog fd = new FileDialog(FdExample.this, "select File", FileDialog.LOAD);
fd.setTitle("any new title");
If you want custom text in button, you can use JButton and ActionListener to activate FileDialog.
Probably this will be the best way.
FileDialog dialog = new FileDialog(Display.getDefault().getActiveShell(),SWT.SAVE);
I've an E4 application which has a ToolControl, the class that handles the tool control creates a JavaFX button, for some reason the button adds ellipsis and I've no clue why.
Here is the link to the sample application
https://github.com/SDSethia/ColoredButton.git
JavaFX shortens the label automatically, when the size of the control (a button in your case) is too small for the text. This is independent of E4. So if you increase the size of the button, the complete text will show.
I looked at your project and I am wondering why you are using the SWT renderers, although you want to use JavaFX!
If you want to use E4 + JavaFX I recommend to use the e(fx)clipse renderers. This tutorial should get you started: https://wiki.eclipse.org/Efxclipse/Tutorials/Tutorial4
The button needs a layout (I wrapped mine in an HBox) for it to render correctly. Here is the modified code
final FXCanvas canvas = new FXCanvas(parent, SWT.NONE);
button = new Button();
button.setText("FxButton (1)");
button.setStyle("-fx-background-color: #186dee; -fx-text-fill: white;");
final HBox box = new HBox();
box.getChildren().add(button);
final Scene scene = new Scene(box);
canvas.setScene(scene);
This solved the issue.