I have a question. How can I make a circle checkbox in JavaFX? "-fx-background-radius" doesn`t work for me, also I want to when mouse is over checkbox to display a short describe for what this checkbox is create. How can I solved this? Thanks for helps.
For a CheckBox with rounded corners you would use CSS. It is helpful to look at the JavaFX CSS Reference Guide when you need to know what you can style from CSS. For instance, the section for CheckBox tells us there is a substructure; this includes a StackPane with the styleclass of box. It is this StackPane that is the "physical box" in the UI and what you want to round the corners of. In you're CSS file you'd have something like:
.check-box .box {
-fx-background-radius: /* enter you're desired radius here */;
}
Then you'd add the CSS file to your Scene via getStylesheets().add(...).
You also want to know how to display some information about the CheckBox when the mouse hovers over it, correct? To do this you would use a Tooltip.
CheckBox box = new CheckBox("Choose me!");
box.setTooltip(new Tooltip("I do something!"));
Related
I may not have described the issue accurately with the title, but it's easier to explain here:
I have a button that has an icon image contained within it. I need to get rid of the grey box around that icon and keep the icon itself, along with the button functionality. I assigned the button a second class called "nogray", and in my styling sheet I set opacity to 0.
However, this got rid of the entire button, along with the little orange trash bin icon, which I need to be visible. Essentially, I need the button to function the same way, just with the orange icon and no grey box. In this screenie, you can see the buttons at the top of each bulletin note.
Here is the button code in the bulletin notes view:
<button class ="remove-card nogray" id="#item.BulletinId" type="button"><i
class="fa fa-trash"></i></button>
And here is the css for the button:
i.fa.fa-trash::before {
content: "\f1f8";
}
.remove-card.nogray {
opacity:0;
}
(i.fa.fa-trash::before targets the trash icon, and .remove-card.nogray targets the outer gray area. However, I suspect that the latter is targetting the entire button because setting the opacity to 0 affects both gray area and icon.
How would I tweak the button code so that the opacity is 0 only for the grey, and not the icon? I've tried changing the order of the code element by element, but a lot of it is guesswork because this is a team effort and I did not personally write the button code. I'd also like to apologize in advance if this is an impossible question to answer; if there's some detail you need to know, please tell me and I will edit this to include it.
Thank you very much for any suggestions!
I realized I was targeting the wrong lines of code in my css. There was an ActionLink that a teammate commented out, and I assigned the classes from that to my original button code and was able to target the button that way instead.
I've noticed that buttons in JavaFX have rounded corners, which means when you have a grid of them there are little white spaces visible between.
This illustrates the problem
I'd like to make my buttons appear as rectangles, with right angled corners, is this possible? I assume this might be possible with CSS, but I can't find this question being asked before.
Thanks.
You can do Via CSS :
"-fx-background-radius: 0"
You can add your CSS file in several ways by code , by Inline , External file
By Code :
Button rectangleButton = new Button();
roundButton.setStyle("-fx-background-radius: 0");
By FXML Inline :
By FXML External :
mystyle.css file
.button{
-fx-background-radius: 0;
}
then choose directory of file to apply the style to your container
So, I've been programming an analog clock in JavaFX and have gotten the base functionality down. Now, I'm trying to add a drop-down menu when I click a custom button (triangle made with a Polygon). So far it all works fine, except the fact that the background of my StackPane is white when I try to add a ContextMenu either before or after clicking the button. So far Transparency has been fine up until now. Here's some pictures of the issue.
This is what it should look like (you can see my wallpaper because of the transparent window, as it should be.)
enter image description here
After I press the button for the drop down menu, the background changes.
enter image description here
JavaFX controls are styled by CSS. The first time you create a control, the default user agent stylesheet (modena.css) is loaded and the styles defined in it are applied to the scene graph. Other JavaFX node classes, such as shapes, image views, and layout panes, do not enforce CSS loading (this is to enhance performance for graphically-intensive applications that do not need CSS).
So it sounds as though the context menu is the first control you create: when you create and display it, it will apply the default CSS to the scene. The default background color for the root pane is a non-transparent color, so while your Scene and Stage may be transparent, once the CSS is applied the scene's content is not.
The fix is to specify transparency for the root pane:
root.setStyle("-fx-background-color: transparent;");
or the equivalent in an external stylesheet.
To answer my own question in case anyone else wants to know, it seems that when the ContextMenu is added to the scene, the Stage's initStyle(StageStyle.TRANSPARENT) gets overridden and shows the Parent's colors. Since I didn't initialize any CSS styles for the root, it just showed white. The fix would be to:
//the Parent layout Pane
parent.setStyle("-fx-background-color: rgba(0, 0, 0, 0.0)");
Using JavaFX when I create a TextField and set
numberField.setFocusTraversable(false);
and then click on the field the blue box shows up around it. I guess that makes sense
but there is no
setFocus(bool)
command.
I want to get rid of the box. Any suggestions?
The setFocusTraversable(false) disables the focus traversing (by TAB and SHIFT+TAB) for that node. Thus it has nothing related with node's GUI style. To hide the focused blue color do:
Via code
numberField.setStyle("-fx-focus-color: transparent;");
or via css file
.text-field {
-fx-focus-color: transparent;
}
or pseudo class in css file
.text-field:focused{
-fx-focus-color: transparent;
}
-fx-focus-color is not a css property, it is a predefined color of caspian.css (JavaFX 2).
This answer is related to and referenced from: How do I remove the default border glow of a JavaFX button (when selected)?.
After trying to find a solution for Centering Text on a Button with Offset, I'm doing now a custom component.
The goal is to make a button-like component that has an icon on one side and a centered text filling the rest of the button.
The component contains either two Label/ Buttons to display the Icon and text. Both of them have a background Image, defined in css.
The css looks like this for Icon and the text with exchanged image as background for text
#button-icon-cancel{
-fx-font-family: "Arial";
-fx-padding: 0,0,0,0;
-fx-background-color: transparent;
-fx-font-size: 28px;
-fx-graphic: url('images/button/cancel.png');
}
#button-icon-cancel:pressed{
-fx-graphic: url('images/button/cancel-pressed.png');
}
The images are loaded by setId(). Currently both components are added to a Panel before passing to the stage. They contain an OnClickEvent for processing.
Now to the actual question
How can I achieve that if one Component is clicked, the other one is getting the :pressed from css as well?
Adding the ClickEvent to the Panel is doing nothing (regarding clicking on either Label/ Button)
Adding both of them to a HBox, adding the Event to the HBox work in that regard, that I can click either component and the Event gets fired, BUT the :pressed State is only applied to the component you clicked.
Is it possible to give all childs the notification, that they should behave like they got pressed? Since we have a lot of small Icon, but only one background for the text, placing a Label over the whole thing create a lot of unneeded wasted Image space. Also this would cause the problematic for changing font color if not all css are changed at once (the label-over-button-solution with .setMouseTransparent(true) wouldn't change the font color of the text label since the label doesn't notice button is pressed)
First of all, JFX-8 will support wider range of css improvements, which will allow you to solve the issue easier.
To solve your issue, i can suggest the following : each node have a pressed property. You can add a listener on this property, and when it changes to true, use setStyle(String) method on needed nodes, and use setStyle(null | "") on changing to false.