We start by editing the Home.page file found in the currency-converter/protected/pages/ 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.

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 Home class should extends the , the default base - class for all Prado pages. + class for all Prado pages.

Prado uses PHP's __autoload 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 OnClick 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".

The value of the OnClick, "convert_clicked", will be the method name in the "Home.php" that will called when the user clicks on the - "Convert" button. + "Convert" button.

+ +

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

We shall now examine, the three lines that implements the simply currency - conversion in the "convert_clicked" method. -

+ conversion in the "convert_clicked" method. +

$rate = floatval($this->currencyRate->Text); - +

The statement $this->currencyRate corresponds to the TTextBox component with ID value "currencyRate" in the "Home.page" template. The Text property of the TTextBox contains the value that the user entered. So, we obtain this value by $this->currencyRate->Text which we convert the - value to a float value. + value to a float value.

$dollars = floatval($this->dollars->Text); - -

+ +

The next line does a similar things, it takes the user value from the TTextBox with ID value "dollars and converts it to @@ -212,9 +211,9 @@ $dollars = floatval($this->dollars->Text);

The third line calculates the new amount and set this value in the Text property of the TLabel with ID="total". - Thus, we display the new amount to the user in the label. + Thus, we display the new amount to the user in the label.

$this->total->Text = $rate * $dollars; @@ -233,14 +232,14 @@ $this->total->Text = $rate * $dollars;

the user enters a value,

the currency rate is a valid number,

the currency rate is positive.

- +

To ensure 1 we add one . To ensure 2 and 3, we add one . 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 - Validation Controls page. + Validation Controls page.

<com:TRequiredFieldValidator @@ -258,12 +257,12 @@ $this->total->Text = $rate * $dollars;

the user enters a value,
the value is a valid number (not including any currency or dollar signs).

To ensure 1 we just add another TRequiredFieldValidator, for 2 we could use a . 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.

<com:TRequiredFieldValidator @@ -283,7 +282,7 @@ $this->total->Text = $rate * $dollars; using both javascript and server side. The server side validation is always performed. For the server side, we should skip the calculation if the validators are not satisfied. This can - done as follows. + done as follows.

public function convert_clicked($sender, $param) @@ -313,7 +312,7 @@ public function convert_clicked($sender, $param) In addition, we can change the "totals" TLabel with the Active Control counter part, , such that the server side can update the browser without - reloading the page. + reloading the page.

@@ -323,11 +322,11 @@ public function convert_clicked($sender, $param)

<com:TActiveButton Text="Convert" OnClick="convert_clicked" />

- +

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".

Prado::using('System.Web.UI.ActiveControls.*'); @@ -345,7 +344,7 @@ Prado::using('System.Web.UI.ActiveControls.*');

To indicate that the calculation is in progress, we can change the text of the "total" label as follows. We add a ClientSide.OnLoading property to the "Convert" button (since this button is responsible for requesting - the calculation). + the calculation).

<com:TActiveButton Text="Convert" OnClick="convert_clicked" > @@ -383,7 +382,7 @@ Prado::using('System.Web.UI.ActiveControls.*');

We simply create a CSS file named "common.css" and save it in the themes/Basic 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).

<%@ Theme="Basic" %> @@ -392,7 +391,7 @@ Prado::using('System.Web.UI.ActiveControls.*'); <com:THead Title="Currency Converter" /> - +

The first line <%@ Theme="Basic" %> defines the theme to be used for this page. The -- cgit v1.2.3