I have a small button in triangle shape. However, it looks more like a 2-D shape and doesn't really have the feel of a button. Please look at my code below:
private String style =
"-fx-min-width: 10px; " +
"-fx-min-height: 10px; " +
"-fx-background-color: grey;";
Button btn = new Button();
btn.setShape(new Polygon(new double[]{
0.0, 0.0,
2.0, 3.0,
0.0, 6.0
}));
btn.setStyle(style);
btn.toFront();
How can I make it look more like a button rather than a flat 2D shape. Please note that I cannot increase the size of this button. Is there any alternative to make a small sized shape appear more like a button?
In fact it's a matter of styling, CSS in particular more than JavaFX.
You can change the style of the button and keep the same shape (triangle).
For example if I apply this CSS style which I borrowed from here
String style =
"-fx-background-color: "
+ "linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),"
+ "linear-gradient(#020b02, #3a3a3a),"
+ "linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),"
+ "linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),"
+ "linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);"
+ "-fx-background-insets: 0,1,4,5,6;"
+ "-fx-background-radius: 9,8,5,4,3;"
+ "-fx-padding: 15 30 15 30;"
+ "-fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1)";
And keeping your code:
Button btn = new Button();
btn.setShape(new Polygon(new double[]{
0.0, 0.0,
2.0, 3.0,
0.0, 6.0}));
btn.setStyle(style);
It will give this style:
While your original one is:
Note that you can see other examples (styles) for buttons (kind of 3D) on that site (it's up to your preference).
Related
How do I convert this CSS radial gradient to Flutter gradient:
background: radial-gradient(50% 50% at 50% 50%, #1AD4FD 0%, #2588FD 100%);
Gradient
Here's a rough equivalent :
Container(
decoration: const BoxDecoration(
gradient: RadialGradient(
colors: [
Color(0xFF1AD4FD),
Color(0xFF2588FD)
]
)
),
width: 320,
height: 180,
)
I am in the process of learning basic Java and JavaFX. I am trying to apply certain styles to a simple program. I have successfully connected the CSS and SOME styles work and others are ignored. I am especially having an issue with -fx-background-color and -fx-font-weight, thusly. The CSS is as follows:
.label{
-fx-font-size: 16px;
-fx-font-weight: bold;
-fx-font-family: Tarazedi;
-fx-text-fill: #FF9900;
}
#h1bar {
-fx-text-fill: #000000;
-fx-effect: dropshadow( gaussian, #000000, 1, 0, 1, 1 );
-fx-background-color: linear-gradient( to right,
rgba(255, 153, 0, 1) 0px,
rgba(255, 153, 0, 1) 16px,
rgba(171, 153, 0, 0.67) 32px,
rgba(171, 153, 0, 0.67) 480px,
rgba(255, 153, 0, 0.33) 720px,
rgba(255, 153, 0, 0) 960px
);
-fx-padding: 4px;
-fx-background-radius: 16px;
}
The Java is as follows:
primaryStage.setTitle("Welcome to tarazedi.com!"); // Define window and title bar.
GridPane grid = new GridPane(); // Create a GridPane
grid.setHgap(16); // Set 10px gridlines.
grid.setVgap(16);
grid.setPadding(new Insets(32, 32, 32, 32)); // TRBL padding.
Label scenetitle = new Label("\uf0a3 Welcome to tarazedi.com!");
scenetitle.setId("h1bar");
grid.add(scenetitle, 0, 0, 2, 1);
Label userName = new Label("User Name:");
grid.add(userName, 0, 1);
TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);
Label pw = new Label("Password:");
grid.add(pw, 0, 2);
PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);
Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);
final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);
btn.setOnAction((ActionEvent e) -> {
actiontarget.setFill(Color.FIREBRICK);
actiontarget.setText("Sign in button pressed");
});
Scene scene = new Scene(grid, 400, 400); // Grid is the root node.
primaryStage.setScene(scene); // Display it.
scene.getStylesheets().add(VictorSheckelsFX.class.getResource("VictorStyle.css").toExternalForm());
primaryStage.show();
The expected behavior would cause the header bar to look roughly like the orange bars on my site: http://victorsheckels.com/. Instead I have solid orange bars, no dropshadow, and no boldness on my font. The font size, family, and color are WAI as are the padding and radius.
Use percentages instead of pixels. JavaFX does not support non-percentage stops as reported here
For example:
-fx-background-color: linear-gradient(to right,
rgba(255, 153, 0, 1) 0%,
rgba(255, 153, 0, 1) 1.6%,
rgba(171, 153, 0, 0.67) 3.3%,
rgba(171, 153, 0, 0.67) 50%,
rgba(255, 153, 0, 0.33) 75%,
rgba(255, 153, 0, 0) 100%);
I would like to update my TableView rows color depending on the data in the cell, so I used a pseeudoClass to reference the style in Css. the rows are colored as I wanted but, it lost the selection and the mouse hover effect, now I have a colored rows without any indication to the selected row. here is my code:
PseudoClass myPseudoClass = PseudoClass.getPseudoClass("dtta_dep");
PseudoClass myPseudoClass1 = PseudoClass.getPseudoClass("dtta_dest");
fplTableView.setRowFactory(tv -> new TableRow<FlightPlan>() {
#Override
public void updateItem(FlightPlan item, boolean empty) {
super.updateItem(item, empty);
this.setFocused(true);
this.setHover(true);
System.out.println("myPseudoClass = "+myPseudoClass.getPseudoClassName());
pseudoClassStateChanged(myPseudoClass, (! empty) && item.Dep_aerodomProperty().get().equalsIgnoreCase("DTTA"));
pseudoClassStateChanged(myPseudoClass1, (! empty) && item.Dest_aerodomProperty().get().equalsIgnoreCase("DTTA"));
}
});
getData();
for (int i = 0; i < listF.size(); i++) {
System.out.println(listF.get(i).Dep_aerodomProperty().get());
}
selectWithService();
});
the css file :
.table-row-cell {
-fx-background-color: linear-gradient(white 0%, white 90%, #e0e0e0 90%);
}
.table-row-cell:selected {
-fx-background-color: linear-gradient(#95caff 0%, #77acff 90%, #e0e0e0 90%);
}
.table-row-cell:dtta_dep .table-cell {
-fx-text-fill: red;
-fx-background-color:beige;
}
.table-row-cell:dtta_dest .table-cell {
-fx-text-fill: blue;
-fx-background-color:greenyellow;
}
Use -fx-background instead of -fx-background-color on the table-row-cell to set the non-selected background. You can use -fx-selection-bar to set the selected color. The text fill is defined in a table cell with the -fx-text-background-color color, (i.e. the text fill for text over a -fx-background), so you can override those for the text fill in the cells.
.table-row-cell {
-fx-background: linear-gradient(white 0%, white 90%, #e0e0e0 90%);
-fx-selection-bar: linear-gradient(#95caff 0%, #77acff 90%, #e0e0e0 90%);
}
.table-row-cell:dtta_dep {
-fx-text-background-color: red;
-fx-background: beige;
}
.table-row-cell:dtta_dest {
-fx-text-background-color: blue;
-fx-background:greenyellow;
}
I want my button to have a transparent black bar on the bottom with a opacity of 75%. The button name should appear on top of the black bar. I have drawn a draft below.
So far I have tried with no success:
.button{
-fx-background-color: #5a9bdc;
-fx-font-size: 16;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
-fx-text-fill: #ffffff;
}
.button:hover {
-fx-background-color: #97c0dc;
}
UPDATE:
So this is how my css looks:
.button-stats.parent{
-fx-background-color: #5a9bdc;
-fx-font-size: 16;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
-fx-text-fill: #ffffff;
}
.button-stats:hover {
-fx-background-color: #97c0dc;
}
.button-stats.element{
padding: 20px;
color: rgba(255,255,255,.4);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here is a sample, it isn't going to be exactly what you want, but may help you in getting to where you want. It is based upon button styles found in modena.css in the jfxrt.jar that ships with Java 8.
Images are shown for unhovered and hovered and armed states (armed is when the button is pressed and the shadow is removed).
I did not provide info here for a focused state, so you will need to develop that yourself if you want it.
super-button.css
.button {
-custom-solid-button-color: lightgreen;
-custom-translucent-button-color: rgba(00, 80, 00, 0.75);
-custom-button-color:
linear-gradient(to bottom,
-custom-solid-button-color 0%,
-custom-solid-button-color 64%,
-custom-translucent-button-color 65%);
-fx-background-color: -custom-button-color;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-text-fill: whitesmoke;
-fx-padding: 3.333333em 0.666667em 0.333333em 0.666667em;
-fx-font-size: 30px;
-fx-effect: dropshadow(gaussian, black, 10, 0, 3, 3);
}
.button:hover {
-custom-solid-button-color: derive(lightgreen, 20%);
-fx-effect: dropshadow(gaussian, goldenrod, 10, 0, 3, 3);
}
.button:armed {
-custom-solid-button-color: derive(lightgreen, -10%);
-fx-effect: null;
-fx-background-insets: 2 2 0 0;
}
SuperButton.java
import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.*;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class SuperButton extends Application {
private static final String BACKGROUND_IMAGE_LOC =
"http://edugeography.com/images/great-barrier-reef/great-barrier-reef-04.jpg";
#Override
public void start(Stage stage) {
Button button = new Button("I \u2764 Sea Turtles");
ImageView background = new ImageView(
new Image(BACKGROUND_IMAGE_LOC, 400, 0, true, true)
);
StackPane layout = new StackPane(
background,
button
);
StackPane.setAlignment(button, Pos.BOTTOM_CENTER);
StackPane.setMargin(button, new Insets(0, 0, 15, 0));
Scene scene = new Scene(layout);
scene.getStylesheets().add(getClass().getResource(
"super-button.css"
).toExternalForm());
stage.setResizable(false);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Getting the translucent area at the base is slightly tricky, especially because you are applying a drop shadow effect. What happens with a drop shadow effect is that the drop shadow is visible through the translucent area. Normally, when you have an opaque foreground, you can see the shadow through the foreground, but when you have a translucent foreground, the shadow mars the translucent effect a bit. To understand what I mean, review the above images and note the difference between the translucent area in the images with and without a drop shadow involved.
So you might want to rethink the design to not use the drop shadow. There are ways around this using clips, but it gets a bit more complicated and you cannot achieve it using just CSS (you will also need to write some custom skin code in Java, which I won't demonstrate here).
Try
.button {
-fx-opacity: 0.7;
}
I wonder if it is possible to make a progressbar with the appearance,"progressbar Animated bootstrap". With stripes going sideways.
http://getbootstrap.com/2.3.2/components.html#progress
ProgressBar with Static Stripes
Here is a JavaFX ProgressBar which looks like a static striped progress bar from Bootstrap.
The stripe gradient is set entirely in css, the Java code is just a test harness.
File: striped-progress.css
.progress-bar > .bar {
-fx-background-color: linear-gradient(
from 0px .75em to .75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
File: StripedProgress.java
import javafx.animation.*;
import javafx.application.Application;
import javafx.event.*;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
/** Displays progress on a striped progress bar */
public class StripedProgress extends Application {
public static void main(String[] args) { launch(args); }
#Override public void start(final Stage stage) {
ProgressBar bar = new ProgressBar(0);
bar.setPrefSize(200, 24);
Timeline task = new Timeline(
new KeyFrame(
Duration.ZERO,
new KeyValue(bar.progressProperty(), 0)
),
new KeyFrame(
Duration.seconds(2),
new KeyValue(bar.progressProperty(), 1)
)
);
Button button = new Button("Go!");
button.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent actionEvent) {
task.playFromStart();
}
});
VBox layout = new VBox(10);
layout.getChildren().setAll(
bar,
button
);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
layout.getStylesheets().add(
getClass().getResource(
"striped-progress.css"
).toExternalForm()
);
stage.setScene(new Scene(layout));
stage.show();
}
}
ProgressBar with Animated Stripes
JavaFX has good animation facilities which will allow you to animate the gradient within the progress bar if you wish.
One way to do that is to do a node lookup on the bar after the bar has been displayed on the screen and modify the style property of the bar in a Timeline, similar to the technique applied in: How to make an animation with CSS in JavaFX?
Personally, I find animated stripes on progress bars annoying.
Writing the actual code for this is left as an exercise for the reader.
In another answer I have explained how to do this.
Like jewelsea said, I animated the hole progress-bar with a timeline. But without a lookup or style change on runtime(both is not really recommended).
You must write a bit more css but then it runs smoothly and without much CPU usage.
Here the edited code from jewelsea:
File: StripedProgress.java
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
/**
* Displays progress on a striped progress bar
*/
public class StripedProgress extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(final Stage stage) {
ProgressBar bar = new ProgressBar(0);
bar.setPrefSize(200, 24);
Timeline task = new Timeline(
new KeyFrame(
Duration.ZERO,
new KeyValue(bar.progressProperty(), 0)
),
new KeyFrame(
Duration.seconds(2),
new KeyValue(bar.progressProperty(), 1)
)
);
// Set the max status
int maxStatus = 12;
// Create the Property that holds the current status count
IntegerProperty statusCountProperty = new SimpleIntegerProperty(1);
// Create the timeline that loops the statusCount till the maxStatus
Timeline timelineBar = new Timeline(
new KeyFrame(
// Set this value for the speed of the animation
Duration.millis(300),
new KeyValue(statusCountProperty, maxStatus)
)
);
// The animation should be infinite
timelineBar.setCycleCount(Timeline.INDEFINITE);
timelineBar.play();
// Add a listener to the statusproperty
statusCountProperty.addListener((ov, statusOld, statusNewNumber) -> {
int statusNew = statusNewNumber.intValue();
// Remove old status pseudo from progress-bar
bar.pseudoClassStateChanged(PseudoClass.getPseudoClass("status" + statusOld.intValue()), false);
// Add current status pseudo from progress-bar
bar.pseudoClassStateChanged(PseudoClass.getPseudoClass("status" + statusNew), true);
});
Button button = new Button("Go!");
button.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent actionEvent) {
task.playFromStart();
}
});
VBox layout = new VBox(10);
layout.getChildren().setAll(
bar,
button
);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
layout.getStylesheets().add(
getClass().getResource(
"/styles/striped-progress.css"
).toExternalForm()
);
stage.setScene(new Scene(layout));
stage.show();
}
}
And the full CSS:
File: striped-progress.css
.progress-bar:status1 > .bar {
-fx-background-color: linear-gradient(
from 0em 0.75em to 0.75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status2 > .bar {
-fx-background-color: linear-gradient(
from 0.25em 0.75em to 1em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status3 > .bar {
-fx-background-color: linear-gradient(
from 0.5em 0.75em to 1.25em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status4 > .bar {
-fx-background-color: linear-gradient(
from 0.75em 0.75em to 1.5em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status5 > .bar {
-fx-background-color: linear-gradient(
from 1em 0.75em to 1.75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status6 > .bar {
-fx-background-color: linear-gradient(
from 1.25em 0.75em to 2em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status7 > .bar {
-fx-background-color: linear-gradient(
from 1.5em 0.75em to 2.25em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status8 > .bar {
-fx-background-color: linear-gradient(
from 1.75em 0.75em to 2.5em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status9 > .bar {
-fx-background-color: linear-gradient(
from 2em 0.75em to 2.75em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status10 > .bar {
-fx-background-color: linear-gradient(
from 2.25em 0.75em to 3em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status11 > .bar {
-fx-background-color: linear-gradient(
from 2.5em 0.75em to 3.25em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
.progress-bar:status12 > .bar {
-fx-background-color: linear-gradient(
from 2.75em 0.75em to 3.5em 0px,
repeat,
-fx-accent 0%,
-fx-accent 49%,
derive(-fx-accent, 30%) 50%,
derive(-fx-accent, 30%) 99%
);
}
If anyone is interested for the animation version of #jewelsea answer, please check the below code.
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
/**
* Displays progress on a striped progress bar
*/
public class StripedProgress extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(final Stage stage) {
ObjectProperty<Node> node = new SimpleObjectProperty<>();
ProgressBar bar = new ProgressBar(0) {
#Override
protected void layoutChildren() {
super.layoutChildren();
if (node.get() == null) {
Node n = lookup(".bar");
node.set(n);
int stripWidth = 10;
IntegerProperty x = new SimpleIntegerProperty(0);
IntegerProperty y = new SimpleIntegerProperty(stripWidth);
Timeline timeline = new Timeline(new KeyFrame(Duration.millis(35), e -> {
x.set(x.get() + 1);
y.set(y.get() + 1);
String style = "-fx-background-color: linear-gradient(from " + x.get() + "px " + x.get() + "px to " + y.get() + "px " + y.get() + "px, repeat, -fx-accent 50%, derive(-fx-accent, 30%) 50%);";
n.setStyle(style);
if (x.get() >= stripWidth * 2) {
x.set(0);
y.set(stripWidth);
}
}));
timeline.setCycleCount(Animation.INDEFINITE);
progressProperty().addListener((obs, old, val) -> {
if (old.doubleValue() <= 0) {
timeline.playFromStart();
}
});
}
}
};
bar.setPrefSize(200, 24);
Timeline task = new Timeline(
new KeyFrame(
Duration.ZERO,
new KeyValue(bar.progressProperty(), 0)
),
new KeyFrame(
Duration.seconds(10),
new KeyValue(bar.progressProperty(), 1)
)
);
Button button = new Button("Go!");
button.setOnAction(actionEvent -> task.playFromStart());
VBox layout = new VBox(10);
layout.getChildren().setAll(bar, button);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
stage.setScene(new Scene(layout));
stage.show();
}
}