[英]Building Custom Component for SceneBuilder (JavaFX)
我跟隨此博客在Scene Builder 2.0中添加了一個自定義JavaFX組件 ,並構建了自己的自定義組件。
FXML文件:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<fx:root id="AnchorPane" maxHeight="-Infinity" prefHeight="25.0" prefWidth="400.0" styleClass="mainFxmlClass" type="AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<stylesheets>
<URL value="@style.css" />
</stylesheets>
<children>
<HBox fx:id="border" prefHeight="25.0" prefWidth="400.0" styleClass="textbox-container" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<Label fx:id="label" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="25.0" prefWidth="200.0" styleClass="textbox-label" text="Label" HBox.hgrow="ALWAYS" />
<HBox minWidth="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
<children>
<TextField fx:id="textbox" prefWidth="176.0" styleClass="textbox" HBox.hgrow="ALWAYS" />
<Button fx:id="clear" focusTraversable="false" mnemonicParsing="false" styleClass="button-controller" text="X" />
</children>
</HBox>
</children>
</HBox>
</children>
</fx:root>
控制器類別:
public class CellTextFieldClear extends AnchorPane {
@FXML
private HBox border;
@FXML
private Label label;
@FXML
private TextField textbox;
@FXML
private Button clear;
public CellTextFieldClear(){
FXMLLoader loader = new FXMLLoader(getClass().getResource("/celltextfieldclear/CellTextFieldClear.fxml"));
loader.setRoot(this);
loader.setController(this);
try{
loader.load();
}catch(IOException exception){
throw new RuntimeException(exception);
}
}
public void setOnActionHandlerForClear(EventHandler<ActionEvent> event){
clear.setOnAction(event);
}
public void setEditable(boolean value){
textbox.setEditable(value);
}
public String getTextFromTextBox(){
return textbox.getText();
}
public void setTextBoxText(String text){
textbox.setText(text);
}
public void setLableText(String text){
label.setText(text);
}
public String getTextFromLabel(){
return label.getText();
}
}
樣式表:
.textbox {
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-background-color: white;
}
.textbox-label {
-fx-background-color: #b0c4de;
-fx-padding: 0 0 0 5;
}
.textbox-container {
-fx-border-color: #191970;
-fx-border-width: 0.5;
}
.button-controller {
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-background-color: white;
}
.button-controller:hover {
-fx-background-color:
#ecebe9,
rgba(0,0,0,0.05),
linear-gradient(#dcca8a, #c7a740),
linear-gradient(#f9f2d6 0%, #f4e5bc 20%, #e6c75d 80%, #e2c045 100%),
linear-gradient(#f6ebbe, #e6c34d);
-fx-background-insets: 0 0 -1 0;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1);
}
.button-controller:pressed {
-fx-background-color:
#ecebe9,
rgba(0,0,0,0.05),
linear-gradient(#dac980, #c6a530),
linear-gradient(#f8f0d4 0%, #f3e4ba 20%, #e0c050 80%, #e3c440 100%),
linear-gradient(#f5fbae, #e7c94f);
-fx-background-insets: 0 0 -1 0;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1);
}
輸出:
現在我的問題是我無法從Scene Builder中更改label的值。 我們是否可以創建一個自定義字段,該字段將出現在Scene Builder中,這將有助於更改標簽文本?
為了在Scene Builder上具有可編輯的字段,應使用屬性。 否則,將使用ReadOnlyStringWrapper
。
例如這些:
private final BooleanProperty editable = new SimpleBooleanProperty();
public boolean isEditable() {
return editable.get();
}
public void setEditable(boolean value) {
editable.set(value);
}
public final BooleanProperty editableProperty() {
return editable;
}
private final StringProperty textFromTextBox = new SimpleStringProperty();
public String getTextFromTextBox() {
return textFromTextBox.get();
}
public void setTextFromTextBox(String value) {
textFromTextBox.set(value);
}
public final StringProperty textFromTextBoxProperty() {
return textFromTextBox;
}
private final StringProperty labelText = new SimpleStringProperty();
public String getLabelText() {
return labelText.get();
}
public void setLabelText(String value) {
labelText.set(value);
}
public final StringProperty labelTextProperty() {
return labelText;
}
然后將控件綁定到這些屬性:
public CellTextFieldClear(){
...
textbox.editableProperty().bind(editableProperty());
textbox.textProperty().bind(textFromTextBoxProperty());
label.textProperty().bind(labelTextProperty());
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.