UI and backend code integration overview

There are several ways in which your UI or your JavaScript code can interact with the backend:

Call a PHP method directly from the UI (set up using the editor)
Submit a form to a PHP method directly from the UI (set up using the editor)
Call a PHP method from your JS code (just do this.servidor.php_method_name(), servidor meaning server)
Call a JS function from PHP (just do $this->cliente->js_function_name(), cliente meaning client)
Variations of the former, like calling a PHP method in the main app controller, submitting the form manually from JS with extra parameters, etc., as well as making regular AJAX requests to other non-Foxtrot APIs (using the servidor or ajax global objects).

Calling a backend method from the UI

Select the button we created on the previous page and change the dropdown of the property Click to servidor: (server:). Don't forget to save .
Go to the app manager and click New controller .
If you set the name of the controller the same as the name of a view, Foxtrot will link them automatically. So enter inicio and leave Público (Public) checked.
Open your new controller, located at /servidor/controladores/inicio.pub.php and add the buttonClicked method.

Note: All the public methods inside a .pub.php file can be called from the UI (other security checks apply, like the folder where it's located and the namespace). Use non-public controllers to place private or public-at-the-server-but-hidden-from-the-ui methods.

Note: The other files inside /servidor/controladores are just samples from the sample app. See README.md (in spanish) for more info.

Right now, there's not much we could do here to see it working, so lets move on to the next part.

Use $this->cliente to call a JS function.

Note: The return value of the function would also be automatically sent to the UI if you called the method manually.

Note: The call to a JS function will terminate the execution. Usually, it should be the last statement of the function.
```
 public function buttonClicked() {
     $this->cliente->sayHi();
 }
```
Open your /cliente/controladores/index.js controller and add the sayHi function.
```
 this.sayHi=function() {
     ui.alerta("Hi!");
 };
```
Note: You can remove the old buttonClicked JS function.
Reload the view and click the button!

Note: It may happen too fast on localhost. What's happening is that the UI is calling buttonClicked on the server, and then the server is calling sayHi on the client, which in turn displays the message.

Go to the editor and place a text field .

Tip: You can place it above the button by holding the field over the button for one second, then dropping the field on the blue area.
Set a placeholder using the property Texto de relleno (Placeholder) and add a margin under the field by adding mb-3 to the Clase CSS (CSS class) property. Any Bootstrap 4 plus many Foxtrot's own helper classes are available.

Note: You can add your own CSS rules in /recursos/css/estilos.css (automatically available for all views). Do not edit any files inside /cliente/vistas as they're managed by the editor.
Change the property Nombre (Name) of the field to name (as in a person's name).
Select the button and change the dropdown of the Click property to enviar: (submit:) and the value to saveName.
Go to the backend controller at /servidor/controladores/inicio.pub.php and create the saveName method with one parameter $data. The parameter will contain the values of all the named components.
```
 public function saveName($data) {
     //lets use our old sayHi function to greet the user
     $this->cliente->sayHi($data->name);
 }
```
On the next page, we'll see how we can actually save the name.

Modify the sayHi JS function to receive the argument.

 this.sayHi=function(name) {
     ui.alerta("Hi "+name+"!");
 };

Reload the view, write your name and click the button!

Note: It may happen too fast on localhost. What's happening is that the UI is sending the data to saveName on the server, and then the server is calling sayHi('your name') on the client, which in turn displays the message.