How can i implement a transparent panel with non-transparent children in JavaFX 2?
The effect i want to achieve is for example applied to menus in Blender:
The menu-panel / window is transparent, but the text items are not transparent which leads to a pretty effect.
Set the background of your pane to a color with an alpha component. You can use a stylesheet or an inline style for this.
For example, if your pane was named glass, then the following will give it a rounded, translucent cyan background:
glass.setStyle("-fx-background-color: rgba(0, 100, 100, 0.5); -fx-background-radius: 10;");
You could also accomplish similar effects using blends, stackpanes or groups of items with the opacity set for items at the back of the stackpane or group.
Here is an executable example using the css background method.
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class TranslucentPane extends Application {
#Override public void start(final Stage stage) throws Exception {
final ImageView imageView = new ImageView(
new Image("https://upload.wikimedia.org/wikipedia/commons/b/b7/Idylls_of_the_King_3.jpg")
);
imageView.setFitHeight(300);
imageView.setFitWidth(228);
final Label label = new Label("The Once\nand\nFuture King");
label.setStyle("-fx-text-fill: goldenrod; -fx-font: italic 20 \"serif\"; -fx-padding: 0 0 20 0; -fx-text-alignment: center");
StackPane glass = new StackPane();
StackPane.setAlignment(label, Pos.BOTTOM_CENTER);
glass.getChildren().addAll(label);
glass.setStyle("-fx-background-color: rgba(0, 100, 100, 0.5); -fx-background-radius: 10;");
glass.setMaxWidth(imageView.getFitWidth() - 40);
glass.setMaxHeight(imageView.getFitHeight() - 40);
final StackPane layout = new StackPane();
layout.getChildren().addAll(imageView, glass);
layout.setStyle("-fx-background-color: silver; -fx-padding: 10;");
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) { launch(args); }
}
Sample program output:
Related
I am trying to implement a menu. This is my code :
Menu menuFile1 = new Menu("ADD");
Menu menuFile2 = new Menu("EDIT");
Menu menuFile3 = new Menu("VIEW");
Menu menuFile4 = new Menu("HELP");
How can I put some space between each menu (that is between ADD,EDIT,VIEW and HELP) ?
Answer
Space around menus is controlled by padding (see the Region css guide).
For example:
menu.setStyle("-fx-padding: 5 10 8 10;");
sets the padding around the menu to 5 pixels on the top, 10 pixels on the right, 8 pixels on the bottom and 10 pixels on the left.
Sample
The following is a bit overcomplicated for a code sample to demonstrate this effect, but you could run it to see the effect of varying padding values.
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.StringExpression;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class SpacedOut extends Application {
#Override
public void start(final Stage stage) {
MenuBar menuBar = createMenuBar();
VBox controlPane = createControlPane(menuBar);
VBox layout = new VBox(10,
menuBar,
controlPane
);
VBox.setVgrow(controlPane, Priority.ALWAYS);
stage.setScene(new Scene(layout, 400, 200));
stage.show();
}
private MenuBar createMenuBar() {
MenuBar menuBar = new MenuBar();
menuBar.getMenus().addAll(
new Menu("ADD"),
new Menu("EDIT"),
new Menu("VIEW"),
new Menu("HELP")
);
return menuBar;
}
private VBox createControlPane(MenuBar menuBar) {
CheckBox useCustomPadding = new CheckBox("Use Custom Padding");
useCustomPadding.setSelected(false);
Slider padAmount = new Slider(0, 30, 15);
padAmount.setShowTickMarks(true);
padAmount.setShowTickLabels(true);
padAmount.setMajorTickUnit(10);
padAmount.setMaxWidth(200);
padAmount.disableProperty().bind(
useCustomPadding.selectedProperty().not()
);
VBox contentPane = new VBox(10,
useCustomPadding,
padAmount
);
contentPane.setPadding(new Insets(10));
StringExpression paddingExpression = Bindings.concat(
"-fx-padding: ", padAmount.valueProperty(), "px;"
);
menuBar.getMenus().forEach(
menu -> menu.styleProperty().bind(
Bindings
.when(useCustomPadding.selectedProperty())
.then(paddingExpression)
.otherwise("")
)
);
return contentPane;
}
public static void main(String[] args) {
launch(args);
}
}
With the setStyle() Method you can pass one or more css styles in one string.
Like menuFile1.setStyle("-fx-border-color: red; -fx-effect: dropshadow( one-pass-box , red , 10,0.5,0,0 );");
Alternatively you could put your style information inside a css file and add it to the Scene through.
Scene somescene = new Scene(root)
somescene.getStylesheets().add("your.css");
See the css reference of Java FX 2 or this tutorial.
I have a collection of buttons:
VBox menuButtons = new VBox();
menuButtons.getChildren().addAll(addButton, editButton, exitButton);
I want to add some spacing between these buttons, without using a CSS style sheet. I think there should be a way to do this.
setPadding(); is for the Buttons in the VBox.
setMargin(); should be for the VBox itself. But I didn't find a way for the spacing between the buttons.
I'm glad for any ideas. :)
VBox supports spacing out of the box:
VBox menuButtons = new VBox(5);
or
menuButtons.setSpacing(5);
Just call setSpacing method and pass some value.
Example with HBox (it's same for VBox):
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.HBoxBuilder;
import javafx.stage.Stage;
public class SpacingDemo extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) {
stage.setTitle("Spacing demo");
Button btnSave = new Button("Save");
Button btnDelete = new Button("Delete");
HBox hBox = HBoxBuilder.create()
.spacing(30.0) //In case you are using HBoxBuilder
.padding(new Insets(5, 5, 5, 5))
.children(btnSave, btnDelete)
.build();
hBox.setSpacing(30.0); //In your case
stage.setScene(new Scene(hBox, 320, 240));
stage.show();
}
}
And this is how it looks:
Without of spacing:
With spacing:
If you're using FXML, use the spacing attribute:
<VBox spacing="5" />
As others have mentioned you can use setSpacing().
However, you can also use setMargin(), it is not for the pane (or box in your words), it is for individual Nodes. setPadding() method is for the pane itself. In fact, setMargin() takes a node as a parameter so you can guess what it's for.
For example:
HBox pane = new HBox();
Button buttonOK = new Button("OK");
Button buttonCancel = new Button("Cancel");
/************************************************/
pane.setMargin(buttonOK, new Insets(0, 10, 0, 0)); //This is where you should be looking at.
/************************************************/
pane.setPadding(new Insets(25));
pane.getChildren().addAll(buttonOK, buttonCancel);
Scene scene = new Scene(pane);
primaryStage.setTitle("Stage Title");
primaryStage.setScene(scene);
primaryStage.show();
You could get the same result if you replaced that line with
pane.setSpacing(10);
If you have several nodes that should be spaced, setSpacing() method is far more convenient because you need to call setMargin() for each individual node and that would be ridiculous. However, setMargin() is what you need if you need margins(duh) around a node that you can determine how much to each side because setSpacing() methods places spaces only in between nodes, not between the node and the edges of the window.
The same effect as the setSpacing method can also be achieved via css:
VBox {
-fx-spacing: 8;
}
Goal: Create a round button that has multiple text fonts.
Example: See RoundButtonWithMultipleFonts.java and RoundButtonWithMultipleFonts.css
RoundButtonWithMultipleFonts.java:
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Control;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class RoundButtonWithMultipleFonts extends Application {
public static void main(String... args) {
launch(args);
}
#Override
public void start(Stage stage) throws Exception {
stage.setTitle("Button with multiple fonts?");
stage.setScene(new Scene(getRoot(), 400, 400));
stage.getScene().getStylesheets().addAll(getClass().getResource("RoundButtonWithMultipleFonts.css").toExternalForm());
stage.sizeToScene();
stage.show();
}
private Parent getRoot() {
Button button = new Button(""); // The labels should be the buttons text
button.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
System.out.println("Button clicked");
}
});
Label header = new Label("A Prideful Header"); // Label for big font on button
header.getStyleClass().addAll("header");
Label footer = new Label("a humble footer"); // Label for small font on button
footer.getStyleClass().addAll("footer");
// Since the labels are on top of the button, pass any events they capture to the button
configurePassThroughEvents(button, header, footer);
StackPane stack = new StackPane();
stack.getChildren().addAll(button, header, footer);
return stack;
}
private void configurePassThroughEvents(Control targetControl, Control... sourceControls) {
MouseEventPassThrough passThroughEvent = new MouseEventPassThrough(targetControl);
for(Control sourceControl : sourceControls) {
sourceControl.setOnMouseClicked(passThroughEvent);
sourceControl.setOnMouseDragged(passThroughEvent);
sourceControl.setOnMouseDragEntered(passThroughEvent);
sourceControl.setOnMouseDragExited(passThroughEvent);
sourceControl.setOnMouseDragOver(passThroughEvent);
sourceControl.setOnMouseDragReleased(passThroughEvent);
sourceControl.setOnMouseEntered(passThroughEvent);
sourceControl.setOnMouseExited(passThroughEvent);
sourceControl.setOnMouseMoved(passThroughEvent);
sourceControl.setOnMousePressed(passThroughEvent);
sourceControl.setOnMouseReleased(passThroughEvent);
}
}
private static class MouseEventPassThrough implements EventHandler<MouseEvent> {
private final Control targetControl;
private MouseEventPassThrough(Control targetControl) { this.targetControl = targetControl; }
#Override public void handle(MouseEvent mouseEvent) { targetControl.fireEvent(mouseEvent); }
}
}
RoundButtonWithMultipleFonts.css:
.button {
-fx-border-width: 1px;
-fx-border-color: #000000;
-fx-border-radius: 45;
-fx-background-color: linear-gradient(#ffffff 0%, #cccccc 100%);
-fx-background-radius: 45;
-fx-padding: 50 100;
}
.button:hover {
-fx-background-color: linear-gradient(#ffffff 0%, coral 100%);
}
.label {
-fx-padding: 10;
-fx-background-color: cornflowerblue;
}
.header {
-fx-font-size: 110%;
-fx-font-weight: bold;
-fx-translate-y: -20;
}
.footer {
-fx-font-size: 80%;
-fx-translate-y: 20;
}
Runtime Results:
Problem:
When the mouse scrolls over one of the button's corners, the button enters the hovered state, but the mouse is still outside the visual bounds of the button indicated by the button's border and background. (See image.)
This example uses a stack pane, multiple labels, an event pass through mechanism, and css trickery to give the appearance of a button containing text with multiple fonts.
Questions:
How can I specify that the button should enter the hovered state only if the mouse collides with the buttons visual boundary as specified in the css with the border or background properties?
Is there a simpler way to specify multiple fonts (with general text layout) for a button than what is done in this example? Ideally I would want to just use a Button with a nested Node as the text. That would allow me to put anything I wanted inside the buttons textual area without needing the event pass through mechanism, the StackPane, and the css trickery.
You can use setGraphic(Node node); method of Button class to set your custom labels on button. Here is an example,
Label header = new Label("A Prideful Header");
header.getStyleClass().addAll("header");
Label footer = new Label("a humble footer");
footer.getStyleClass().addAll("footer");
VBox box = new VBox();
box.getChildren().addAll(header,footer);
Button button = new Button();
button.setGraphic(box);
Can someone please give me an example on how to center text on a JavaFX 2 Canvas?
GraphicsContext has some functions like setTextAlign, but I am not sure on how to use all those methods and which of them I really need. I want to center my text vertically and horizontally.
Set the text align to center.
Set the text baseline to center.
Draw the text in the center of your canvas (by positioning it at half the canvas width and height).
Here is a sample:
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.VPos;
import javafx.scene.*;
import javafx.scene.canvas.*;
import javafx.scene.layout.StackPane;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;
public class TextCanvas extends Application {
#Override public void start(Stage primaryStage) {
Canvas canvas = new Canvas(175, 40);
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.setTextAlign(TextAlignment.CENTER);
gc.setTextBaseline(VPos.CENTER);
gc.fillText(
"Text centered on your Canvas",
Math.round(canvas.getWidth() / 2),
Math.round(canvas.getHeight() / 2)
);
StackPane layout = new StackPane();
layout.getChildren().addAll(canvas);
primaryStage.setScene(new Scene(layout));
primaryStage.show();
}
public static void main(String[] args) { launch(args); }
}
you wanna use
control.setAlignment(Pos.CENTER); and
control.setStyle("-fx-alignment: CENTER;");
see here for some downloadable sample code of this in action.
I have a Pane (test_) as the center child of a border pane. The child fills its area and grows when the window is stretched as expected.
Now I scale test_. Normally it would be centered in its area, but I don't want that, so I translate it back to the upper-left corner of its area.
But now when I stretch the widow it pulls test_ away from the upper-left corner of its area. Can anyone explain why this happens? The sample below incorporates a slider that scale's test_.
Thank you.
package fxuicontrols;
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class ScaleTest
extends Application
implements ChangeListener<Number>
{
private final Pane test_ = new Pane();
public static void main(String[] args)
{
launch();
}
#Override
public void start(Stage stage) throws Exception
{
test_.setStyle( "-fx-background-color: blue;" );
Text text = new Text( "Upper left corner" );
text.setFill( Color.WHITE );
text.relocate( 0, 0 );
test_.getChildren().add( text );
final Slider scaler = new Slider( .25, 1, 1 );
scaler.valueProperty().addListener( this );
test_.scaleXProperty().bind( scaler.valueProperty() );
test_.scaleYProperty().bind( scaler.valueProperty() );
BorderPane root = new BorderPane();
root.setPrefSize( 250, 250 );
root.setCenter( test_ );
root.setBottom( scaler );
stage.setScene( new Scene( root ) );
stage.show();
}
#Override
public void
changed( ObservableValue<? extends Number> oVal,
Number oldNm,
Number newNum
)
{
double scale = newNum.doubleValue();
Bounds bounds = test_.getLayoutBounds();
double width = bounds.getWidth();
double height = bounds.getHeight();
test_.setTranslateX( (scale * width - width) / 2 );
test_.setTranslateY( (scale * height - height) / 2 );
}
}
The reason your solution goes awry when the Scene is resized is because Panes are resizable nodes, so the layoutbounds of the Pane is changing as the Pane is being resized, but you aren't taking that into account in your translation calculations.
The following directly uses Scale and Translate transforms to avoid any resizing related issues. Does this sample code do what you want?
import javafx.application.Application;
import javafx.beans.value.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.scene.transform.*;
import javafx.stage.Stage;
// demonstrates scaling a test pane with content in it.
// slide the slider at the bottom of the scene around to shrink and grow the content.
public class ScaleTest extends Application {
public static void main(String[] args) { launch(); }
#Override public void start(Stage stage) throws Exception {
// create a test pane for scaling.
Pane testPane = new Pane();
// make the test pane background a different color if you want to see the extent of the pane.
testPane.setStyle("-fx-background-color: blue;");
// create some text content to place in the test pane.
Text text = new Text("Upper left corner");
text.setStyle("-fx-font-size: 30px;");
text.setFill(Color.WHITE);
text.setTextOrigin(VPos.TOP);
testPane.getChildren().add(text);
Scale scaleTransform = new Scale();
testPane.getTransforms().addAll(scaleTransform, new Translate(0, 0));
// slider to scale the test pane.
final Slider scaler = new Slider(.25, 3, 1);
scaleTransform.xProperty().bind(scaler.valueProperty());
scaleTransform.yProperty().bind(scaler.valueProperty());
// stackpane added to pad out empty space when testPane is scaled small.
// stackpane also clips the zoomed content when it gets larger than it's standard layout.
final StackPane stack = new StackPane();
stack.getChildren().addAll(testPane);
StackPane.setAlignment(testPane, Pos.TOP_LEFT);
stack.setStyle("-fx-background-color: blue;");
final Rectangle clip = new Rectangle();
testPane.layoutBoundsProperty().addListener(new ChangeListener<Bounds>() {
#Override public void changed(ObservableValue<? extends Bounds> observable, Bounds oldBounds, Bounds bounds) {
clip.setWidth(bounds.getWidth());
clip.setHeight(bounds.getHeight());
}
});
stack.setClip(clip);
// layout everything.
VBox layout = new VBox();
layout.setPrefSize(250, 250);
layout.getChildren().setAll(stack, scaler);
VBox.setVgrow(stack, Priority.ALWAYS);
// show the stage.
stage.setScene(new Scene(layout));
stage.show();
}
}