GWT: Back Button working twice, both by browser and my GWT code - gwt

The Scenario:
In my GWT webapp, I'm using KeyDownHandler to capture the event of user hitting backspace.
Say, I'm using it on widget 'B', and hitting the backpsace when widget 'B' is focused should take me to widget 'A'.
The Problem:
On hitting backspace, I'm taken to widget 'A', BUT only for a moment before the Browser takes me back to the previous page! I want my backspace event to be used only by my (GWT) code, not the browser.

final TextBox txtA = new TextBox();
TextBox txtB = new TextBox();
VerticalPanel testPanel = new VerticalPanel();
testPanel.add(txtA);
testPanel.add(txtB);
txtB.addKeyDownHandler(new KeyDownHandler() {
public void onKeyDown(KeyDownEvent event) {
if(event.getNativeKeyCode() == KeyCodes.KEY_BACKSPACE){
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
public void execute() {
txtA.setFocus(true);
}
});
}
}
});
RootPanel.get().add(testPanel);
This SO post might be usefull to you. However its still better to use shift+tab to navigate backwards in a web-based form IMHO.

You might have to prevent the default action from happening. And you might have to do it for some or all of the key events (keydown, keypress –in Firefox–, keyup); be sure to test as many browsers as possible!
That being said, hijacking global keyboard shortcuts is seen my many users as being too intrusive; and it might have consequences on accessibility of your app.

Related

Gwt DragStartHandler does not work in IE and Firefox

I have a FocusPanel in which contains a Label.
And then I add the DragStartHandler to FocusPanel like the code below:
focusPanel.addDomHandler(new DragStartHandler() {
#Override
public void onDragStart(DragStartEvent event)
{
focusPanel.getElement().getStyle().setBackgroundColor("yellow");
event.getDataTransfer().setDragImage(focusPanel.getElement(), 10, 10);
dragSourceIndex = getFocusPanelIndex(focusPanel);
}
}, DragStartEvent.getType());
I can drag this in Chrome, but cannot do this in IE and Firefox. Moreover, if I highlight the focuspanel's text first, then I can drag when it's highlighted.
Does anyone know what is wrong?
Thanks.
I make a go-around by adding highlight on MouseDownEvent.
focusPanel.addMouseDownHandler(new MouseDownHandler() {
#Override
public void onMouseDown(MouseDownEvent event)
{
markText(focusPanel.getWidget().getElement());
}
});
The markText method is learn from here:
Set selected text in GWT (in order to make copy paste easier)
This is a hacking but at least works.
Now the issue is, the "drop" events are not happening in IE. I use IE 11.

Block gwt DisclosurePanel on open state

How may I block a gwt DisclosurePanel on the open state ?
I mean, how can I prevent this DisclosurePanel to close if the user click the header more than once ?
(My header is a textBox, I want the user to enter a text, and the panel should remain open if the user unfocus the textBox and focus newly by clicking it. The DisclosurePanel content has a "cancel" button that closes the panel)
Thank you very much.
I edit my question after 2 first answers: I would like to avoid to reopen the DisclosurePanel once closed to avoid flashing effect. I actually want to prevent the DisclosurePanel to close. Maybe sinkEvents can help me... if so, how? Thanks.
A NativePreviewHandler receives all events before they are fired to their handlers. By registering a nativePreviewHandler the first time your disclosurePanel is opened, you can cancel the click event. You can later decide to remove this handler by preventClose.removeHandler();
HandlerRegistration preventClose = null;
....
panel.addOpenHandler(new OpenHandler<DisclosurePanel>() {
#Override
public void onOpen(OpenEvent<DisclosurePanel> event) {
if (preventClose == null){
preventClose = Event.addNativePreviewHandler(new NativePreviewHandler() {
#Override
public void onPreviewNativeEvent(NativePreviewEvent event) {
if (event.getTypeInt()==Event.ONCLICK && event.getNativeEvent().getEventTarget() == panel.getHeader().getElement().cast())
event.cancel();
}
});
}
}
});
The obvious answer is review the javadoc here: https://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/DisclosurePanel.html
There is a setOpen() method that: Changes the visible state of this DisclosurePanel.
Set it to false from a click event to capture the user action.
The JavaDoc is right here: https://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/DisclosurePanel.html
jamesDrinkard pointed the old 1.5 javadoc.
You can use the addCloseHandler(CloseHandler<DisclosurePanel> handler) method to add a handler so when the user tries to close it you can reopen it again with setOpen().
Maybe not the best way, but it worked for me (maybe just one of both will work too):
dPanel.setOpen(true);
dPanel.addOpenHandler(new OpenHandler<DisclosurePanel>() {
#Override
public void onOpen(OpenEvent<DisclosurePanel> event) {
dPanel.setOpen(true);
}
});
dPanel.addCloseHandler(new CloseHandler<DisclosurePanel>() {
#Override
public void onClose(CloseEvent<DisclosurePanel> event) {
dPanel.setOpen(true);
}
});

focus & key board listner problem in cell table in gwt

I have one small problem i.e. one textbox is their when click on the text box the popup is shows below the text box.The popup contains celltable
i write keypresslisner for textbox when i press Down And UP arrow the focus is set to be cellTable And also we still press down and up arrows its highlites the rows in celltable
anyone please tell me how to solve it...it's my request
When I wrote code like this:
box.addKeyPressHandler(new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent event) {
if (event.getNativeEvent().getKeyCode() == 38) {
celltable.setFocus(true);
} else if (event.getNativeEvent().getKeyCode() == 40) {
celltable.setFocus(true);
}
}
});
only the focus is goes to the cell table
The question is a little bit unclear, but I think you may be helped by FocusPanel:
http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/FocusPanel.html
Wrap your CellTable in this FocusPanel and you can do setFocus() on that instead. The FocusPanel has addKeyPressHandler(), so you can capture further keypress events there, also when your textbox has lost the focus.

Integration Widget (GWT) with DynamicForm (Smartgwt) - com.google.gwt.user.client.ui.AttachDetachException

I had this problem when I created a Window (Smartgwt) and put a DynamicForm (Smartgwt) in this Window, In this DynamicForm, I have a CanvasItem (Smartgwt) in which I put a RichTextArea (GWT). And when I press "ESC", I can quit the Window (Smartgwt) without probleme. But when I press "F5" to refresh my application, the browser pops up a exception saying "com.google.gwt.user.client.ui.AttachDetachException". To solve this problem, I do the following:
public class MailWindow extends Window {
public MailWindow(){
this.addCloseClickHandler(new CloseClickHandler() {
public void onCloseClick(CloseClientEvent event) {
form.getRichTextArea().removeFromParent();
MailWindow.this.destroy();
}
});
}
}
Which solved my problem! :)
Kewei
Thanks for posting this. We'll try to incorporate the logic in SmartGWT itself so that you don't need to explicitly call removeFromParent()

How do you rebuild the GWT History stack?

I have a larger application that I'm working with but the GWT History documentation has a simple example that demonstrates the problem. The example is copied for convenience:
public class HistoryTest implements EntryPoint, ValueChangeHandler
{
private Label lbl = new Label();
public void onModuleLoad()
{
Hyperlink link0 = new Hyperlink("link to foo", "foo");
Hyperlink link1 = new Hyperlink("link to bar", "bar");
Hyperlink link2 = new Hyperlink("link to baz", "baz");
String initToken = History.getToken();
if (initToken.length() == 0)
{
History.newItem("baz");
}
// Add widgets to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.add(lbl);
panel.add(link0);
panel.add(link1);
panel.add(link2);
RootPanel.get().add(panel);
History.addValueChangeHandler(this); // Add history listener
History.fireCurrentHistoryState();
}
#Override
public void onValueChange(ValueChangeEvent event)
{
lbl.setText("The current history token is: " + event.getValue());
}
}
The problem is that if you refresh the application, the history stack gets blown away. How do you preserve the history so that if the user refreshes the page, the back button is still useful?
I have just tested it with Firefox and Chrome for my application and page refresh does not clear the history. Which browser do you use? Do you have the
<iframe src="javascript:''" id='__gwt_historyFrame' style='position:absolute;width:0;height:0;border:0'></iframe>
in your HTML?
GWT has catered for this problem by providing the History object. By making a call to it's static method History.newItem("your token"), you will be able to pass a token into your query string.
However you need to be aware that any time there is a history change in a gwt application, the onValueChange(ValueChangeEvent event){} event is fired, and in the method you can call the appropriate pages. Below is a list of steps which i use to solve this problem.
Add a click listener to the object that needs too call a new page. In handling the event add a token to the history.(History.newItem("new_token").
Implement the ValueChangeHandler in the class that implements your EntryPoint.
Add onValueChangeHandler(this) listener to the class that implements the EntryPoint. Ensure that the line is add in the onModuleLoad() method (it is important it is added in this method) of the class that implements the EntryPoint(pretty obvious ha!)
Finally implement onValueChange(ValueChangeEvent event){ //call a new page } method.
That's it