Develop Reference

GWT DateBox - Disable specific date

I want to disable a specific date in my date box. I tried it with this code, but the specified date (current day) does not get disabled.
final DateBox dateBox = new DateBox();
dateBox.getDatePicker().addShowRangeHandler(new ShowRangeHandler<Date>() {
#Override
public void onShowRange(final ShowRangeEvent<Date> event) {
List<Date> disabledDates = new ArrayList<Date>();
disabledDates.add(new Date());
dateBox.getDatePicker().setTransientEnabledOnDates(false, disabledDates);
}
});
Is there an other way to do this?
Edit: Following the example of apanizo, the day 29.5 looks greyed out, but is clickable nevertheless.

Really sorry, I did not test the code of my last answer.
I have just tried and your code worked to me, the only thing that I did was pass all the dates that I do not want through the setTransientEnabledOnDates(false, dateToDisable); method.
Example:
public void onModuleLoad() {
final DateBox dateBox = new DateBox();
dateBox.getDatePicker().addShowRangeHandler(new ShowRangeHandler<Date>() {
#Override
public void onShowRange(final ShowRangeEvent<Date> dateShowRangeEvent) {
final Date today = new Date(); //30 May 3014
final Date yesterday = new Date(today.getTime()- 24*60*60*1000);
//disabling yesterday - 29 May of 2014
dateBox.getDatePicker().setTransientEnabledOnDates(false, yesterday);
}
});
RootPanel.get().add(dateBox);
}
If you want to disable the click event on a disabled date, this is a resolved and not delivered bug.
See:
https://code.google.com/p/google-web-toolkit/issues/detail?id=7876
I think in the GWT's 2.7 version it will be released, in the mean time you can patch it introducing in the line 77 of com.google.gwt.user.datepicker.client.CellGridImpl :
addDomHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
if (isActive(Cell.this)) {
setSelected(Cell.this);
}
}
}, ClickEvent.getType());
In detail here

Simply add a value changed listener on date picker to listen for any change in the date.
For example if current date is not allowed and it's selected then simply discard the changes and revert back to previous date or show a warning message as well if needed and add style for current date to look it as disabled.
Here date time format is used to check for date only, time is discarded while checking dates.
Sample code:
private Date prevDate;
...
final DateBox dateBox = new DateBox();
final DateTimeFormat dateTimeFormat=DateTimeFormat.getFormat("MM/dd/yyyy");
dateBox.getDatePicker().addValueChangeHandler(new ValueChangeHandler<Date>() {
#Override
public void onValueChange(ValueChangeEvent<Date> event) {
if (dateTimeFormat.format(event.getValue()).equals(dateTimeFormat.format(new Date()))) {
dateBox.setValue(prevDate);
// show warning message here
}else{
prevDate=event.getValue();
}
}
});

Tapestry5 zone doesn't update on radio button change using zoneUpdater

I've got 2 radio buttons on my Tapestry5 page and I want to update zone when value changes:
<t:radio t:id="allDay" t:mixins="zoneUpdater" t:event="allDayChanged" t:clientEvent="change" zone="timeRecZone"/>
<t:radio t:id="timeRestricted" t:mixins="zoneUpdater" t:event="timeRestrictedChanged" t:clientEvent="change" zone="timeRecZone"/>
<t:zone t:update="show" elementName="div" t:id="timeRecZone" id="timeRecZone">
<t:if test="timeRestrictedSelected">
.
.
.
I'm using known zoneUpdater mixin which works fine for me with textfield at other place of my page. But here, I don't really see timeRecZone get updated, because area under the IF condition is not being shown and I don't see following statement being logged when I'm clicking radios.
public boolean isTimeRestrictedSelected() {
log.info("***** isTimeRestrictedSelected...");
return selectedTimeRestriction == TimeRestriction.TIME_RESTRICTED;
}
This part (change event) works though:
public void onAllDayChanged() {
selectedTimeRestriction = TimeRestriction.ALL_DAY;
log.info("***** allDayChanged called: " + selectedTimeRestriction);
}
public void onTimeRestrictedChanged() {
selectedTimeRestriction = TimeRestriction.TIME_RESTRICTED;
log.info("***** timeRestrictedChanged called: " + selectedTimeRestriction);
}
Has anybody experienced this while working with radio/zone update? Many thanks.

Mea culpa, solution is here:
public void onAllDayChanged() {
selectedTimeRestriction = TimeRestriction.ALL_DAY;
ajaxResponseRenderer.addRender("timeRecZone", timeRecZone);
}
public void onTimeRestrictedChanged() {
selectedTimeRestriction = TimeRestriction.TIME_RESTRICTED;
ajaxResponseRenderer.addRender("timeRecZone", timeRecZone);
}

Adding selection listener to GXT Grid?

I'm trying to add a selection listener to my GXT (Ext GWT) Grid, but I can't seem to get it to fire. I've tried many variations of this with no luck:
myGrid.addListener(Events.Select, new SelectionListener<ComponentEvent>() {
#Override
public void componentSelected(ComponentEvent ce) {
System.out.println("selected");
}
});

myGrid.getSelectionModel().addSelectionChangedListener(new SelectionChangedListener<ModelData>() {
#Override
public void selectionChanged(SelectionChangedEvent<ModelData> se) {
...
}
});
Try this code

To upgrade this answer to GXT v3
grid.getSelectionModel().addSelectionChangedHandler(
new SelectionChangedHandler<ModelData>(){
#Override
public void onSelectionChanged(SelectionChangedEvent<ModelData> event) {
}
});

Try:
myGrid.addListener(Events.Select, new Listener<GridEvent<ModelData>>() {
#Override public void handleEvent(GridEvent<ModelData> be) {
System.out.println("selected");
}
});
Replacing ModelData with your model type if necessary.

Seemed to have found a workaround for this:
myGrid.addListener(Events.OnClick, new Listener<ComponentEvent>() {
#Override
public void handleEvent(ComponentEvent ce) {
// Handle the grid event
}
});
Seems like you just have to be generic about it, then you can check and cast your ComponentEvent to a GridEvent.

Do you use GXT 2.x version ? Did you check whether required events are sinked? for example like
grid.sinkEvents(Event.ONCLICK | Event.ONDBLCLICK | Event.MOUSEEVENTS);

Disable back button in GWT

Is there a way to disable the Back button in a browser (basically clearing the History token stack) in GWT? Once I browse to a certain page in my application I want to make sure that the user can't use the back button to go back, but only be able to use links on the page to navigate the site.

You cannot disable a button just intercept it and change its return to something the browser does not understand.
This removes the history:
Window.addWindowClosingHandler(new ClosingHandler() {
#Override
public void onWindowClosing(ClosingEvent event) {
event.setMessage("My program");
}
});
To understand it see: http://groups.google.com/group/google-web-toolkit/browse_thread/thread/8b2a7ddad5a47af8/154ec7934eb6be42?lnk=gst&q=disable+back+button#154ec7934eb6be42
However, I would recommend not doing this because your it goes against good UI practices. Instead you should figure out a way that the back button does not cause a problem with your code.

Call the method below in the onModuleLoad().
private void setupHistory() {
final String initToken = History.getToken();
if (initToken.length() == 0) {
History.newItem("main");
}
// Add history listener
HandlerRegistration historyHandlerRegistration = History.addValueChangeHandler(new ValueChangeHandler() {
#Override
public void onValueChange(ValueChangeEvent event) {
String token = event.getValue();
if (initToken.equals(token)) {
History.newItem(initToken);
}
}
});
// Now that we've setup our listener, fire the initial history state.
History.fireCurrentHistoryState();
Window.addWindowClosingHandler(new ClosingHandler() {
boolean reloading = false;
#Override
public void onWindowClosing(ClosingEvent event) {
if (!reloading) {
String userAgent = Window.Navigator.getUserAgent();
if (userAgent.contains("MSIE")) {
if (!Window.confirm("Do you really want to exit?")) {
reloading = true;
Window.Location.reload(); // For IE
}
}
else {
event.setMessage("My App"); // For other browser
}
}
}
});
}

I found a way to make GWT ignore the back-button: Just add historyitem x if no historyitem was set and do nothing on x.
set a historyitem on startup
History.newItem("x")
in the ValueChangeHandler of History add the following:
String historyToken = event.getValue();
if (!historyToken.equals("x"))
History.newItem("x");

Window.addWindowClosingHandler(new ClosingHandler() {
#Override
public void onWindowClosing(ClosingEvent event) {
event.setMessage("My program");
}
});
That is not a fool proof solution. In fire fox I can press the back button and the onWindowClosing method is never invoked. The reason is that I have used History.newItem() and since history exists the back button or backspace buttons simply navigate through the browser history.
So....fix that :)

Put this in your index.html file:
window.open('html page(For example trial.html)', 'Name of the desired site', width='whatever you want',height='whatever you want', centerscreen=yes, menubar=no,toolbar=no,location=no,
personalbar=no, directories=no,status=no, resizable=yes, dependent=no, titlebar=no,dialog=no');

Hooking a GWT event onto an element in an external iframe

I am writing a GWT app that involves interacting with an external document in an iframe. As a proof of concept, I am trying to attach a click handler to a button.
The following works in javascript
var iframe = document.getElementById("rawJSIFrame");
var doc = iframe.contentDocument;
var body = doc.body;
var button = doc.getElementsByTagName("input").namedItem("submit");
button.onclick = function() {
alert("Clicked!");
};
Trying to do the equivalent in GWT, I did the following:
public void addClickHandlerToSubmitButton(String buttonElementName, ClickHandler clickHandler) {
IFrameElement iframe = IFrameElement.as(frame.getElement());
Document frameDocument = getIFrameDocument(iframe);
if (frameDocument != null) {
Element buttonElement = finder(frameDocument).tag("input").name(buttonElementName).findOne();
ElementWrapper wrapper = new ElementWrapper(buttonElement);
HandlerRegistration handlerRegistration = wrapper.addClickHandler(clickHandler);
}
}
private native Document getIFrameDocument(IFrameElement iframe)/*-{
return iframe.contentDocument;
}-*/;
The following is the ElementWrapper class:
public class ElementWrapper extends Widget implements HasClickHandlers {
public ElementWrapper(Element theElement) {
setElement(theElement);
}
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
}
The code to find the button works fine but the actual click event handler is not getting invoked. Has anybody had a similar issue before, and how did you resolve it?
Thanks in advance,
Tin

Hilbrand is right about the problem being that the GWT method onAttach() was not called.
I implemented your original solution, adding the following method to ElementWrapper:
public void onAttach() {
super.onAttach();
}
And called added wrapper.onAttach() after the ElementWrapper is created. Works like a charm!

I expect the problem is that the GWT method onAttach() is not called when you use the wrapping as in your first example. You can try to use the static wrap method on the Button widget. Although to use this the input must be of type button. Or have a look at the implementation of the wrap method. Here is the modified code when using the wrap method:
Element buttonElement = finder(frameDocument).tag("input").name(buttonElementName).findOne();
Button button = Button.wrap(buttonElement);
HandlerRegistration handlerRegistration = button.addClickHandler(clickHandler);

After researching this further, I found that the iframe is irrelevant. The same behaviour doesn't work on a normal button on the host page.
I basically fixed it by using JSNI to replicate part of GWT's event handling mechanism. The following works:
Element buttonElement = DOM.getElementById("externalButton");
new CustomElementWrapper(buttonElement).addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("GWT hooked into button");
}
});
Where CustomElementWrapper is:
public class CustomElementWrapper extends Widget implements HasClickHandlers {
private ClickEventManager clickEventManager;
public CustomElementWrapper(Element theElement) {
setElement(theElement);
clickEventManager = new ClickEventManager(theElement);
}
public HandlerRegistration addClickHandler(ClickHandler handler) {
//The 'right' way of doing this would be the code below. However, this doesn't work
// A bug in GWT?
//
// return addDomHandler(handler, ClickEvent.getType());
return clickEventManager.registerClickHandler(handler);
}
void invokeClickHandler() {
clickEventManager.invokeClickHandler();
}
public boolean isClickHandlerRegistered() {
return clickEventManager.isClickHandlerRegistered();
}
}
Finally, the ClickEventManager, where the actual work happens is:
public class ClickEventManager {
private boolean clickHandlerRegistered = false;
private ClickHandler clickHandler;
private Element element;
public ClickEventManager(Element element) {
this.element = element;
}
public void invokeClickHandler() {
//This shouldn't really be null but we are bypassing GWT's native event mechanism
//so we can't create an event
clickHandler.onClick(null);
}
public boolean isClickHandlerRegistered() {
return clickHandlerRegistered;
}
HandlerRegistration registerClickHandler(ClickHandler handler) {
clickHandler = handler;
if (!clickHandlerRegistered) {
registerClickHandlerInJS(element);
clickHandlerRegistered = true;
}
return new HandlerRegistration() {
public void removeHandler() {
//For now, we don't support the removal of handlers
throw new UnsupportedOperationException();
}
};
}
private native void registerClickHandlerInJS(Element element)/*-{
element.__clickManager = this;
element.onclick
= function() {
var cm = this.__clickManager;
cm.#com.talktactics.agent2.client.widgets.ClickEventManager::invokeClickHandler()();
}
}-*/;
}
Personally, I hate this solution because I appear to be duplicating GWT's event handling and quite possibly introducing nasty javascript memory leaks. Any ideas on why my first post doesn't work (remembering that the iframe aspect is a red herring), would be appreciated.
Thanks,
Tin

You may find this helpful:
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.HasClickHandlers;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.ui.AbsolutePanel;
public class DirectPanel extends AbsolutePanel implements HasClickHandlers {
public DirectPanel(Element elem) {
super(elem.<com.google.gwt.user.client.Element> cast());
onAttach();
}
#Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
}
You will then be able to make arbitrary containers into widget containers:
Element root = Document.get().getElementById("target");
DirectPanel p = new DirectPanel(root);
Button register = new Button("Register");
register.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
// ...
}
});
p.add(register);
And bind events to arbitrary elements:
Element root = Document.get().getElementById("target");
DirectPanel p = new DirectPanel(root);
p.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
// ...
}
});
Specifically in your case, try this:
IFrameElement frm = Document.get().createIFrameElement();
Document d = frm.getContentDocument();
NodeList<Element> inputs = d.getElementsByTagName("input");
InputElement target = null;
for(int i = 0; i < inputs.getLength(); ++i) {
Element e = inputs.getItem(0);
if (e.getNodeName().equals("submit")) {
target = InputElement.as(e);
break;
}
}
if (target != null) {
DirectPanel p = new DirectPanel(target);
p.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
}
});
}
It's always mystified me that GWT makes doing this so difficult and poorly documented.

Instead of using iframes i suggest you simply make a http request from GWT via com.google.gwt.http.client.RequestBuilder. Like so:
private void getHtml(String url) {
RequestBuilder rb = new RequestBuilder(RequestBuilder.GET, url);
rb.setCallback(new RequestCallback() {
#Override
public void onResponseReceived(Request request, Response response) {
HTMLPanel html = new HTMLPanel(response.getText());
// Now you have a widget with the requested page
// thus you may do whatever you want with it.
}
#Override
public void onError(Request request, Throwable exception) {
Log.error("error " + exception);
}
});
try {
rb.send();
} catch (RequestException e) {
Log.error("error " + e);
}
}

You could use JSNI to reuse your JavaScript piece of code. Your javascript code would call a gwt method on an object that would throw it on behalf of the button in the iframe.
As to why GWT code does not work -- I guess that is because they use some layer on top of regular browser events that probably cannot span more than 1 frame. That's just a guess though. You could file this as a feature/bug request agains GWT team. If I am right your code looks just fine.

Please see my previous answer. A slight modification to your original solution will make it work.