So I've a method that focuses the table row based on the row index. However, the default background color of the focused row is grey, which is not easily visible. I want to change this color to steelblue. Please suggest how to do it. Below is my code for the method.
public static void focusTableRow(TableView table, int rowIndex){
table.requestFocus();
table.getSelectionModel().select(rowIndex);
table.getFocusModel().focus(rowIndex);
table.scrollTo(rowIndex);
}
To style the rows, Add CSS in the external CSS file :
.table-row-cell:selected {
-fx-background: steelblue;
}
Update:
Save the content of this style in a rowStyles.css. then you have to add the URL for the rowStyles.css style sheet to the scene:
scene.getStylesheets().add(getClass().getResource("rowStyles.css").toExternalForm());
Related
I'm trying to remove the down arrow from a combobox. All the solutions I have found just make the arrow disappear, for example this one.
Is there a way to remove completely the space where the arrow appears and fill the box just with the text of the selected choice?
If you want to completely elimnate the arrow & arrow button space, you can try with the below custom ComboBox.
The below code is setting the arrow button and arrow nodes size to 0 and asking to rerender the comboBox. The null check is to let this changes apply only once.
public class MyComboBox<T> extends ComboBox<T>{
Region arrowBtn ;
#Override
protected void layoutChildren() {
super.layoutChildren();
if(arrowBtn==null){
arrowBtn= (Region)lookup(".arrow-button");
arrowBtn.setMaxSize(0,0);
arrowBtn.setMinSize(0,0);
arrowBtn.setPadding(new Insets(0));
Region arrow= (Region)lookup(".arrow");
arrow.setMaxSize(0,0);
arrow.setMinSize(0,0);
arrow.setPadding(new Insets(0));
// Call again the super method to relayout with the new bounds.
super.layoutChildren();
}
}
}
UPDATE :
Based on the suggestion of #kleopatra, we can get the same behaviour using css as well (without the need to create a new class for ComboBox).
.combo-box .arrow-button,
.combo-box .arrow{
-fx-max-width:0px;
-fx-min-width:0px;
-fx-padding:0px;
}
The below image will tell you the difference of a normal combox box and this custom combo box. The left one is the normal comboBox, you can see the list cell when inspecting with ScenicView. The right one is the custom one. The list cell is completely occupied suppressing the arrow space.
I've created a small text editor window that allows the user to change some basic properties of a text area included within the screen. Two of the options available to change the properties of the textArea are font color and font color fill, which are both handled by separate color pickers.
I ran into an issue when testing these buttons using the setStyle method that only one property could be saved at a time. Example, if text color was set to BLUE, and afterwards fill color was set to YELLOW, text color would not remain blue, but instead revert back to its default defined in the stylesheet (black).
To fix this problem, I have created the following method;
private void updateTheSyle()
{
this.textArea.setStyle("-fx-control-inner-background: " + toRgbString(this.colorPickerFill.getValue()) +
"; -fx-text-fill: " + toRgbString(this.colorPickerFont.getValue()) + ";");
}
The toRgbString() method is also called, this is simply passing the user input from the color picker into a string such that the setStyle method can pass the correct parameters to the stylesheet.
This solution does work, as it enables me to change both the fill and the font color without reverting back to default upon selection. However, my program includes more than just fill and font color, which will contribute to a far longer setStyle statement as these options are added.
TLDR: Is there a way to edit a single style included in a CSS stylesheet without affecting the other styles in a given class?
For your first question (longer setStyle statement), If we take into account that the style is defined by a String, and it takes a whole set of details to provide for a single Style, so why not use a List<String> :
List<String> example = new ArrayList<>();
String style = "";
//For example if you use 2 textField to get the (value) and (type):
example.add("-fx-"+textFieldType+":"+textFieldValue + "; ");
//To gather all the properties in a single string
for(String property: example){
style += example;
}
yourNode.setStyle(style);
I do not know if there is a better approach but it works, good luck !
Edit :
I think this tip answers your second question:
private void Update(String type,String newValue){
for(int i = 0; i < example.size(); i++){
if(example.get(i).contains(type)){
example.set(i, "-fx-"+type+":"+newValue + "; ");
//Here you add a (break;) to not alter the other similar styles !
}
}
//Here you use a loop to update the new elements changed
}
I hope this will help you solve your problem !
I have a TableView clear.
I have an button1, when I click this I added a row in my tableView and I select the row. This row is in red by the line css :
.table-row-cell:selected {-fx-background-color: red;}
Next, I have a button2, and I would like that when I click on the button2, the background color on my row selected change in blue.
Help me.
Thanks.
add this code into your .css file:
#blue_cell .table-row-cell:selected{
-fx-background-color: blue;
}
then add this into your java file
button2.setOnAction(e -> productsTable.setId("blue_cell"));
You have many ways for changing the values of properties in css from java code.
You can define a look-up color in css and use setStyle() method in java like that :
.table-view {
-selected-color:red;
}
.table-row-cell:selected{
-fx-background-color: -selected-color;
}
Then use setStyle() method :
button2.setOnAction(e -> table.setStyle("-selected-color:blue;"));
I have a JavaFX TableView and a ListView and they both use custom cell factories. In particular I have overridden updateItem method in order to bind a particular CSS class based on cell value.
This is part of my CSS file:
.tissueCell {
-fx-text-fill: #F5AD11;
}
.tissueCell:selected {
-fx-background-color: #F5AD11;
-fx-text-fill: white;
}
.significantDataCell {
-fx-background-color: yellow;
-fx-text-fill: black;
}
.significantDataCell:selected {
-fx-background-color: white;
-fx-text-fill: black;
}
For the ListView everything work flawlessly: text is displayed with the proper colour and when the cell is selected the text becomes white and the background is filled with proper colour.
I am experiencing problems with the TableView instead. When unselected the text in the cell is displayed with the chosen colour, but when the cell is selected the background is filled with default JavaFX colour for selected table cells background and the text colour remains #F5AD11 (it does not become white).
The same happens with TableCells that use .significantDataCell class. Cells are displayed properly with yellow background and black text, but when selected nothing changes, not event the background this time.
Any ideas? I did a lot of research but couldn't find any working solution.
By default, TableViews do not allow selection of individual cells, but allow selection of rows. Thus the selector .table-cell:selected never matches any cell in the default selection mode. In this case, you would need
.table-row-cell:selected .table-cell {
/* style definitions */
}
or in your scenario
.table-row-cell:selected .tissue-cell {
-fx-background-color: #F5AD11;
-fx-text-fill: white;
}
etc.
If you allow the table to use cell selection, by calling
myTableView.setCellSelectionEnabled(true);
then individual cells become selected on mouse click (etc), and so your original CSS will work.
I need to use textarea in my program and I also need it to be read-only.
This is part of my main program where I create textArea:
final TextArea ta = new TextArea();
ta.setMaxSize(9*x, 7*x);
ta.setId("textarea");
ta.setTranslateX(x);
ta.setTranslateY(2*x);
ta.setDisable(true);
This is part of my css file:
#textarea {
-fx-font: 13px "Serif";
-fx-background-color: BEIGE;
}
If I delete the row: ta.setDisable(true); Css works like I want it to work. But after I set disable true, it just makes the textarea transparent, which makes the text really hard to read and the background color is not excatly what I want too.
Is there any other way to set text readonly? Or is there a way to use css after disable. I really need it to be TextArea not Label or any other type. Thank you in advance.
If you do not want the user to make changes to the textarea use the setEditable(boolean) method to false. The same method exists for most editable nodes in javafx(Textfield and PasswordField).