diff options
Diffstat (limited to 'demos/quickstart/protected/pages/Tutorial/CurrencyConverter.page')
| -rwxr-xr-x | demos/quickstart/protected/pages/Tutorial/CurrencyConverter.page | 63 |
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"> <com:TForm> @@ -75,7 +75,7 @@ php prado/framework/prado-cli.php -c currency-converter </div> </fieldset> </com:TForm> -</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"> <?php @@ -133,8 +133,7 @@ class Home extends TPage { } -?> -</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"> <com:TButton Text="Convert" OnClick="convert_clicked" /> </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"> <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"> <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"> <com:TActiveButton Text="Convert" OnClick="convert_clicked" /> </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"> <com:TActiveButton Text="Convert" OnClick="convert_clicked" > @@ -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"> <%@ Theme="Basic" %> @@ -392,7 +391,7 @@ Prado::using('System.Web.UI.ActiveControls.*'); <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <com:THead Title="Currency Converter" /> <body> -</com:TTextHighlighter>
+</com:TTextHighlighter> <p id="4334" class="block-content"> The first line <tt><%@ Theme="Basic" %></tt> defines the theme to be used for this page. The |