JavaFX TextBox and binding the length of the text entered to a Button (in 1.3)

Just a quick post, I have started work on a JavaFX project and I came across the following challenge:

I want a Text Box where I can freely enter text, however I need to:

  1. Enable the button associated with the Text Box once I have entered a value (i.e. the length of the string entered is greater than 0) and disable the Button if the text is greater than a specified amount, say 140 (oh, I wonder what I am working on limiting text to 140 characters???)
  2. Count down the number of characters remaining as I type in text, from 140…

Initially I struggled with this as I found the text I entered into the text box didn’t actually commit until I selected another object in the scene (e.g. another text box). This proved a little frustrating and after a while of trying to bind the text being entered to another variable and then setting the Text Box text value to that value I conceded that this cannot be the way. So I was left with a counter that didn’t get updated and a button which wasn’t enabled until I selected another object in the scene. I could not find a posting showing this challenge, maybe everyone else gets it and I just didn’t.

So I looked into the functions available for TextBox and realised that commit() must push the value held at that moment into the text variable and so allow me to successfully bind to the text value. So I configured the TextBox to commit() everytime a key is typed. See below my code, which I am sure will make things clearer:

var tBox : TextBox = TextBox
     columns: 20
     selectOnFocus: true
     translateY: 20;
     translateX: 60;

     onKeyTyped: function(ke: KeyEvent):Void
         println("Key pressed, the value of the
                     tBox.text is {tBox.text}");

var testString : Label = Label
     layoutInfo: LayoutInfo { width: 50; height: 50;}
     translateX: 80;
     translateY: 150;
     text: bind tBox.text.length().toString();

var tweetB : Button = Button
     translateY: 170;
     translateX: 120;
     text: "Tweet"
     disable: bind if (tBox.text.length() < 14)
                                     false else true;
     action: function()
         println("I go and update my status with the
                             following {tBox.text}");

Stage {
 title: "Application title"
 scene: Scene {
 width: 300
 height: 300

Well, I hope this isn’t so obvious to everyone (perhaps I am having a bad day?) I just wanted to share this in the hope it helps others? I hope so.


Looks like I could use rawText????


Tags: , , , ,

3 Responses to “JavaFX TextBox and binding the length of the text entered to a Button (in 1.3)”

  1. Jonathan Giles Says:

    Yes, just use rawText for what you need. rawText is committed when the control loses focus or the user presses enter.

  2. Anil Says:

    Thanks..It was a big help.

  3. Says:

    I had to share this particular article, “JavaFX TextBox and
    binding the length of the text entered to a Button (in 1.
    3) It’s Smee Blog” with my best buddies on twitter. Ijust sought to distributed ur tremendous publishing! Regards, Belle

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: