summaryrefslogtreecommitdiff
path: root/demos/quickstart/protected/pages/Tutorial/CurrencyConverter.page
diff options
context:
space:
mode:
Diffstat (limited to 'demos/quickstart/protected/pages/Tutorial/CurrencyConverter.page')
-rwxr-xr-xdemos/quickstart/protected/pages/Tutorial/CurrencyConverter.page63
1 files changed, 31 insertions, 32 deletions
diff --git a/demos/quickstart/protected/pages/Tutorial/CurrencyConverter.page b/demos/quickstart/protected/pages/Tutorial/CurrencyConverter.page
index 4bec2a28..1abd68b9 100755
--- a/demos/quickstart/protected/pages/Tutorial/CurrencyConverter.page
+++ b/demos/quickstart/protected/pages/Tutorial/CurrencyConverter.page
@@ -34,9 +34,9 @@
<tt>currency-converter</tt> in your current working directory.
You may need to change to the appropriate directory
first.
- See the <a href="?page=GettingStarted.CommandLine">Command Line Tool</a>
- for more details.
- </p>
+ See the <a href="?page=GettingStarted.CommandLine">Command Line Tool</a>
+ for more details.
+ </p>
<com:TTextHighlighter Language="text" CssClass="source block-content" id="code111">
php prado/framework/prado-cli.php -c currency-converter
</com:TTextHighlighter>
@@ -52,7 +52,7 @@ php prado/framework/prado-cli.php -c currency-converter
<p id="80058" class="block-content">We start by editing the <tt>Home.page</tt> file found in the
<tt>currency-converter/protected/pages/</tt> directory. Files ending
with ".page" are page templates that contains HTML and Prado controls.
- We simply add two textboxes, three labels and one button as follows.
+ We simply add two textboxes, three labels and one button as follows.
</p>
<com:TTextHighlighter Language="prado" CssClass="source block-content" id="form1">
&lt;com:TForm&gt;
@@ -75,7 +75,7 @@ php prado/framework/prado-cli.php -c currency-converter
</div>
</fieldset>
&lt;/com:TForm&gt;
-</com:TTextHighlighter>
+</com:TTextHighlighter>
<p id="refresh" class="block-content">
If you refresh the page, you should see something similar to the following figure.
It may not look very pretty or orderly, but we shall change that later using CSS.
@@ -125,7 +125,7 @@ php prado/framework/prado-cli.php -c currency-converter
to add a "Home.php" to where "Home.page" is. The <tt>Home</tt> class
should extends the
<com:DocLink ClassPath="System.Web.UI.TPage" Text="TPage" />, the default base
- class for all Prado pages.
+ class for all Prado pages.
</p>
<com:TTextHighlighter Language="php" CssClass="source block-content" id="code3">
&lt;?php
@@ -133,8 +133,7 @@ class Home extends TPage
{
}
-?&gt;
-</com:TTextHighlighter>
+</com:TTextHighlighter>
<p id="1111" class="block-content">
Prado uses PHP's <tt>__autoload</tt> method to load classes. The convention
is to use the class name with ".php" extension as filename.
@@ -151,15 +150,15 @@ class Home extends TPage
the converted total. To handle the user clicking of the "Convert" button
we simply add an <tt>OnClick</tt> property to the "Convert" button in
the "Home.page" template and add a corresponding event handler method
- in the "Home.php".
+ in the "Home.php".
</p>
<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code4">
&lt;com:TButton Text="Convert" OnClick="convert_clicked" /&gt;
</com:TTextHighlighter>
- <p id="222" class="block-content">
+ <p id="222" class="block-content">
The value of the <tt>OnClick</tt>, "<tt>convert_clicked</tt>", will be the method
name in the "Home.php" that will called when the user clicks on the
- "Convert" button.
+ "Convert" button.
</p>
<com:TTextHighlighter Language="php" CssClass="source block-content" id="code5">
class Home extends TPage
@@ -171,8 +170,8 @@ class Home extends TPage
$this->total->Text = $rate * $dollars;
}
}
-</com:TTextHighlighter>
-<div id="3332" class="block-content">
+</com:TTextHighlighter>
+<div id="3332" class="block-content">
<p id="333">
If you run the application in your web browser, enter some values and click
the "Convert" button then you should see that calculated value displayed next
@@ -186,24 +185,24 @@ class Home extends TPage
</p>
<p id="80067">We shall now examine, the three lines that implements the simply currency
- conversion in the "<tt>convert_clicked</tt>" method.
- </p>
+ conversion in the "<tt>convert_clicked</tt>" method.
+ </p>
</div>
<com:TTextHighlighter Language="php" CssClass="source block-content" id="code6" >
$rate = floatval($this->currencyRate->Text);
-</com:TTextHighlighter>
+</com:TTextHighlighter>
<p id="444" class="block-content">
The statement <tt>$this->currencyRate</tt> corresponds to the
<tt>TTextBox</tt> component with <tt>ID</tt> value "currencyRate" in the
"Home.page" template. The <tt>Text</tt> property of the <tt>TTextBox</tt>
contains the value that the user entered. So, we obtain this
value by <tt>$this->currencyRate->Text</tt> which we convert the
- value to a float value.
+ value to a float value.
</p>
<com:TTextHighlighter Language="php" CssClass="source block-content" id="code7">
$dollars = floatval($this->dollars->Text);
-</com:TTextHighlighter>
-<div id="5551" class="block-content">
+</com:TTextHighlighter>
+<div id="5551" class="block-content">
<p id="555">
The next line does a similar things, it takes the user value from
the <tt>TTextBox</tt> with <tt>ID</tt> value "dollars and converts it to
@@ -212,9 +211,9 @@ $dollars = floatval($this->dollars->Text);
<p id="80068">The third line calculates the new amount and set this value in the
<tt>Text</tt> property of the <tt>TLabel</tt> with <tt>ID="total"</tt>.
- Thus, we display the new amount to the user in the label.
+ Thus, we display the new amount to the user in the label.
</p>
-</div>
+</div>
<com:TTextHighlighter Language="php" CssClass="source block-content" id="code8">
$this->total->Text = $rate * $dollars;
</com:TTextHighlighter>
@@ -233,14 +232,14 @@ $this->total->Text = $rate * $dollars;
<li>the user enters a value,</li>
<li>the currency rate is a valid number,</li>
<li>the currency rate is positive.</li>
- </ol>
+ </ol>
<p id="666" class="block-content">
To ensure 1 we add one
<com:DocLink ClassPath="System.Web.UI.WebControls.TRequiredFieldValidator" Text="TRequiredFieldValidator" />. To ensure 2 and 3, we add one
<com:DocLink ClassPath="System.Web.UI.WebControls.TCompareValidator" Text="TCompareValidator" />. We may add these validators any where within
the "Home.page" template. Further details regarding these validator and other
validators can be found in the
- <a href="?page=Controls.Validation">Validation Controls</a> page.
+ <a href="?page=Controls.Validation">Validation Controls</a> page.
</p>
<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code9">
&lt;com:TRequiredFieldValidator
@@ -258,12 +257,12 @@ $this->total->Text = $rate * $dollars;
<ol id="o222" class="block-content">
<li>the user enters a value,</li>
<li>the value is a valid number (not including any currency or dollar signs).</li>
- </ol>
+ </ol>
<p id="777" class="block-content">
To ensure 1 we just add another <tt>TRequiredFieldValidator</tt>, for 2
we could use a
<com:DocLink ClassPath="System.Web.UI.WebControls.TDataTypeValidator" Text="TDataTypeValidator" />. For simplicity we only allow the user to enter
- a number for the amount they wish to convert.
+ a number for the amount they wish to convert.
</p>
<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code9a">
&lt;com:TRequiredFieldValidator
@@ -283,7 +282,7 @@ $this->total->Text = $rate * $dollars;
using both javascript and server side. The server side validation
is <b>always performed</b>. For the server side, we
should skip the calculation if the validators are not satisfied. This can
- done as follows.
+ done as follows.
</p>
<com:TTextHighlighter Language="php" CssClass="source block-content" id="code10" >
public function convert_clicked($sender, $param)
@@ -313,7 +312,7 @@ public function convert_clicked($sender, $param)
In addition, we can change the "totals" <tt>TLabel</tt> with the
Active Control counter part,
<com:DocLink ClassPath="System.Web.UI.ActiveControls.TActiveLabel" Text="TActiveLabel" />, such that the server side can update the browser without
- reloading the page.
+ reloading the page.
</p>
<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code11">
<div class="total-field">
@@ -323,11 +322,11 @@ public function convert_clicked($sender, $param)
<div class="convert-button">
&lt;com:TActiveButton Text="Convert" OnClick="convert_clicked" /&gt;
</div>
-</com:TTextHighlighter>
+</com:TTextHighlighter>
<p id="1232" class="block-content">
The server side logic remains the same, we just need to import the
Active Controls name space as they are not included by default. We
- add the following line to the begin of "Home.php".
+ add the following line to the begin of "Home.php".
</p>
<com:TTextHighlighter Language="php" CssClass="source block-content" id="code12">
Prado::using('System.Web.UI.ActiveControls.*');
@@ -345,7 +344,7 @@ Prado::using('System.Web.UI.ActiveControls.*');
<p id="80076" class="block-content">To indicate that the calculation is in progress, we can change the text
of the "total" label as follows. We add a <tt>ClientSide.OnLoading</tt> property
to the "Convert" button (since this button is responsible for requesting
- the calculation).
+ the calculation).
</p>
<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code13">
&lt;com:TActiveButton Text="Convert" OnClick="convert_clicked" &gt;
@@ -383,7 +382,7 @@ Prado::using('System.Web.UI.ActiveControls.*');
<p id="80080" class="block-content">We simply create a CSS file named "common.css" and save it in the
<tt>themes/Basic</tt> directory. Then we add the following code
- to the beginning of "Home.page" (we add a little more HTML as well).
+ to the beginning of "Home.page" (we add a little more HTML as well).
</p>
<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code14">
&lt;%@ Theme="Basic" %&gt;
@@ -392,7 +391,7 @@ Prado::using('System.Web.UI.ActiveControls.*');
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
&lt;com:THead Title="Currency Converter" /&gt;
<body>
-</com:TTextHighlighter>
+</com:TTextHighlighter>
<p id="4334" class="block-content">
The first line <tt>&lt;%@ Theme="Basic" %&gt;</tt> defines the
theme to be used for this page. The