I have problem to add style to button controll from external css file,I trying something like this,example button.getStyleSheets().add(".../... .css");
I trying to select one button controll,not multiple buttons.I think to set style to button from external css file,and I would change code somewhere to works(I can fix that,over ObservableLis list=button.getStyleSheets(); .......) but I can't add external file to button.
//when I click left mouse button,selected them and if I type delete key delete him
else if(e.getButton() == MouseButton.PRIMARY && e.getClickCount() == 1)
{
//Ako se stisne taster delete da se izbrise dobavljac
universal_dobavljac.addEventHandler(KeyEvent.KEY_PRESSED, (ee) ->{
if(ee.getCode() == KeyCode.DELETE)
{
//Potvrda za brisanje dobavljača
ButtonType da=new ButtonType("Da", ButtonBar.ButtonData.OK_DONE);
ButtonType ne=new ButtonType("Ne", ButtonBar.ButtonData.CANCEL_CLOSE);
Alert alert=new Alert(Alert.AlertType.CONFIRMATION,"Da li želite da obrišete "+dob.getNaziv_firme()+ " dobavljača?",da,ne);
alert.setHeaderText(null);
Optional<ButtonType> result=alert.showAndWait();
if(result.isPresent() && result.get() == da)
{
//brisanje iz tilepane
tilePane.getChildren().remove(universal_dobavljac);
//brisanje dobavljaca iz baze
try{
transaction=session.beginTransaction();
session.delete(dob);
transaction.commit();
}
catch(HibernateException ex)
{
if(transaction != null)
{
transaction.rollback();
}
}
Alert alertt=new Alert(Alert.AlertType.INFORMATION);
alertt.setHeaderText(null);
alertt.setContentText("Uspešno ste izbrisali "+dob.getNaziv_firme()+" dobavljača");
alertt.show();
}
}
});
////////////////
//THIS comments bellow don't works -> Path is good,I check at least hundred times
//universal_dobavljac.getStylesheets().add(getClass().getResource("Finansije/Dobavljaci/kada_je_selektovan_dobavljac.css").toExternalForm());
universal_dobavljac.setStyle("-fx-font-weight: bold; -fx-font-size: 36px; -fx-font-family: Book Antiqua; -fx-pref-width: 303px; -fx-pref-height: 230px; -fx-background-image: url(\"Finansije/icon_hover.png\"); -fx-background-color: transparent; -fx-cursor: hand");
universal_dobavljac.addEventHandler(MouseEvent.MOUSE_EXITED,(event) ->{
//universal_dobavljac.getStylesheets().add(getClass().getResource("Finansije/Dobavljaci/kada_je_selektovan_dobavljac.css").toExternalForm());
universal_dobavljac.setStyle("-fx-font-weight: bold; -fx-font-size: 36px; -fx-font-family: Book Antiqua; -fx-pref-width: 303px; -fx-pref-height: 230px; -fx-background-image: url(\"Finansije/icon_hover.png\"); -fx-background-color: transparent; -fx-cursor: hand");
});
}
The problem is down bellow.
Related
I want to customize the buttons, button container, backgroud color, the AlertType icon as well in an Alert Dialog.
Tried following these two solutions :
Styling default JavaFX Dialogs
Customize JavaFx Alert with css
I suppose the code from CSS that I have mentioned should be applicable to all the Alert dialog-pane ?
Not sure what am I missing here.
private static void createSimpleInformationDialog(String message){
Alert alert = createSimpleInformationAlert(message, AlertType.INFORMATION);
alert.getDialogPane().setHeaderText(StringTools.isNull(null, ""));
alert.getDialogPane().setMaxWidth(200);
alert.getDialogPane().setMinWidth(150);
alert.getDialogPane().setPadding(new Insets(0, 10, 0, 10));
alert.showAndWait();
}
private static Alert createSimpleInformationAlert(String message, AlertType type) {
Alert alert = new Alert(type);
alert.setTitle(Lang.get(Defs.FX_DIALOGS_EXCEPTIONS_GENERIC_TITLE));
alert.setContentText(message);
alert.initModality(Modality.APPLICATION_MODAL);
alert.initOwner(FXMain.getInstance().getStage());
return alert;
}
CSS file :
.dialog-pane{
-fx-border-color:black;
-fx-border-width:2.0px;
}
/**Costumization of The Bar where the buttons are located**/
.dialog-pane > .button-bar > .container {
-fx-background-color:black;
}
.dialog-pane > .content.label {
-fx-padding: 0.5em 0.5em 0.5em 0.5em;
-fx-background-color: yellow;
-fx-text-fill:black;
-fx-font-size:15.0px;
}
/**Costumization of DialogPane Header**/
.dialog-pane:header .header-panel {
-fx-background-color: black;
}
.dialog-pane:header .header-panel .label{
-fx-background-color: yellow;
-fx-background-radius:10px;
-fx-text-fill:black;
-fx-font-size:15.0px;
}
/**Costumization of Buttons**/
.dialog-pane .button{
-fx-background-color:black;
-fx-text-fill:white;
-fx-wrap-text: true;
-fx-effect: dropshadow( three-pass-box, yellow, 10.0, 0.0, 0.0, 0.0);
-fx-cursor:hand;
}
.dialog-pane .button:hover{
-fx-background-color:white;
-fx-text-fill:black;
-fx-font-weight:bold;
}
I am currently facing a problem with javafx table. I have a tableview that shows a list of subjects. The background color of each row depends if a subject is able to be enrolled or not. Subjects with green background can be enrolled and subjects with pink background cannot be enrolled. The problem occurs when scrolling the table.
TableView before scrolling
TableView after scrolling down and up
After scrolling, the background color of rows have changed and the subjects with green background might become pink and vice versa. This works perfectly without adding a css to the table.
Code I used to set the background color of rows
tblAvailableSubjects.setRowFactory((TableView<Subject> param) -> {
TableRow<Subject> row = new TableRow<>();
row.emptyProperty().addListener((obs, wasEmpty, isEmpty) -> {
if(isEmpty) {
row.setContextMenu(null);
row.setStyle("-fx-border-color: transparent");
} else {
Subject subject = row.getItem();
if(subject.getSubjectEvaluation().equals(SubjectEvaluation.COMPLETED)) {
row.setStyle("-fx-background: #B2EBF2");
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.FAILED)) {
row.setStyle("-fx-background: #FF0000");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.OKAY)) {
row.setStyle("-fx-background: #8BC34A");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.ENROLLWITHCOREQ)) {
row.setStyle("-fx-background: #FFEB3B");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.CANTENROLL)) {
row.setStyle("-fx-background: #FFCDD2");
}
}
});
return row;
});
CSS for table
.table-view {
/* Constants used throughout the tableview. */
-fx-table-header-border-color: transparent;
-fx-table-cell-border-color: -fx-box-border;
/* Horizontal Lines*/
-fx-background-color: transparent;
}
.table-view .filler, .table-view .column-header
{
-fx-size: 40;
-fx-border-style: null;
-fx-border-color: rgb(200.0, 200.0, 200.0);
-fx-border-width: 0 0 1 0;
-fx-background-color: transparent;
}
.table-view .show-hide-columns-button
{
-fx-background-color: transparent;
}
.table-view .column-header .label,
.table-view .column-drag-header .label
{
-fx-alignment: CENTER_LEFT;
}
.table-view .column-header-background
{
-fx-background-color: transparent;
}
.table-row-cell {
-fx-cell-size: 30px;
}
.table-cell {
-fx-border-color: transparent;
-fx-border-width: 1;
}
EDIT: The subject's SubjectEvaluation value doesn't change, it seems that it switches the context menu and background color between rows when scrolling.
I hope someone could help me with this. Thanks.
In using the FXVK virtual keyboard, I would like to alter the default skin to my own whims. The css tags I found in the source code of JavaFX. These were added to a custom css and loaded as seen below.
public static void setVirtualKeyboardCSS() {
#SuppressWarnings("deprecation")
final Iterator<Window> windows = Window.impl_getWindows();
while (windows.hasNext()) {
final Window window = windows.next();
if (window instanceof PopupWindow) {
if (window.getScene() != null && window.getScene().getRoot() != null) {
Parent root = window.getScene().getRoot();
if (root.getChildrenUnmodifiable().size() > 0) {
Node popup = root.getChildrenUnmodifiable().get(0);
if (popup.lookup(".fxvk") != null) {
if (popup instanceof FXVK) {
FXVK keyboard = (FXVK)popup.lookup(".fxvk") // reference to the vk skin
ObservableList<String> sheets = keyboard.getStylesheets();
sheets.add("#customVK.css");
System.out.println("Setting keyboard stylesheet");
}
}
}
}
}
}
}
When the keyboard is expected to be shown, the call is made to this function and the output is shown that the call has been made. The CSS however does not change the layout. Using keyboard.getScene().getStyleSheets() instead of keyboard.getStyleSheets() also provides no working alternative.
Your code worked a lot for me, but, your error was that you must to call "setVirtualKeyboardCSS" function after the focus event propagates through the app and after the FXVK SubWindow is completely rendered.
public static final int TICK = 5;
public void setTimer() {
timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
public void run() {
Platform.runLater(() -> {
setVirtualKeyboradCss();
});
}
}, TICK, TICK);
}
public void setVirtualKeyboradCss() {
#SuppressWarnings("deprecation")
final Iterator<Window> windows = Window.impl_getWindows();
while (windows.hasNext()) {
final Window window = windows.next();
if (window instanceof Popup) {
String vars = getClass().getResource("/css/variables.css").toExternalForm();
String embed = getClass().getResource("/css/embeded.css").toExternalForm();
FXVK keyboard = (FXVK) window.getScene().getRoot().lookup(".fxvk");
if (keyboard != null) {
if (!keyboard.getStylesheets().contains(embed)) {
keyboard.getStylesheets().addAll(vars, embed);
}
}
timer.cancel();
timer = null;
}
}
}
variables.css
#font-face {
-fx-font-family: "DINPro-Bold";
src: url('/fonts/DINPro-Bold.otf');
}
* {
-color-black: #303030;
-color-white: #FFFFFF;
-color-brownish-gray: #606060;
-color-yellow: #FCB400;
}
embeded.css
.fxvk {
-fx-background-color: -color-brownish-gray;
}
.fxvk .key{
-fx-font-family: "DINPro-Bold", "sans-serif";
-fx-border-image-source: null;
-fx-border-radius: 3;
-fx-background-radius: 3;
-fx-background-color: radial-gradient(center 50% 50%, radius 60%, derive(-color-white, -65%), -color-black);
}
.fxvk .key:hover{
-fx-background-color: -color-yellow;
}
.fxvk-secondary{
}
.shift-icon {
}
.capslock-icon{
}
.shift{
-fx-fill: -color-white;
}
.special {
-fx-fill: -color-white;
}
.backspace{
-fx-fill: -color-white;
}
.enter {
-fx-fill: -color-white;
}
.hide{
-fx-fill: -color-white;
}
.multi-char-text{
-fx-fill: -color-white;
}
.key-text {
-fx-fill: -color-white;
-fx-font-family: "DINPro-Bold", "sans-serif";
}
.key-alttext{
-fx-fill: -color-white;
-fx-font-family: "DINPro-Bold", "sans-serif";
}
.key-icon {
-fx-fill: -color-white;
}
.multi-char-text{
-fx-fill: -color-white;
}
I've set the following custom row factory:
treeTblViewFiles.setRowFactory(new Callback<TreeTableView<FileModel>, TreeTableRow<FileModel>>() {
#Override
public TreeTableRow<FileModel> call(TreeTableView<FileModel> treeTableView) {
final TreeTableRow<FileModel> row = new TreeTableRow<>();
final ContextMenu rowMenu = new ContextMenu();
MenuItem removeItem = new MenuItem("Remove");
removeItem.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent t) {
int currentPlaylistIndex = m_playlists.indexOf(row.getTreeItem().getParent().getValue());
boolean itemRemoved = false;
if (row.getItem().getClass().equals(Song.class)) {
itemRemoved = m_playlists.get(currentPlaylistIndex).getSongs().remove(row.getItem());
m_playlists.get(currentPlaylistIndex).updatePlaylist((Song) row.getItem());
} else if (row.getItem().getClass().equals(Playlist.class)) {
itemRemoved = m_playlists.remove(row.getTreeItem().getValue());
}
TreeItem<FileModel> treeItem = row.getTreeItem();
// may need to check treeItem.getParent() is not null:
treeItem.getParent().getChildren().remove(treeItem);
treeTblViewFiles.getSelectionModel().clearSelection();
if (MyApp.DEBUG) {
System.out.println(m_playlists.size());
if (currentPlaylistIndex > -1) {
System.out.println(m_playlists.get(currentPlaylistIndex).getSongs().size());
}
}
}
});
rowMenu.getItems().add(removeItem);
row.contextMenuProperty().bind(Bindings.when(Bindings.isNotNull(row.itemProperty()))
.then(rowMenu)
.otherwise((ContextMenu) null));
return row;
}
});
and in my css I have:
/******************
* ContextMenu
******************/
.context-menu{
-fx-background-color: transparent;
}
.context-menu .menu-item{
-fx-background-image: url("styles/cm_bg.png");
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-background-color: transparent;
}
.context-menu .menu-item .label{
-fx-text-fill: #ababab;
-fx-font-weight: normal;
-fx-font-size: 12pt;
}
The problem is that it doesn't show the entire image(which is 220x40) but only the width that suits the 'Remove' string. The right-most part is cut.
EDIT:
Simplified version(the same result goes for a contextMenu on a Label):
ContextMenu cm = new ContextMenu();
MenuItem mi = new MenuItem("Test");
cm.getItems().addAll(mi);
lblUploader.setContextMenu(cm);
Why is that happening and how to solve it?
Thanks in advance.
Problem solved with the following .css:
.context-menu {
-fx-background-color: transparent;
-fx-min-width: <image_width>;
-fx-min-height: <image_height>;
}
Just remember to set the preferred(or min) sizes.
I want to change the background colour of a custom TreeCell using CSS, but setting the style property on the tree cell doesn't work. I can style the tree with alternate yellow and grey cells with a CSS file that looks like this:
.tree-cell:disabled {
-fx-padding: 3 3 3 3;
-fx-background-color: white;
}
.tree-cell:selected {
-fx-background-color: blue;
}
.tree-cell:even {
-fx-background-color: yellow;
}
.tree-cell:odd {
-fx-background-color: grey;
}
.tree-cell:drag-over {
-fx-background-color: plum;
}
and change the fill style of the text with an event handler that looks like this:
onDragEntered = (event: DragEvent) => {
val db = event.getDragboard
if (db.hasContent(customFormat)) {
textFill = Color.DEEPSKYBLUE
style() = "tree-cell:drag-over"
}
event.consume()
}
but the style of the tree cells doesn't change.
I eventually found the answer to my own question. The CSS file now looks like this:
.tree-cell:disabled {
-fx-padding: 3 3 3 3;
-fx-background-color: white;
}
.tree-cell:selected {
-fx-background-color: blue;
}
.tree-cell:filled:even {
-fx-background-color: lightyellow;
}
.tree-cell:filled:odd {
-fx-background-color: lightsteelblue;
}
.tree-cell.drag-over:filled {
-fx-background-color: plum;
}
I now get a plum colour when dragging over a filled cell. Empty cells stay white.
In order to get here I needed to understand the rules of "CSS specificity", although it was eventually possible to simplify the finished CSS file to make each case exactly match one selector.
The ScalaFX code now looks like this:
import scala.collection.JavaConversions._
// Copy the list, so that it isn't modified in place.
var oldStyleClass: util.Collection[String] = styleClass.toList
onDragEntered = (event: DragEvent) => {
val db = event.getDragboard
if (db.hasContent(customFormat)) {
textFill = Color.DEEPSKYBLUE
// Remember the original style by taking a copy.
oldStyleClass = styleClass.toList
// Restyle filled cells with .tree-cell.dragover:filled
// for the duration of the drag
styleClass.add("drag-over")
}
event.consume()
}
onDragExited = (event: DragEvent) => {
val db = event.getDragboard
if (db.hasContent(customFormat)) {
textFill = Color.BLACK
}
// Restore the original style.
styleClass.setAll(oldStyleClass)
event.consume()
}
Somewhere along the way I lost the animation for a failed drop. Otherwise I'm happy (but somewhat lonely in ScalaFX-land.)