The goal of this tutorial is to learn how to use user interface components within your application.
The application that we are going to develop is an improvement of The Hello World: This application will show the 'Hello world' string but just by clicking on a button.
What we are going to do in this tutorial is:
To modify the helloWorld template by adding 2 components: a button and a label (templates/helloWorld.tpl)
To define an event handler and associate to the helloWorld view (libs/eventhandlers/HelloWorldEventHandler.class.php)
Placing components within the template
First thing to do will be to modify the template helloWorld.tpl by adding 2 components:
<html>
<head>
<title>The hello world in Lion</title>
</head>
<body>
<comp:commandbutton name="helloWorldButton" caption="Click on me!"/><br>
<h1><comp:label name="helloWorldLabel"/></h1>
</body>
</html>
As we can see, we have declared 2 components: a commandbutton (helloWorldButton) and a label (helloWorldLabel).
What we expect is to see the 'Hello World!' message just when click on the button.
Creating the event handler
The following task to do is to create an event handler to execute a piece of code when we click on the button.
To do that, we have to define a class extending the __EventHandler. Because the view we are executing is helloWorld, by following the event handlers naming convention (see the Event Handlers section for more information about this naming convention), we'll define it as HelloWorldEventHandler
As we can see in the listing above, we have defined the HelloWorldEventHandler with a single method: helloWorldButton_onClick.
Note that the name for this method is not casual, but again: it follows the naming convention that the __EventHandler establish for methods: component_name plus '_' plus event_name.
In our event handler, because the button name is 'helloWorldButton' and the event to control is the 'click' event, the method is 'helloWorldButton_click'
One of the most interesting things within this code is how the label component reference is retrieved by ussing the __EventHandler::getComponent(). This method allows us to retrieve any component within the same view, being able to get or set any property within the component.
Placing the event handler
By default, the libs/eventhandlers directory is reserved to place event handler classes.
There is a mapping rule to let Lion know that any file in that directory with the suffix '.class.php' corresponds to a class with the same name without the suffix.
This mapping rule resides in the app/config/includepath.xml file.
Continuing with our example, as our class is HelloWorldEventHandler, let's name the file as HelloWorldEventHandler.class.php and place it into the libs/eventhandlers directory.
Executing the Hello World
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:
And by clicking on the button, we'll see the 'Hello World!' down the button wihtout refreshing the page:
