I have a TableView in JavaFX 8, which is editable. One of the fields is a CheckBoxTableCell.
I have noticed that the TAB key lands on the first CheckBoxTableCell in the grid and gets stuck there. I don't want this behavior. I like to navigate to the cell with the keyboard and activate with the SPACE. However I need tab to ignore this field - since it gets stuck.
I tried the following:
booleanColumn.setCellFactory (to -> {
CheckBoxTableCell<DTO, Boolean> cell = CheckBoxTableCell<>();
cell.setFocusTraversable(false);
return cell;
}
This however has no affect on the focus of the field, since it's editable, it lands on that control and gets stuck.
If I change to:
cell.setDisable(true);
Then TAB will skip the field, but I can land on the column with the arrow keys. However I can't select the checkbox with the mouse.
I am at a loss as what to do.
Thanks.
The workaround to get the TAB key working first implies consuming the event so the default TableView traversal engine doesn't process it, and selecting the next or previous cell instead.
This will move the selection from cell to cell:
table.getSelectionModel().setCellSelectionEnabled(true);
table.setOnKeyPressed(keyEvent -> {
switch (keyEvent.getCode()){
case TAB: {
keyEvent.consume();
if (keyEvent.isShiftDown()) {
personTable.getSelectionModel().selectPrevious();
} else {
personTable.getSelectionModel().selectNext();
}
break;
}
}
});
But it won't be enough to get the CheckBox focused, and the space key can't be used to select it. So a second step is required to move the focus from the selected cell to the inner checkbox.
When the cell gets the focus, its node will request it.
booleanColumn.setCellFactory (param -> {
CheckBoxTableCell<DTO, Boolean> cell = new CheckBoxTableCell<>();
cell.focusedProperty().addListener((obs, ov, nv) -> {
if (nv && cell.getGraphic() != null) {
cell.getGraphic().requestFocus();
}
});
return cell;
});
Notice you can't have both the cell and it's checkbox focused at the same time, so the cell will appear grey (selected but not focused), unless you modify its css.
Related
I would like to use the SlidingListTile, but I am having some issues.
I think that when we use the horizontal sliding the vertical scroll should be locked, because is getting hard to complete de slide on the phone.
Did someone get a situation like that?
Thanks in advance,
Here is part of my code:
slidingTile.swipedLeftProperty().addListener((obs, ov, nv) -> {
if (nv && edit != null) {
edit.accept(currentItem);
}
slidingTile.resetTilePosition();
});
slidingTile.swipedRightProperty().addListener((obs, ov, nv) -> {
if (nv && edit != null) {
edit.accept(currentItem);
}
slidingTile.resetTilePosition();
});
Indeed, there is an error in the Comments 2.0 sample.
The CommentsPresenter defines a custom ListCell for the ListView, and creates a binding from a single BooleanProperty to each of the cells in the list view:
commentsList.setCellFactory(cell -> {
final CommentListCell commentListCell = new CommentListCell(
service,...);
// notify view that cell is sliding
sliding.bind(commentListCell.slidingProperty());
return commentListCell;
});
Obviously, the sliding property of each cell may vary in time, but only the last one set will prevail, so it won't reflect the change of this property for any of the rest of the cells.
The fix is easy: don't use bindings, but a listener for each cell that will set the value when that cell is sliding:
commentsList.setCellFactory(cell -> {
final CommentListCell commentListCell = new CommentListCell(
service,...);
// notify view that cell is sliding
commentListCell.slidingProperty().addListener((obs, ov, nv) ->
sliding.set(nv));
return commentListCell;
});
I've filed an issue.
When a Kendo grid cell is open for editing, what is the best way to close the cell (and move to the next cell) with the right arrow key?
Take a look on the following snippet. It is a simple way for doing what you want:
// Bind any keyup interaction on the grid
$("#grid").on("keyup", "input", function(e)
{
// Right arrow keyCode
if (e.keyCode == 39)
{
// Ends current field edition.
// Kendo docs says that editCell method:
// "Switches the specified table cell in edit mode"
// but that doesn't happens and the current cell keeps on edit mode.
var td = $(e.target)
.trigger("blur");
// Find next field
td = td.closest("td").next();
// If no cell was found, look for the next row
if (td.length == 0)
{
td = $(e.target).closest("tr").next().find("td:first");
}
// As ways happens on kendo, a little (ugly)workaround
// for calling editCell, because calling without
// the timer doesn't seem to work.
window.setTimeout(function()
{
grid.editCell(td);
}, 1);
}
});
I don't know why but I could not save a Fiddle for that, I got 500 Internal error. Anyway it seems to achieve what you need. The grid needs to be in edit mode incell.
I want to add some functionality to the right arrow button, the one that puts the user selection into the selected elements panel. Specifically, when the user selects an element from the avaliable choices, I don't want the element to be taken to the selected elements panel if there are elements at the right panel of another palette. So basically, what I need is to execute custom java code when the button is pressed, and alter the default behavior of the palette when a condition occurs.
I found the solution somewhere else. Just in case someone needs it, here is what you have to do.
myPalette = new Palette<MyClass>(...) {
#Override
protected Recorder newRecorderComponent() {
Recorder<MyClass> recorder = super.newRecorderComponent();
recorder.add(new AjaxFormComponentUpdatingBehavior("onchange") {
protected void onUpdate(AjaxRequestTarget target) {
// Custom code
...
if (target != null)
// Update another component
target.add(anotherComponent);
}
}
);
return recorder;
}
};
I want to get the selected row in a GWT CellTable when the user pressed down the keys up or down. In my example I have a table with three columns (ID, name, date) and I have implemented the code to handle the click event. When clicking a row I get the selected object. Now I want to do the same when moving through the rows of the table using the arrows keys up and down.
This is my code:
// Create id column.
TextColumn<MyObject> idColumn = new TextColumn<MyObject>()
{
#Override
public String getValue(MyObject obj)
{
return String.valueOf(obj.getId());
}
};
// Create name column.
TextColumn<MyObject> nameColumn = new TextColumn<MyObject>()
{
#Override
public String getValue(MyObject obj)
{
return obj.getName();
}
};
// Create date column.
TextColumn<MyObject> dateColumn = new TextColumn<MyObject>()
{
#Override
public String getValue(MyObject obj)
{
return String.valueOf(obj.getDate());
}
};
// Create the CellTable element and add columns
CellTable<MyObject> table = new CellTable<MyObject>();
table.addColumn(idColumn, "ID");
table.addColumn(nameColumn, "Name");
table.addColumn(dateColumn, "Date");
// Create the selectioModel and the SelectionChangeEvent Handler
NoSelectionModel<MyObject> selectionModelMyObj = new NoSelectionModel<MyObject>();
Handler tableHandler = new SelectionChangeEvent.Handler()
{
#Override
public void onSelectionChange(SelectionChangeEvent event)
{
MyObject clickedObj = selectionModelMyObj.getLastSelectedObject();
Window.alert("Object selected: " + clickedObj);
}
};
// Add the handler to the selection model
selectionModelMyObj.addSelectionChangeHandler( tableHandler );
// Add the selection model to the table
table.setSelectionModel(selectionModelMyObj);
Thanks for all.
By default, keyboard navigation within a CellTable only updates the keyboard selected row. Only by hitting the enter key the row will become selected.
If you want the selection to follow the keyboard selection, the you can set the keyboard selection policy to be bound to selection. I'm not sure how it'll work with a NoSelectionModel though, would probably work better with a SingleSelectionModel.
You need to understand the Keyboard Selection policy w.r.t to GWT widgets and celltable.
The right way is to allow only row navigation with Keys "UP" and "Down" and cell navigation with Keys "Left" and "Right" . The selection of rows should be only on click of "Space" or "Enter" key.
All of this is already provided with GWT cell table. You can check the source code and demo http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCellTable
You can get the row of a CellTable with the getKeyboardSelectedRow() method. This will return the int index of the row that is selected via either the keyboard or mouse.
GWT Javadoc for CellTable:
http://www.gwtproject.org/javadoc/latest/
public int getKeyboardSelectedRow()
Get the index of the row that is currently selected via the keyboard, relative to the page start index.
This is not same as the selected row in the SelectionModel. The keyboard selected row refers to the row that the user navigated to via the keyboard or mouse.
Returns: the currently selected row, or -1 if none selected
I am using HP webOS 3.0 and the Enyo framework.
I have simple question that how can I show and hide images on click of a button. I have 2 images and I want to show images on click of one button and hide on click of another button.
I have two panes called left pane and right pane on a single view.
I have around 10 items on left pane.
On each of the item click appropriate view is called on right pane.
I am doing it with following code.
showTaskView: function(){
this.$.rightPane.selectViewByName("taskView");
},
Now I want to know how can access the control's property in the main view containing both left pane and right pane.
For example,
I want to show / hide image in the taskView displayed on the right pane on click of the button that is neither in the left pane or right pane but on the header part of the view that contains both left and right pane.
It is not allowing me to access the control's image.setSrc method from the main view.
I have tried it with the following code.
editTask: function() {
this.$.task.image.setSrc("images/image2.jpg");
}
and
editTask: function() {
this.$.image.setSrc("images/image2.jpg");
}
It gives me the following error:
Cannot read property 'setSrc' of undefined
With VirtualList, your hash will only reference the currently "selected" row. "selected" being either the row receiving an event or one explicitly selected using prepareRow(). If you want to change every row, you should set a property and call refresh() on the list to cause it to rerender.
The below should work (I think ...)
setupRow: function(inSender, inIndex) {
var row = this.data[inIndex];
if (row) {
this.$.caption1.setContent("Greet a " + row.task + ":");
this.$.star.setSrc("images/grey-star.png");
if(this.hideStart) this.$.star.hide();
this.$.caption2.setContent(row.assignto);
return true;
}
},
buttonClick: function(){
this.hideStar = true;
this.$.myVirtualList.refresh();
}