diff options
| author | wei <> | 2006-04-25 07:01:04 +0000 |
|---|---|---|
| committer | wei <> | 2006-04-25 07:01:04 +0000 |
| commit | 8b0c8f0d0557d8ab88409cd9691cd1ee279321d5 (patch) | |
| tree | 2c570f0d3839089edbb7e53244adcd2db98cb992 /demos/quickstart | |
| parent | 7fa4dd96f1ac0c57e6c67faf9f9dda46f1dd1b89 (diff) | |
Complete #70, update TDateFormat, NumberFormat add zerofill. Update TDatePicker quickstart doc, I18N quickstart doc.
Diffstat (limited to 'demos/quickstart')
5 files changed, 284 insertions, 8 deletions
diff --git a/demos/quickstart/protected/pages/Advanced/I18N.page b/demos/quickstart/protected/pages/Advanced/I18N.page index f37e5cf6..4a220c4c 100644 --- a/demos/quickstart/protected/pages/Advanced/I18N.page +++ b/demos/quickstart/protected/pages/Advanced/I18N.page @@ -170,23 +170,145 @@ The time is {time}. <com:TDateFormat Value="12/01/2005" />
</com:TTextHighlighter>
-<p>There are of 4 localized date patterns and 4 localized time patterns. They can be used in any combination. If using a combined pattern, the first must be the date, followed by a space, and lastly the time pattern. For example, full date pattern with short time pattern.</p>
+<p>The <tt>Pattern</tt> property accepts 4 predefined localized date patterns and 4 predefined localized time patterns.
+<ul>
+ <li><tt>fulldate</tt></li>
+ <li><tt>longdate</tt></li>
+ <li><tt>mediumdate</tt></li>
+ <li><tt>shortdate</tt></li>
+ <li><tt>fulltime</tt></li>
+ <li><tt>longtime</tt></li>
+ <li><tt>mediumtime</tt></li>
+ <li><tt>shorttime</tt></li>
+</ul>
+The predefined can be used in any combination. If using a combined predefined pattern,
+the first pattern must be the date, followed by a space, and lastly the time pattern.
+For example, full date pattern with short time pattern. The actual ordering of the
+date-time and the actual pattern will be determine automatically from locale data specified
+by the <tt>Culture</tt> property.</p>
<com:TTextHighlighter Language="prado" CssClass="source">
<com:TDateFormat Pattern="fulldate shorttime" />
</com:TTextHighlighter>
+<p>You can also specify a custom pattern using the following sub-patterns.
+The date/time format is specified by means of a string time pattern. In this pattern, all ASCII letters are reserved as pattern letters, which are defined as the following:
+<com:TTextHighlighter Language="text" CssClass="source">
+ Symbol Meaning Presentation Example
+ ------ ------- ------------ -------
+ G era designator (Text) AD
+ y year (Number) 1996
+ M month in year (Text & Number) July & 07
+ d day in month (Number) 10
+ h hour in am/pm (1~12) (Number) 12
+ H hour in day (0~23) (Number) 0
+ m minute in hour (Number) 30
+ s second in minute (Number) 55
+ E day of week (Text) Tuesday
+ D day in year (Number) 189
+ F day of week in month (Number) 2 (2nd Wed in July)
+ w week in year (Number) 27
+ W week in month (Number) 2
+ a am/pm marker (Text) PM
+ k hour in day (1~24) (Number) 24
+ K hour in am/pm (0~11) (Number) 0
+ z time zone (Time) Pacific Standard Time
+ ' escape for text (Delimiter) 'Date='
+ '' single quote (Literal) 'o''clock'
+</com:TTextHighlighter>
+</p>
+
+<p>The count of pattern letters determine the format.</p>
+
+<p>(Text): 4 letters uses full form, less than 4, use short or abbreviated form
+if it exists. (e.g., "EEEE" produces "Monday", "EEE" produces "Mon")</p>
+
+<p>(Number): the minimum number of digits. Shorter numbers are zero-padded
+ to this amount (e.g. if "m" produces "6", "mm" produces "06"). Year is
+ handled specially; that is, if the count of 'y' is 2, the Year will be
+ truncated to 2 digits. (e.g., if "yyyy" produces "1997", "yy" produces "97".)
+ Unlike other fields, fractional seconds are padded on the right with zero.</p>
+
+<p>(Text and Number): 3 or over, use text, otherwise use number. (e.g.,
+"M" produces "1", "MM" produces "01", "MMM" produces "Jan", and "MMMM"
+produces "January".)</p>
+
+<p>Any characters in the pattern that are not in the ranges of ['a'..'z']
+and ['A'..'Z'] will be treated as quoted text. For instance, characters
+like ':', '.', ' ', and '@' will appear in the resulting time text
+even they are not embraced within single quotes.</p>
+
+<p>Examples using the US locale:
+
+<com:TTextHighlighter Language="text" CssClass="source">
+Format Pattern Result
+-------------- -------
+"yyyy.MM.dd G 'at' HH:mm:ss" ->> 1996.07.10 AD at 15:08:56
+"EEE, MMM d, ''yy" ->> Wed, Jul 10, '96
+"h:mm a" ->> 12:08 PM
+"hh 'o''clock' a, z" ->> 12 o'clock PM, Pacific Daylight Time
+"K:mm a" ->> 0:00 PM
+"yyyy.MMMM.dd G hh:mm a" ->> 1996.July.10 AD 12:08 PM
+</com:TTextHighlighter>
+</p>
+
<p>If the <tt>Value</tt> property is not specified, the current date and time is used.</p>
<h2>TNumberFormat</h2>
<p>PRADO's Internationalization framework provide localized currency formatting and number formatting. Please note that the <tt>TNumberFormat</tt> component provides formatting only, it does not perform current conversion or exchange.</p>
+<p>Numbers can be formatted as currency, percentage, decimal or scientific
+numbers by specifying the <tt>Type</tt> attribute. The valid types are:
+<ul>
+ <li><tt>currency</tt></li>
+ <li><tt>percentage</tt></li>
+ <li><tt>decimal</tt></li>
+ <li><tt>scientific</tt></li>
+</ul>
+</p>
+
<com:TTextHighlighter Language="prado" CssClass="source">
<com:TNumberFormat Type="currency" Value="100" />
</com:TTextHighlighter>
<p><tt>Culture</tt> and <tt>Currency</tt> properties may be specified to format locale specific numbers. </p>
+<p>If someone from US want to see sales figures from a store in
+Germany (say using the EURO currency), formatted using the german
+ currency, you would need to use the attribute <tt>Culture="de_DE"</tt> to get
+the currency right, e.g. 100,00$. The decimal and grouping separator is
+then also from the <tt>de_DE</tt> locale. This may lead to some confusion because
+people from US uses the "," (comma) as thousand separator. Therefore a <tt>Currency</tt>
+attribute is available, so that the output from the following example results in $100.00
+<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TNumberFormat Type="currency"
+ Culture="en_US" Currency="EUR" Value="100" />
+</com:TTextHighlighter>
+</p>
+
+<p>The <tt>Pattern</tt> property determines the number of digits, thousand grouping
+positions, the number of decimal points and the decimal position. The actual characters that
+are used to represent the decimal points and thousand points are culture specific
+and will change automatically according to the <tt>Culture</tt> property. The valid
+<tt>Pattern</tt> characters are:
+<ul>
+ <li><tt># (hash)</tt> - represents the optional digits</li>
+ <li><tt>0 (zero)</tt> - represents the mandatory digits, zero left filled</li>
+ <li><tt>. (full stop)</tt> - the position of the decimal point (only 1 decimal point is allowed)</li>
+ <li><tt>, (comma)</tt> - thousand point separation (up to 2 commas are allowed)</li>
+</ul>
+For example, consider the <tt>Value="1234567.12345"</tt> and
+with <tt>Culture="en_US"</tt> (which uses "," for thousand point separator and "." for decimal separators).
+<com:TTextHighlighter Language="text" CssClass="source">
+Pattern Output
+------- ------
+##,###.00 ->> 1,234,567.12
+##,###.## ->> 1,234,567.12345
+##,##.0000 ->> 1,23,45,67.1235
+##,###,##.0 ->> 12,345,67.1
+000,000,000.0 ->> 001,234,567.1
+</com:TTextHighlighter>
+</p>
<h2>TTranslateParameter</h2>
<p>Compound messages, i.e., string substitution, can be accomplished with <tt>TTranslateParameter</tt>.
diff --git a/demos/quickstart/protected/pages/Controls/DatePicker.page b/demos/quickstart/protected/pages/Controls/DatePicker.page index 5425f2ab..17d28382 100644 --- a/demos/quickstart/protected/pages/Controls/DatePicker.page +++ b/demos/quickstart/protected/pages/Controls/DatePicker.page @@ -3,8 +3,81 @@ <h1>TDatePicker</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TDatePicker" />
+<p><tt>TDatePicker</tt> displays a text box for date input purpose.
+When the text box receives focus, a calendar will pop up and users can
+pick up from it a date that will be automatically entered into the text box.
+The format of the date string displayed in the text box is determined by
+the <tt>DateFormat</tt> property. Valid formats are the combination of the
+following tokens:
+
+<com:TTextHighlighter Language="text" CssClass="source">
+Character Format Pattern (en-US)
+---------------------------------------------------------------------
+ d day digit
+ dd padded day digit e.g. 01, 02
+ M month digit
+ MM padded month digit
+ MMM localized abbreviated month names, e.g. Mar, Apr
+ MMMM localized month name, e.g. March, April
+ yy 2 digit year
+ yyyy 4 digit year
+---------------------------------------------------------------------
+</com:TTextHighlighter>
+
+<p>
+The date of the date picker can be set using the <tt>Date</tt> or <tt>Timestamp</tt>
+properties. The <tt>Date</tt> property value must be in the same format as the pattern
+specified in the <tt>DateFormat</tt> property. The <tt>Timestamp</tt> property
+only accepts integers such as the Unix timestamp.
+</p>
+
<p>
-TBD
+TDatePicker has three <tt>Mode</tt> to show the date picker popup.
+ <ul>
+ <li><tt>Basic</tt> - Only shows a text input, focusing on the input shows the date picker.</li>
+ <li><tt>Button</tt> - Shows a button next to the text input, clicking on the button shows the date, button text can be by the <tt>ButtonText</tt> property.</li>
+ <li><tt>ImageButton</tt> - Shows an image next to the text input, clicking on the image shows the date picker, image source can be change through the <tt>ImageUrl</tt> property.</li>
+ </ul>
</p>
+<p>The <tt>CssClass</tt> property can be used to override the css class name
+for the date picker panel. The <tt>CalendarStyle</tt> property changes the overall calendar style.
+The following <tt>CalendarStyle</tt> values are available:
+ <ul>
+ <li><tt>default</tt> - The default calendar style.</li>
+ </ul>
+</p>
+
+<p>The <tt>InputMode</tt> property can be set to "TextBox" or "DropDownList" with
+default as "TextBox". In <tt>DropDownList</tt> mode, in addition to the popup date picker, three
+drop down list (day, month and year) are presented to select the date .
+When <tt>InputMode</tt> equals "DropDownList", the order and appearance of the date, month, and year
+will depend on the pattern specified in <tt>DateFormat</tt> property.
+</p>
+
+<p>The popup date picker can be hidden by specifying <tt>ShowCalendar</tt> as false. Much of the
+text of the popup date picker can be changed to a different language using the <tt>Culture</tt> property.
+</p>
+
+<p>The calendar picker year limit can be set using the <tt>FromYear</tt> and <tt>UpToYear</tt> properties
+where <tt>FromYear</tt> is the starting year and <tt>UpToYear</tt> is the last year selectable.
+The starting day of the week can be changed by the <tt>FirstDayOfWeek</tt> property, with 0 as Sunday, 1 as Monday, etc.
+</p>
+
+<p><b>Note 1:</b> If the <tt>InputMode</tt> is "TextBox", the <tt>DateFormat</tt> should
+only <b>NOT</b> contain <code>MMM</code> or <code>MMMM</code> patterns. The
+server side date parser will not be able to determine the correct date if <code>MMM</code> or
+<code>MMMM</code> are used. When <tt>InputMode</tt> equals "DropDownList", all patterns can be used.</p>
+
+<p><b>Note 2:</b> When the <tt>TDatePicker</tt> is used together
+with a validator, the <tt>DateFormat</tt> property of the validator must be equal to
+the <tt>DateFormat</tt> of the <tt>TDatePicker</tt> <b>AND</b> must set <tt>DataType</tt>="Date"
+on the validator to ensure correct validation. See
+<a href="?page=Controls.Validation#TCompareValidator">TCompareValidator</a>,
+<a href="?page=Controls.Validation#TDataTypeValidator">TDataTypeValidator</a> and
+<a href="?page=Controls.Validation#TRangeValidator">TRangeValidator</a>
+for details.</p>
+
+<com:RunBar PagePath="Controls.Samples.TDatePicker.Home" />
+
</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Samples/TDatePicker/Home.page b/demos/quickstart/protected/pages/Controls/Samples/TDatePicker/Home.page new file mode 100644 index 00000000..e563145d --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TDatePicker/Home.page @@ -0,0 +1,61 @@ +<com:TContent ID="body">
+
+<h1>TDatePicker Samples</h1>
+
+<table class="sampletable">
+
+<tr>
+ <td class="samplenote">Default TDatePicker</td>
+ <td class="sampleaction">
+ <com:TDatePicker />
+ </td>
+</tr>
+
+<tr>
+ <td class="samplenote">Button Mode, <br />pre-selected date 20-10-2005</td>
+ <td class="sampleaction">
+ <com:TDatePicker Mode="Button" Date="20-10-2005"/>
+ </td>
+</tr>
+
+<tr>
+ <td class="samplenote">InputMode="DropDownList", <br />custom DateFormat="yyyy/MMM"</td>
+ <td class="sampleaction">
+ <com:TDatePicker DateFormat="yyyy/MMM" InputMode="DropDownList"/>
+ </td>
+</tr>
+
+<tr>
+ <td class="samplenote">InputMode="DropDownList", <br/>custom DateFormat="MMM/yyyy", <br/>Culture="fr"</td>
+ <td class="sampleaction">
+ <com:TDatePicker DateFormat="MMM/yyyy" Culture="fr" InputMode="DropDownList"/>
+ </td>
+</tr>
+
+
+<tr>
+ <td class="samplenote">Custom DateFormat="日期：yyyy年M月d日", <br/>culture="zh_CN", <br />ImageButton mode, <br />pre-selected using Timestamp=<%= @strtotime("-1 year") %></td>
+ <td class="sampleaction">
+ <com:TDatePicker Mode="ImageButton" Culture="zh_CN"
+ DateFormat="日期：yyyy年M月d日"
+ Timestamp=<%= @strtotime("-1 year") %>/>
+ </td>
+</tr>
+
+<tr>
+ <td class="samplenote">Custom DateFormat="yyyy/MMMM/dd", <br />DropDownList, <br />pre-selected Date="2005/05/15"</td>
+ <td class="sampleaction">
+ <com:TDatePicker DateFormat="yyyy/MMMM/dd" Date="2005/05/15" InputMode="DropDownList"/>
+ </td>
+</tr>
+
+<tr>
+ <td class="samplenote">DropDownList, <br />pre-selected date Timestamp=<%= @strtotime("-1 month") %></td>
+ <td class="sampleaction">
+ <com:TDatePicker InputMode="DropDownList" Timestamp=<%= @strtotime("-1 month") %>/>
+ </td>
+</tr>
+
+</table>
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Standard.page b/demos/quickstart/protected/pages/Controls/Standard.page index 9580a0d7..dfaee35b 100644 --- a/demos/quickstart/protected/pages/Controls/Standard.page +++ b/demos/quickstart/protected/pages/Controls/Standard.page @@ -15,7 +15,7 @@ <a href="?page=Controls.ColorPicker">TColorPicker</a> represents an input field taking color values via a color dialog.
</li>
- <li>*
+ <li>
<a href="?page=Controls.DatePicker">TDatePicker</a> represents an input field taking date values via a calendar dialog.
</li>
@@ -27,7 +27,7 @@ <a href="?page=Controls.FileUpload">TFileUpload</a> represents a file upload field. It allows users to upload a file to server.
</li>
- <li>
+ <li>*
<a href="?page=Controls.Head">THead</a> represents the <head> element on an HTML Web page. It is required by a PRADO page should it use themes.
</li>
diff --git a/demos/quickstart/protected/pages/Controls/Validation.page b/demos/quickstart/protected/pages/Controls/Validation.page index 6fe87fd0..6d83af3d 100644 --- a/demos/quickstart/protected/pages/Controls/Validation.page +++ b/demos/quickstart/protected/pages/Controls/Validation.page @@ -26,14 +26,19 @@ Validators share a common set of properties, which are defined in the base class <li><tt>Dynamic</tt> - the space for displaying the error message is NOT reserved. Therefore, showing up the error message will shift the layout of your page around (usually down).</li>
</ul>
</li>
+<li><tt>ControlCssClass</tt> - the Css class that is applied to the control being validated in case the validation fails.</li>
+<li><tt>FocusOnError</tt> - set focus at the validating place if the validation fails. Defaults to false.</li>
+<li><tt>FocusElementID</tt> - the ID of the HTML element that will receive focus if validation fails and <tt>FocusOnError</tt> is true.</li>
</ul>
+<a name="TRequiredFieldValidator"></a>
<h2>TRequiredFieldValidator</h2>
<p>
TRequiredFieldValidator ensures that the user enters some data in the specified input field. By default, TRequiredFieldValidator will check if the user input is empty or not. The validation fails if the input is empty. By setting <tt>InitialValue</tt>, the validator can check if the user input is different from <tt>InitialValue</tt>. If not, the validation fails.
</p>
<com:RunBar PagePath="Controls.Samples.TRequiredFieldValidator.Home" />
+<a name="TRegularExpressionValidator"></a>
<h2>TRegularExpressionValidator</h2>
<p>
TRegularExpressionValidator verifies the user input against a regular pattern. The validation fails if the input does not match the pattern. The regular expression can be specified by the <tt>RegularExpression</tt> property. Some commonly used regular expressions include:
@@ -58,7 +63,7 @@ Note, TRegularExpressionValidator only checks for nonempty user input. Use a TRe </p>
<com:RunBar PagePath="Controls.Samples.TRegularExpressionValidator.Home" />
-<h2>TEmailAddressValidator</h2>
+<h2 id="TEmailAddressValidator">TEmailAddressValidator</h2>
<p>
TEmailAddressValidator verifies that the user input is a valid email address. The validator uses a regular expression to check if the input is in a valid email address format. If <tt>CheckMXRecord</tt> is true, the validator will also check whether the MX record indicated by the email address is valid, provided <tt>checkdnsrr()</tt> is available in the installed PHP.
</p>
@@ -66,7 +71,8 @@ TEmailAddressValidator verifies that the user input is a valid email address. Th Note, if the input being validated is empty, TEmailAddressValidator will not do validation. Use a TRequiredFieldValidator to ensure the value is not empty.
</p>
<com:RunBar PagePath="Controls.Samples.TEmailAddressValidator.Home" />
-
+
+<a name="TCompareValidator"></a>
<h2>TCompareValidator</h2>
<p>
TCompareValidator compares the user input with a constant value specified by <tt>ValueToCompare</tt>, or another user input specified by <tt>ControlToCompare</tt>. The <tt>Operator</tt> property specifies how to compare the values, which includes <tt>Equal</tt>, <tt>NotEqual</tt>, <tt>GreaterThan</tt>, <tt>GreaterThanEqual</tt>, <tt>LessThan</tt> and <tt>LessThanEqual</tt>. Before comparison, the values being compared will be converted to the type specified by <tt>DataType</tt> listed as follows,
@@ -75,26 +81,40 @@ TCompareValidator compares the user input with a constant value specified by <tt <li><tt>String</tt> - A string data type.</li>
<li><tt>Integer</tt> - A 32-bit signed integer data type.</li>
<li><tt>Float</tt> - A double-precision floating point number data type.</li>
-<li><tt>Currency</tt> - A decimal data type that can contain currency symbols.</li>
<li><tt>Date</tt> - A date data type. The date format can be specified by setting <tt>DateFormat</tt> property, which must be recognizable by <tt>TSimpleDateFormatter</tt>. If the property is not set, the GNU date syntax is assumed.</li>
</ul>
<p>
Note, if the input being validated is empty, TEmailAddressValidator will not do validation. Use a TRequiredFieldValidator to ensure the value is not empty.
</p>
+<p>
+<b>N.B.</b> If validating against a <a href="?page=Controls.DatePicker">TDatePicker</a> the <tt>DataType</tt> must be equal to "Date" and the <tt>DateFormat</tt> property of the validator must be equal to the <tt>DateFormat</tt> of the <a href="?page=Controls.DatePicker">TDatePicker</a>.
+</p>
<com:RunBar PagePath="Controls.Samples.TCompareValidator.Home" />
+<a name="TDataTypeValidator"></a>
<h2>TDataTypeValidator</h2>
<p>
TDataTypeValidator verifies if the input data is of specific type indicated by <tt>DataType</tt>. The data types that can be checked against are the same as those in TCompareValidator.
</p>
+<p>
+<b>N.B.</b> If validating against a <a href="?page=Controls.DatePicker">TDatePicker</a> the <tt>DataType</tt> must be equal to "Date" and the <tt>DateFormat</tt> property of the validator must be equal to the <tt>DateFormat</tt> of the <a href="?page=Controls.DatePicker">TDatePicker</a>.
+</p>
+
+
<com:RunBar PagePath="Controls.Samples.TDataTypeValidator.Home" />
+<a name="TRangeValidator"></a>
<h2>TRangeValidator</h2>
<p>
TRangeValidator verifies whether an input value is within a specified range. TRangeValidator uses three key properties to perform its validation. The <tt>MinValue</tt> and <tt>MaxValue</tt> properties specify the minimum and maximum values of the valid range. The <tt>DataType</tt> property specifies the data type of the value being validated. The value will be first converted into the specified type and then compare with the valid range. The data types that can be checked against are the same as those in TCompareValidator.
</p>
+<p>
+<b>N.B.</b> If validating against a <a href="?page=Controls.DatePicker">TDatePicker</a> the <tt>DataType</tt> must be equal to "Date" and the <tt>DateFormat</tt> property of the validator must be equal to the <tt>DateFormat</tt> of the <a href="?page=Controls.DatePicker">TDatePicker</a>.
+</p>
+
<com:RunBar PagePath="Controls.Samples.TRangeValidator.Home" />
+<a name="TCustomValidator"></a>
<h2>TCustomValidator</h2>
<p>
TCustomValidator performs user-defined validation (either server-side or client-side or both) on an input control.
@@ -118,7 +138,7 @@ function ValidationFunctionName(sender, parameter) </com:TTextHighlighter>
<com:RunBar PagePath="Controls.Samples.TCustomValidator.Home" />
-
+<a name="TValidationSummary"></a>
<h2>TValidationSummary</h2>
<p>
TValidationSummary displays a summary of validation errors inline on a Web page, in a message box, or both.
|