I'm making a Mario themed application, and I would like the buttons to have the effect that when the user hovers over it with his/her mouse, a mushroom (image) appears next to the text of the button, and disappears when the mouse moves away.I'm trying to do this using css.
How can one do this?
Use the hover pseudoclasses.
.button:hover{
-fx-graphic: url('your_path_to_image');
}
Complete Example
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Main extends Application {
public void start(Stage primaryStage) {
Button button = new Button("Click");
HBox container = new HBox(button);
container.setAlignment(Pos.CENTER);
Scene scene = new Scene(container, 200, 200);
scene.getStylesheets().add(getClass().getResource("/style.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
style.css
.button:hover{
-fx-graphic: url('http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/png/16/Mushroom%20-%201UP.png');
}
Image
On hover
Related
I am trying to set the mouse to a pointer when a hover event is detected but the cursor does not change. If anyone can tell me what I am doing wrong I would be so grateful.
package replit;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.geometry.Pos;
public class Main extends Application
{
#Override
public void start(Stage primaryStage) {
VBox vbox = new VBox();
vbox.setSpacing(20);
button button = new Button("Click");
button.setAlignment(Pos.CENTER);
vbox.getChildren().add(button);
Scene scene = new Scene(vbox, 300, 200);
scene.getStylesheets().add("Style.css");
primaryStage.setTitle("A Simple Scene!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The CSS
.button:hover{
-fx-cursor: pointer;
}
I need a window that can be move up down in my main window. Mainly IDE(IntelliJ, CodeBlock, Netbeans etc) output window feature.
I use TitledPane. By using this I can give a height that is expanded when I click the pane, but I can't expand the pane in any height.
see this - not expanded:
and this- expanded:
My code is here
Try using SplitPane. I guess this is what you want. You can learn more from the following link
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/SplitPane.html
import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
SplitPane splitPane = new SplitPane(new Pane(), new Pane());
splitPane.setDividerPositions(0.5);
splitPane.setOrientation(Orientation.VERTICAL);
primaryStage.setScene(new Scene(splitPane,400,400));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The example below works for the Text only but once I add a button to the stage, the transparent become inactive
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class Main extends Application {
#Override
public void start(Stage stage) {
stage.initStyle(StageStyle.TRANSPARENT);
Text text = new Text("!");
text.setFont(new Font(40));
VBox box = new VBox();
Button btn = new Button("Test transparent");
box.getChildren().addAll(text, btn);
//if I removed the btn, transparent works as expected.
final Scene scene = new Scene(box,300, 250);
scene.setFill(null);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
What I am looking for is to only make the stage transparent but show the text and button
Your Button in that case is not an issue. By default VBox has gray background, so your Stage is transparent, but VBox isn't. You have to set transparent background by CSS file or inline or from code:
CSS:
.your-vbox {
-fx-background-color: transparent;
}
Inline:
box.setStyle("-fx-background-color: transparent;");
Code:
box.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
I'm creating a simple lottery game where I can chose numbers from 1 to 42. I would like to mark the chosen number with a red "X" (instead of using an effect) but the user should still see the chosen number beneath the "X". When the user clicks the marked number again, the "X" should disappear.
The GUI looks like this:
enter image description here
How can I display a second text on a button in the way that the first text is still visible?
Thanks for your help
kind regards
Joel
You can set the Graphic of a button to a StackPane and then add an element to the StackPane. Since the children of a StackPane are all displayed on top of each other, this yields the effect that you want. My example just shows the concept, I would probably write a new class that extends Button in your use scenario :)
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
public class NewFXMain extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
Pane pane = new Pane();
StackPane buttonPane = new StackPane();
Label label = new Label("42");
buttonPane.getChildren().add(label);
Button button = new Button();
button.setGraphic(buttonPane);
button.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
if(buttonPane.getChildren().size() == 1){
Label labelX = new Label("X");
labelX.setStyle("-fx-text-fill: red;");
buttonPane.getChildren().add(labelX);
}
else
buttonPane.getChildren().remove(1);
}
});
pane.getChildren().addAll(button);
primaryStage.setScene(new Scene(pane, 300, 275));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
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);
}
}