Prevent an accordion in JavaFX from collapsing - accordion

Is there an easy way of preventing an accordion in JavaFX 2.1 from fully collapsing? I have an accordion with a few entries but if the user clicks the active accordion entry it collapses the accordion.
I could probably use a mouse click listener to check do the check and act accordingly but this feels like it should be even simpler than that to accomplish.

Add a listener to the currently expanded accordion pane and prevent it from being collapsed by the user by modifying it's collapsible property.
Here is a sample app:
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.value.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class AccordionSample extends Application {
public static void main(String[] args) { launch(args); }
#Override public void start(Stage primaryStage) {
// create some titled panes to go in an accordion.
TitledPane adminPane = new TitledPane("Animals",
VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children(
ButtonBuilder.create().text("Zebra").maxWidth(Double.MAX_VALUE).build(),
ButtonBuilder.create().text("Shrew").maxWidth(Double.MAX_VALUE).build()
).build()
);
TitledPane viewPane = new TitledPane("Vegetables",
VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children(
ButtonBuilder.create().text("Eggplant").maxWidth(Double.MAX_VALUE).build(),
ButtonBuilder.create().text("Carrot").maxWidth(Double.MAX_VALUE).build()
).build()
);
// create an accordion, ensuring the currently expanded pane can not be clicked on to collapse.
Accordion accordion = new Accordion();
accordion.getPanes().addAll(adminPane, viewPane);
accordion.expandedPaneProperty().addListener(new ChangeListener<TitledPane>() {
#Override public void changed(ObservableValue<? extends TitledPane> property, final TitledPane oldPane, final TitledPane newPane) {
if (oldPane != null) oldPane.setCollapsible(true);
if (newPane != null) Platform.runLater(new Runnable() { #Override public void run() {
newPane.setCollapsible(false);
}});
}
});
for (TitledPane pane: accordion.getPanes()) pane.setAnimated(false);
accordion.setExpandedPane(accordion.getPanes().get(0));
// layout the scene.
StackPane layout = new StackPane();
layout.setStyle("-fx-padding: 10; -fx-background-color: cornsilk;");
layout.getChildren().add(accordion);
primaryStage.setScene(new Scene(layout));
primaryStage.show();
}
}

Here is another solution for making sure the accordion will never completely collapse. The difference from the great original answer by #jewelsea is little - I didn't like the fact that the default down facing arrow was disappearing from the open accordion TitledPane face, because its "collapsible" property is being set to false. I played with it a bit more to achieve a more "natural" feel for my interface.
/* Make sure the accordion can never be completely collapsed */
accordeon.expandedPaneProperty().addListener((ObservableValue<? extends TitledPane> observable, TitledPane oldPane, TitledPane newPane) -> {
Boolean expand = true; // This value will change to false if there's (at least) one pane that is in "expanded" state, so we don't have to expand anything manually
for(TitledPane pane: accordeon.getPanes()) {
if(pane.isExpanded()) {
expand = false;
}
}
/* Here we already know whether we need to expand the old pane again */
if((expand == true) && (oldPane != null)) {
Platform.runLater(() -> {
accordeon.setExpandedPane(oldPane);
});
}
});

Related

JavaFX: automatically expand ChoiceBox when on focus

I have a ChoiceBox for which I want to show the dropdown menu if it has gained focus when cycling though the input controls (focus traversal). I.e. I don't want the user to press SPACE first as he must make a choice anyway. I have the following code so far:
import java.util.Arrays;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ChoiceBox;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class SampleApp extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
StackPane root = new StackPane();
GridPane pane = new GridPane();
ChoiceBox<String> box1 = new ChoiceBox<String>();
box1.getItems().addAll("1", "2", "3");
ChoiceBox<String> box2 = new ChoiceBox<String>();
box2.getItems().addAll("a", "b", "c");
for (ChoiceBox<String> choiceBox : Arrays.asList(box1, box2)) {
choiceBox.focusedProperty().addListener((observable, oldValue, newValue) -> {
if (newValue && !oldValue) {
// transition from unfocused to focused -> expand choicebox
if (!choiceBox.isShowing()) {
choiceBox.show();
}
}
});
}
pane.add(box1, 0, 0);
pane.add(box2, 1, 0);
root.getChildren().add(pane);
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
}
This code works fine when I use the keyboard for focus traversal, but if I click the the (unfocused) ChoiceBox with the mouse, the dropdown shows for a few miliseconds and then hides instantly again. I guess that the ChoiceBox has a predefined EventHandler for mouse events which "toggles" whether the items are shown or not. Apparently, the FocusedProperty is changing first, showing the items, and then the MouseEvents hides them again.
How can I fix this?
Use the consume method of MouseEvents to stop further propagation of the Event through the dispatch chain.
final ChangeListener<? super Boolean> showHideBox = ( __, ___, isFocused ) ->
{
if ( isFocused.booleanValue() )
{
choiceBox.show();
}
else
{
choiceBox.hide();
}
};
choiceBox.focusedProperty().addListener( showHideBox );
choiceBox.addEventFilter( MouseEvent.MOUSE_RELEASED, release ->
{
release.consume();
choiceBox.requestFocus();
} );
Full example : https://gist.github.com/flasheater/0cc365227a235c3fb794 .

JavaFX 8 TextArea loose focus on tab

Is it possible to change the default behaviour of a JavaFX TextArea, so that pressing Tab passes the focus to the next component?
While #ItachiUchiha solution works, as he states, it depends on the layout (box in his sample).
Based on this question, you can modify the default behavior of a TextArea, regardless of the layout.
But you will need to use for this private API, which may change at any time without notice.
In this sample Tab and Shitf+Tab will have the desired behavior, while Ctrl+Tab will insert "\t" on the text area.
#Override
public void start(Stage primaryStage) {
TextArea area = new TextArea();
area.addEventFilter(KeyEvent.KEY_PRESSED, (KeyEvent event) -> {
if (event.getCode() == KeyCode.TAB) {
TextAreaSkin skin = (TextAreaSkin) area.getSkin();
if (skin.getBehavior() instanceof TextAreaBehavior) {
TextAreaBehavior behavior = (TextAreaBehavior) skin.getBehavior();
if (event.isControlDown()) {
behavior.callAction("InsertTab");
} else if (event.isShiftDown()) {
behavior.callAction("TraversePrevious");
} else {
behavior.callAction("TraverseNext");
}
event.consume();
}
}
});
VBox root = new VBox(20, new Button("Button 1"), area, new Button("Button 2"));
Scene scene = new Scene(root, 400, 300);
primaryStage.setScene(scene);
primaryStage.show();
}
Well, you definitely can do this, but it depends on the Layout to which the TextArea is added to. I have created a simple example where a TextArea and a TextField are both added to a VBox. There is a keyEventHandler which monitors the keyPress event on the TextArea and sends the focus to the next child(if any)
import java.util.Iterator;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TextAreaTabFocus extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
VBox box = new VBox();
TextArea textArea = new TextArea();
TextField textField = new TextField();
box.getChildren().addAll(textArea, textField);
final EventHandler<KeyEvent> keyEventHandler =
keyEvent -> {
if (keyEvent.getCode() == KeyCode.TAB) {
Iterator<Node> itr = box.getChildren().iterator();
while(itr.hasNext()) {
if(itr.next() == keyEvent.getSource()) {
if(itr.hasNext()){
itr.next().requestFocus();
}
//If TextArea is the last child
else {
box.getChildren().get(0).requestFocus();
}
break;
}
}
keyEvent.consume();
}
};
textArea.setOnKeyPressed(keyEventHandler);
Scene scene = new Scene(box, 200, 200);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

Dragging and dropping list view items between different javafx windows

I've been wondering how you would be able to drag and drop list view items between 2 java fx windows.
The code that I used was
tilePane.setOnDragDropped((event) -> {
Dragboard db = event.getDragboard();
boolean success = false;
if (db.hasString()) {
TilePane pane = (TilePane) event.getGestureTarget();
if (pane.getChildren().size() >= 10) {
//error
} else {
ListView<Item> list = (ListView<Item>) event
.getGestureSource();
addShopItem(pane, list.getSelectionModel()
.getSelectedItem());
success = true;
}
}
event.setDropCompleted(success);
event.consume();
});
Both the list view and tile pane used to be in one window but I've decided to make seperate them into different javafx windows so it would allow for more flexibility. One window has the list view and the other has the tilepane.
I would like to drag the list view item to the tilepane(other window) but this code no longer works because getGestureTarget() is null for different applications.
Thanks
It does look like the gesture source and target both get set to null when the drag leaves the JavaFX application (e.g. moving it between two windows).
For the gesture source, you may need to manage that yourself by creating a property and setting its value in the onDragDetected handler.
The gesture target is surely just the tile pane to which you attached the onDragDropped listener. So I don't see that you need to access that from the event; though you could use the same technique.
Example:
import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.scene.Scene;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.input.ClipboardContent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.TransferMode;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class DnDListViews extends Application {
private int counter = 0 ;
private final ObjectProperty<ListCell<String>> dragSource = new SimpleObjectProperty<>();
#Override
public void start(Stage primaryStage) {
populateStage(primaryStage);
primaryStage.show();
Stage anotherStage = new Stage();
populateStage(anotherStage);
anotherStage.setX(primaryStage.getX() + 300);
anotherStage.show();
}
private void populateStage(Stage stage) {
ListView<String> listView = new ListView<>();
for (int i=0; i<5; i++ ) {
listView.getItems().add("Item "+(++counter));
}
listView.setCellFactory(lv -> {
ListCell<String> cell = new ListCell<String>(){
#Override
public void updateItem(String item , boolean empty) {
super.updateItem(item, empty);
setText(item);
}
};
cell.setOnDragDetected(event -> {
if (! cell.isEmpty()) {
Dragboard db = cell.startDragAndDrop(TransferMode.MOVE);
ClipboardContent cc = new ClipboardContent();
cc.putString(cell.getItem());
db.setContent(cc);
dragSource.set(cell);
}
});
cell.setOnDragOver(event -> {
Dragboard db = event.getDragboard();
if (db.hasString()) {
event.acceptTransferModes(TransferMode.MOVE);
}
});
cell.setOnDragDone(event -> listView.getItems().remove(cell.getItem()));
cell.setOnDragDropped(event -> {
Dragboard db = event.getDragboard();
if (db.hasString() && dragSource.get() != null) {
// in this example you could just do
// listView.getItems().add(db.getString());
// but more generally:
ListCell<String> dragSourceCell = dragSource.get();
listView.getItems().add(dragSourceCell.getItem());
event.setDropCompleted(true);
dragSource.set(null);
} else {
event.setDropCompleted(false);
}
});
return cell ;
});
BorderPane root = new BorderPane(listView);
Scene scene = new Scene(root, 250, 450);
stage.setScene(scene);
}
public static void main(String[] args) {
launch(args);
}
}
If the dragboard supported attaching arbitrary object references for drag and drop within the same JVM (see JIRA request, and vote if so inclined) then this would be quite a bit easier...

GXT DateField not working inside a modal DialogBox

I have the following code snippet -
Button testButton = new Button("Test");
testButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
final DialogBox box = new DialogBox();
box.setText("Test");
box.add(new DateField());
box.setGlassEnabled(true);
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
box.show();
}
});
}
});
RootPanel.get().add(testButton);
RootPanel.get().add(new DateField());
The GXT DateField inside the modal DialogBox doesn't seem to work and none of the dates are selectable. On the other hand, the one added directly to RootPanel seems to works fine.
Any ideas on how to work around this?
When using the GWT dialog and the date picker expand, the GWT dialog is preventing the click events from propagating to it. So in this case the GWT dialog modal can be set to false to get it to work. Although I would suggest using the GXT DialogBox. Another option might be to override the event handling a bit more in DialogBox in the case the GXT Date picker is displayed.
This will allow the field to work in GWT:
final DialogBox box = new DialogBox(false, false);
Small test case to show both:
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.widget.core.client.Dialog;
import com.sencha.gxt.widget.core.client.form.DateField;
public class DialogWithDateField {
public DialogWithDateField() {
RootPanel.get().add(new DateField());
testGwtDialog();
testGxtDialog();
}
private void testGwtDialog() {
Button testButton = new Button("Test Gwt Dialog");
testButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
final DateField field = new DateField();
final DialogBox box = new DialogBox(false, false);
box.setText("Test");
box.add(field);
box.setGlassEnabled(true);
box.show();
}
});
RootPanel.get().add(testButton);
}
private void testGxtDialog() {
Button testButton = new Button("Test Gxt Dialog");
testButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
DateField field = new DateField();
final Dialog box = new Dialog();
box.setHeadingText("Test");
box.add(field);
box.setModal(true);
box.show();
}
});
RootPanel.get().add(testButton);
}
}
The issue might be due to mixing GWT Dialog with GXT widget.
Try this sample code that works with Sencha Dialog
Dialog d = new Dialog();
d.setHeadingText("Enter Date");
d.setWidget(new DateField());
d.setPixelSize(300, 100);
d.setHideOnButtonClick(true);
d.setPredefinedButtons(PredefinedButton.YES, PredefinedButton.NO,
PredefinedButton.CANCEL);
d.show();
Works fine with EXTJS Dialog as well.
Dialog d = new Dialog();
d.setTitle("Enter Date");
d.add(new DateField());
d.setPixelSize(300, 100);
d.setHideOnButtonClick(true);
d.setButtons(Dialog.YESNOCANCEL);
d.show();

JavaFX 2 TextArea: How to stop it from consuming [Enter] and [Tab]

I want to use a JavaFX TextArea as though it were exactly like a multi-line TextField. In other words, when I press [Tab] I want to cycle to the next control on the form and when I press [Enter] I want the Key.Event to go to the defaultButton control (rather than be consumed by the TextArea).
The default behavior for TextArea is that [Tab] gets inserted into the TextArea and [Enter] inserts a new-line character.
I know that I need to use EventFilters to get the behavior that I want, but I'm getting it all wrong. I don't want the TextArea to consume these events ... I just want it to let them "go right on by".
The solution here displays two text areas and a default button.
When the user presses the tab key, the focus moves to the next control down.
When the user presses the enter key, the default button is fired.
To achieve this behavior:
The enter key press for each text area is caught in an event filter, copied and targeted to the text area's parent node (which contains the default OK button). This causes the default OK button to be fired when enter is pressed anywhere on the form. The original enter key press is consumed so that it does not cause a new line to be added to the text area's text.
The tab key press for each text area is caught in a filter and the parent's focus traversable list is processed to find the next focusable control and focus is requested for that control. The original tab key press is consumed so that it does not cause new tab spacing to be added to the text area's text.
The code makes use of features implemented in Java 8, so Java 8 is required to execute it.
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.beans.value.*;
import javafx.collections.ObservableList;
import javafx.event.*;
import javafx.scene.*;
import javafx.scene.control.*;
import static javafx.scene.input.KeyCode.ENTER;
import static javafx.scene.input.KeyCode.TAB;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.VBox;
import javafx.stage.*;
public class TextAreaTabAndEnterHandler extends Application {
final Label status = new Label();
public static void main(String[] args) { launch(args); }
#Override public void start(final Stage stage) {
final TextArea textArea1 = new TabAndEnterIgnoringTextArea();
final TextArea textArea2 = new TabAndEnterIgnoringTextArea();
final Button defaultButton = new Button("OK");
defaultButton.setDefaultButton(true);
defaultButton.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent event) {
status.setText("Default Button Pressed");
}
});
textArea1.textProperty().addListener(new ClearStatusListener());
textArea2.textProperty().addListener(new ClearStatusListener());
VBox layout = new VBox(10);
layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10px;");
layout.getChildren().setAll(
textArea1,
textArea2,
defaultButton,
status
);
stage.setScene(
new Scene(layout)
);
stage.show();
}
class ClearStatusListener implements ChangeListener<String> {
#Override public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
status.setText("");
}
}
class TabAndEnterIgnoringTextArea extends TextArea {
final TextArea myTextArea = this;
TabAndEnterIgnoringTextArea() {
addEventFilter(KeyEvent.KEY_PRESSED, new TabAndEnterHandler());
}
class TabAndEnterHandler implements EventHandler<KeyEvent> {
private KeyEvent recodedEvent;
#Override public void handle(KeyEvent event) {
if (recodedEvent != null) {
recodedEvent = null;
return;
}
Parent parent = myTextArea.getParent();
if (parent != null) {
switch (event.getCode()) {
case ENTER:
if (event.isControlDown()) {
recodedEvent = recodeWithoutControlDown(event);
myTextArea.fireEvent(recodedEvent);
} else {
Event parentEvent = event.copyFor(parent, parent);
myTextArea.getParent().fireEvent(parentEvent);
}
event.consume();
break;
case TAB:
if (event.isControlDown()) {
recodedEvent = recodeWithoutControlDown(event);
myTextArea.fireEvent(recodedEvent);
} else {
ObservableList<Node> children = parent.getChildrenUnmodifiable();
int idx = children.indexOf(myTextArea);
if (idx >= 0) {
for (int i = idx + 1; i < children.size(); i++) {
if (children.get(i).isFocusTraversable()) {
children.get(i).requestFocus();
break;
}
}
for (int i = 0; i < idx; i++) {
if (children.get(i).isFocusTraversable()) {
children.get(i).requestFocus();
break;
}
}
}
}
event.consume();
break;
}
}
}
private KeyEvent recodeWithoutControlDown(KeyEvent event) {
return new KeyEvent(
event.getEventType(),
event.getCharacter(),
event.getText(),
event.getCode(),
event.isShiftDown(),
false,
event.isAltDown(),
event.isMetaDown()
);
}
}
}
}
An alternate solution would be to implement your own customized skin for TextArea which includes new key handling behavior. I believe that such a process would be more complicated than the solution presented here.
Update
One thing I didn't really like about my original solution to this problem was that once the Tab or Enter key was consumed, there was no way to trigger their default processing. So I updated the solution such that if the user holds the control key down when pressing Tab or Enter, the default Tab or Enter operation will be performed. This updated logic allows the user to insert a new line or tab space into the text area by pressing CTRL+Enter or CTRL+Tab.