From ff32eed01f783ee33caeacb0f7315612f0994f8f Mon Sep 17 00:00:00 2001 From: xue <> Date: Sun, 8 Apr 2007 21:33:23 +0000 Subject: Added Day 2 tutorial. --- .../protected/pages/Day1/CreateContact.page | 58 ++++++++++++++++------ 1 file changed, 42 insertions(+), 16 deletions(-) (limited to 'demos/blog-tutorial/protected/pages/Day1/CreateContact.page') diff --git a/demos/blog-tutorial/protected/pages/Day1/CreateContact.page b/demos/blog-tutorial/protected/pages/Day1/CreateContact.page index 07adbe93..4daf43e3 100644 --- a/demos/blog-tutorial/protected/pages/Day1/CreateContact.page +++ b/demos/blog-tutorial/protected/pages/Day1/CreateContact.page @@ -14,7 +14,7 @@ The purpose of the Contact page is to collect feedback from Web users o To create the Contact page, we need two files under the pages directory: the page template file Contact.page and the page class file Contact.php.

- + A page must have either a template file (extension .page) or a class file, or both: @@ -35,7 +35,7 @@ We first create the template file for the Contact page.

-We use template to organize the presentational layout of the feedback form. In the template, we use textboxes to collect user's name, email and feedback. And we use validators to ensure that the user provides all these information before submitting the feedback form. The whole template looks like the following: +We use template to organize the presentational layout of the feedback form. In the template, we use textboxes to collect user's name, email and feedback. And we use validators to ensure that the user provides all these information before submitting the feedback form. The whole template is as follows,

@@ -47,13 +47,40 @@ We use template to organize the presentational layout of the feedback form. In t <com:TForm> - ...textbox and validator for user's name... +

Contact

+

Please fill out the following form to let me know your feedback on my blog. Thanks!

+ +Your Name: +<com:TRequiredFieldValidator ControlToValidate="Name" + ErrorMessage="Please provide your name." + Display="Dynamic" /> +
+<com:TTextBox ID="Name" /> - ...textbox and validators for user's email... +
+Your Email: +<com:TRequiredFieldValidator ControlToValidate="Email" + ErrorMessage="Please provide your email address." + Display="Dynamic" /> +<com:TEmailAddressValidator ControlToValidate="Email" + ErrorMessage="You entered an invalid email address." + Display="Dynamic" /> +
+<com:TTextBox ID="Email" /> - ...textbox and validator for user's feedback content... +
+Feedback: +<com:TRequiredFieldValidator ControlToValidate="Feedback" + ErrorMessage="Please provide your feedback." + Display="Dynamic" /> +
+<com:TTextBox ID="Feedback" + TextMode="MultiLine" + Rows="10" + Columns="40" /> - <com:TButton Text="Submit" OnClick="submitButtonClicked" /> +
+<com:TButton Text="Submit" OnClick="submitButtonClicked" /> </com:TForm> @@ -62,7 +89,7 @@ We use template to organize the presentational layout of the feedback form. In t

-The template looks very similar to a normal HTML page. The main difference is that the template contains a few <com:> tags. Each <com:> tag refers to a control whose properties are being initialized with name-value pairs in the tag. For example, the <com:TButton> refers to the TButton control which displays a button that users can click on to submit the feedback form. For complete template syntax, please refer to the Quickstart Tutorial. +As we can see that the template looks very similar to a normal HTML page. The main difference is that the template contains a few <com:> tags. Each <com:> tag refers to a control whose properties are being initialized with name-value pairs in the tag. For example, the <com:TButton> refers to the TButton control which displays a button that users can click on to submit the feedback form. For complete template syntax, please refer to the Quickstart Tutorial.

@@ -70,7 +97,7 @@ PRADO provides a control for every type of HTML input. For example, TTextBox controls, the template also uses many validator controls which ensure user's inputs satisfy specific validation rules. For example, to ensure a legitimate email address is provided, we use two validators to validate the "email" text box, as shown in the following:

@@ -78,25 +105,24 @@ The following template shows the detail about "...textbox and validators for use <com:TRequiredFieldValidator ControlToValidate="Email" ErrorMessage="Please provide your email address." - Display="Dynamic" - /> + Display="Dynamic" /> <com:TEmailAddressValidator ControlToValidate="Email" ErrorMessage="You entered an invalid email address." - Display="Dynamic" - /> + Display="Dynamic" />
<com:TTextBox ID="Email" />

-Three controls are used here: +Below we summarize the controls that are used in the page template:

@@ -168,7 +194,7 @@ Page class name must be the same as the file name. This is also a requirement fo Our newly created Contact can be tested via the URL http://hostname/blog/index.php?page=Contact. If we click on the submit button without entering any information, we will see error messages appearing next to the corresponding textboxes. If we enter all required information, the method mailFeedback() will be invoked.

- +

A further enhancement to this page is to show some confirmation message on the page after the user submits feedback. And possibly, the browser may be redirected to another page if the submission is successful. We will leave these tasks to our readers. -- cgit v1.2.3