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 +++++++++++++++------
 .../blog-tutorial/protected/pages/Day1/Setup.page  |  11 ++--
 .../protected/pages/Day1/ShareLayout.page          |   4 +-
 .../blog-tutorial/protected/pages/Day1/output.gif  | Bin 15045 -> 13379 bytes
 4 files changed, 51 insertions(+), 22 deletions(-)

(limited to 'demos/blog-tutorial/protected/pages/Day1')

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 <tt>Contact</tt> page is to collect feedback from Web users o
 To create the <tt>Contact</tt> page, we need two files under the <tt>pages</tt> directory: the page template file <tt>Contact.page</tt> and the page class file <tt>Contact.php</tt>.
 </p>
 
-<img src="<%~ directories2.gif %>" />
+<img src="<%~ directories2.gif %>" class="output" />
 
 <com:InfoBox>
 A <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Pages">page</a> must have either a <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">template</a> file (extension <tt>.page</tt>) or a class file, or both:
@@ -35,7 +35,7 @@ We first create the template file for the <tt>Contact</tt> page.
 </p>
 
 <p>
-We use template to organize the presentational layout of the feedback form. In the template, we use <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.TextBox">textboxes</a> to collect user's name, email and feedback. And we use <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Validation">validators</a> 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 <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.TextBox">textboxes</a> to collect user's name, email and feedback. And we use <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Validation">validators</a> to ensure that the user provides all these information before submitting the feedback form. The whole template is as follows,
 </p>
 
 <com:TTextHighlighter CssClass="source" Language="prado">
@@ -47,13 +47,40 @@ We use template to organize the presentational layout of the feedback form. In t
 
 &lt;com:TForm> 
 
-  ...textbox and validator for user's name...
+<h1>Contact</h1>
+<p>Please fill out the following form to let me know your feedback on my blog. Thanks!</p>
+
+<span>Your Name:</span>
+&lt;com:TRequiredFieldValidator ControlToValidate="Name"
+	ErrorMessage="Please provide your name." 
+	Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Name" />
 
-  ...textbox and validators for user's email...
+<br/>
+<span>Your Email:</span>
+&lt;com:TRequiredFieldValidator ControlToValidate="Email"
+	ErrorMessage="Please provide your email address." 
+	Display="Dynamic" />
+&lt;com:TEmailAddressValidator ControlToValidate="Email"
+	ErrorMessage="You entered an invalid email address." 
+	Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Email" />
 
-  ...textbox and validator for user's feedback content...
+<br/>
+<span>Feedback:</span>
+&lt;com:TRequiredFieldValidator ControlToValidate="Feedback"
+	ErrorMessage="Please provide your feedback." 
+	Display="Dynamic" />
+<br/>
+&lt;com:TTextBox ID="Feedback" 
+	TextMode="MultiLine" 
+	Rows="10"
+	Columns="40" />
 
-  &lt;com:TButton Text="Submit" OnClick="submitButtonClicked" />
+<br/>
+&lt;com:TButton Text="Submit" OnClick="submitButtonClicked" />
 
 &lt;/com:TForm>
 
@@ -62,7 +89,7 @@ We use template to organize the presentational layout of the feedback form. In t
 </com:TTextHighlighter>
 
 <p>
-The template looks very similar to a normal HTML page. The main difference is that the template contains a few <tt>&lt;com:&gt;</tt> tags. Each <tt>&lt;com:&gt;</tt> tag refers to a <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Controls">control</a> whose properties are being initialized with name-value pairs in the tag. For example, the <tt>&lt;com:TButton&gt;</tt> refers to the <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Button">TButton</a> control which displays a button that users can click on to submit the feedback form. For complete template syntax, please refer to the <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">Quickstart Tutorial</a>.
+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 <tt>&lt;com:&gt;</tt> tags. Each <tt>&lt;com:&gt;</tt> tag refers to a <a href="http://www.pradosoft.com/demos/quickstart/?page=Fundamentals.Controls">control</a> whose properties are being initialized with name-value pairs in the tag. For example, the <tt>&lt;com:TButton&gt;</tt> refers to the <a href="http://www.pradosoft.com/demos/quickstart/?page=Controls.Button">TButton</a> control which displays a button that users can click on to submit the feedback form. For complete template syntax, please refer to the <a href="http://www.pradosoft.com/demos/quickstart/?page=Configurations.Templates1">Quickstart Tutorial</a>.
 </p>
 
 <com:InfoBox>
@@ -70,7 +97,7 @@ PRADO provides a control for every type of HTML input. For example, <a href="htt
 </com:InfoBox>
 
 <p>
-The following template shows the detail about "...textbox and validators for user's email..." in the above.
+Besides <tt>TTextBox</tt> 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:
 </p>
 
 <com:TTextHighlighter CssClass="source" Language="prado">
@@ -78,25 +105,24 @@ The following template shows the detail about "...textbox and validators for use
 &lt;com:TRequiredFieldValidator 
 	ControlToValidate="Email"
 	ErrorMessage="Please provide your email address." 
-	Display="Dynamic"
-	/>
+	Display="Dynamic" />
 &lt;com:TEmailAddressValidator 
 	ControlToValidate="Email"
 	ErrorMessage="You entered an invalid email address." 
-	Display="Dynamic"
-	/>
+	Display="Dynamic" />
 <br/>
 &lt;com:TTextBox ID="Email" />
 <br/>
 </com:TTextHighlighter>
 
 <p>
-Three controls are used here:
+Below we summarize the controls that are used in the page template:
 </p>
 
 <ul>
-<li><a href="http://www.pradosoft.com/docs/classdoc/TTextBox">TTextBox</a> displays a textbox to allow user to enter his email address.</li>
-<li><a href="http://www.pradosoft.com/docs/classdoc/TRequiredFieldValidator">TRequiredFieldValidator</a> ensures that the textbox is not empty when the feedback is submitted.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TForm">TForm</a> displays an HTML form. Any input control must be enclosed within it. And most importantly, at most one <tt>TForm</tt> may appear in a page.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TTextBox">TTextBox</a> displays a text box to collect user text input.</li>
+<li><a href="http://www.pradosoft.com/docs/classdoc/TRequiredFieldValidator">TRequiredFieldValidator</a> ensures that the associated text box is not empty when the feedback is submitted.</li>
 <li><a href="http://www.pradosoft.com/docs/classdoc/TEmailAddressValidator">TEmailAddressValidator</a> ensures that the textbox contains a <i>valid</i> email address when the feedback is submitted.</li>
 </ul>
 
@@ -168,7 +194,7 @@ Page class name must be the same as the file name. This is also a requirement fo
 Our newly created <tt>Contact</tt> can be tested via the URL <tt>http://hostname/blog/index.php?page=Contact</tt>. 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 <tt>mailFeedback()</tt> will be invoked.
 </p>
 
-<img src="<%~ output.gif %>" />
+<img src="<%~ output.gif %>" class="output" />
 
 <p>
 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.
diff --git a/demos/blog-tutorial/protected/pages/Day1/Setup.page b/demos/blog-tutorial/protected/pages/Day1/Setup.page
index ee4744f5..0fe877bf 100644
--- a/demos/blog-tutorial/protected/pages/Day1/Setup.page
+++ b/demos/blog-tutorial/protected/pages/Day1/Setup.page
@@ -21,7 +21,7 @@ php path/to/prado-cli.php -c .
 Running the above command creates the following directories and files:
 </p>
 
-<img src="<%~ directories.gif %>" />
+<img src="<%~ directories.gif %>" class="output" />
 
 <p>
 We now have a skeleton PRADO application accessible via the URL <tt>http://hostname/blog/index.php</tt> which brings up a Web page showing "Welcome to PRADO".
@@ -145,13 +145,16 @@ To change the location of the root page directory and change the name of homepag
 </p>
 
 <com:TTextHighlighter CssClass="source" Language="xml">
-<services>
-  <service id="page" 
+<?xml version="1.0" encoding="utf-8"?>
+<application id="blog" mode="Debug">
+  <services>
+    <service id="page" 
            class="TPageService" 
            BasePath="path.to.pages"
            DefaultPage="NewHome"
            />
-</services>
+  </services>
+</application>
 </com:TTextHighlighter>
 
 <p>
diff --git a/demos/blog-tutorial/protected/pages/Day1/ShareLayout.page b/demos/blog-tutorial/protected/pages/Day1/ShareLayout.page
index 548cec1c..d3d1f553 100644
--- a/demos/blog-tutorial/protected/pages/Day1/ShareLayout.page
+++ b/demos/blog-tutorial/protected/pages/Day1/ShareLayout.page
@@ -17,7 +17,7 @@ It is also possible to share common layout via <a href="http://www.pradosoft.com
 We now create the master control <tt>MainLayout</tt> to represent the common layout shared by our blog pages. The <tt>MainLayout</tt> control is a template control extending from <tt>TTemplateControl</tt>. It requires a template file <tt>MainLayout.tpl</tt> and a class file <tt>MainLayout.php</tt> located under the same directory. To facilitate maintenance, we create a new directory <tt>protected/layouts</tt> to hold them.
 </p>
 
-<img src="<%~ directories3.gif %>" />
+<img src="<%~ directories3.gif %>" class="output" />
 
 <p>
 For the moment, <tt>MainLayout</tt> only contains a simple header and a footer, as shown in the following. In future, we will add a side-bar to it. Readers are also encouraged to enhance the layout with other features.
@@ -38,7 +38,7 @@ For the moment, <tt>MainLayout</tt> only contains a simple header and a footer,
 </div>
 
 <div id="footer">
-Powered by &lt;%= PRADO::poweredByPrado() %>
+&lt;%= PRADO::poweredByPrado() %>
 </div>
 
 &lt;/com:TForm>
diff --git a/demos/blog-tutorial/protected/pages/Day1/output.gif b/demos/blog-tutorial/protected/pages/Day1/output.gif
index f3ece514..9ad2bfb8 100644
Binary files a/demos/blog-tutorial/protected/pages/Day1/output.gif and b/demos/blog-tutorial/protected/pages/Day1/output.gif differ
-- 
cgit v1.2.3