在复选框上单击

时间:2016-01-26 02:02:05

标签: css checkbox javafx highlight richtextfx

使用RichTextFX我已经能够创建一个带有字符串的CodeArea,并突出显示属于String[] KEYWORDS数组的所有单词。

我在CodeArea上方有一个复选框控件,我在控制器代码中附加handler(),因此每当点击该复选框时,它都会取消突出显示{{1}中所有突出显示的字词}。我无法在CodeArea内取消突出显示(使文本背景为白色)文本,因为styleClass是在下面显示的CodeArea方法中定义的。现在一切正常,除非我单击复选框,它不会取消突出显示单词:

FXML:

StyleSpans

Java控制器:

<HBox>
   <CheckBox fx:id="highlightBox" mnemonicParsing="false"  prefHeight="25.0" prefWidth="154.0" stylesheets="@styleMain.css" text="Highlight Words" />
</HBox>
<HBox>
   <children>
     <CodeArea fx:id="codeBox" wrapText="true" prefHeight="240.0"    prefWidth="339.0">
     </CodeArea>
   </children>
</HBox>

在处理程序中,我成功地将@FXML CheckBox highlightBox; @FXML public CodeArea codeBox; private static final String[] KEYWORDS = new String[] { "one", "two", "three" }; private static final String KEYWORD_PATTERN = "\\b(" + String.join("|", KEYWORDS) + ")\\b"; private static final Pattern PATTERN = Pattern.compile("(?<KEYWORD>" + KEYWORD_PATTERN + ")"); public static final String demoText = "one two three four five"; @Override public void initialize(URL location, ResourceBundle resources) { //Highlighting Words codeBox.richChanges().subscribe(change -> { codeBox.setStyleSpans(0, computeHighlighting(codeBox.getText())); }); codeBox.replaceText(0, 0, demoText); highlightBox.setOnAction(new EventHandler < ActionEvent > () { @Override public void handle(ActionEvent event) { codeBox.setStyle("-fx-background-color: blue"); // this should instead change 'highlightKeyWords' background color to white } }); ... } //End of initialize public static StyleSpans < Collection < String >> computeHighlighting(String text) { Matcher matcher = PATTERN.matcher(text); int lastKwEnd = 0; StyleSpansBuilder < Collection < String >> spansBuilder = new StyleSpansBuilder < > (); while (matcher.find()) { String styleClass = matcher.group("KEYWORD") != null ? "highlightKeyWords" : null; /* never happens */ assert styleClass != null; spansBuilder.add(Collections.emptyList(), matcher.start() - lastKwEnd); spansBuilder.add(Collections.singleton(styleClass), matcher.end() - matcher.start()); lastKwEnd = matcher.end(); } spansBuilder.add(Collections.emptyList(), text.length() - lastKwEnd); return spansBuilder.create(); } 的背景更改为蓝色,但如果我改为尝试CodeArea

它没有改变任何东西,单词保持突出显示。这是因为我应该引用propertyOverview.setStyle("-fx-background-fill: blue;");方法中创建的highlightKeyWords。我应该使用像computeHighlighting这样的东西吗?

CSS:

highlightKeyWords.setStyle("-fx-background-fill: white")

这里.highlightKeyWords{ -fx-font-size:13px; -fx-background-color: grey; -fx-background-fill: yellow; } 可以很好地突出显示,但如何在处理程序中将其更改为白色?

1 个答案:

答案 0 :(得分:2)

使用CodeArea上定义的&#34;查找颜色&#34;,并将其更改为setStyle

首先,只需向CodeArea添加CSS ID:

 <CodeArea id="codeBox" fx:id="codeBox" wrapText="true" prefHeight="240.0"    prefWidth="339.0">
 </CodeArea>

然后按如下方式更新CSS:

#codeBox {
    -keyword-highlight: yellow ;
}

.highlightKeyWords{
    -fx-font-size:13px;
    -fx-background-color: grey;
    -fx-background-fill: -keyword-highlight;
}

然后在您的initialize()方法中

highlightBox.selectedProperty().addListener((obs, wasSelected, isNowSelected) -> {
    if (isNowSelected) {
        codeBox.setStyle("-keyword-highlight: yellow ;");
    } else {
        codeBox.setStyle("-keyword-highlight: white ;");
    }
});