For a Button, I can set a Tooltip via
<Button>
<tooltip>
<Tooltip text="Tooltip text" />
</tooltip>
</Button>
How can I do the same/ similar for a TableColumn?
<TableColumn>
<cellValueFactory>
<PropertyValueFactory property="someProperty" />
</cellValueFactory>
<tooltip>
<Tooltip text="Tooltip text" />
</tooltip>
</TableColumn>
Does not work..
Assuming you want a tooltip on the column header, one way is to set a graphic on the TableColumn instead of setting text, and to set the tooltip on the graphic.
I.e. instead of:
<TableColumn text="Column 1">
<cellValueFactory>
<PropertyValueFactory property="someProperty" />
</cellValueFactory>
</TableColumn>
you can do
<TableColumn>
<cellValueFactory>
<PropertyValueFactory property="someProperty" />
</cellValueFactory>
<graphic>
<Label text="Column 1">
<tooltip>
<Tooltip text="Tooltip text" />
</tooltip>
</Label>
</graphic>
</TableColumn>
Note that this has some side-effects. For example, the table view has a menu button that controls the visibility of the columns. This is populated by menu items whose text is the text of the column: so using this technique will make that menu button unusable. Creating a table column with a tooltip while preserving the table column's text value requires some CSS hackery.
Related
I tried to change my font-color in the choicebox , but all the anwer I found is change the label inside . I don't know how do I change font-color with this...
This is my fxml with choicebox↓
<ChoiceBox fx:id="capacity_box1" layoutX="43.0" layoutY="113.0" prefHeight="39.0" prefWidth="193.0" styleClass="choiceBox">
<items>
<FXCollections fx:factory="observableArrayList">
<fx:reference source="list.millilitre" />
<fx:reference source="list.cubiccentermeter" />
<fx:reference source="list.litre" />
<fx:reference source="list.cubicmeter" />
<fx:reference source="list.Teaspoon" />
<fx:reference source="list.Tablespoon" />
<fx:reference source="list.gallon" />
<fx:reference source="list.cubicinch" />
<fx:reference source="list.cubicfoot" />
</FXCollections>
</items>
</ChoiceBox>
Hi I do believe that I'm providing a better solution
in your CSS file create the following
.choice-box .menu-item .label {
-fx-text-fill: WHITE;
}
Is there a way to make labels contained in an HBox ignore the graphic when aligned to baseline?
I'm trying to align the labels using their text. What I get instead is that the label with graphics is aligned with a vertical offset with regard to the other labels in a row:
<HBox alignment="BASELINE_LEFT" fillHeight="false">
<children>
<Button text="Button" />
<Label text="Label" />
<Button text="Button">
<font><Font size="12.0" /></font>
<graphic>
<Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="15.0" stroke="BLACK" strokeType="INSIDE" width="15.0" />
</graphic>
</Button>
</children>
</HBox>
Is it possible to get a resizing TableView in FXML, where each columns resizes itself relatively?
I know it's possible in code, but I'm specifically looking for an FXML approach.
This is the current approach:
<BorderPane xmlns:fx="http://javafx.com/fxml">
<fx:define>
<Double fx:id="tableViewWidth" fx:value="600"/>
</fx:define>
<center>
<TableView fx:id="expensesTableView" editable="true" prefWidth="${tableViewWidth}">
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
<columns>
<TableColumn text="Title" prefWidth="${tableViewWidth * 3}">
<cellValueFactory>
<PropertyValueFactory property="title" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Category" prefWidth="${tableViewWidth * 3}">
<cellValueFactory>
<PropertyValueFactory property="category" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Period" prefWidth="${tableViewWidth * 2}">
<cellValueFactory>
<PropertyValueFactory property="period" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Value" prefWidth="${tableViewWidth * 2}">
<cellValueFactory>
<PropertyValueFactory property="value" />
</cellValueFactory>
</TableColumn>
</columns>
</TableView>
</center>
</BorderPane>
The multiply-part doesn't seem to work.
You need to remove the resize policy and also bind to the width of the TableView instead to some double constant.
Furthermore some of the expressions used for the binding are syntactically wrong...
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.cell.*?>
<BorderPane xmlns:fx="http://javafx.com/fxml">
<center>
<TableView fx:id="expensesTableView" editable="true" prefWidth="600">
<columns>
<TableColumn text="Title" prefWidth="${expensesTableView.width*0.3}">
<cellValueFactory>
<PropertyValueFactory property="title" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Category" prefWidth="${expensesTableView.width*0.3}">
<cellValueFactory>
<PropertyValueFactory property="category" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Period" prefWidth="${expensesTableView.width*0.2}">
<cellValueFactory>
<PropertyValueFactory property="period" />
</cellValueFactory>
</TableColumn>
<TableColumn text="Value" prefWidth="${expensesTableView.width*0.2}">
<cellValueFactory>
<PropertyValueFactory property="value" />
</cellValueFactory>
</TableColumn>
</columns>
</TableView>
</center>
</BorderPane>
I'm trying to resize two tables in an anchor panel when the stage is maximized to have the same proportion as the default stage sizes.
Now I have that:
http://i.imgur.com/Z6Lywhr.png
But when is maximized there is a lot of space between them:
http://i.imgur.com/NZa5wY0.png
I have been searching and I found answers to similar questions saying wrap-in a grid panel but even like that I cannot do it:
JavaFX tableview resize to fit window
Someone know what is missing here?
Code fxml:
<AnchorPane styleClass="backgroundColor" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="solverassistant.FXMLCompareController">
<children>
<AnchorPane prefHeight="270" prefWidth="190.0" styleClass="filterPane" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="40.0">
<children>
<Label id="filterLabel" fx:id="filterLabel" alignment="CENTER" prefHeight="17.0" prefWidth="150.0" text="Filter" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="10.0" />
<TextField id="filterTextField" fx:id="filterTextField" alignment="CENTER" layoutY="20.0" prefWidth="150.0" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="30.0" />
<Label id="filterByLabel" fx:id="filterByLabel" alignment="CENTER" prefHeight="17.0" prefWidth="150.0" text="Filter by:" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="70.0" />
<CheckBox id="solverCheckBox" fx:id="solverCheckBox" layoutY="90.0" selected="true" text="Solver" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="100.0" />
<CheckBox id="benchmarkCheckBox" fx:id="benchmarkCheckBox" layoutY="110.0" selected="true" text="Benchmark" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="120.0" />
<CheckBox id="typeCheckBox" fx:id="typeCheckBox" layoutY="130.0" selected="true" text="Solver type" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="140.0" />
<CheckBox id="timeOutCheckBox" fx:id="timeOutCheckBox" layoutY="150.0" selected="true" text="Time out" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="160.0" />
<CheckBox id="memoryCheckBox" fx:id="memoryCheckBox" layoutY="170.0" selected="true" text="Memory" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="180.0" />
<CheckBox id="coresCheckBox" fx:id="coresCheckBox" layoutY="190.0" selected="true" text="Number of cores" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="200.0" />
<CheckBox id="wholeWordCheckBox" fx:id="wholeWordCheckBox" layoutY="190.0" selected="false" text="Whole word" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="220.0" />
</children>
</AnchorPane>
<Button id="reloadButton" fx:id="reloadButton" onAction="#resetAndReloadSolvers" prefHeight="25.0" prefWidth="190.0" styleClass="button-defaultButton" text="Reset and reload data" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="320.0" />
<Button id="compareButton" fx:id="compareButton" disable="true" prefHeight="25.0" prefWidth="150.0" styleClass="button-defaultButton" text="Compare" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="40.0" />
<TableView id="allSolversTable" fx:id="allSolversTable" minHeight="-Infinity" prefHeight="175.0" prefWidth="922.0" AnchorPane.leftAnchor="245.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="40.0">
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
<columns>
<TableColumn fx:id="colAllSelect" prefWidth="25.0" />
<TableColumn fx:id="colAllSolver" prefWidth="75.0" text="Solver" />
<TableColumn fx:id="colAllBenchmark" prefWidth="75.0" text="Benchmark" />
<TableColumn fx:id="colAllSolverType" prefWidth="75.0" text="Solver type" />
<TableColumn fx:id="colAllTimeOut" prefWidth="75.0" text="Time out" />
<TableColumn fx:id="colAllMemory" prefWidth="75.0" text="Memory" />
<TableColumn fx:id="colAllNumberOfCores" prefWidth="75.0" text="Number of cores" />
</columns>
</TableView>
<TableView id="selectedSolversTable" fx:id="selectedSolversTable" minHeight="-Infinity" prefHeight="175.0" prefWidth="922.0" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="245.0" AnchorPane.rightAnchor="0.0">
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
<columns>
<TableColumn fx:id="colSelectedSolver" prefWidth="75.0" text="Solver" />
<TableColumn fx:id="colSelectedBenchmark" prefWidth="75.0" text="Benchmark" />
<TableColumn fx:id="colSelectedSolverType" prefWidth="75.0" text="Solver type" />
<TableColumn fx:id="colSelectedTimeOut" prefWidth="75.0" text="Time out" />
<TableColumn fx:id="colSelectedMemory" prefWidth="75.0" text="Memory" />
<TableColumn fx:id="colSelectedNumberOfCores" prefWidth="75.0" text="Number of cores" />
</columns>
</TableView>
</children>
</AnchorPane>
All project : github.com/danielcasanovas/SolverAssistant
One easy thing you could do is just wrap both tables in a VBox, let the first table have vertical grow priority set as ALWAYS and set USE_COMPUTE_SIZE in all the min/pref/max size fields. The second table could be as it was (so only the first one will be resized).
This is the affected part of the FXML file:
<VBox spacing="40.0" AnchorPane.bottomAnchor="40.0" AnchorPane.leftAnchor="245.0" AnchorPane.rightAnchor="40.0" AnchorPane.topAnchor="40.0">
<children>
<TableView id="allSolversTable" fx:id="allSolversTable" VBox.vgrow="ALWAYS">
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
<columns>
<TableColumn fx:id="colAllSelect" prefWidth="25.0" />
<TableColumn fx:id="colAllSolver" prefWidth="75.0" text="Solver" />
<TableColumn fx:id="colAllBenchmark" prefWidth="75.0" text="Benchmark" />
<TableColumn fx:id="colAllSolverType" prefWidth="75.0" text="Solver type" />
<TableColumn fx:id="colAllTimeOut" prefWidth="75.0" text="Time out" />
<TableColumn fx:id="colAllMemory" prefWidth="75.0" text="Memory" />
<TableColumn fx:id="colAllNumberOfCores" prefWidth="75.0" text="Number of cores" />
</columns>
</TableView>
<TableView id="selectedSolversTable" fx:id="selectedSolversTable" prefHeight="175.0">
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
<columns>
<TableColumn fx:id="colSelectedSolver" prefWidth="75.0" text="Solver" />
<TableColumn fx:id="colSelectedBenchmark" prefWidth="75.0" text="Benchmark" />
<TableColumn fx:id="colSelectedSolverType" prefWidth="75.0" text="Solver type" />
<TableColumn fx:id="colSelectedTimeOut" prefWidth="75.0" text="Time out" />
<TableColumn fx:id="colSelectedMemory" prefWidth="75.0" text="Memory" />
<TableColumn fx:id="colSelectedNumberOfCores" prefWidth="75.0" text="Number of cores" />
</columns>
</TableView>
</children>
</VBox>
Without further changes in your main fxml file, the table should resize properly after any resize of the application.
I want to change the background color of the menu-button in toolbarbutton.
I applied the following code but it was not working.
<toolbarbutton id="search" background-color="red" type="menu-button" label="Search" width="83" height="25" oncommand="webSearch();event.stopPropagation();">
<menupopup>
<menuitem label="Web" value="webs" onclick="webSearch();event.stopPropagation();"/>
<menuitem label="Images" value="images" onclick="imageSearch();event.stopPropagation();"/>
<menuitem label="News" value="news" onclick="newsSearch();event.stopPropagation();"/>
<menuitem label="Video" value="videos" onclick="videoSearch();event.stopPropagation();"/>
</menupopup>
</toolbarbutton>
You should use CSS:
<toolbarbutton style="background-color: red;">
I don't think you can have background color of the button. Please check with this, you can change the color of the text not the button color.
I would suggest you to have a customized toolbar button.
https://developer.mozilla.org/en/custom_toolbar_button
https://developer.mozilla.org/en/XUL/toolbarbutton
The above links will help you to fix your problem.
<toolbar>
<toolbarbutton label="Checkbox Type" type="checkbox" image="firefox.png"/>
<toolbarbutton label="Menu Type" type="menu" popup="button-popup" style="font: bold 11px Verdana, sans-serif !important; color:#327DC7; background-color=#327DC7;" />
<toolbarbutton label="Menu Button Type" type="menu-button" popup="button-popup" image="firefox.png"/>
<menupopup id="button-popup">
<menuitem label="Item 1"/>
<menuitem label="Item 2"/>
<menuitem label="Item 3"/>
</menupopup>
</toolbar>
To know more about the toolbar menu button CSS features, you can check the Firefox dafult settings in the installation directory in your system. For example, like this:
jar:file:///C:/Program%20Files/Mozilla%20Firefox/chrome/classic.jar!/skin/classic/global/toolbarbutton.css