Java tutorial
/* * Copyright 2011 SWM Services GmbH. * * 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 de.swm.commons.mobile.client.widgets.date; import com.google.gwt.dom.client.InputElement; import com.google.gwt.dom.client.Style.FontWeight; import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.event.dom.client.*; import com.google.gwt.event.logical.shared.ValueChangeEvent; import com.google.gwt.event.logical.shared.ValueChangeHandler; import com.google.gwt.i18n.client.NumberFormat; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.PopupPanel; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.Widget; import de.swm.commons.mobile.client.SWMMobile; import de.swm.commons.mobile.client.widgets.*; import java.util.Date; /** * Popup to select date and time. */ public class DatePopup extends PopupPanel { /** * Additional style: margin. */ private static final double MARGIN_YEAR = 12.0; /** * Additional style: margin. */ private static final double MARGIN_PIXEL_SIZE_4_0 = 4.0; /** * Number Formatter for two-digit number strings. */ private final NumberFormat numFormat = NumberFormat.getFormat("00"); /** * Date selection handler. */ public interface DateSelectionHandler { /** * Sets the selected date. * * @param selectedDate the selected date */ void dateSelected(Date selectedDate); /** * Called, if date selection was canceled. */ void dateSelectionCancelled(); } /** * Defines the different fields in the popup. */ private enum DateField { DAY, MONTH, YEAR, HOUR, MINUTE } /** * The underlying selection handler. */ private DateSelectionHandler selectionHandler; /** * Label displaying the day. */ private TextBox dayLabel; /** * Label displaying the month. */ private TextBox monthLabel; /** * Label displaying the year. */ private TextBox yearLabel; /** * Label displaying the hour. */ private TextBox hourLabel; /** * Label displaying the minute. */ private TextBox minuteLabel; /** * Delegate for date calculations. */ private DateCalculation dateCalc; private final VerticalPanel mainPanel; private final DateStyle dateStyle; private TextBox dateTextBox; private final Label dateTimeSelectionCaption; private DropDownList<String> dropDown; /** * Default constructor. * * @param givenDate date to start with * @param dateStyle der date style * @param handler date selection handler */ public DatePopup(Date givenDate, final DateStyle dateStyle, DateSelectionHandler handler) { setStyleName(SWMMobile.getTheme().getMGWTCssBundle().getPopupsCss().datePopup()); setGlassStyleName(SWMMobile.getTheme().getMGWTCssBundle().getPopupsCss().dateGlassPanel()); selectionHandler = handler; if (givenDate == null) { givenDate = new Date(); } this.dateStyle = dateStyle; dateCalc = new DateCalculation(givenDate); mainPanel = new VerticalPanel(); dateTimeSelectionCaption = new Label(SWMMobile.getI18N().dateTimeSelectionCaption()); mainPanel.add(dateTimeSelectionCaption); dateTimeSelectionCaption.setVisible(false); if (SWMMobile.getOsDetection().isIOs()) { renderIOS5DateBox(givenDate, dateStyle); } else { renderDateBox(dateStyle); } setWidget(mainPanel); } /** * Adds another user-defined widget to the date popup, e.g. for additional options when choosing the date. * * @param widget additional widget * @param position of the widget in the main vertical panel (0=first widget) */ public void addWidget(Widget widget, int position) { mainPanel.insert(widget, position); } /** * Adds a drop down list to choose times relative to the current time (e.g., "in 10 Minutes"). * * @param choiceTitles titles of the available choices * @param choiceRelativeMinutes for each choice, difference to the current time in minutes * @param initialChoice initially selected choice - must be one of choiceRelativeMinutes, or null if no selection * @param includeNowButton whether a "now" button should be included to choose the current time * @param closeOnChoice whether the date popup should be immediately closed when a relative choice is made */ public void addRelativeTimeChooser(String[] choiceTitles, int[] choiceRelativeMinutes, Integer initialChoice, final boolean includeNowButton, final boolean closeOnChoice) { if (choiceTitles.length != choiceRelativeMinutes.length) { throw new IllegalArgumentException( "Must supply same number of choiceTitles and choiceRelativeMilliseconds!"); } HorizontalPanel relativeTimeChooserPanel = new HorizontalPanel(); relativeTimeChooserPanel.addStyleName( SWMMobile.getTheme().getMGWTCssBundle().getPopupsCss().dateRelativeTimeChooserPanel()); if (includeNowButton) { Button nowButton = new Button(SWMMobile.getI18N().nowButton(), new ClickHandler() { /** * {@inheritDoc} */ @Override public void onClick(ClickEvent event) { Date currentDate = new Date(); if (closeOnChoice) { hide(); selectionHandler.dateSelected(currentDate); } else { updateDate(currentDate); } } }); relativeTimeChooserPanel.add(nowButton); } Label label = new Label(SWMMobile.getI18N().relativeTimeChooserLabel()); relativeTimeChooserPanel.add(label); dropDown = new DropDownList<String>(); dropDown.add(new DropDownItem(null, "")); for (int i = 0; i < choiceTitles.length; i++) { dropDown.add(new DropDownItem(new Integer(choiceRelativeMinutes[i]).toString(), choiceTitles[i])); } if (initialChoice != null) { // TODO: possibly update date selector time for initial choice? dropDown.setValue(initialChoice.toString()); } dropDown.addValueChangeHandler(new ValueChangeHandler<String>() { @Override public void onValueChange(ValueChangeEvent<String> event) { if ((event.getValue() == null) || event.getValue().equals("") || event.getValue().equals("null")) { return; } int relativeMinutes = Integer.parseInt(event.getValue().toString()); Date newDate = new Date(new Date().getTime() + relativeMinutes * 60000); if (closeOnChoice) { hide(); selectionHandler.dateSelected(newDate); } else { updateDate(newDate); } } }); relativeTimeChooserPanel.add(dropDown); mainPanel.insert(relativeTimeChooserPanel, 0); } /** * Clears the relative time displayed in the relative time chooser. */ private void clearRelativeTime() { if (dropDown != null) { dropDown.setValue(null); } } /** * Sets the visibility of the caption for the date/time selection (default: caption is not visible). * * @param visible visibility of caption for date/time selection */ public void setDateTimeSelectionCaptionVisible(boolean visible) { dateTimeSelectionCaption.setVisible(visible); } /** * Renders the date box for devices where native date input field is not avalilable. * * @param givenDate * @param dateStyle */ private void renderIOS5DateBox(final Date givenDate, final DateStyle dateStyle) { final InputElement dateInput = createNumberInputElement(dateStyle.getHtmlInputType()); dateInput.focus(); dateTextBox = TextBox.wrap(dateInput); dateTextBox.setSize("95%", "40px"); dateTextBox.setValue(dateCalc.formatToRfc3339(givenDate, dateStyle, true)); // TODO: on value change, call clearRelativeTime() (special handling necessary) HorizontalPanel dateInputPanel = new HorizontalPanel(); dateInputPanel.addStyleName(SWMMobile.getTheme().getMGWTCssBundle().getPopupsCss().dateInputPanel()); dateInputPanel.add(dateTextBox); mainPanel.add(dateInputPanel); Widget commandPanel = createCommandPanel(new ClickHandler() { /** * {@inheritDoc} */ @Override public void onClick(ClickEvent event) { hide(); selectionHandler.dateSelected(dateCalc.parseRfc3339(dateTextBox.getText().trim(), dateStyle, true)); } }); mainPanel.add(commandPanel); dateTextBox.setFocus(true); } /** * Renders the date box for devices where native date input field is not avalilable. */ private void renderDateBox(DateStyle dateStyle) { HorizontalPanel spinnerPanel = new HorizontalPanel(); spinnerPanel.addStyleName(SWMMobile.getTheme().getMGWTCssBundle().getPopupsCss().dateSpinnerPanel()); VerticalPanel dayPanel = createSpinner(DateField.DAY); dayPanel.getElement().getStyle().setMarginRight(MARGIN_PIXEL_SIZE_4_0, Unit.PX); spinnerPanel.add(dayPanel); VerticalPanel monthPanel = createSpinner(DateField.MONTH); monthPanel.getElement().getStyle().setMarginRight(MARGIN_PIXEL_SIZE_4_0, Unit.PX); spinnerPanel.add(monthPanel); VerticalPanel yearPanel = createSpinner(DateField.YEAR); yearPanel.getElement().getStyle().setMarginRight(MARGIN_YEAR, Unit.PX); spinnerPanel.add(yearPanel); VerticalPanel hourPanel = createSpinner(DateField.HOUR); spinnerPanel.add(hourPanel); Label separatorLabel = new Label(":"); separatorLabel.setVisible(false); separatorLabel.getElement().getStyle().setFontWeight(FontWeight.BOLD); spinnerPanel.add(separatorLabel); VerticalPanel minutePanel = createSpinner(DateField.MINUTE); spinnerPanel.add(minutePanel); if (DateStyle.DATE.equals(dateStyle) || DateStyle.DATETIME.equals(dateStyle)) { dayPanel.setVisible(true); monthPanel.setVisible(true); yearPanel.setVisible(true); } if (DateStyle.TIME.equals(dateStyle) || DateStyle.DATETIME.equals(dateStyle)) { hourPanel.setVisible(true); separatorLabel.setVisible(true); minutePanel.setVisible(true); } mainPanel.add(spinnerPanel); Widget commandPanel = createCommandPanel(new ClickHandler() { /** * {@inheritDoc} */ @Override public void onClick(ClickEvent event) { hide(); Date selectedDate = dateCalc.getDate(); selectionHandler.dateSelected(selectedDate); } }); mainPanel.add(commandPanel); } /** * Creates the command panel (with the buttons to confirm or cancel the date choice). * Can be overridden if command panel should contain different widgets. * * @param okClickHandler ClickHandler that is called when the confirm button is pressed and which parses the date. * @return Widget for Command Panel */ protected Widget createCommandPanel(final ClickHandler okClickHandler) { HorizontalPanel commandPanel = new HorizontalPanel(); commandPanel.addStyleName(SWMMobile.getTheme().getMGWTCssBundle().getPopupsCss().dateCommandPanel()); Button okButton = new Button(SWMMobile.getI18N().confirmButton(), okClickHandler); okButton.addStyleName(SWMMobile.getTheme().getMGWTCssBundle().getPopupsCss().dateOkButton()); commandPanel.add(okButton); Button cancelButton = new Button(SWMMobile.getI18N().cancelButton(), new ClickHandler() { /** * {@inheritDoc} */ @Override public void onClick(ClickEvent event) { hide(); selectionHandler.dateSelectionCancelled(); } }); cancelButton.addStyleName(SWMMobile.getTheme().getMGWTCssBundle().getPopupsCss().dateCancelButton()); commandPanel.add(cancelButton); return commandPanel; } /** * Will display the popup centered. * * @param glassEffect true if glass efect */ public void showCentered(boolean glassEffect) { setGlassEnabled(glassEffect); setPopupPositionAndShow(new PositionCallback() { /** * {@inheritDoc} */ @Override public void setPosition(int offsetWidth, int offsetHeight) { int left = (Window.getClientWidth() - offsetWidth) / 2; int top = (Window.getClientHeight() - offsetHeight) / 2; setPopupPosition(left, top); } }); } public DateSelectionHandler getSelectionHandler() { return selectionHandler; } public void setSelectionHandler(DateSelectionHandler selectionHandler) { this.selectionHandler = selectionHandler; } /** * Will create the spinner buttons. * * @param df the date field * @return spinner button panel */ private VerticalPanel createSpinner(final DateField df) { VerticalPanel vPanel = new VerticalPanel(); vPanel.setVisible(false); ImageButton upButton = new ImageButton(SWMMobile.getTheme().getMGWTImageBundle().arrowup(), new ClickHandler() { /** * {@inheritDoc} */ @Override public void onClick(ClickEvent event) { switch (df) { case DAY: dateCalc.incrementDay(); break; case MONTH: dateCalc.incrementMonth(); break; case YEAR: dateCalc.incrementYear(); break; case HOUR: dateCalc.incrementHour(); break; case MINUTE: dateCalc.incrementMinute(); break; default: break; } updateLabels(); clearRelativeTime(); } }); vPanel.add(upButton); final TextBox label; switch (df) { case DAY: dayLabel = new TextBox(); dayLabel.setWidth("2rem"); dayLabel.setText(dateCalc.getDay() + "."); label = dayLabel; break; case MONTH: monthLabel = new TextBox(); monthLabel.setWidth("2rem"); monthLabel.setText(dateCalc.getMonth() + "."); label = monthLabel; break; case YEAR: yearLabel = new TextBox(); yearLabel.setWidth("4rem"); yearLabel.setText(dateCalc.getYear()); label = yearLabel; break; case HOUR: hourLabel = new TextBox(); hourLabel.setWidth("2rem"); hourLabel.setText(numFormat.format(dateCalc.getHour())); label = hourLabel; break; case MINUTE: minuteLabel = new TextBox(); minuteLabel.setWidth("2rem"); label = minuteLabel; minuteLabel.setText(numFormat.format(dateCalc.getMinute())); break; default: label = new TextBox(); break; } label.addFocusHandler(new FocusHandler() { @Override public void onFocus(FocusEvent event) { label.setText(""); } }); label.addBlurHandler(new BlurHandler() { @Override public void onBlur(BlurEvent event) { switch (df) { case DAY: dateCalc.setDay(label.getText()); updateLabels(); clearRelativeTime(); break; case MONTH: dateCalc.setMonth(label.getText()); updateLabels(); clearRelativeTime(); break; case YEAR: dateCalc.setYear(label.getText()); updateLabels(); clearRelativeTime(); break; case HOUR: dateCalc.setHour(label.getText()); updateLabels(); clearRelativeTime(); break; case MINUTE: dateCalc.setMinute(label.getText()); updateLabels(); clearRelativeTime(); break; default: break; } } }); label.setStyleName(SWMMobile.getTheme().getMGWTCssBundle().getPopupsCss().dateValueLabel()); vPanel.add(label); ImageButton downButton = new ImageButton(SWMMobile.getTheme().getMGWTImageBundle().arrowdown(), new ClickHandler() { @Override public void onClick(ClickEvent event) { switch (df) { case DAY: dateCalc.decrementDay(); break; case MONTH: dateCalc.decrementMonth(); break; case YEAR: dateCalc.decrementYear(); break; case HOUR: dateCalc.decrementHour(); break; case MINUTE: dateCalc.decrementMinute(); break; default: break; } updateLabels(); clearRelativeTime(); } }); vPanel.add(downButton); return vPanel; } /** * Update the date displayed in the date popup. * * @param newDate date to be displayed */ private void updateDate(Date newDate) { dateCalc = new DateCalculation(newDate); if (dateTextBox != null) { dateTextBox.setValue(dateCalc.formatToRfc3339(newDate, dateStyle, true)); } else { updateLabels(); } } /** * Update the labels with internal state. */ private void updateLabels() { yearLabel.setText(dateCalc.getYear()); monthLabel.setText(dateCalc.getMonth() + "."); dayLabel.setText(dateCalc.getDay() + "."); hourLabel.setText(numFormat.format(dateCalc.getHour())); minuteLabel.setText(numFormat.format(dateCalc.getMinute())); } /** * Create the HTML input element. * * @param type the type * @return the input element. */ private static native InputElement createNumberInputElement(String type) /*-{ var e = $doc.createElement("INPUT"); e.type = type; return e; }-*/; }