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.
Related
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
I want to add scrollbar to my web app so I can see every components on my browser.
Red rectangle in picture below is Grid. Grid is placed inside class that extends VerticalLayout and implements View.
Green color shows my scrollbar which is added to HybridMenu instance.
HybridMenu root = HybridMenuBuilder.get()
.setContent(new VerticalLayout())
.setMenuComponent(EMenuComponents.LEFT_WITH_TOP)
.setConfig(menuConfig)
.build();
root.addStyleName("scrollpanel");
root.setSizeFull();
super.setContent(root); //class extends UI
scrollpanel definition in css:
.scrollpanel > div {
overflow: auto !important;
}
When I reduce height of browser window, menu bar is also being scrolled:
I tried to set scrollbar to VerticalLayout, but it seems like id didn't capture that grid was partly hidden. (I've setted everything in VerticalLayout to full size - How to add scrollbar to Vaadin layout)
//extends VerticalLayout implements View
private void init()
{
this.addStyleName("scrollpanel");
this.setSizeFull();
this.setMargin(false);
grid.setSizeFull();
this.addComponentsAndExpand(grid);
this.setExpandRatio(grid, 0.7f);
this.setComponentAlignment(grid, Alignment.TOP_LEFT);
}
Generally I found some not expected (at least for me) behaviour of components in VerticalLayout. They acts differently according to Layout root
(Example with VerticalLayout as root).
Questions:
How can I avoid hiding part of hybrid menu when scrolling?
Am I missing something about adding scroll panel to this VerticalLayout?
#Edit:
I found that this problem doesn't occurs if HybridMenu content is not fullSized or content is not set.
On the other hand scrollbars are not available without it.
So, creating HybridMenu the way that code below shows, solves problem with scrollpanels, but restores previous problem (layout type doesn't change anything).
AbsoluteLayout test = new AbsoluteLayout();
test.setSizeFull();
HybridMenu root = HybridMenuBuilder.get()
.setContent(test)
.setMenuComponent(EMenuComponents.LEFT_WITH_TOP)
.setConfig(menuConfig)
.build();
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.
I have a TabPane which contains two Tabs and is set up in FXML. On initialization I dynamically add an AnchorPane to one of the Tabs. I then set a ListView as a child of the AnchorPane:
AnchorPane questionPane = new AnchorPane();
questionPane.setId("questionPane");
ListView questionList = new ListView();
questionPane.getChildren().add(questionList);
This works perfectly fine. For debugging purposes I gave the AnchorPane an orange background (via CSS) and when I now resize the window, the AnchorPane get's resized as expected.
But as soon as I add the following line to the code, the AnchorPane can only grow and doesn't shrink anymore, resulting in outsizing my window:
questionList.prefWidthProperty().bind(questionPane.widthProperty());
Can anyone please explain, why this line breaks the resizing of the AnchorPane?
Most likely you didn't specify the anchoring of the ListView:
AnchorPane.setBottomAnchor(questionList , 8.0);
AnchorPane.setRightAnchor(questionList , 5.0);
AnchorPane.setTopAnchor(questionList , 8.0);
AnchorPane.setLeftAnchor(questionList , 5.0);
The binding is not needed anymore.
I am learning Java.I just created an application (liked desktop one in c#) by adding some labels,a text view and a button.
Its fun learning this new thing,but i soon encountered an issue ,when u tried to add vertical scrolling to the text view i added on the UI.
I also tried adding vertical scroll to the text area but still my text area is not displaying the scroll bar.
The part of the code created when i added the controls from the panel to the UI is as below:
thisLayout.setVerticalGroup(thisLayout.createSequentialGroup()
.addContainerGap(17, 17)
.addComponent(getJtxtArea(), GroupLayout.PREFERRED_SIZE, 158, GroupLayout.PREFERRED_SIZE)
The code for the function getJtxtArea() is as below:
private JTextArea getJtxtArea() {
if(jtxtArea == null) {
jtxtArea = new JTextArea();
jtxtArea.setBackground(new java.awt.Color(255,255,255));
jtxtArea.setFont(new java.awt.Font("Segoe UI",3,14));
jtxtArea.setWrapStyleWord(true);
jtxtArea.setLineWrap(true);
JScrollPane scroll = new JScrollPane(jtxtArea);
scroll.setVerticalScrollBarPolicy(ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS);
}
return jtxtArea;
}
Can anyone tell me why i am not getting the scroll bar on the text view.Thanks in advance.
Note:I am using Eclipse Helios as the IDE and using Jigloo plugin in eclipse for the GUI.
Add the component scroll instead of the jtxtArea. In addition to that, you might also want to resize your JScrollPane.