おはようございます。 JavaFXのDatePickerで特殊セルの色を変更したいと思います。 私の目的は、セルの色を変更することです:2017年1月30日。JavaFx DatePickerカラーシングルセル
私はまだJavaFXの使い方を学んでいますので、堪能してください。
敬具 クリスチャンTaeumel
おはようございます。 JavaFXのDatePickerで特殊セルの色を変更したいと思います。 私の目的は、セルの色を変更することです:2017年1月30日。JavaFx DatePickerカラーシングルセル
私はまだJavaFXの使い方を学んでいますので、堪能してください。
敬具 クリスチャンTaeumel
DateCellFactoryを使用します。
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.stage.Stage;
import javafx.util.Callback;
import java.time.LocalDate;
import java.time.MonthDay;
public class ColoredPick extends Application {
@Override
public void start(Stage stage) throws Exception {
final Callback<DatePicker, DateCell> dayCellFactory = new Callback<DatePicker, DateCell>() {
public DateCell call(final DatePicker datePicker) {
return new DateCell() {
@Override public void updateItem(LocalDate item, boolean empty) {
super.updateItem(item, empty);
if (MonthDay.from(item).equals(MonthDay.of(3, 15)) &&
!(getStyleClass().contains("next-month") || getStyleClass().contains("previous-month"))
) {
setTooltip(new Tooltip("Beware the Ides of March!"));
setStyle("-fx-background-color: #ff4444;");
} else {
setTooltip(null);
setStyle(null);
}
}
};
}
};
DatePicker picker = new DatePicker();
picker.setDayCellFactory(dayCellFactory);
stage.setScene(new Scene(picker));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
上で示したコードでシンプルな背景のスタイル設定は、ほとんどの場合、正常に動作しますが、それはですおそらく、最善ではなく、更新メソッドで適切なスタイルクラスを追加および削除することをお勧めしますctly設定スタイル(CSSでスタイルをカスタマイズできるように)。これを行うことにより、セルの様々な潜在的な状態のスタイル(例えば、選択されたものまたは集中されたものなど)をカスタマイズすることがより容易になる。様々な細胞の擬似状態をカスタマイズするための
のフルCSSルール(例:選択した、:、ホバー:焦点を当てた、など)があなたのJavaFXディストリビューションに含まれるかをmodena.css
で見つけることができます(JavaFXの8のためには、内部jfxrt.jar
です)。 Java 9ディストリビューションからの選択を以下に示します。あなたはCSSで行うことができますし、異なる状態の潜在的な組み合わせが正しくそれらのすべてをカスタマイズすることが少しトリッキーすることができますカスタマイズのかなりがある見ることができるように:
.date-picker-popup > * > .date-cell {
-fx-background-color: transparent;
-fx-background-insets: 1, 2;
-fx-padding: 0;
-fx-alignment: BASELINE_CENTER;
-fx-opacity: 1.0;
}
.date-picker-popup > * > .day-name-cell,
.date-picker-popup > * > .week-number-cell {
-fx-font-size: 0.916667em;
}
.date-picker-popup > * > .week-number-cell {
-fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
-fx-border-color: -fx-control-inner-background;
-fx-border-width: 1px;
-fx-background: -fx-control-inner-background;
-fx-background-color: -fx-background;
-fx-text-fill: -fx-accent;
}
.date-picker-popup > * > .day-cell {
-fx-padding: 0.333333em 0.583333em 0.333333em 0.583333em; /* 4 7 4 7 */
-fx-border-color: derive(-fx-selection-bar-non-focused, 60%);
-fx-border-width: 1px;
-fx-font-size: 1em;
-fx-background: -fx-control-inner-background;
-fx-background-color: -fx-background;
-fx-text-fill: -fx-text-background-color;
}
.date-picker-popup > * > .hijrah-day-cell {
-fx-alignment: TOP_LEFT;
-fx-padding: 0.083333em 0.333333em 0.083333em 0.333333em; /* 1 4 1 4 */
-fx-cell-size: 2.75em;
}
.date-picker-popup > * > .day-cell > .secondary-text {
-fx-fill: #f3622d;
}
.date-picker-popup > * > .today {
-fx-background-color: -fx-control-inner-background, derive(-fx-selection-bar-non-focused, -20%), -fx-control-inner-background;
-fx-background-insets: 1, 2, 3;
}
.date-picker-popup > * > .day-cell:hover,
.date-picker-popup > * > .selected,
.date-picker-popup > * > .previous-month.selected,
.date-picker-popup > * > .next-month.selected {
-fx-background: -fx-selection-bar;
}
.date-picker-popup > * > .previous-month:hover,
.date-picker-popup > * > .next-month:hover {
-fx-background: -fx-selection-bar-non-focused;
}
.date-picker-popup > * > .today:hover,
.date-picker-popup > * > .today.selected {
-fx-background-color: -fx-selection-bar, derive(-fx-selection-bar-non-focused, -20%),-fx-selection-bar;
}
.date-picker-popup > * > .day-cell:focused,
.date-picker-popup > * > .today:focused {
-fx-background-color: -fx-control-inner-background, -fx-cell-focus-inner-border, -fx-control-inner-background;
-fx-background-insets: 1, 2, 3;
}
.date-picker-popup > * > .day-cell:focused:hover,
.date-picker-popup > * > .today:focused:hover,
.date-picker-popup > * > .selected:focused,
.date-picker-popup > * > .today.selected:focused {
-fx-background-color: -fx-selection-bar, -fx-cell-focus-inner-border, -fx-selection-bar;
}
.date-picker-popup > * > .previous-month,
.date-picker-popup > * > .next-month {
-fx-background: derive(-fx-control-inner-background, -4%);
}
.date-picker-popup > * > .day-cell:hover > .secondary-text,
.date-picker-popup > * > .previous-month > .secondary-text,
.date-picker-popup > * > .next-month > .secondary-text,
.date-picker-popup > * > .selected > .secondary-text {
-fx-fill: -fx-text-background-color;
}
.date-picker-popup > * > .previous-month.today,
.date-picker-popup > * > .next-month.today {
-fx-background-color: derive(-fx-control-inner-background, -4%), derive(-fx-selection-bar-non-focused, -20%), derive(-fx-control-inner-background, -4%);
}
.date-picker-popup > * > .previous-month.today:hover,
.date-picker-popup > * > .next-month.today:hover {
-fx-background-color: -fx-selection-bar-non-focused, derive(-fx-selection-bar-non-focused, -20%), -fx-selection-bar-non-focused;
}
読む[尋ねる]と投稿してください。 [mcve] –