I am having trouble making it so that my nameInput label and passInput label are bolded. My program allows me to do a -fx-text-fill: #FFFFFF; and that works but when i try -fx-font-weight: bold; it wont work or bold my label when the app runs.
Here is my code containing my labels and buttons:
package appGUI;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
import javafx.scene.layout.GridPane;
public class Login extends Application {
Stage window;
Button loginButton;
String user = "test";
String pw = "test";
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
window = primaryStage;
window.setTitle("Secret");
GridPane grid = new GridPane();
grid.setPadding(new Insets(10,10,10,10));
grid.setVgap(8);
grid.setHgap(10);
// name label
Label nameLabel = new Label("Enter your name:");
GridPane.setConstraints(nameLabel, 0, 0);
// name input
TextField nameInput = new TextField();
nameInput.setPromptText("name");
GridPane.setConstraints(nameInput, 1, 0);
// password label
Label passLabel = new Label("Enter the password:");
GridPane.setConstraints(passLabel, 0, 1);
// password input
PasswordField passInput = new PasswordField();
passInput.setPromptText("password");
GridPane.setConstraints(passInput, 1, 1);
// login button
loginButton = new Button("Enter");
GridPane.setConstraints(loginButton, 1, 2);
loginButton.setOnAction(e -> {
if(nameInput.getText().equals(user) && passInput.getText().equals(pw)) {
System.out.println("THIS WORKS. YOU FINALLY SOLVED IT!!!!");
} else {
AlertBox.display("Error: Access Denied", "Only a special person can access this app");
}
});
grid.getChildren().addAll(nameLabel, nameInput, passLabel, passInput, loginButton);
Scene scene = new Scene(grid, 350, 200);
scene.getStylesheets().add("/appGUI/custom.css");
window.setScene(scene);
window.show();
}
}
And here is the .css file titled "custom.css" that works properly and does everything I wrote except for bold text:
.root {
-fx-background-color: linear-gradient(#707070, #BABABA);
}
.label {
-fx-text-fill: #FFFFFF;
-fx-font-weight: bold;
}
.button {
-fx-background-color: linear-gradient(#00F5FF, #FFA07A);
-fx-background-radius:10;
}
I have tried almost everything and I can't seem to find the answer to what seems like a really easy problem to fix. My labels just wont bold, but they'll fill with #FFFFFF, and i just want to know why one property works and the other one doesn't!
For some strange reason the default font not necessarily supports all features.
Try:
.label {
-fx-font-family: "Helvetica";
-fx-font-weight: bold;
}
If you want to make this change application wide, add it to the scene:
.root {
-fx-font-family: "Helvetica";
}
scene.getStylesheets().add("pathTo/root.css");
Related
I'm currently making a program and I was wondering how I could attain this Windows-like button in JavaFX?
You need to modify the css styling of the button.
Please check the below css code to apply the desired styles on the button.
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class WindowsButtonCssDemo extends Application {
#Override
public void start(Stage stage) throws Exception {
Button b1 = new Button("OK");
Button b2 = new Button("Cancel");
HBox.setHgrow(b1, Priority.ALWAYS);
HBox.setHgrow(b2, Priority.ALWAYS);
HBox row = new HBox(b1, b2);
row.setSpacing(5);
StackPane root =new StackPane(row);
root.setPadding(new Insets(20));
root.setStyle("-fx-background-color:#1F1F1F;");
Scene scene = new Scene(root, 400,200);
scene.getStylesheets().add(this.getClass().getResource("button.css").toExternalForm());
stage.setTitle("Windows Button");
stage.setScene(scene);
stage.show();
}
}
CSS code:
.button{
-fx-max-width: infinity;
-fx-background-color: #4D4D4D;
-fx-background-insets: 0;
-fx-background-radius: 0px;
-fx-text-fill: #FFFFFF;
-fx-font-size:14px;
}
I have a working TextField with my CSS fill color, and a Label. But when I try a Text control, I have not figured out how to set the fill color in CSS (and I have tried many things).
Label label = new Label("Machine ID");
TextField textField = new TextField("1");
Text text = new Text("1");
.css:
.text-input {
-fx-text-fill: blue;
}
.label {
-fx-text-fill: blue;
}
First note that Text has no style class by default. So you need to add the style class:
Text text = new Text("1");
text.getStyleClass().add("my-text");
Then you can use the -fx-fill property inherited from Shape:
.my-text {
-fx-fill: blue ;
}
SSCCE:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class TextCSSTest extends Application {
#Override
public void start(Stage primaryStage) {
VBox root = new VBox(10);
TextField textField = new TextField("Text Field");
Label label = new Label("Label");
Text text = new Text("Text");
text.getStyleClass().add("my-text");
root.getChildren().addAll(textField, label, text);
root.setAlignment(Pos.CENTER);
root.setPadding(new Insets(20));
Scene scene = new Scene(root);
scene.getStylesheets().add("text-css-test.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
text-css-test.css:
.my-text {
-fx-fill: blue ;
}
.label {
-fx-text-fill: green ;
}
.text-input {
-fx-text-fill: red ;
}
Based on the JavaFX CSS reference, Text doesn't have this property like Label and TextField do. So I'm not sure it is possible.
I just want to create copiable label in JavaFX.
I have tried to create TextField that have no background, have no focus border and default background color, but I have no success.
I have found a lot of questions how to remove focus background from control but all of that looks like "hacks".
Is there are any standard solution to implement copyable text?
You can create a TextField without the border and background color with css:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class CopyableLabel extends Application {
#Override
public void start(Stage primaryStage) {
TextField copyable = new TextField("Copy this");
copyable.setEditable(false);
copyable.getStyleClass().add("copyable-label");
TextField tf2 = new TextField();
VBox root = new VBox();
root.getChildren().addAll(copyable, tf2);
Scene scene = new Scene(root, 250, 150);
scene.getStylesheets().add(getClass().getResource("copyable-text.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
and
copyable-text.css:
.copyable-label, .copyable-label:focused {
-fx-background-color: transparent ;
-fx-background-insets: 0px ;
}
This is the solution I used, where there is a small button besides the label to be able to copy the text:
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import org.controlsfx.glyphfont.FontAwesome;
import org.controlsfx.glyphfont.Glyph;
import java.util.Locale;
public class CopiableLabel extends Label
{
public CopiableLabel()
{
addCopyButton();
}
public CopiableLabel(String text)
{
super(text);
addCopyButton();
}
public CopiableLabel(String text, Node graphic)
{
super(text, graphic);
}
private void addCopyButton()
{
Button button = new Button();
button.visibleProperty().bind(textProperty().isEmpty().not());
button.managedProperty().bind(textProperty().isEmpty().not());
button.setFocusTraversable(false);
button.setPadding(new Insets(0.0, 4.0, 0.0, 4.0));
button.setOnAction(actionEvent -> AppUtils.copyToClipboard(getText()));
Glyph clipboardIcon = AppUtils.createFontAwesomeIcon(FontAwesome.Glyph.CLIPBOARD);
clipboardIcon.setFontSize(8.0);
button.setGraphic(clipboardIcon);
setGraphic(button);
setContentDisplay(ContentDisplay.RIGHT);
}
}
Does anyone know of a class that i can use that is essential a rectangle, BUT it has text in the middle of the rectangle and the rectangle has a fill color along with a border color(the border can be changed to red or something along those lines)
Essentially right now i have a pane, and i want to make a 2D grid(10x10), where each individual object in the grid is a rectangle-typed object that has a number text center justified, a fill color, and a border color.
Note: I've tried to use gridpane, but the lack of documentation that i've found has led me to believe i can only set the fill color, and each cell in the grid pane does NOT look like a separate object like i want it to. I've also tried to implement rectangle but the rectangle doesn't have text or a border that i can manipulate.
Thank you for your help.
Just use a Label. Here's a proof of concept:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class CustomLabelDemo extends Application {
#Override
public void start(Stage primaryStage) {
Label label = new Label("Hello World");
label.setStyle(
"-fx-alignment: center;"
+"-fx-padding: 6px;"
+"-fx-background-color: red, -fx-background;"
+"-fx-background-insets: 0, 4px;"
);
StackPane root = new StackPane(label);
primaryStage.setScene(new Scene(root, 350, 75));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The way the css is working here is that it defines two backgrounds: the first (and thus the one at the back) is red; the one in front is set to -fx-background, which is the color defined in the default stylesheet for the background of most controls. Corresponding to these are two insets for the two backgrounds: the first set to zero, and the second set to 4 pixels. This means that 4 pixels of the red border will be visible. The padding is just set to make sure the text doesn't overlap the outer background (the border).
In a real application, you should put the style in an external file. You can also define a "looked-up-color" for the border color; this will make it much easier to change the color at runtime:
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class CustomLabelDemo extends Application {
#Override
public void start(Stage primaryStage) {
Label label = new Label("Hello World");
label.getStyleClass().add("custom-label");
Button changeColorButton = new Button("Change to green");
changeColorButton.setOnAction(event -> label.setStyle("custom-label-border-color: green;"));
VBox root = new VBox(10, label, changeColorButton);
root.setAlignment(Pos.CENTER);
Scene scene = new Scene(root, 350, 75);
scene.getStylesheets().add("custom-label.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
with custom-label.css:
.custom-label {
custom-label-border-color: red ;
-fx-alignment: center;
-fx-padding: 6px;
-fx-background-color: custom-label-border-color, -fx-background;
-fx-background-insets: 0, 4px;
}
.button {
-fx-alignment: center ;
}
If you have a fixed set of states that the colors represent, you might want to use a pseudoclass to represent the state:
import javafx.application.Application;
import javafx.css.PseudoClass;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class CustomLabelDemo extends Application {
#Override
public void start(Stage primaryStage) {
Label label = new Label("Hello World");
label.getStyleClass().add("custom-label");
CheckBox errorCheckBox = new CheckBox("Error");
PseudoClass errorState = PseudoClass.getPseudoClass("error");
errorCheckBox.selectedProperty().addListener((obs, wasSelected, isNowSelected) ->
label.pseudoClassStateChanged(errorState, isNowSelected));
VBox root = new VBox(10, label, errorCheckBox);
root.setAlignment(Pos.CENTER);
Scene scene = new Scene(root, 350, 75);
scene.getStylesheets().add("custom-label.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
custom-label.css:
.custom-label {
custom-label-border-color: green ;
-fx-alignment: center;
-fx-padding: 6px;
-fx-background-color: custom-label-border-color, -fx-background;
-fx-background-insets: 0, 4px;
}
.custom-label:error {
custom-label-border-color: red ;
}
.check-box {
-fx-alignment: center ;
}
I think your best bet is to make a custom control, exposing the properties you need.
See http://docs.oracle.com/javafx/2/fxml_get_started/custom_control.htm for info and examples.
I want to implement a simple popup control, which should be styleable with CSS.
It's all working fine the only question is how to add content (a Node in JavaFX) to it?
The PopupWindow.getContent() method is deprecated in JavaFX 2.2.6 and not working with CSS, I am able to see the content but the CSS-selector will not work then.
So what is the best solution to add content myself, should I implement my own Skin class for that purpose or is there a simple way to just make it work?
I have prepared a simple use case:
import javafx.scene.control.Label;
import javafx.scene.control.PopupControl;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Rectangle;
public class PopupTest extends PopupControl {
public PopupTest() {
getStyleClass().add("popup"); // not working!?
StackPane pane = new StackPane();
pane.getStyleClass().add("pane");
Rectangle rectangle = new Rectangle(250, 250);
rectangle.getStyleClass().add("rect");
Label text = new Label("popup test");
text.getStyleClass().add("text");
pane.getChildren().addAll(rectangle, text);
// how to display to pane when the popup is shown?
getContent().addAll(pane);
}
}
For completeness here are my MainApplication and CSS file:
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
public class MainApplication extends Application {
#Override
public void start(Stage stage) throws Exception {
Group root = new Group();
final Scene scene = new Scene(root);
scene.getStylesheets().add(MainApplication.class.getResource("style.css").toExternalForm());
final Button button = new Button("show popup");
button.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
PopupTest popup = new PopupTest();
popup.show(scene.getWindow());
}
});
root.getChildren().add(button);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
style.css:
.popup {
-fx-font-size: 24px;
}
.popup .rect {
-fx-fill: green;
}
.popup .text {
-fx-text-fill: white;
-fx-font-weight: bold;
}
The ".popup" selector is not working here, if I set it to the "pane" it will style the popup window so the css is correct: pane.getStyleClass().add("popup"); // working with this "fix".
That seems to work:
getScene().setRoot(pane);
About the style class not working: PopupControl doesn't have a getStylesheets() method. So maybe it can only be styled directly by setStyle(...)? You can work around that by simply styling pane or by wrapping pane in a root pane and styling that.