Вот мой пример использования awesome Java 8 Functionality и расширения класса TableCell.
Позвольте мне дать краткое объяснение того, что я делаю: я создал класс ActionButtonTableCell, который расширяет TableCell. И затем вы можете использовать java 8 lamda-функции для создания Action для кнопки.
import java.util.function.Function;
import javafx.event.ActionEvent;
import javafx.scene.control.Button;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.util.Callback;
public class ActionButtonTableCell<S> extends TableCell<S, Button> {
private final Button actionButton;
public ActionButtonTableCell(String label, Function< S, S> function) {
this.getStyleClass().add("action-button-table-cell");
this.actionButton = new Button(label);
this.actionButton.setOnAction((ActionEvent e) -> {
function.apply(getCurrentItem());
});
this.actionButton.setMaxWidth(Double.MAX_VALUE);
}
public S getCurrentItem() {
return (S) getTableView().getItems().get(getIndex());
}
public static <S> Callback<TableColumn<S, Button>, TableCell<S, Button>> forTableColumn(String label, Function< S, S> function) {
return param -> new ActionButtonTableCell<>(label, function);
}
@Override
public void updateItem(Button item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setGraphic(null);
} else {
setGraphic(actionButton);
}
}
}
Реализация тогда проста, как это, Это кнопка выбора, чтобы удалить элемент из таблицы:
column.setCellFactory(ActionButtonTableCell.<Person>forTableColumn("Remove", (Person p) -> {
table.getItems().remove(p);
return p;
}));
Вы можете использовать flexbox для равномерного размещения каждого навигационного элемента:
.navbar-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
.navbar-nav {
display: flex;
justify-content: space-between;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
<ul class="navbar-nav">
<li class="nav-item"><a href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a></li>
<li class="nav-item"><a href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a></li>
<li class="nav-item"><a href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a></li>
<li class="nav-item"><a href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a></li>
</ul>
</nav>
Проще, чем я думал, без необходимости переопределять CSS BS4. Я изменил навигационную панель для использования разметки bs4 без ul
и li
... кажется таким же образом
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
<div class="navbar-nav w-100 nav-justified">
<a class="nav-item" href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a>
<a class="nav-item" href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a>
<a class="nav-item" href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a>
<a class="nav-item" href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a>
</div>
</nav>
Вы можете сделать что-то вроде этого:
.navbar-nav {
display: flex;
}
.nav-item {
flex: 1;
text-align: center;
margin: 5px;
}