xlab-6 experiments

“Hello World” perhaps is the simplest interactive PRADO application that you can build. It displays to end-users a page with a submit button whose caption is “Click Me”. When the user clicks on the button, the button changes the caption to “Hello World”. This example is for Prado version 3.0 or later.

Example: http://xlab6.com/prado3/examples/helloworld.php

To begin, we first create an entry file index.php and some directories: protected, protected/runtime, protected/pages and assets.

index.php
   protected [DIR]
        runtime [DIR]
        pages [DIR]
   assets [DIR]

The index.php is very simple.

<?php
require_once("../prado/framework/prado.php");
$app = new TApplication;
$app->run();
?>

Next, we create a template file Home.page and save it inside the protected/pages directory.

<com:TForm>
<com:TButton Text="Click me" OnClick="clickMe" />
</com:TForm>

The template above consists of two Prado components, a TForm that represents a HTML form and a TButton representing a HTML form submit button. The Text property1) sets the caption on the button. OnClick is an event property, such that when the button is clicked, the corresponding clickMe function is called.

Note that, in version 3.0, component properties are not case-sensitive, unlike in earlier versions.

To handle the click event, we need a php file Home.php with class name Home that corresponds to the template file Home.page, and a function named “clickMe” that corresponds to the value of the OnClick property in the template.

class Home extends TPage
{
    function clickMe($sender,$param)
    {
        $sender->Text="Hello, world!";
    }
}

We are now ready to test out the “Hello World” application. Open your favourite browser and surf to the corresponding index.php. You should see a button with “Click me” caption on the page. When the button is clicked, the Click event is fired and the method clickMe in Home class is executed. Subsequently the button Text is updated with “Hello, world!”.

Differences between Prado version 2.x and 3.0 in this example

1. The default directory structure must exists.
2. By default templates file have .page extension.
3. OnClick in version 2.x becomes Click in version 3.0.
4. Application specification file application.xml is optional.

Happy coding