/* | |
* Copyright 2008 Google Inc. | |
* | |
* Licensed under the Apache License, Version 2.0 (the "License"); you may not | |
* use this file except in compliance with the License. You may obtain a copy of | |
* the License at | |
* | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* | |
* Unless required by applicable law or agreed to in writing, software | |
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | |
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | |
* License for the specific language governing permissions and limitations under | |
* the License. | |
*/ | |
package com.google.gwt.museum.client.defaultmuseum; | |
import com.google.gwt.event.dom.client.ClickEvent; | |
import com.google.gwt.event.dom.client.ClickHandler; | |
import com.google.gwt.event.dom.client.KeyDownEvent; | |
import com.google.gwt.event.dom.client.KeyDownHandler; | |
import com.google.gwt.event.logical.shared.ValueChangeEvent; | |
import com.google.gwt.event.logical.shared.ValueChangeHandler; | |
import com.google.gwt.i18n.client.DateTimeFormat; | |
import com.google.gwt.museum.client.common.AbstractIssue; | |
import com.google.gwt.museum.client.common.EventReporter; | |
import com.google.gwt.user.client.ui.Button; | |
import com.google.gwt.user.client.ui.HTML; | |
import com.google.gwt.user.client.ui.HorizontalPanel; | |
import com.google.gwt.user.client.ui.Label; | |
import com.google.gwt.user.client.ui.TextBox; | |
import com.google.gwt.user.client.ui.VerticalPanel; | |
import com.google.gwt.user.client.ui.Widget; | |
import com.google.gwt.user.datepicker.client.DateBox; | |
import com.google.gwt.user.datepicker.client.DatePicker; | |
import com.google.gwt.user.datepicker.client.DateBox.DefaultFormat; | |
import java.util.Date; | |
/** | |
* Visuals for date box. | |
*/ | |
public class VisualsForDateBox extends AbstractIssue { | |
class FormatWithNewYearsEve extends DefaultFormat { | |
public FormatWithNewYearsEve() { | |
} | |
public FormatWithNewYearsEve(DateTimeFormat format) { | |
super(format); | |
} | |
@Override | |
public String format(DateBox box, Date d) { | |
if (d == null) { | |
return "Please Change me"; | |
} else { | |
return super.format(box, d); | |
} | |
} | |
@SuppressWarnings("deprecation") | |
@Override | |
public Date parse(DateBox box, String input, boolean reportError) { | |
if (input.equalsIgnoreCase("new year's eve")) { | |
Date d = new Date(); | |
d.setDate(31); | |
d.setMonth(12); | |
return d; | |
} else { | |
return super.parse(box, input, reportError); | |
} | |
} | |
} | |
@Override | |
public Widget createIssue() { | |
VerticalPanel v = new VerticalPanel(); | |
v.add(new HTML("<div style='height:25px'></div>")); | |
v.add(dateRange()); | |
v.add(new HTML("<div style='height:25px'></div>")); | |
return v; | |
} | |
@Override | |
public String getInstructions() { | |
return "Instructions <ul><li>Click on first date box, see that date picker is displayed</li> " | |
+ "<li>use arrow keys to navigate to second date box, select a date.</li> " | |
+ "<li>type in a bad date then click back to the first date box. Your bad date should now be in red</li>" | |
+ "<li>get back to the second box, now type in a valid date and tab away, its text should now be black again. </li>" | |
+ "<li>Try typing 'New Year's Eve' in on the start datebox)</li>" | |
+ "<li> Hit 'Show values' and confirm that you see the correct values</li></ul>"; | |
} | |
@Override | |
public String getSummary() { | |
return "date box visual test"; | |
} | |
@Override | |
public boolean hasCSS() { | |
return false; | |
} | |
private Widget dateRange() { | |
VerticalPanel v = new VerticalPanel(); | |
HorizontalPanel p = new HorizontalPanel(); | |
v.add(p); | |
final DateBox start = new DateBox(new DatePicker(), null, | |
new FormatWithNewYearsEve()); | |
start.setWidth("13em"); | |
final DateBox end = new DateBox(); | |
end.setWidth("13em"); | |
end.getDatePicker().addValueChangeHandler(new ValueChangeHandler<Date>() { | |
public void onValueChange(ValueChangeEvent<Date> event) { | |
start.removeStyleName("user-modified"); | |
} | |
}); | |
final TextBox startText = start.getTextBox(); | |
startText.addKeyDownHandler(new KeyDownHandler() { | |
public void onKeyDown(KeyDownEvent e) { | |
if (e.isRightArrow() | |
&& start.getCursorPos() == startText.getText().length()) { | |
start.hideDatePicker(); | |
end.setFocus(true); | |
} | |
} | |
}); | |
end.getTextBox().addKeyDownHandler(new KeyDownHandler() { | |
public void onKeyDown(KeyDownEvent e) { | |
if ((e.isLeftArrow()) && end.getCursorPos() == 0) { | |
end.hideDatePicker(); | |
start.setFocus(true); | |
} | |
} | |
}); | |
end.setValue(new Date()); | |
p.add(start); | |
Label l = new Label(" - "); | |
l.setStyleName("filler"); | |
p.add(l); | |
p.add(end); | |
final Label value = new Label(); | |
p.add(value); | |
HorizontalPanel h2 = new HorizontalPanel(); | |
v.add(h2); | |
h2.add(new Button("Short format", new ClickHandler() { | |
public void onClick(ClickEvent event) { | |
updateFormat(start, end, DateTimeFormat.getShortDateFormat()); | |
} | |
})); | |
h2.add(new Button("Long format", new ClickHandler() { | |
public void onClick(ClickEvent event) { | |
updateFormat(start, end, DateTimeFormat.getMediumDateFormat()); | |
} | |
})); | |
h2.add(new Button("Clear", new ClickHandler() { | |
public void onClick(ClickEvent sender) { | |
start.setValue(null); | |
end.setValue(null); | |
} | |
})); | |
h2.add(new Button("Show Values", new ClickHandler() { | |
public void onClick(ClickEvent event) { | |
DateTimeFormat f = DateTimeFormat.getShortDateFormat(); | |
Date d1 = start.getValue(); | |
Date d2 = end.getValue(); | |
value.setText("Start: \"" + (d1 == null ? "null" : f.format(d1)) | |
+ "\" End: \"" + (d2 == null ? "null" : f.format(d2)) + "\""); | |
} | |
})); | |
EventReporter<Date, DateBox> reporter = new EventReporter<Date, DateBox>(); | |
start.addValueChangeHandler(reporter); | |
end.addValueChangeHandler(reporter); | |
reporter.report("Events are logged here"); | |
v.add(reporter); | |
return v; | |
} | |
private void updateFormat(DateBox start, DateBox end, DateTimeFormat format) { | |
// You can replace the format itself. | |
start.setFormat(new FormatWithNewYearsEve(format)); | |
end.setFormat(new DefaultFormat(format)); | |
} | |
} |