Develop Reference

Javafx radio button binding directionally

Am still new to javafx and i would like to perform a directional binding to radio buttons
in my fxml i have
<fx:define>
<ToggleGroup fx:id="version_selection" />
</fx:define>
<RadioButton toggleGroup="$version_selection" ............>
<RadioButton toggleGroup="$version_selection" ............>
In my controller i want to bind the value of the selected togglegroup. With textfields its easy as its just
#FXML
TextField name;
#FXML
private ToggleGroup version_selection;
name.textProperty().bindBidirectional(model.field5Property());
where the model is my class with the SimpleStringValue property
How do i bind the togglegroup as it doesnt have a textproperty as a textfield

Even if you had a ObjectProperty<Toggle> in your model, it you couldn't establish a bidirectional binding, since ToggleGroup.selectedToggle is readonly. You need to work around this by adding a listener to both the ToggleGroup.selectedToggle property and the model property and update the property other than the source of the change on a change.
Use a Map<String, Toggle> to convert the text to the toggle to be selected. The following example uses a TextField to determine the property instead of a model property to demonstrate the behaviour: input the text of the RadioButton to select and it'll be selected.
#Override
public void start(Stage primaryStage) throws IOException {
ToggleGroup group = new ToggleGroup();
VBox vbox = new VBox();
for (char c = 'a'; c <= 'f'; c++) {
RadioButton radio = new RadioButton(Character.toString(c));
radio.setToggleGroup(group);
vbox.getChildren().add(radio);
}
TextField input = new TextField();
vbox.getChildren().add(input);
// create map mapping from text to corresponding toggle
Map<String, Toggle> map = new HashMap<>();
for (Toggle t : group.getToggles()) {
map.put(((RadioButton) t).getText(), t);
}
StringProperty property = input.textProperty();
InvalidationListener listener = new InvalidationListener() {
// flag preventing circular updating
boolean updating = false;
#Override
public void invalidated(Observable observable) {
if (!updating) {
updating = true;
if (observable == group.selectedToggleProperty()) {
// change as result of user interaction with RadioButton
// update property
RadioButton selectedToggle = (RadioButton) group.getSelectedToggle();
property.set(selectedToggle == null ? "" : selectedToggle.getText());
} else {
// change as result of updating the property
// select corresponding toggle
Toggle toggleToSelect = map.get(property.get());
group.selectToggle(toggleToSelect);
}
updating = false;
}
}
};
property.addListener(listener);
group.selectedToggleProperty().addListener(listener);
Scene scene = new Scene(vbox);
primaryStage.setScene(scene);
primaryStage.show();
}

How do you repeatedly initialize a new label in java?

Let's say I want to make a "note taking swt program", so every time I press a button, the program is going to create a new label about 50 pixels lower to the label before. What's an efficient way of implementing that?

I did it with simple ListView and ObservableList, but observable list isn't necessary. Here is my version of this.
public class Controller {
#FXML
private ListView<Label> listView;
private ObservableList<Label> yourList;
public void initialize() {
yourList = FXCollections.observableArrayList();
listView.setItems(yourList);
}
public void onButtonPressed(){
// You can do really bigger processing here
Label label = new Label();
label.setText("some text maybe");
label.setPadding(new Insets(10));
yourList.add(label);
}
}
Result after three times button pressed:
some text maybe
some text maybe
some text maybe
this can come with padding, customizable fonts, color etc.
Hope it helps

JavaFX - Creating non-selectable item in ListView

I'm using JFXListView and JFXListCell from the library called jfoenix and the purpose and function are same as the regular ListView.
The list contains some Label, Button and AnchorPane. At the very top and bottom of the list, I want to add non-selectable item. The item should not be selectable on mouse click, should not be able to focus and should not be able to scroll.
I though of using updateItem() function and setting the item disable:
#FXML
JFXListView listView;
ObservableList<AnchorPane> list = FXCollections.observableArrayList();
private void initializeListView(){
AnchorPane headerBottomPane = new AnchorPane();
headerBottomPane.setId("headerBottomPane");
....//some property of AnchorPane
list.add(headerBottomPane); //Add header AnchorPane
while(true){
AnchorPane listContainer = new AnchorPane();
Label title = new Label();
Label subtitle = new Label();
Button button = new Button();
Button button2 = new Button();
//Some code here...
listContainer.getChildren().addAll(label, subtitle, button, button2);
list.add(listContainer);
//some code here...
}
list.add(headerBottomPane); //Add bottom AnchorPane
listView.setCellFactory(new CallBack<JFXListView, JFXListCell>(){
#Override
public JFXListCell call(JFXListView param){
return new JFXListCell<AnchorPane>(){
#Override
protected void updateItem(AnchorPane anchorPane, boolean empty){
super.updateItem(anchorPane, empty);
if(anchorPane != null){
if(anchorPane.getId.equals("headerBottomPane")){
setDisable(true);
}
setItem(anchorPane);
}else{
setItem(null);
}
}
};
}
});
}
I am able to disable the top and last item of the list, the item is no longer able to select using mouseClick.
But the problem is, it is focusable when I use the Keyboard arrow up and arrow down another strange thing is when I use the mouse wheel to scroll the list, some of the item are becoming non-selectable too.

I would think of just using a VBox, and putting your top unselectable item first, then the ListView with all the selectable items, then the bottom unselectable item...

I think you have to put your listView.setCellFactory() function at the top of the code where you adding those items, try to initialize it before you add the item.
and inside your updateItem() try to use setMouseTransparent() and setFocusTravesable().
#Override
protected void updateItem(AnchorPane anchorPane, boolean empty){
super.updateItem(anchorPane, empty);
if(anchorPane != null){
if(anchorPane.getId.equals("headerBottomPane")){
setItem(anchorPane); //moved at the top
setMouseTransparent(true); //added this line
setFocusTraversable(false); //added this line
setDisable(true);
}else{
setItem(null);
}
}
I haven't test it but I hope it work.

JavaFX: Getting IDs of Dynamic created Button

I'm currently made an Form with JavaFX.
Always i press a Button, i call the "addAnswer()"-Method.
In that I create a RadioButton, a Label and a delete-Button, which i bundle in a HBox. All that HBoxes i pack in a vBox.
The Problem now is the delete-Button. I want to delte just THAT HBox in which the clicked Button is.
Here is my code:
public void addAnswer() {
this.rB = new RadioButton();
checkAnswer.getToggles().add(rB);
hBox = new HBox();
tF = new TextField();
delAnswer = new Button("Löschen");
delAnswer.setId(Integer.toString(counter));
hBox.getChildren().addAll(rB, tF, delAnswer);
hBox.setId(Integer.toString(counter));
delAnswer.setOnAction(e -> delAnswer(Integer.parseInt(hBox.getId())));
System.out.println(delAnswer.getId());
vBox.getChildren().addAll(hBox);
counter++;
}
public void delAnswer(int e){
vBox.getChildren().remove(delAnswer.getId());
}
i tried this one above but i realized, that all the delAnswers-Buttons have the same ID: the number of how often i pressed the add-Button.
Is there any solution where i can just select that one i pressed with that dynamic way? Cause i don't kow how often somebody will press or delete something.
Thanks

hbox is a field and this is why always the HBox last added is used. (hBox is evaluated, when lambda body is executed, not at the time of the lambda creation). This would be different, if you used a (effectively) final local variable:
final HBox hBoxLocal = hBox;
delAnswer.setOnAction(e -> delAnswer(Integer.parseInt(hBoxLocal.getId())));
However I'd like to present a different solution which would allow you to use the same EventHandler<ActionEvent> for all delete Buttons:
You can get the Node that triggered the event using getSource. From this Node you can get the parent, which is the HBox. You can remove this from the VBox using the remove(Object) method
delAnswer.setOnAction(e -> {
// get button
Node source = (Node) e.getSource();
// remove parent of button from VBox
vBox.getChildren().remove(source.getParent());
});

I think your problem is that you give the same event to all your button,Begin by creating a list that stores your buttons and then increments the value of the ID after affecting it to an item :
List<Button> buttons = new ArrayList<>();
/*
Create Button and call IDEvt method to create new event
for each button
*/
private void IDEvt(Button btn){
btn.setId(String.valueOf(IDRank));
btn.setOnMousePressed(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
System.out.println(btn.getId());
}
});
IDRank++;
}

GWT - CSS animation after adding element to the page

If the button is clicked, I want to add a Label to page and fade it in via an CSS animation. I thougt, I could just create and add the label with the CSS class "hidden" attached, which has the opacity = 0 and after that remove the class and CSS will do the rest.
But i was wrong. GWT seems to execute the code in the onClick() in some kind of bulk mode -> The label gets added already without the "hidden" class. How can i prevent or do it that better? If I add/remove the "hidden" class manually in the browser, the animation works finde.
The java code looks like this:
Button submitButton = new Button("send");
submitButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Label l = new Label("test");
l.addStyleName("hidden");
RootPanel.get().add(l);
l.removeStyleName("hidden");
}
});
RootPanel.get().add(submitButton);
Das CSS sieht folgendermaßen aus:
.gwt-Label{
transition-property: opacity;
transition-duration: 1s;
}
.hidden{
opacity:0;
}

Probably you have to add some delay function before remove hidden class.
Here you have example (in JS but it's only to show):
http://jsfiddle.net/matku/PXnPZ/
$(".myElement").delay(50).queue( function(){
$(this).removeClass("hidden");
});
And another way I found on google:
http://map-notes.blogspot.com/2012/11/fade-animation.html