Hello You Qute Templating Engine

Posted by Hayri Cicek on December 23, 2019


In this quick tutorial, I will show you how to get started with Quarkus new Qute templating engine.
This is still in experimental mode and if you have feedback or issues, please report them on Quarkus GitHub issue tracker or at their mailing list.

Generate Some Code

Go to code.quarkus.io and generate a new application called qute-example.




Application Info:
Group: com.kodnito
Artifact: qute-example
Build Tool: Maven


Unzip the zip file and open the application in your favorite text editor or IDE.
Add the following dependency to the pom.xml file:


<dependency>
    <groupId>io.quarkus</groupId>
    <artifactId>quarkus-resteasy-qute</artifactId>
</dependency>


Quarkus uses src/main/resources/templates as the default path for templates, so go ahead and create that folder and create a file called hello.html inside templates folder with the following:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{message.title}</title>
</head>
<body>
    <h1>Hello {message.name}</h1>
</body>
</html>


{message.title} and {message.name} is evaluated when the template is rendered.
Now create the Message.java file inside src/main/java/com/kodnito package and add the following:


package com.kodnito;

public class Message {
    public String title;
    public String name;
}


Time to create the HelloResource.java file inside src/main/java/com/kodnito package with the following:


package com.kodnito;

import io.quarkus.qute.Template;
import io.quarkus.qute.TemplateInstance;

import javax.inject.Inject;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

@Path("hello")
public class HelloResource {

    @Inject
    Template hello;

    @GET
    @Produces(MediaType.TEXT_HTML)
    public TemplateInstance get() {
        Message helloMessage = new Message();
        helloMessage.name = "Hayri";
        helloMessage.title = "Learning Qute Templating Engine";

        return hello.data("message", helloMessage);
    }
}


Here we are injecting the template with path templates/hello.html.
hello.data returns a new template instance and makes the Message object accessible in the template.
That's it, go to the folder where you have the project and run the following command to start Quarkus in development mode:


./mvnw compile quarkus:dev


and navigate to http://localhost:8080/hello and see Qute in action.




Share this: