{"id":1307,"date":"2014-07-10T16:08:06","date_gmt":"2014-07-10T14:08:06","guid":{"rendered":"http:\/\/www.jensd.de\/wordpress\/?p=1307"},"modified":"2014-07-10T16:51:29","modified_gmt":"2014-07-10T14:51:29","slug":"ui-logic-with-using-javafx-bindings","status":"publish","type":"post","link":"https:\/\/www.jensd.de\/wordpress\/?p=1307","title":{"rendered":"UI logic with using JavaFX Bindings"},"content":{"rendered":"

For MQTT.fx<\/a> I needed a ComboBox to enter new Topics or to choose recent topics from list.
\nBut I want the user to enter or choose only (more or less) reasonable values otherwise the “Publish”\/”Subscribe” buttons should be disabled:<\/p>\n

\"ComboBox<\/a><\/p>\n

\"ComboBox<\/a><\/p>\n

Using the JavaFX Bindings API<\/a> prevents some boilerplate code (implementing Listeners) and it is even more flexible as the result can be bound to several controls and at the end of the day its much more readable.<\/p>\n

Contraint 1: The selection must not be empty.<\/strong><\/p>\n

    \n
  1. First create a JavaFX BooleanBinding.<\/li>\n
  2. Then bind it to the disabledProperty of the button.<\/li>\n<\/ol>\n

    Contraint 2: Entered values must not contain only blanks<\/strong> (leading\/trailing blanks can be trimmed later).<\/p>\n

    My approach is to <\/p>\n

      \n
    1. add an EventFilter and to consume the event in case of only entered character is “SPACE” <\/li>\n
    2. and if there are just blanks left when editing the value the content is cleared.<\/li>\n<\/ol>\n

      [java]
      \npublic class ComboBoxBindingsDemoController {<\/p>\n

      @FXML
      \n private Label valueLabel;<\/p>\n

      @FXML
      \n private Button goButton;<\/p>\n

      @FXML
      \n private ComboBox valueComboBox;<\/p>\n

      private ObservableList demoItemsList;
      \n private static final Pattern LEADING_BLANKS_PATTERN = Pattern.compile(“^\\\\s*+”);<\/p>\n

      @FXML
      \n public void initialize() {
      \n valueComboBox.setItems(getDemoItemsList());<\/p>\n

      BooleanBinding goButtonState = valueComboBox.editorProperty().get().textProperty().isEmpty()
      \n .or(valueComboBox.valueProperty().asString().isEmpty());<\/p>\n

      goButton.disableProperty().bind(goButtonState);<\/p>\n

      valueComboBox.getEditor().addEventFilter(KeyEvent.KEY_TYPED, (KeyEvent event) -> {
      \n Matcher matcher = LEADING_BLANKS_PATTERN.matcher(valueComboBox.getEditor().getText());
      \n if (” “.equals(event.getCharacter()) && valueComboBox.getEditor().getText().length() == 0) {
      \n event.consume();
      \n }
      \n else if(matcher.matches()){
      \n valueComboBox.getEditor().clear();
      \n }
      \n });<\/p>\n

      }<\/p>\n

      public ObservableList getDemoItemsList() {
      \n if (demoItemsList == null) {
      \n demoItemsList = FXCollections.observableArrayList();
      \n demoItemsList.add(“Erlangen”);
      \n demoItemsList.add(“N\u00fcrnberg”);
      \n demoItemsList.add(“B\u00fcchenbach”);
      \n }
      \n return demoItemsList;
      \n }<\/p>\n

      @FXML
      \n public void goAction() {
      \n System.out.println(“Value ‘” + valueComboBox.getValue().trim() + “‘”);
      \n }<\/p>\n

      }
      \n[\/java]<\/p>\n

      Complete runnable demo can be found at Bitbucket<\/a>.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

      For MQTT.fx I needed a ComboBox to enter new Topics or to choose recent topics from list. But I want the user to enter or choose only (more or less) reasonable values otherwise the “Publish”\/”Subscribe” buttons should be disabled: Using the JavaFX Bindings API prevents some boilerplate code (implementing Listeners) and it is even more… <\/span>Continue Reading UI logic with using JavaFX Bindings<\/span><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"footnotes":"","_jetpack_memberships_contains_paid_content":false,"jetpack_publicize_message":"UI logic with using JavaFX Bindings http:\/\/wp.me\/p38FCL-l5","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[51,2,4,49],"tags":[107,76,105],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p38FCL-l5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1307"}],"collection":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1307"}],"version-history":[{"count":18,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1307\/revisions"}],"predecessor-version":[{"id":1330,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1307\/revisions\/1330"}],"wp:attachment":[{"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jensd.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}