BindListBoxToSequence (JavaFX Puzzler 3) Results and Sample Solution

Congratulations to Lucas Benedicic for submitting the first solution to the BindListBoxToSequence Puzzler, and the fact that it met the requirements of the problem!

For reference, here is my sample solution, followed by the screenshot:

/*
 * BindListBoxToSequence.fx
 */
 
import javafx.ui.*;

class ListBoxModel {
  attribute entries:String*;
}
attribute ListBoxModel.entries = [];

Frame {
  var model = 
    ListBoxModel {
    }
  var elementTextField =
    TextField {
      columns: 12
    }
  title: "Bind ListBox to Sequence Puzzler"
  content:
    BorderPanel {
      top:
        FlowPanel {
          content: [
            elementTextField,
            Button {
              text: "Add Element"
              defaultButton: true
              action:
                operation() {
                  insert elementTextField.value into model.entries;
                  elementTextField.value = "";
                }
            }
          ]
        }
      center:
        FlowPanel {
          content:
            ListBox {
              fixedCellWidth: 200
              cells: bind foreach (entry in model.entries)
                ListCell {
                  text: entry
                }
            }
        }
    }
  width: 400
  height: 250
  visible: true
}

Congratulations again, Lucas!  I'll contact you right away with instructions on downloading the JavaFX Script eBook.

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
eBook (PDF) download available at the book's Apress site

Comments

[James Weaver]

Nice work, Craig! By the way, if the application had a menu, detecting the Delete key could be accomplished as shown in the following snippet from the JavaFX Script book:

MenuItem {
text: "Delete Word"
mnemonic: D
accelerator: {
keyStroke: DELETE
}
enabled: bind not wgModel.fillLettersOnGrid
action: operation() {
wsHandlers.wordListDeleteWord();
}
}

Thanks,
Jim Weaver

[codecraig]

Jim, I came up with a solution for deleting an item from the ListBox when the user hits the "Delete" key....not sure how this code is going to look in the comment, but here it goes:

import javafx.ui.*;
import java.lang.System;

class ListBoxModel {
attribute entries:String*;
attribute selIndex:Number;
}
attribute ListBoxModel.entries = [];

Frame {
var model =
ListBoxModel {
selIndex: 0
}
var elementTextField =
TextField {
columns: 12
}
var theListBox =
ListBox {
fixedCellWidth: 200
cells: bind foreach(entry in model.entries)
ListCell {
text: entry
}
selection: bind model.selIndex
toolTipText: "Select an item and hit the delete key to remove it"
onKeyDown:
operation(e:KeyEvent) {
if (e.keyStroke == DELETE:KeyStroke and model.selIndex > -1) {
delete model.entries[model.selIndex];
}

}
}

title: "Bind ListBox to Sequence Puzzler"
content:
BorderPanel {
top:
FlowPanel {
content: [
elementTextField,
Button {
text: "Add Element"
defaultButton: true
action:
operation() {
insert elementTextField.value into model.entries;
elementTextField.value = "";
System.out.println("Test2");
}
toolTipText: "Add an element"
}
]
}
center:
FlowPanel {
content:
[
theListBox,
]
}
}
width: 400
height: 250
visible: true
}

I did a couple things to make this work. I added an attribute to the model named, "selIndex" which gets bound to the "selection" attribute of the ListBox. Then I implemented the "onKeyDown" function in the ListBox which handles deleting the element out of the model.

Finding the "DELETE:KeyStroke" was a bit tricky, I did some Googling and came across another post where someone demonstrated using "RIGHT:KeyStroke" and "LEFT:KeyStroke" to determine if the Left or Right keys were pressed, so I figured "DELETE" might be what I needed, and it was :)