Skip to content

Commit

Permalink
Adds a DatePicker component using Android DatePickerDialog
Browse files Browse the repository at this point in the history
Change-Id: I389bb5aa343bff69c19209e3fc3d6ce66d9a3a2d
  • Loading branch information
josmas authored and jisqyv committed Apr 27, 2014
1 parent 9373aba commit eccf24e
Show file tree
Hide file tree
Showing 7 changed files with 229 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,12 @@ public interface Images extends Resources {
@Source("com/google/appinventor/images/checkbox.png")
ImageResource checkbox();

/**
* Designer palette item: TimePicker Component
*/
@Source("com/google/appinventor/images/datePicker.png")
ImageResource datePickerComponent();

/**
* Designer palette item: form component
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// -*- mode: java; c-basic-offset: 2; -*-
// Copyright 2009-2011 Google, All Rights reserved
// Copyright 2011-2014 MIT, All rights reserved
// Released under the MIT License https://raw.github.com/mit-cml/app-inventor/master/mitlicense.txt

package com.google.appinventor.client.editor.simple.components;

import com.google.appinventor.client.editor.simple.SimpleEditor;

/**
* Mock DatePicker component.
*/
public class MockDatePicker extends MockButtonBase {

/**
* Component type name.
*/
public static final String TYPE = "DatePicker";

/**
* Creates a new MockDatePicker component.
*
* @param editor editor of source file the component belongs to
*/
public MockDatePicker(SimpleEditor editor) {
super(editor, TYPE, images.datePickerComponent());
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import com.google.appinventor.client.editor.simple.components.MockCheckBox;
import com.google.appinventor.client.editor.simple.components.MockComponent;
import com.google.appinventor.client.editor.simple.components.MockContactPicker;
import com.google.appinventor.client.editor.simple.components.MockDatePicker;
import com.google.appinventor.client.editor.simple.components.MockEmailPicker;
import com.google.appinventor.client.editor.simple.components.MockHorizontalArrangement;
import com.google.appinventor.client.editor.simple.components.MockImage;
Expand Down Expand Up @@ -106,6 +107,7 @@ private static void initBundledImages() {
bundledImages.put("images/speechRecognizer.png", images.speechRecognizer());
bundledImages.put("images/textToSpeech.png", images.textToSpeech());
bundledImages.put("images/texting.png", images.texting());
bundledImages.put("images/datePicker.png", images.datePickerComponent());
bundledImages.put("images/tinyDB.png", images.tinyDB());
bundledImages.put("images/tinyWebDB.png", images.tinyWebDB());
bundledImages.put("images/twitter.png", images.twitterComponent());
Expand Down Expand Up @@ -279,6 +281,8 @@ public static MockComponent createMockComponent(String name, SimpleEditor editor
return new MockEmailPicker(editor);
} else if (name.equals(MockListPicker.TYPE)) {
return new MockListPicker(editor);
} else if (name.equals(MockDatePicker.TYPE)) {
return new MockDatePicker(editor);
} else if (name.equals(MockHorizontalArrangement.TYPE)) {
return new MockHorizontalArrangement(editor);
} else if (name.equals(MockVerticalArrangement.TYPE)) {
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -252,8 +252,10 @@ private YaVersion() {
// - LISTVIEW_COMPONENT_VERSION was incremented to 1.
// For YOUNG_ANDROID_VERSION 90:
// - TEXTTOSPEECH_COMPONENT_VERSION was incremented to 2
// For YOUNG_ANDROID_VERSION 91:
// - DATEPICKER_COMPONENT_VERSION was incremented to 1.

public static final int YOUNG_ANDROID_VERSION = 90;
public static final int YOUNG_ANDROID_VERSION = 91;

// ............................... Blocks Language Version Number ...............................

Expand Down Expand Up @@ -427,6 +429,8 @@ private YaVersion() {
// - The Alignment property was renamed to TextAlignment.
public static final int EMAILPICKER_COMPONENT_VERSION = 2;

public static final int DATEPICKER_COMPONENT_VERSION = 1;

// For FORM_COMPONENT_VERSION 2:
// - The Screen.Scrollable property was added.
// For FORM_COMPONENT_VERSION 3:
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
// -*- mode: java; c-basic-offset: 2; -*-
// Copyright 2009-2011 Google, All Rights reserved
// Copyright 2011-2014 MIT, All rights reserved
// Released under the MIT License https://raw.github.com/mit-cml/app-inventor/master/mitlicense.txt

package com.google.appinventor.components.runtime;

import android.app.DatePickerDialog;
import com.google.appinventor.components.annotations.DesignerComponent;
import com.google.appinventor.components.annotations.PropertyCategory;
import com.google.appinventor.components.annotations.SimpleEvent;
import com.google.appinventor.components.annotations.SimpleObject;
import com.google.appinventor.components.annotations.SimpleProperty;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.common.YaVersion;

import java.text.DateFormatSymbols;
import java.util.Calendar;

/**
* A button allowing a user to launch a DatePickerDialog. This component is
* is based off the ButtonBase class instead of the base Picker class because
* unlike the other pickers, the DatePicker does not need to launch a new
* activity and get a result. The DatePicker is launched as a dialog.
*/
@DesignerComponent(version = YaVersion.DATEPICKER_COMPONENT_VERSION,
category = ComponentCategory.USERINTERFACE,
description = "<p>A button that, when clicked on, launches a popup" +
" dialog to allow the user to select a date.</p>")
@SimpleObject
public class DatePicker extends ButtonBase {

private DatePickerDialog date;
private int year, month, day;
private String [] localizedMonths = new DateFormatSymbols().getMonths();

/**
* Creates a new DatePicker component.
* @param container the container in which the component will be placed in.
*/
public DatePicker(ComponentContainer container) {
super(container);

//Set the current date on creation
final Calendar c = Calendar.getInstance();
year = c.get(Calendar.YEAR);
month = c.get(Calendar.MONTH);
day = c.get(Calendar.DAY_OF_MONTH);
date = new DatePickerDialog(this.container.$context(), datePickerListener, year, month, day);
}

/**
* Returns the Year that was last picked using the DatePicker.
* @return the year in numeric format
*/
@SimpleProperty(description = "the Year that was last picked using the DatePicker",
category = PropertyCategory.APPEARANCE)
public int Year() {
return year;
}

/**
* Returns the number of the Month that was last picked using the DatePicker.
* @return the year in numeric format
*/
@SimpleProperty(description = "the number of the Month that was last picked using the " +
"DatePicker. Note that months start in 0 = January, 11 = December.",
category = PropertyCategory.APPEARANCE)
public int Month() {
return month;
}

/**
* Returns the name of the Month that was last picked using the DatePicker.
* @return the month in textual format.
*/
@SimpleProperty(description = "Returns the name of the Month that was last picked using the " +
"DatePicker, in textual format.",
category = PropertyCategory.APPEARANCE)
public String MonthInText() {
return localizedMonths[month];
}

/**
* Returns the Day of the month that was last picked using the DatePicker.
* @return the day in numeric format
*/
@SimpleProperty(description = "the Day of the month that was last picked using the DatePicker.",
category = PropertyCategory.APPEARANCE)
public int Day() {
return day;
}

/**
* Overriding method from superclass to show the date picker dialog when the button is clicked
*/
@Override
public void click() {
date.show();
}

/**
* Listener for the Dialog. It will update the fields after selection.
*/
private DatePickerDialog.OnDateSetListener datePickerListener =
new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(android.widget.DatePicker datePicker, int selectedYear,
int selectedMonth, int selectedDay) {
year = selectedYear;
month = selectedMonth;
day = selectedDay;
date.updateDate(year, month, day);
AfterDateSet();
}
};

/**
* Runs when the user sets the date in the Dialog.
*/
@SimpleEvent(description = "Event that runs after the user chooses a Date in the dialog")
public void AfterDateSet() {
EventDispatcher.dispatchEvent(this, "AfterDateSet");
}
}
61 changes: 61 additions & 0 deletions appinventor/docs/reference/components/userinterface.html
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,7 @@ <h2> Table of Contents </h2>
<li> <a href="#Button"> Button </a> </li>
<li> <a href="#CheckBox"> CheckBox </a> </li>
<li> <a href="#Clock"> Clock </a> </li>
<li> <a href="#DatePicker"> DatePicker </a> </li>
<li> <a href="#Image"> Image </a> </li>
<li> <a href="#Label"> Label </a> </li>
<li> <a href="#ListPicker"> ListPicker </a> </li>
Expand Down Expand Up @@ -646,6 +647,66 @@ <h3> Methods </h3>
<dd> Text describing time time of an instant </dd>
</dl>

<h2 id="DatePicker">DatePicker</h2>

<p><p>A button that, when clicked on, launches a popup dialog to allow the user to select a date.</p></p>

<h3>Properties</h3>
<dl>
<dt><code>BackgroundColor</code></dt>
<dd>Returns the button's background color</dd>
<dt><code><em>Day</em></code></dt>
<dd>the Day of the month that was last picked using the DatePicker.</dd>
<dt><code>Enabled</code></dt>
<dd></dd>
<dt><code>FontBold</code> (designer only)</dt>
<dd></dd>
<dt><code>FontItalic</code> (designer only)</dt>
<dd></dd>
<dt><code>FontSize</code> (designer only)</dt>
<dd></dd>
<dt><code>FontTypeface</code> (designer only)</dt>
<dd></dd>
<dt><code>Height</code></dt>
<dd></dd>
<dt><code>Image</code></dt>
<dd>Specifies the path of the button's image. If there is both an Image and a BackgroundColor, only the Image will be visible.</dd>
<dt><code><em>Month</em></code></dt>
<dd>the number of the Month that was last picked using the DatePicker. Note that months start in 0 = January, 11 = December.</dd>
<dt><code><em>MonthInText</em></code></dt>
<dd>Returns the name of the Month that was last picked using the DatePicker, in textual format.</dd>
<dt><code>Shape</code> (designer only)</dt>
<dd>Specifies the button's shape (default, rounded, rectangular, oval). The shape will not be visible if an Image is being displayed.</dd>
<dt><code>ShowFeedback</code></dt>
<dd>Specifies if a visual feedback should be shown for a button that as an image as background.</dd>
<dt><code>Text</code></dt>
<dd></dd>
<dt><code>TextAlignment</code> (designer only)</dt>
<dd></dd>
<dt><code>TextColor</code></dt>
<dd></dd>
<dt><code>Visible</code></dt>
<dd>Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden.</dd>
<dt><code>Width</code></dt>
<dd></dd>
<dt><code><em>Year</em></code></dt>
<dd>the Year that was last picked using the DatePicker</dd>
</dl>

<h3>Events</h3>
<dl>
<dt><code>AfterDateSet()</code></dt>
<dd>Event that runs after the user chooses a Date in the dialog</dd>
<dt><code>GotFocus()</code></dt>
<dd>Indicates the cursor moved over the button so it is now possible
to click it.</dd>
<dt><code>LostFocus()</code></dt>
<dd>Indicates the cursor moved away from the button so it is now no
longer possible to click it.</dd>
</dl>

<h3>Methods</h3>
none

<h2 id="Image">Image</h2>

Expand Down

0 comments on commit eccf24e

Please sign in to comment.