I've started to learn Javafx and I happened upon this "strange" feature. I've made a simple window with two buttons. When I press one of them a blue stroke appears and stays there until I press the other button. I can't find any logical use of this other than knowing which button was pressed last. Even from a UX perspective, it doesn't make sense. I've tried somehow to "deactivate" it throught CSS but no luck. Is there any solution for this?
It's hard to tell what you are searching for without the code.
But I think you are referring to the visual marker for the currently focused menu item. This function is used in situations where the user hit's the "Tab"-Key to navigate through your menu items.
You can disable this feature for items by unchecking the "Focus Traversable" option in the "Properties" Tab. This will also disable the tab navigation!
There is already a thread that has a solution for exactly this topic. See:Remove Focus Box Around TextField
It talks about disabling the focus color using css, while keeping the tab navigation feature by using this css styling rule:
-fx-focus-color: transparent;
(Source: Uluk Biy's answer in the linked topic)
The blue outline around controls in JavaFX is there to indicate which control has focus.
Focus indicators are a common idiom used across different UI frameworks, not specific to just JavaFX. In a traditional mouse/keyboard based input setup, there needs to be some indication of where a keystroke will be sent when a key is pressed. Imagine there are multiple fields on a form, a few text fields and a couple of buttons. If the user types some characters - how does the system know into which text field to insert the characters? Similarly if the user presses return to activate a button, which button will get activated? The answer is that the button or field which currently has focus will receive the input. The focus can be changed usually by pressing the tab key to tab to a new field or pressing on a different field with the mouse. However, even though the system knows that which field has focus, it is important to provide feedback to the user to let the user know which field has focus. That way when the user types, they have some idea of where there input will be directed.
What you see with a blue outline around a button in JavaFX is a visual indicator to note that the button has focus and, if you press space, that button's action will be triggered and not some other button. When you click the mouse on another button it will both trigger the other button's action and transfer focus to that button, so if you subsequently press space, the last clicked button will be actioned again.
The focus color for a controls in JavaFX that are using the default modena.css stylesheet which comes with JavaFX 8, can be controlled by a couple of css properties which you can override in the user stylesheet for your application (by defining the properties in the .root {} css style class:
/* A bright blue for the focus indicator of objects. Typically used as the
* first color in -fx-background-color for the "focused" pseudo-class. Also
* typically used with insets of -1.4 to provide a glowing effect.
*/
-fx-focus-color: #039ED3;
-fx-faint-focus-color: #039ED322;
So, for instance, you could remove all focus colors from your application using:
.root {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
However, removing focus color indicators would probably make your application much less intuitive and more difficult to understand.
Let's look at a simple form in JavaFX:
The blue ring around the text input field for User Name indicates that text input will go into that field.
Is there a proper way to disable the focus ring only from my project's buttons?
If you want to disable focus feedback only for buttons and for all buttons in a project and also not effect other controls, then you can define a stylesheet rule for that:
.button {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
Note: I still don't recommend doing this even if other frameworks you use do not provide focus rings for buttons.
This will override the default focus coloring for buttons defined in the default JavaFX 8 modena.css stylesheet. You do not need to (nor should you) modify the modena.css stylesheet to override values in it. You can just redefine the values using a more specific CSS selector rule within your application's stylesheet. If you need to understand how CSS selectors work, there are numerous resources on the web you can search for and read. Oracle provide a getting started tutorial on how you can set a custom CSS style for a scene. The relevant code line is to add your user stylesheet to your scene:
scene.getStylesheets().add(
MyApplication.class.getResource(
"my-stylesheet.css"
).toExternalForm()
);
Related
I'm trying to make an overlay on the screen using JavaFX and an issue I'm having is that whenever my overlay pops up, it steals focus from whichever program I'm currently in. The issue with this is that my overlay allows the user to simulate keyboard key presses using the robot class (like an on-screen keyboard) and without keeping the focus in the original window, the typed characters have nowhere to go. I've tried setting the modality to none, but that's also the default option and it doesn't seem to be doing anything. Would putting my JavaFX scene in a JFrame work or is there some better way to do it only in JavaFX?
Try this
when focused -> compute what you want to
then call Stage.toBack(); //the currently focused window prior to yours will gain focus back
I am building my first CodenameOne app using the GUI Builder. I've defined a style for my buttons where the "unselected" state is regular text and the "selected" or focus state has Bold text.
The problem I'm seeing is that once a button gains focus, the bold text is slightly wider than the original text and it starts scrolling (I think the effect is referred to as "tickering"):
Unselected Button Image
Selected Button Image
I see this in the simulator and on my Samsung SG6 testing. Is this a bug or is there something I can do to pre-size it for the bold text first so it doesn't start scrolling when it gets focus? I don't want to make the button larger than it needs to be (ie: fit it to a container)
You need to do 2 things,
first reduce the left and right padding of the selected button UIID and then call this in your code
mybutton.setEndsWith3Points(false);
mybutton.setTickerEnabled(false);
As an extra, place the button in a container with the right layout.
Note that since the text is now Bold, it's normal for the button to gain extra width. So I will suggest you make a room for that.
Edit:
I noticed that the button was tickering when you took the snapshot so ignore the first point about padding.
I have added radio buttons to various forms and even though I can focus on the radio buttons with "tab" I can not choose them pressing "spacebar".
The arrow keys work so I can circle between the two radio buttons I have, but I need the "spacebar" functionality. With normal this works ok, not with though.
Is this some kind of bug or is there a workaround?
Since Primefaces RadioButtons are customized to display the theme oriented RadioButton,the Space Bar wont Work.
If you want the space bar to work you are gonna have to give up the theme oriented style of RadioButton. And use the native style (Browser Default Style) on radiobuttons.
You can do that using plain attribute as follows:
<p:selectOneRadio id="customRadio" plain="true">
How can I remove the small expand effect when I click on a JavaFX button? And also how can I make it work like an menu button (when I press it to remain in focused state untill I press another "menu" button). Is there a way to group nodes into the same focus?
Three questions for the price of one ;-)
How can I remove the small expand effect when I click on a JavaFX button?
When you click the button it has focus, when it has focus, it is surrounded by the focus ring, which makes it slightly larger. This effect is triggered via css.
Default css is in caspian.css found in jfxrt.jar in your JavaFX runtime install.
Relevant extract is here:
.button {
-fx-skin: "com.sun.javafx.scene.control.skin.ButtonSkin";
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 5, 5, 4, 3;
...
}
.button:focused {
-fx-color: -fx-focused-base;
-fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: -1.4, 0, 1, 2;
-fx-background-radius: 6.4, 5, 4, 3;
}
To remove the slight expansion effect, create your own stylesheet. In your stylesheet assign that to your scene and set the background insets and radius for the focused and unfocused button to the same values. Here is a tutorial on JavaFX CSS and the ever useful JavaFX CSS reference guide.
how can I make it work like an menu button (when I press it to remain in focused state untill I press another "menu" button).
I don't quite understand this question - that is the default behavior of a button. Maybe you are mixing focus and arm states and actually want a ToggleButton?
Is there a way to group nodes into the same focus?
Not built into the platform on the moment. You could write your own FocusModel class for a layout pane which remembers the last control in the pane which had focus and reassigns it focus again whenever the pane gets focus back or something like that. It would be custom code though. Concepts you would need to use are the focus property of nodes, the node requestFocus api (sometimes with a delay by executing in Platform.runLater to ensure that you override default focus processing) and the fact that (I think) the default focus order depends on the order of children within a Parent.
Style your own favorite button if you don't like the default one. Otherwise explain the small expand effect with code or image.
Use Menu and MenuItems to make a menu.
Or use Toggle Button to group the buttons and to behave them like a menu.
By saying " to remain in focused state" I assume you meant the "selected/toggled state" instead of focused. Cause the button remains in focused state after clicking on it.
Just wondering what focus means in java code, because I have seen onWindowFocusChanged, addFocussables, findFocus...
If I have a scrollable list and I scrolled it down, the first item will have focus false? or it means other thing?
Thanks
Focus means you have selected the particular GUI element. For example when you select a window that window gains focus, when you select another window the first window loses focus.... It's the same for JTextField, JTextArea, etc.
The definition of the focus here on StackOverflow is as follows:
Focus indicates the component of the graphical user interface which is
currently selected to receive input.
Saying that focused component is selected is not accurate. For instance, we can have a JCheckBox which is deselected (has no tick mark) and it is also the current focus owner. Since it has focus, its state is toggled with the spacebar. The term active is more precise. I came up with the following definition of focus:
Focus is a state of a component in which it receives keyboard input. Focus is represented by some visual cue; for instance, in Metal look and feel a focused JButton has a blue rectangle around its label. The component with the current input focus is called the focus owner.
The current GUI element that is "active" has the focus. For example when you have several Input windows only one can have the focus and receive your keyboard input. See here the Android GUI doc http://developer.android.com/guide/topics/ui/ui-events.html