Added basic support for html5 new input types

fix #613

2 files changed, 186 insertions, 11 deletions

diff --git a/demos/quickstart/protected/pages/Controls/Samples/TTextBox/Home.page b/demos/quickstart/protected/pages/Controls/Samples/TTextBox/Home.page
index 5ee51413..80d21122 100755
--- a/demos/quickstart/protected/pages/Controls/Samples/TTextBox/Home.page
+++ b/demos/quickstart/protected/pages/Controls/Samples/TTextBox/Home.page
@@ -106,7 +106,7 @@ Password with default setting
 </td></tr>

 

 <tr><td class="samplenote">

-Password with PersistPasswor set true

+Password with PersistPassword enabled

 </td>

 <td class="sampleaction">

 <com:TTextBox ID="Password2" TextMode="Password" PersistPassword="true" /> 

@@ -183,4 +183,107 @@ Auto postback text box causing validation:
 

 </table>

 

+<h2>Html5 new input types</h2>

+

+<table class="sampletable">

+

+<tr><td class="samplenote">

+Color picker textbox

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Color" Text="#FF0000" />

+</td></tr>

+

+<tr><td class="samplenote">

+Date picker textbox

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Date" />

+</td></tr>

+

+<tr><td class="samplenote">

+Date, time and timezone picker textbox

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Datetime" />

+</td></tr>

+

+<tr><td class="samplenote">

+Local date and time picker textbox

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="DatetimeLocal" />

+</td></tr>

+

+<tr><td class="samplenote">

+Email validation textbox

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Email" />

+</td></tr>

+

+<tr><td class="samplenote">

+Month / year picker textbox

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Month" />

+</td></tr>

+

+<tr><td class="samplenote">

+Textbox optimized to input a number, usually with a spinner

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Number" Text="15" />

+</td></tr>

+

+<tr><td class="samplenote">

+Textbox optimized to input a number, with properties min = 10, max = 20, step = 2

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Number" Text="15" Attributes.min="10" Attributes.max="20" Attributes.step="2" />

+</td></tr>

+

+<tr><td class="samplenote">

+Textbox optimized to input a value inside a range, usually with a slider

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Range" Attributes.min="0" Attributes.max="100"/>

+</td></tr>

+

+<tr><td class="samplenote">

+Textbox optimized to input a search term

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Search" />

+</td></tr>

+

+<tr><td class="samplenote">

+Textbox optimized to input a telephone number

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Tel" />

+</td></tr>

+

+<tr><td class="samplenote">

+Time picker textbox

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Time" />

+</td></tr>

+

+<tr><td class="samplenote">

+Textbox optimized to input an URL address

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Url" />

+</td></tr>

+

+<tr><td class="samplenote">

+Week / year picker textbox

+</td>

+<td class="sampleaction">

+<com:TTextBox TextMode="Week" />

+</td></tr>

+

+</table>

 </com:TContent>

diff --git a/framework/Web/UI/WebControls/TTextBox.php b/framework/Web/UI/WebControls/TTextBox.php
index 2f3ea3e7..39f89df5 100644
--- a/framework/Web/UI/WebControls/TTextBox.php
+++ b/framework/Web/UI/WebControls/TTextBox.php
@@ -20,6 +20,8 @@
  * is a multiline text box, the number of rows it displays is determined
  * by the {@link setRows Rows} property, and the {@link setWrap Wrap} property
  * can be used to determine whether to wrap the text in the component.
+ * Additional {@link setTextMode TextMode} types enable the use of new input types
+ * added with html5, eg. <b>Color</b>, <b>Date</b>, <b>Email</b>.
  *
  * To specify the display width of the text box, in characters, set
  * the {@link setColumns Columns} property. To prevent the text displayed
@@ -115,19 +117,59 @@ class TTextBox extends TWebControl implements IPostBackDataHandler, IValidatable
 		}
 		else
 		{
-			if($textMode===TTextBoxMode::SingleLine)
+			switch($textMode)
 			{
-				$writer->addAttribute('type','text');
-				if(($text=$this->getText())!=='')
-					$writer->addAttribute('value',$text);
-			}
-			else
-			{
-				if($this->getPersistPassword() && ($text=$this->getText())!=='')
-					$writer->addAttribute('value',$text);
-				$writer->addAttribute('type','password');
+				case TTextBoxMode::Password:
+					$writer->addAttribute('type','password');
+					break;
+				case TTextBoxMode::Color:
+					$writer->addAttribute('type','color');
+					break;
+				case TTextBoxMode::Date:
+					$writer->addAttribute('type','date');
+					break;
+				case TTextBoxMode::Datetime:
+					$writer->addAttribute('type','datetime');
+					break;
+				case TTextBoxMode::DatetimeLocal:
+					$writer->addAttribute('type','datetime-local');
+					break;
+				case TTextBoxMode::Email:
+					$writer->addAttribute('type','email');
+					break;
+				case TTextBoxMode::Month:
+					$writer->addAttribute('type','month');
+					break;
+				case TTextBoxMode::Number:
+					$writer->addAttribute('type','number');
+					break;
+				case TTextBoxMode::Range:
+					$writer->addAttribute('type','range');
+					break;
+				case TTextBoxMode::Search:
+					$writer->addAttribute('type','search');
+					break;
+				case TTextBoxMode::Tel:
+					$writer->addAttribute('type','tel');
+					break;
+				case TTextBoxMode::Time:
+					$writer->addAttribute('type','time');
+					break;
+				case TTextBoxMode::Url:
+					$writer->addAttribute('type','url');
+					break;
+				case TTextBoxMode::Week:
+					$writer->addAttribute('type','week');
+					break;
+				case TTextBoxMode::SingleLine:
+				default:
+					$writer->addAttribute('type','text');
+					break;
 			}
 
+			if(($text=$this->getText())!=='' && ($textMode !== TTextBoxMode::Password || $this->getPersistPassword()))
+				$writer->addAttribute('value',$text);					
+
 			if(($act=$this->getAutoCompleteType())!=='None')
 			{
 				if($act==='Disabled')
@@ -589,7 +631,24 @@ class TTextBox extends TWebControl implements IPostBackDataHandler, IValidatable
  * - SingleLine: the textbox will be a regular single line input
  * - MultiLine: the textbox will be a textarea allowing multiple line input
  * - Password: the textbox will hide user input like a password input box
+ * 
+ * Html5 declares new types that will degrade as plain textboxes on unsupported browsers:
+ * - Color: a color picker can show up in the input field.
+ * - Date: a date picker can show up in the input field.
+ * - Datetime: a date / time / timezone picker can show up in the input field.
+ * - DatetimeLocal: a date / time picker can show up in the input field.
+ * - Email: the e-mail address can be automatically validated when submitted.
+ * - Month: a month / year picker can show up in the input field.
+ * - Number: a spinner can show up in the input field.
+ * - Range: a slider can show up in the input field.
+ * - Search: the textbox will be optimized for searches
+ * - Tel: the text will be formatted as a telephone number.
+ * - Time: a time picker can show up in the input field.
+ * - Url: the url can be automatically validated when submitted.
+ * - Week: a week / year picker can show up in the input field.
  *
+ * In order to use the new types introduced with html5, you need to declare a proper
+ * html doctype and use a browser supporting the specific inut type.
  * @author Qiang Xue <qiang.xue@gmail.com>
  * @package System.Web.UI.WebControls
  * @since 3.0.4
@@ -599,6 +658,19 @@ class TTextBoxMode extends TEnumerable
 	const SingleLine='SingleLine';
 	const MultiLine='MultiLine';
 	const Password='Password';
+	const Color='Color';
+	const Date='Date';
+	const Datetime='Datetime';
+	const DatetimeLocal='DatetimeLocal';
+	const Email='Email';
+	const Month='Month';
+	const Number='Number';
+	const Range='Range';
+	const Search='Search';
+	const Tel='Tel';
+	const Time='Time';
+	const Url='Url';
+	const Week='Week';
 }
 
 /**