Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaFX TableView
.root{
-bg-gradient: linear-gradient(from 25px 25px to 500px 300px, #a1ffce, #faffd1);
-hlight-gradient: linear-gradient(to bottom, #1dbbdd44, #93f9b944);
-primary: #81c48355;
-secondary: #375FCB;
-tertiary: #fcc200;
-tertiary-armed: #FDDD71;
}
.background-pane{
-fx-background-color: -bg-gradient;
-fx-padding: 10px 15px;
-fx-background-radius: 10px;
}
.shadow-pane{
-fx-background-color: transparent;
-fx-padding: 10px;
}
.content-pane{
-fx-background-color: #ffffff22;
-fx-background-radius: 10px;
-fx-spacing: 35px;
-fx-padding: 25px;
-fx-alignment: center;
}
.transparent{
-fx-background-color: transparent;
}
.highlight-rectangle{
-fx-background-color: derive(-primary, 50%);
-fx-background-radius: 5px;
}
.label{
-fx-text-fill: #686868ff;
}
.transparent-background{
-fx-background-color: transparent;
}
.transparent-background > .viewport{
-fx-background-color: transparent;
}
.drag-allowed{
-fx-background-color: linear-gradient(from 25px 25px to 500px 300px, #0052D4, #4364F7);
-fx-background-radius: 10px;
}
.title-text{
-fx-text-fill: #375FCB ;
-fx-font-weight: bold;
-fx-font-size: 14;
}
.app-text{
-fx-text-fill: #375FCB;
-fx-font-style: italic;
-fx-font-size: 14;
}
.error-label{
-fx-text-fill: #375FCB ;
-fx-font-weight: bold;
-fx-font-size: 14;
-fx-background-color: linear-gradient(to right, #0f0c2977, #302b6377, #24243e77);
-fx-background-radius: 10px;
-fx-padding: 10px;
-fx-alignment: center;
-width: 350;
-fx-min-width: -width;
-fx-max-width: -width;
}
.button{
-height: 20;
-width: 20;
-fill: white;
-fx-background-color: -fill;
-fx-min-height: -height;
-fx-min-width: -width;
-fx-max-height: -height;
-fx-max-width: -width;
}
.button:hover {
-fill: -tertiary;
}
.button:armed {
-fill: -tertiary-armed;
}
.exit-button {
-height: 16;
-width: 16;
-fill: -secondary;
-fx-shape: "M247.244,169.59l83.938-83.938c5.332-5.327,7.994-11.798,7.994-19.414c0-7.614-2.669-14.084-7.994-19.414L292.355,7.993 C287.026,2.665,280.556,0,272.944,0c-7.617,0-14.085,2.665-19.417,7.993L169.59,91.931L85.651,7.993 C80.325,2.665,73.854,0,66.237,0c-7.611,0-14.083,2.665-19.414,7.993L7.994,46.824C2.667,52.15,0,58.624,0,66.238 c0,7.616,2.664,14.084,7.994,19.414l83.937,83.938L7.994,253.528C2.667,258.859,0,265.327,0,272.945 c0,7.61,2.664,14.082,7.994,19.41l38.83,38.828c5.33,5.332,11.803,7.994,19.414,7.994c7.616,0,14.084-2.669,19.414-7.994 l83.939-83.938l83.944,83.938c5.328,5.332,11.793,7.994,19.417,7.994c7.611,0,14.082-2.669,19.411-7.994l38.82-38.828 c5.332-5.324,7.994-11.8,7.994-19.41c0-7.618-2.662-14.086-7.994-19.417L247.244,169.59z";
}
.exit-button:hover{
-fill: red;
}
.background-pane{
-fx-background-color: -bg-gradient;
-fx-padding: 10px 15px;
-fx-background-radius: 10px;
}
.shadow-pane{
-fx-background-color: transparent;
-fx-padding: 10px;
}
.content-pane{
-fx-background-color: #ffffff22;
-fx-background-radius: 10px;
-fx-spacing: 35px;
-fx-padding: 25px;
-fx-alignment: center;
}
.label{
-fx-text-fill: #686868ff;
}
.transparent-background{
-fx-background-color: transparent;
}
.transparent-background > .viewport{
-fx-background-color: transparent;
}
.drag-allowed{
-fx-background-color: linear-gradient(from 25px 25px to 500px 300px, #0052D4, #4364F7);
-fx-background-radius: 10px;
}
.title-text{
-fx-text-fill: #375FCB ;
-fx-font-weight: bold;
-fx-font-size: 14;
}
.app-text{
-fx-text-fill: #375FCB;
-fx-font-style: italic;
-fx-font-size: 14;
}
.error-label{
-fx-text-fill: #375FCB ;
-fx-font-weight: bold;
-fx-font-size: 14;
-fx-background-color: linear-gradient(to right, #0f0c2977, #302b6377, #24243e77);
-fx-background-radius: 10px;
-fx-padding: 10px;
-fx-alignment: center;
-width: 350;
-fx-min-width: -width;
-fx-max-width: -width;
}
.button{
-height: 12px;
-width: 12px;
-fill: white;
-fx-background-color: -fill;
-fx-min-height: -height;
-fx-min-width: -width;
-fx-max-height: -height;
-fx-max-width: -width;
}
.button:hover {
-fill: -tertiary;
}
.button:armed {
-fill: -tertiary-armed;
}
.exit-button {
-fill: -secondary;
-fx-shape: "M247.244,169.59l83.938-83.938c5.332-5.327,7.994-11.798,7.994-19.414c0-7.614-2.669-14.084-7.994-19.414L292.355,7.993 C287.026,2.665,280.556,0,272.944,0c-7.617,0-14.085,2.665-19.417,7.993L169.59,91.931L85.651,7.993 C80.325,2.665,73.854,0,66.237,0c-7.611,0-14.083,2.665-19.414,7.993L7.994,46.824C2.667,52.15,0,58.624,0,66.238 c0,7.616,2.664,14.084,7.994,19.414l83.937,83.938L7.994,253.528C2.667,258.859,0,265.327,0,272.945 c0,7.61,2.664,14.082,7.994,19.41l38.83,38.828c5.33,5.332,11.803,7.994,19.414,7.994c7.616,0,14.084-2.669,19.414-7.994 l83.939-83.938l83.944,83.938c5.328,5.332,11.793,7.994,19.417,7.994c7.611,0,14.082-2.669,19.411-7.994l38.82-38.828 c5.332-5.324,7.994-11.8,7.994-19.41c0-7.618-2.662-14.086-7.994-19.417L247.244,169.59z";
}
.exit-button:hover{
-fill: red;
}
/* TABLES */
.table-view,
.table-view .column-header,
.table-view .column-header-background .filler,
.table-view .corner {
-fx-background-color: transparent;
}
.table-view .column-header-background{
-fx-background-color: -hlight-gradient;
-fx-background-radius: 7px 7px 0px 0px;
-fx-background-insets: 0 11px 0 0;
-fx-padding: 0 0 5px 0;
}
.table-view .table-cell{
-fx-border-color: transparent;
-fx-padding: 2 0 2 10px;
}
.table-row-cell:hover {
-fx-background-color: #93f9b911;
-fx-text-background-color: -tertiary;
}
.table-row-cell:odd{
-fx-background-color: #93f9b911;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em;
}
.table-row-cell:even{
-fx-background-color: #1dbbdd11;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em;
}
.table-row-cell: highlighted {
-fx-background-color: -primary;
-fx-background-radius: 5px;
-fx-background-insets: 2px;
}
.table-row-cell: selected {
-fx-background-color: -tertiary;
-fx-text-background-color: white;
-fx-background-radius: 5px;
-fx-background-insets: 2px;
}
.table-view .virtual-flow .scroll-bar:vertical,
.table-view .virtual-flow .scroll-bar:vertical .track,
.table-view .virtual-flow .scroll-bar:vertical .track-background,
.table-view .virtual-flow .scroll-bar:horizontal,
.table-view .virtual-flow .scroll-bar:horizontal .track,
.table-view .virtual-flow .scroll-bar:horizontal .track-background {
-fx-background-color: transparent;
}
.table-view .virtual-flow .scroll-bar:vertical .thumb{
-fx-background-color: -hlight-gradient;
}
.table-view .virtual-flow .scroll-bar:horizontal .thumb {
-fx-background-color: linear-gradient(to right, #1dbbdd44, #93f9b944);
}
.table-view .virtual-flow .scroll-bar .increment-button,
.table-view .virtual-flow .scroll-bar .decrement-button {
-fx-opacity: 0;
-fx-padding: 2;
}
package com.edencoding;
import javafx.animation.PauseTransition;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.util.Duration;
public class StyledTableView extends Application {
private double xOffset;
private double yOffset;
@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("/fxml/MainView.fxml"));
root.setOnMousePressed(event -> {
xOffset = event.getSceneX();
yOffset = event.getSceneY();
event.consume();
});
root.setOnMouseDragged(event -> {
primaryStage.setX(event.getScreenX() - xOffset);
primaryStage.setY(event.getScreenY() - yOffset);
event.consume();
});
Scene scene = new Scene(root);
scene.getRoot().setEffect(new DropShadow(10, Color.rgb(100, 100, 100)));
scene.setFill(Color.TRANSPARENT);
primaryStage.setScene(scene);
primaryStage.initStyle(StageStyle.TRANSPARENT);
primaryStage.getIcons().add(new Image(getClass().getResourceAsStream("/img/EdenCodingIcon.png")));
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
package com.edencoding.controllers;
import com.edencoding.models.ToastContainer;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.input.DragEvent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.TransferMode;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;
public class MainViewController implements Initializable {
public TableView<Order> exampleTable;
public TableColumn<Order, Integer> orderIdColumn;
public TableColumn<Order, String> stateColumn;
public TableColumn<Order, String> cityColumn;
@Override
public void initialize(URL location, ResourceBundle resources) {
orderIdColumn.setCellValueFactory(cellData -> cellData.getValue().idProperty().asObject());
stateColumn.setCellValueFactory(cellData -> cellData.getValue().stateProperty());
cityColumn.setCellValueFactory(cellData -> cellData.getValue().cityProperty());
List<Order> orders = new ArrayList<>();
orders.add(new Order(1, "New York", "New York")); //8,323,340
orders.add(new Order(2, "Colorado", "Denver"));
orders.add(new Order(3, "Missouri", "Kansas City"));
orders.add(new Order(4, "Nebraska", "Custer"));
orders.add(new Order(5, "Iowa", "Black Hawk"));
orders.add(new Order(6, "Nevada", "Las Vegas"));
orders.add(new Order(7, "California", "San Diego")); //1.54m
orders.add(new Order(8, "Illinois", "Chicago")); //2.2m
orders.add(new Order(9, "Massachusetts", "Boston")); //4.3m
orders.add(new Order(10, "Vermont", "Montpellier"));
orders.add(new Order(11, "Revelstoke", "Alberta"));
orders.add(new Order(12, "Winnipeg", "Manitoba"));
orders.add(new Order(13, "Terrace", "British Colombia"));
ObservableList<Order> ol = FXCollections.observableArrayList(orders);
exampleTable.setItems(ol);
PseudoClass higlighted = PseudoClass.getPseudoClass("highlighted");
exampleTable.setRowFactory(tableView -> {
TableRow<Order> row = new TableRow<>();
row.itemProperty().addListener((obs, oldOrder, newOrder) ->
row.pseudoClassStateChanged(higlighted,
newOrder.getCity().equals("New York") ||
newOrder.getCity().equals("Boston")));
return row;
});
}
@FXML
private void handleExitButtonClicked(ActionEvent event) {
Platform.exit();
event.consume();
}
public static class Order {
IntegerProperty id;
StringProperty state;
StringProperty city;
public Order(Integer id, String state, String city) {
this.id = new SimpleIntegerProperty(id);
this.state = new SimpleStringProperty(state);
this.city = new SimpleStringProperty(city);
}
public int getId() {
return id.get();
}
public void setId(int id) {
this.id.set(id);
}
public IntegerProperty idProperty() {
return id;
}
public String getState() {
return state.get();
}
public void setState(String state) {
this.state.set(state);
}
public StringProperty stateProperty() {
return state;
}
public String getCity() {
return city.get();
}
public void setCity(String city) {
this.city.set(city);
}
public StringProperty cityProperty() {
return city;
}
}
}
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<BorderPane prefHeight="400.0" prefWidth="500.0" styleClass="shadow-pane" stylesheets="@../css/application.css" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.edencoding.controllers.MainViewController">
<center>
<VBox id="dragTarget" spacing="10" styleClass="background-pane">
<HBox alignment="CENTER">
<padding>
<Insets right="5" top="2" />
</padding>
<HBox>
<ImageView>
<Image url="@../img/EdenCodingHeader_Small.png" />
</ImageView>
</HBox>
<HBox id="right-icons" alignment="CENTER_RIGHT" spacing="10" HBox.hgrow="ALWAYS">
<Button onAction="#handleExitButtonClicked" styleClass="exit-button" />
</HBox>
</HBox>
<VBox>
<TableView fx:id="exampleTable">
<columns>
<TableColumn fx:id="orderIdColumn" editable="false" text="OrderId" />
<TableColumn editable="false" text="Location">
<columns>
<TableColumn fx:id="stateColumn" text="State" />
<TableColumn fx:id="cityColumn" text="City" />
</columns>
</TableColumn>
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
</TableView>
</VBox>
</VBox>
</center>
</BorderPane>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment