The Hello World Pro

Form components tutorial

Note that all the source code used in this tutorial is available to download and to see in action:

Placing input components within the template

Goal

The goal of this tutorial is to learn how to use input components such the inputbox and the combobox.
The application that we are going to develop is an improvement of The Hello World Deluxe: This application will ask the user to input some information in order to show a customized 'Hello world' message.

What we are going to do in this tutorial is:

To modify the helloWorld template by adding 4 components: an inputbox, a combobox, a button and a label (templates/helloWorld.tpl)
To modify the event handler associated to the helloWorld view (libs/eventhandlers/HelloWorldEventHandler.class.php)

Placing input components within the template

First thing to do will be to modify the template helloWorld.tpl by adding the following components:

<html>
<head>
  <title>The hello world deluxe in Lion</title> 
</head>
<body>
Please state your name:<br> 
<comp:inputbox name="nameInputBox"/><br>
Please select a salutation:<br>
<comp:combobox name="salutationComboBox">
  <comp:item value="mr."  text="Mr"/>
  <comp:item value="ms."  text="Ms"/>
  <comp:item value="mrs." text="Mrs"/>
  <comp:item value="dr."  text="Dr"/>
</comp:combobox><br>
And finally click on button:<br>
<comp:commandbutton name="sayHelloButton" caption="Say hello!"/><br>
 
<h1><comp:label name="helloLabel"/></h1>
</body>
</html>

As we can see, we have declared 4 components: an inputbox (nameInputBox), a combobox (saludationComboBox), a commandbutton (sayHelloButton) and a label (helloLabel).
What we expect is to see a customized 'Hello World!' message like 'Hello mr. Antuan' when click on the button.

Modifying the event handler

The following task to do is to adapt the event handle to:

Read user input from components
Build a customized 'Hello World!' message and show it

To do that, we have to define a method to handle the button click event and perform those tasks:

<?php
 
class HelloWorldEventHandler extends __EventHandler {
 
    /**
     * Shows a customized hello message into the helloLabel
     * by reading from input components:
     *
     */
    public function sayHelloButton_click() {
        //get the name from the input component:    
        $name = $this->getComponent('nameInputBox')->
                       getValue();
 
        //get the salutation from the combobox:                       
        $salutation = $this->getComponent('salutationComboBox')->
                       getValue();
 
        //compose the customized hello message:                       
        $hello_message = 'Hello ' . $salutation . ' ' . $name;                       
 
        //show the customized hello message within the label:
        $label_component = $this->getComponent('helloLabel')->
                                  setText($hello_message);
 
    }
 
}

As we can see in the listing above, we have just retrieve the value of the input components by calling the getValue method.
All the input components inherit from the __InputComponent, exposing the getValue method to retrieve the current value of each one

Analogous, all those kind of components exposes another method (setValue) to set a new value.

Executing the Hello World Pro

Now it's time to execute our application. Just type the following url: http://yourdomain/pathtoyourapplication/helloWorld.html

The aspect of our application should be like the following figure once we have click on the button:

And again: No need to refresh the entire page to show the hello message. Ajax + Json instead of, which is handled automagically by the framework.

The Hello World Pro

Table of Contents

Goal

Placing input components within the template

Modifying the event handler

Executing the Hello World Pro