First controller

Let's create the the hello/world controller

Controller definition

Before we go any further, lets define a Controller.

The user interacts with the system navigating through URLs. Each url, is used to retrieve interactive content and points to a public method of a Controller. The URLs format is: controller-name/action-name where action-name is the name of a public method.

A controller is a CDI managed bean that extends the base controller class.

What we want to do now, is to create a web application that displays a Hello World message when entering hello/world on the browser.

Lets see how the Hello.java controller file should look like:

Hello.java

package whatever.pkg;

import org.emerjoin.hi.web.mvc.Controller;
import org.emerjoin.hi.web.mvc.exceptions.MvcException;

import javax.enterprise.context.ApplicationScoped;

@ApplicationScoped //It could be any other CDI scope
public class Hello extends Controller {

    //This is automatically mapped to hello/world
    public void world() throws MvcException{

        this.callView(); //Tells Hi-Framework to render the view

    }

}

So, how do you create a view?

Creating the View

A view is composed by two files: an html file and its correspondent JavaScript file. These two files should have the same name as the action that calls them and they must be placed under the webapp/views directory, according to the following directories structure:

 |-- webapp
        |-- views
            |-- hello
                |-- world.html
                |-- world.js
           

NOTICE
We have created a directory with the controller's name: /hello and then we created two files under that directory. The two files we just created represent the view for hello/world.

Hi-Framework uses the kebab-case to map controllers and their respective action methods. For example: considering a controller class named SalesReports, the folder created under /views should be sales-reports, meaning the controller will be accessible via /sales-reports/action-name URL.

world.html

This file contains markup content to be loaded and renderized on browser for the hello/world URL.

<div>
	<h1>Hello world</h1>
</div>

world.js

This file contains javascript code that manipulates the markup content, before, during and after its renderization.

Hi.view(function($scope){
	
	//Body empty for now

});
Github Repository