I am loading file icons on a tile grid in a smartGWT project. When Enter key is pressed, I want to open the selected file for display.
When I override the onKeyPress handler, it does work, but the tile grid navigational behavior using left/right/up/down arrow keys is lost.
My question is.., how to retain the default processing behavior, while still override the Enter key.
tileGrid.addKeyPressHandler (new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent event) {
if (EventHandler.getKey().equals("Enter")) {
//do something special here
}
else {
**//TODO: do the default processing..**.
}
}
});
EDIT:
#Ras, here is the code that simulates the problem.
package com.rv.gwtsample.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.widgets.events.KeyPressEvent;
import com.smartgwt.client.widgets.events.KeyPressHandler;
import com.smartgwt.client.widgets.tile.TileGrid;
import com.smartgwt.client.widgets.tile.TileRecord;
/**
* #author rvnath
*
*/
public class MyTileGrid implements EntryPoint {
/* (non-Javadoc)
* #see com.google.gwt.core.client.EntryPoint#onModuleLoad()
*/
#Override
public void onModuleLoad() {
// TODO Auto-generated method stub
TileGrid grid = new TileGrid();
grid.setLeft(50);
grid.setTop(50);
grid.setWidth("300");
grid.setHeight("200");
DetailViewerField field = new DetailViewerField("Name");
grid.setFields(field);
grid.addKeyPressHandler(new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent event) {
if (event.getKeyName().equals("Enter"))
GWT.log("Enter pressed");
}
});
Record[] rec = new TileRecord[32];
for (int i=0; i<32; ++i) {
rec[i] = new TileRecord();
}
grid.setData(rec);
grid.draw();
}
}
If I disable the onKeyPress handler, arrow keys can navigate between the elements of the tile grid. If I enable, then the entire tile grid panel scrolls, instead of selection change.
Instead of using KeyPressHandler, try the KeyDownHandler, it works.
tileGrid.addKeyDownHandler(new KeyDownHandler() {
#Override
public void onKeyDown(KeyDownEvent event) {
if (EventHandler.getKey().equalsIgnoreCase("Enter")){
openModal(tileGrid.getSelectedRecord());
}
}
});
Tested with the latest 3.0 smartgwt build.
#Mupparthy, I've also implemented keyPressHandler() for TextAreaItem. I also had the same requirement that only delete & backspace keys were needed to be handled. What I did is, don't handle the else part. It automatically did default processing for other keys including all the arrow keys. So if it's not working for you, provide me a stand alone code so that we can make it work.
Related
I'm trying to emulate normal browser behaviour in my vaadin grid, which includes middle mouse click to open in a new tab:
addItemClickListener(e -> {
boolean newTab = e.getMouseEventDetails().getButton() == MouseEventDetails.MouseButton.MIDDLE || e.getMouseEventDetails().isCtrlKey();
//open in window or new tab
});
However, the middle mouse button is not registered by vaadin. How could I get this to work?
That feature was included in vaadin-grid (which goes into Vaadin 10) and will not work in Vaadin 8.
For Vaadin 8, you can either intercept the event with some client-side extension, or use a ComponentRenderer for adding a Panel to each component (which works, but is not ideal because it degrades performance):
grid.addColumn(item->{
Panel p = new Panel(item.getName());
p.setStyleName(ValoTheme.PANEL_BORDERLESS);
p.addClickListener(ev->{
System.out.println(ev.getButtonName());
});
return p;
}).setRenderer(new ComponentRenderer());
A client-side extension, on the other hand, allows listening to javascript events (such as MouseEvent) and triggering a server event in response. Creating a extension is quite a complex topic (since it uses a part of the API that is normally hidden from the developer) but it allows direct access to rendered DOM, which is not possible otherwise.
The following resources from the documentation may give you a starting point:
Creating a component extension (which describes a simple extension with Java code only) and Integrating JavaScript Components and Extension (which explains how to add native JavaScript code to your extension).
How I solved the problem in my specific case:
Server side:
public class MyGrid<T> extends Grid<T> {
public MyGrid(String caption, DataProvider<T, ?> dataProvider) {
super(caption, dataProvider);
MiddleClickExtension.extend(this);
}
public static class MiddleClickExtension<T> extends AbstractGridExtension<T> {
private MiddleClickExtension(MyGrid<T> grid) {
super.extend(grid);
registerRpc((rowKey, columnInternalId, details) -> grid.fireEvent(
new ItemClick<>(grid, grid.getColumnByInternalId(columnInternalId), grid.getDataCommunicator().getKeyMapper().get(rowKey), details)),
MiddleClickGridExtensionConnector.Rpc.class);
}
public static void extend(MyGrid<?> grid) {
new MiddleClickExtension<>(grid);
}
#Override
public void generateData(Object item, JsonObject jsonObject) {
}
#Override
public void destroyData(Object item) {
}
#Override
public void destroyAllData() {
}
#Override
public void refreshData(Object item) {
}
}
}
Client side:
#Connect(MyGrid.MiddleClickExtension.class)
public class MiddleClickGridExtensionConnector extends AbstractExtensionConnector {
#Override
protected void extend(ServerConnector target) {
getParent().getWidget().addDomHandler(event -> {
if (event.getNativeButton() == NativeEvent.BUTTON_MIDDLE) {
event.preventDefault();
CellReference<JsonObject> cell = getParent().getWidget().getEventCell();
getRpcProxy(Rpc.class).middleClick(cell.getRow().getString(DataCommunicatorConstants.KEY), getParent().getColumnId(cell.getColumn()),
MouseEventDetailsBuilder.buildMouseEventDetails(event.getNativeEvent(), event.getRelativeElement()));
}
}, MouseDownEvent.getType());
}
#Override
public GridConnector getParent() {
return (GridConnector) super.getParent();
}
public interface Rpc extends ServerRpc {
void middleClick(String rowKey, String columnInternalId, MouseEventDetails details);
}
}
I have a TableView which is editable and multiple selection enabled. I wish to enter new data to some columns and rows. Then I wish to select using mouse and press CTRL-C to copy to clipboard.
I can use column.setCellFactory (TextFieldTableCell.forTableColumn ()); and my code works well for entering data like EXCEL. I could not select using mouse.
I read the reference How can I select multiple cells in tableview with javafx only by mouse?. If I try to implement it I need to use
final Callback<TableColumn<MyDataClass, String>, TableCell<MyDataClass, String>> myCellFactory = new DragSelectionCellFactory ();
column.setCellFactory (myCellFactory);.
Then I am unable to enter any data as CellFactory is different now..
How may I enter data like EXCEL and also select mouse and use CTRL-C to copy? Thanks for any help.
You can refactor the code in the link you provided so that it references another cell factory, and "decorates" the cells with the dragging functionality:
public class DragSelectionCellFactory<S,T> implements Callback<TableColumn<S,T>, TableCell<S,T>> {
private final Callback<TableColumn<S,T>, TableCell<S,T>> factory ;
public DragSelectionCellFactory(Callback<TableColumn<S,T>, TableCell<S,T>> factory) {
this.factory = factory ;
}
public DragSelectionCellFactory() {
this(col -> new TableCell<S,T>() {
#Override
protected void updateItem(T item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
} else {
setText(item.toString());
}
}
});
}
#Override
public TableCell<S,T> call(final TableColumn<S,T> col) {
TableCell<S,T> cell = factory.call(col);
cell.setOnDragDetected(event -> {
cell.startFullDrag();
col.getTableView().getSelectionModel().select(cell.getIndex(), col);
});
cell.setOnMouseDragEntered(event -> {
col.getTableView().getSelectionModel().select(cell.getIndex(), col);
});
return cell ;
}
}
Then you can do
TableColumn<Person, String> column = ...
column.setCellFactory(
new DragSelectionCellFactory<Person, String>(TextFieldTableCell.forTableColumn()));
I know that it is really easy to create a FileDownloader and call extend with a Button. But how do I start a download without the Button?
In my specific situation right now I have a ComboBox and the file I'd like to send to the user is generated after changing its value, based on the input. The file should be sent immediately without waiting for another click. Is that easily possible?
Thanks
raffael
I found a solution myself. Actually two.
The first one uses the deprecated method Page.open()
public class DownloadComponent extends CustomComponent implements ValueChangeListener {
private ComboBox cb = new ComboBox();
public DownloadComponent() {
cb.addValueChangeListener(this);
cb.setNewItemsAllowed(true);
cb.setImmediate(true);
cb.setNullSelectionAllowed(false);
setCompositionRoot(cb);
}
#Override
public void valueChange(ValueChangeEvent event) {
String val = (String) event.getProperty().getValue();
FileResource res = new FileResource(new File(val));
Page.getCurrent().open(res, null, false);
}
}
The javadoc here mentions some memory and security problems as reason for marking it deprecated
In the second I try to go around this deprecated method by registering the resource in the DownloadComponent. I'd be glad if a vaadin expert comments this solution.
public class DownloadComponent extends CustomComponent implements ValueChangeListener {
private ComboBox cb = new ComboBox();
private static final String MYKEY = "download";
public DownloadComponent() {
cb.addValueChangeListener(this);
cb.setNewItemsAllowed(true);
cb.setImmediate(true);
cb.setNullSelectionAllowed(false);
setCompositionRoot(cb);
}
#Override
public void valueChange(ValueChangeEvent event) {
String val = (String) event.getProperty().getValue();
FileResource res = new FileResource(new File(val));
setResource(MYKEY, res);
ResourceReference rr = ResourceReference.create(res, this, MYKEY);
Page.getCurrent().open(rr.getURL(), null);
}
}
Note: I do not really allow the user to open all my files on the server and you should not do that either. It is just for demonstration.
Here is my work-around. It works like a charm for me. Hope it will help you.
Create a button and hide it by Css (NOT by code: button.setInvisible(false))
final Button downloadInvisibleButton = new Button();
downloadInvisibleButton.setId("DownloadButtonId");
downloadInvisibleButton.addStyleName("InvisibleButton");
In your theme, add this rule to hide the downloadInvisibleButton:
.InvisibleButton {
display: none;
}
When the user clicks on menuItem: extend the fileDownloader to the downloadInvisibleButton, then simulate the click on the downloadInvisibleButton by JavaScript.
menuBar.addItem("Download", new MenuBar.Command() {
#Override
public void menuSelected(MenuBar.MenuItem selectedItem) {
FileDownloader fileDownloader = new FileDownloader(...);
fileDownloader.extend(downloadInvisibleButton);
//Simulate the click on downloadInvisibleButton by JavaScript
Page.getCurrent().getJavaScript()
.execute("document.getElementById('DownloadButtonId').click();");
}
});
I'm trying to create a couple of BasicEditField objects after i get the number of fields that i want from an ObjectChoiceField.
Problem: the BasicEditField fields that i add to my screen don't refresh unless i do it in the listener from my ObjectChoiceField.
what i want to do :
select the number of BasicEditFields that i want.
refresh the screen so the fields added appear.
PD: if you need more info, just tell me, and sorry about my english. I'm new at developing for the BlackBerry plataform
public final class MyScreen extends MainScreen
{
private int fields_lenght;
public MyScreen()
{
// Set the displayed title of the screen
setTitle("Example");
fields_lenght =0;
final String shortcodes[] = {"1","2","3"};
final ObjectChoiceField dropdownlist=new ObjectChoiceField("Select a number of fields",shortcodes);
this.add(dropdownlist);
dropdownlist.setChangeListener( new FieldChangeListener() {
public void fieldChanged( Field arg0, int arg1 ) {
if(arg1 != PROGRAMMATIC){
fields_lenght= Integer.parseInt(shortcodes[dropdownlist.getSelectedIndex()]);
}
}
} );
// how to refresh the screen with the new fields ???
BasicEditField fields[]=new BasicEditField [fields_lenght] ;
for(int i = 0; i<fields.length;i++){
fields[i]=new BasicEditField("Campo "+i,"");
this.add(fields[i]);
}
}
}
You really should add or delete the fields from within your ObjectChoiceField listener. That's when you know what the proper number of fields is. (Certainly, if you just want to keep your code neat and clean, you could define a separate method, that is called from the choice field listener ... that's not much different).
Try something like this:
public final class MyScreen extends MainScreen {
/** A cached vector of the BasicEditFields, to make deleting easier */
private Vector fields;
public MyScreen() {
super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);
setTitle("Example");
final String shortcodes[] = {"1","2","3"};
final ObjectChoiceField dropdownlist = new ObjectChoiceField("Select a number of fields", shortcodes);
add(dropdownlist);
fields = new Vector();
final Screen screen = this;
dropdownlist.setChangeListener( new FieldChangeListener() {
public void fieldChanged( Field field, int context ) {
if (context != PROGRAMMATIC) {
// how many fields has the user chosen?
int fieldsLength = Integer.parseInt(shortcodes[dropdownlist.getSelectedIndex()]);
while (fieldsLength > fields.size()) {
// we need to ADD more fields
Field f = new BasicEditField("Campo " + fields.size(), "");
fields.addElement(f);
screen.add(f);
}
while (fieldsLength < fields.size()) {
// we need to DELETE some fields
Field f = (Field)fields.elementAt(fields.size() - 1);
fields.removeElement(f);
screen.delete(f);
}
}
}
});
}
I defined a new member named fields, which just makes it easier to keep track of the basic edit fields (in case this screen has many other fields, too).
When the choice field listener is called, I determine how many fields the user wants; if they need more, I add them to the screen, and to the fields Vector. If they want fewer, I delete some fields from the end of the Vector, and remove them from the Screen.
Note: there should be no need to call invalidate() here. Calling Screen#add() or Screen#delete() should add/delete the fields and cause repainting.
I am working on ListView section, in this, the user can search the content by name and directly move at the first element of List via pressing a keyboard button. Like, if you press button B from (right vertical manager) it will scroll the list and move focus to first record of B.
The code is working fine in simulator but it's not working on Touch device - I have BB 9380 Curve.
here is the code for :
LabelField a = new LabelField("A" , FOCUSABLE)
{
protected void paint(Graphics graphics)
{
graphics.setColor(0xC4C4C4);
super.paint(graphics);
}
protected boolean navigationClick(int status, int time)
{
//fieldChangeNotify(1);
injectKey(Characters.LATIN_CAPITAL_LETTER_A);
injectKey(Characters.LATIN_CAPITAL_LETTER_A);
return true;
}
};
private void injectKey(char key)
{
try
{
searchList.setFocus();
KeyEvent inject = new KeyEvent(KeyEvent.KEY_DOWN, key, 0);
inject.post();
/*inject.post();*/
} catch (Exception e) {
Log.d("In injectKey :: :: :: "+e.toString());
MessageScreen.msgDialog("In Inject Key "+e.toString());
}
}
Alternate Solution
I would recommend a different strategy for this. Instead of trying to simulate key press events, I would define one method that handles a keypress of a certain letter, or a touch click on that same letter's LabelField.
Source: blackberry.com
So, you can have code that handles key presses by using
protected boolean keyChar( char character, int status, int time )
{
// you might only want to do this for the FIRST letter entered,
// but it sounds like you already have the keypress handling
// the way you want it ...
if( CharacterUtilities.isLetter(character) )
{
selectLetter(character);
return true;
}
return super.keyChar( character, status, time );
}
and then also handle touch events:
LabelField a = new LabelField("A" , FOCUSABLE)
{
protected void paint(Graphics graphics)
{
graphics.setColor(0xC4C4C4);
super.paint(graphics);
}
protected boolean navigationClick(int status, int time)
{
char letter = getText().charAt(0);
selectLetter(letter);
return true;
}
};
then, simply define a method that takes in one character, and scrolls to the start of that part of the list:
private void selectLetter(char letter);
Key Injection
If you really, really want to simulate key presses, though, you might try changing the code so that it injects two events: key down, and then key up (you're currently injecting two key down events). This might be causing problems.
injectKey(Characters.LATIN_CAPITAL_LETTER_A, true);
injectKey(Characters.LATIN_CAPITAL_LETTER_A, false);
with
private void injectKey(char key, boolean down)
{
try
{
searchList.setFocus();
int event = down ? KeyEvent.KEY_DOWN : KeyEvent.KEY_UP;
KeyEvent inject = new KeyEvent(event, key, 0);
inject.post();
} catch (Exception e) { /** code removed for clarity **/
}
}
Additional Note
For UIs, I like to trigger events on the key up, or unclick events. I think this makes a better experience for the user. So, you could replace keyChar() with keyUp() and navigationClick() with navigationUnclick() if you want to do this.