Disable spacing between items in TextFlow in JavaFX - javafx

I'm trying to make a line of text which consists of a name and a string of text. I want the name to be a hyperlink and the rest to be just plain text.
I thought TextFlow would be good for this, but the problem is it automatically puts a single space between the hyperlink and the text. What if I want the TextFlow to be for example
Jane's awesome
The TextFlow will make that a
Jane 's awesome
Is there a method or CSS property to disable this behaviour?

Solution
You can remove the padding via a CSS style:
.hyperlink {
-fx-padding: 0;
}
Or you can do it in code if you wish:
link.setPadding(new Insets(0));
Background
The default setting can be found in the modena.css file in the jfxrt.jar file packaged with your JRE distribution and it is:
-fx-padding: 0.166667em 0.25em 0.166667em 0.25em; /* 2 3 2 3 */
Sample application
In the sample screenshot the second hyperlink has focus (hence its dashed border).
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Hyperlink;
import javafx.scene.layout.Pane;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;
public class HyperSpace extends Application {
#Override
public void start(Stage stage) {
TextFlow textFlow = new TextFlow(
unstyle(new Hyperlink("Jane")),
new Text("'s awesome "),
unstyle(new Hyperlink("links"))
);
stage.setScene(new Scene(new Pane(textFlow)));
stage.show();
}
private Hyperlink unstyle(Hyperlink link) {
link.setPadding(new Insets(0));
return link;
}
public static void main(String[] args) {
launch(args);
}
}

Related

Can I only target bottom border at JavaFX Styling?

can I somehow only style the bottom border of an textfield?
I already tried
textfield.setStyle("-fx-border-bottom-color: #FF0000");
but it hasn't worked.
Is there an possibility to color the bottom border??
Greetings
MatsG23
Here is a quick and dirty example of how that can be done.
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TextFieldStyleTest extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
BorderPane root = new BorderPane();
VBox vBox = new VBox();
vBox.setAlignment(Pos.CENTER);
root.setCenter(vBox);
HBox hBox = new HBox();
hBox.setAlignment(Pos.CENTER);
vBox.getChildren().add(hBox);
TextField textField = new TextField("Hello World");
textField.setAlignment(Pos.BASELINE_CENTER);
hBox.getChildren().add(textField);
textField.setStyle("-fx-border-color: red; -fx-border-width: 0 0 10 0;");
Scene scene = new Scene(root, 800, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class TextFieldStyleTestLauncher {public static void main(String[] args) {TextFieldStyleTest.main(args);}}
Yes, it is possible to give each side a different color. From the JavaFX CSS Reference Guide, for Region:
CSS Property: -fx-border-color
Values: <paint> | <paint> <paint> <paint> <paint> [ , [<paint> | <paint> <paint> <paint> <paint>] ]*
Default: null
Comments: A series of paint values or sets of four paint values, separated by commas. For each item in the series, if a single paint value is specified, then that paint is used as the border for all sides of the region; and if a set of four paints is specified, they are used for the top, right, bottom, and left borders of the region, in that order. If the border is not rectangular, only the first paint value in the set is used.
Note: The above is actually from one row of a table, but Stack Overflow doesn't give a way of formatting things in a table.
Meaning you can target the bottom border only by using:
.text-field {
-fx-border-color: transparent transparent red transparent;
}
The -fx-border-width CSS property (and really all the CSS properties dealing with the Region#background and Region#border properties) behaves the same way. This means you can accomplish the same thing by setting the width of every side but the bottom to zero, just like in mipa's answer.
Here's an exaple using inline CSS (i.e. setStyle):
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class App extends Application {
#Override
public void start(Stage primaryStage) {
TextField field = new TextField("Hello, World!");
field.setStyle("-fx-border-color: transparent transparent red transparent;");
field.setMaxWidth(Region.USE_PREF_SIZE);
primaryStage.setScene(new Scene(new StackPane(field), 300, 150));
primaryStage.show();
// Remove blue outline from when TextField is focused. This
// makes it easier to see the red border.
primaryStage.getScene().getRoot().requestFocus();
}
}
Which gives the following output:
Note that most of the "borders" added by modena.css (the default user-agent style sheet in JavaFX 8+) are not actually borders. Instead, they're multiple backgrounds with different insets.

JavaFX TextArea Limit

How do I set a limit on text area. I already made a counter that keeps track of the amount of characters in the text area, now I just need something to put in my if statement to make it impossible to put anymore text in the text area. How do I do that?
There's no point in creating a counter: the number of characters in the text area is already always available just from textArea.getText().length(), or, if you need an observable value, Bindings.length(textArea.textProperty()).
To limit the number of characters in a text area, set a TextFormatter which uses a filter that vetoes changes to the text if they would cause the text to exceed the maximum:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextFormatter;
import javafx.scene.control.TextFormatter.Change;
import javafx.stage.Stage;
public class LimitedTextArea extends Application {
#Override
public void start(Stage primaryStage) {
final int MAX_CHARS = 15 ;
TextArea textArea = new TextArea();
textArea.setTextFormatter(new TextFormatter<String>(change ->
change.getControlNewText().length() <= MAX_CHARS ? change : null));
Scene scene = new Scene(textArea, 400, 400);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

how about css class prescedence in javafx

I want to add another css class for my component by example
.item{
-fx-background-color:blue;
-fx-border-radius:5;
}
.item-some{
-fx-background-color:red;
}
and in my code
control.getStyleClass().addAll("item","item-some");
but my control only get "item-some" style i want override only the color applying the second class as in css on web, can someone help me or give me a link to read about it?
thanks.
This basically behaves as expected for me: the item with both style classes gets the properties defined for both selectors. If there are conflicts, such as fx-background-color in this example, the one defined later in the css file overrides the ones before it.
Here's a complete test:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.stage.Stage;
public class MultipleStyleClassTest extends Application {
#Override
public void start(Stage primaryStage) {
Region region1 = new Region();
Region region2 = new Region();
region1.getStyleClass().add("style-class-1");
region2.getStyleClass().addAll("style-class-1", "style-class-2");
HBox root = new HBox(region1, region2);
Scene scene = new Scene(root);
scene.getStylesheets().add("multiple-style-class-test.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
multiple-style-class-test.css is
.style-class-1 {
-fx-min-width: 300 ;
-fx-min-height: 400 ;
-fx-background-color: blue ;
-fx-background-radius: 25 ;
}
.style-class-2 {
-fx-background-color: red ;
}
and the result is
As can be seen, both region1 and region2 get the -fx-min-height, -fx-min-width, and -fx-background-radius properties defined for style-class-1. region1 gets the -fx-background-color defined for style-class-1; region2 displays the background color defined for style-class-2.

Javafx ImageView Tooltip style

I have made a global style to be applied to all tooltips, and it is working correctly except when then the tooltip is installed onto an ImageView. If I add the tooltip to the ImageView's parent (a HBox), the styling is correct, so it can't be a problem with the stylesheet not being added.
The css style looks like this:
.tooltip
{
-fx-border-color: gray;
-fx-border-radius: 5.0 5.0 5.0 5.0;
-fx-background-radius: 5.0 5.0 5.0 5.0;
-fx-background-color: white;
-fx-text-fill: black;
-fx-wrap-text: true;
}
Adding tooltip to imageview (style doesn't work):
Tooltip.install(imageviewFormat, formatTooltip);
Adding tooltip to parent (style does work):
Tooltip.install(imageviewFormat.getParent(), formatTooltip);
Am I doing something stupid here, or does ImageView not inherit the css from its parent. Any insight would be appreciated.
Update
The following example has this behavior, where style.css contains the same tooltip styleclass.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Tooltip;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Test extends Application
{
public static void main(String[] args) throws Exception
{
launch(args);
}
#Override
public void start(Stage primarystage) throws Exception
{
HBox root = new HBox();
root.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
ImageView imageView = new ImageView("http://www.samjarman.co.nz/images/so.png");
root.getChildren().add(imageView);
Tooltip.install(imageView, new Tooltip("Tooltip")); // Doesn't work
// Tooltip.install(imageView.getParent(), new Tooltip("Tooltip")); // Works
Scene scene = new Scene(root);
primarystage.setScene(scene);
primarystage.show();
}
}
Thanks

JAVAFX 2.0 How can i change the slider icon in a slider to an image?

I want to change the icon to my image, I've looked through the CSS reference guide but I can't seem to find anything relevant. Is it even possible? Doesn't matter if it is using CSS or declaratively from main JavaFX script.
Take a look at the sample code and images of how a custom slider is rendered in this AudioPlayer.
Also the JFXtras library has numerous gauges if you just want feedback rather than an interactive control.
Here is some sample css using the selector pointed out by invariant's answer. Note that I needed to add an -fx-padding specification at half the images dimensions in order for the whole image to display.
/** slider.css
place in same directory as SliderCss.java
ensure build system copies the css file to the build output path */
.slider .thumb {
-fx-background-image :url("http://icons.iconarchive.com/icons/double-j-design/diagram-free/128/piggy-bank-icon.png");
-fx-padding: 64;
}
/* Icon license: creative commons with attribution: http://www.doublejdesign.co.uk/products-page/icons/diagram */
Sample app:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class SliderCss extends Application {
public static void main(String[] args) { launch(args); }
#Override public void start(Stage stage) throws Exception {
VBox layout = new VBox();
layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10px;");
layout.getChildren().setAll(new Slider());
layout.getStylesheets().add(getClass().getResource("slider.css").toExternalForm());
stage.setScene(new Scene(layout));
stage.show();
}
}
Sample program output:
you can change thumb of slider using css
.slider .thumb{
-fx-background-image :url("your image");
...// more customization
}
I know that this is an old question but I think I have a contribution to this solution.
If we want to use a unique slider or we want to modify the appearance of all the sliders the previous solution is more than enough. However, if we need only modify the appearance of only one slider the we need another approach.
What we gonna do is imagine that we have applied a based style to the main scene. But we don't want to add another css file just to modify the behavior of the slider. So the question is: How we can modify the slider style using our base css file?
The solution is simple setId() all the controls have this attribute. Now let's check out this class:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
/**
* Created by teocci.
*
* #author teocci#yandex.com on 2018-Jul-06
*/
public class CustomSliderThumb extends Application
{
public static void main(String[] args) { launch(args); }
#Override
public void start(Stage stage) throws Exception
{
Slider slider = new Slider();
slider.setId("custom-slider");
VBox layout = new VBox();
layout.setId("base-layout");
layout.getChildren().setAll(slider);
Scene scene = new Scene(layout);
scene.getStylesheets().add("css/style.css");
stage.setScene(scene);
stage.show();
}
}
In this example, we created a slider and set its id as "custom-slider". Then we added this slider to a VBox layout and, finally, we added the layout to the scene that has the style.css
Now lets check the style.css and how to use the id selector to apply a custom style. Remember to specify -fx-pref-height and -fx-pref-width with the dimensions of the image or if is a square -fx-padding at half the image side dimension for displaying the whole image.
#custom-slider .thumb {
-fx-background-image :url("https://i.imgur.com/SwDjIg7.png");
-fx-background-color: transparent;
-fx-padding: 24;
/*-fx-pref-height: 48;*/
/*-fx-pref-width: 48;*/
}
#custom-slider .track {
-fx-background-color: #2F2F2F;
}
#base-layout {
-fx-background-color: lightgray;
-fx-padding: 10px;
}
Sample program output:
If you want to remove the thumb background color and only have the image(semi-transparent ones like round button) then you should also -fx-background-color:transparent; unless you will have the background
.slider .thumb {
-fx-background-image :url("sider-round-thumb-image.png");
-fx-padding: 16; /* My thumb image is 33x33 pixels,so padding is half */
-fx-pref-height: 28;
-fx-pref-width: 28;
-fx-background-color:transparent;
}

Resources