diff options
Diffstat (limited to 'demos/blog-tutorial/protected/pages/Day1')
| -rw-r--r-- | demos/blog-tutorial/protected/pages/Day1/CreateContact.page | 58 | ||||
| -rw-r--r-- | demos/blog-tutorial/protected/pages/Day1/Setup.page | 11 | ||||
| -rw-r--r-- | demos/blog-tutorial/protected/pages/Day1/ShareLayout.page | 4 | ||||
| -rw-r--r-- | demos/blog-tutorial/protected/pages/Day1/output.gif | bin | 15045 -> 13379 bytes |
4 files changed, 51 insertions, 22 deletions
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 <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>
+<com:TRequiredFieldValidator ControlToValidate="Name"
+ ErrorMessage="Please provide your name."
+ Display="Dynamic" />
+<br/>
+<com:TTextBox ID="Name" />
- ...textbox and validators for user's email...
+<br/>
+<span>Your Email:</span>
+<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" />
+<br/>
+<com:TTextBox ID="Email" />
- ...textbox and validator for user's feedback content...
+<br/>
+<span>Feedback:</span>
+<com:TRequiredFieldValidator ControlToValidate="Feedback"
+ ErrorMessage="Please provide your feedback."
+ Display="Dynamic" />
+<br/>
+<com:TTextBox ID="Feedback"
+ TextMode="MultiLine"
+ Rows="10"
+ Columns="40" />
- <com:TButton Text="Submit" OnClick="submitButtonClicked" />
+<br/>
+<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 </com:TTextHighlighter>
<p>
-The template looks very similar to a normal HTML page. The main difference is that the template contains a few <tt><com:></tt> tags. Each <tt><com:></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><com:TButton></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><com:></tt> tags. Each <tt><com:></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><com:TButton></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 <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" />
<br/>
<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 <%= PRADO::poweredByPrado() %>
+<%= PRADO::poweredByPrado() %>
</div>
</com:TForm>
diff --git a/demos/blog-tutorial/protected/pages/Day1/output.gif b/demos/blog-tutorial/protected/pages/Day1/output.gif Binary files differindex f3ece514..9ad2bfb8 100644 --- a/demos/blog-tutorial/protected/pages/Day1/output.gif +++ b/demos/blog-tutorial/protected/pages/Day1/output.gif |
