First of all, a Java Rest method must be created in the Java. To do that a document with the endPoint object will be created and registered to the application. Something like the code that appears BELOW.

package deister.axional.frontend.impl;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
import java.util.ArrayList;
import java.util.HashMap;

/**
 *
 *
 *
 */
@Path("/hello_world")
public class HelloWorldFrontendImpl extends  AbstractFrontendImpl {
	//Here we load the page
	@GET
	@Path("/page")  //the path to access here will be "/hello_world/page"
	@Produces(MediaType.TEXT_HTML)
	public Response hello_world() throws Exception {

		HashMap<String, Object> variables = new HashMap<String, Object>();
		ArrayList<String> css = new ArrayList<String>();
		ArrayList<String> js = new ArrayList<String>();
		ArrayList<String> html = new ArrayList<String>();

		return createCustomPage(variables, css, js, html);
	}
}

The path defined for the new endPoint will be /hello_world/page.

The function createCustomPage, will be called anytime a custom page is created. It is waiting 4 parameters:

1. variables: Map with the variables that will be sent to the templates
2. css: List of strings, each String is the name of one template document where the CSS documents will be loaded from.
3. js: List of strings, each String is the name of one template document where the JavaScript documents will be loaded from.
4. html: List of strings, each String is the name of one template document that will be loaded to charge the HTML.

For the Hello World! example only a variable is needed, the label code for the text displayed inside the button.

However we also have to define the name of the FreeMarker Templates that we want to call, these templates will be created in the following steps

@GET
@Produces(MediaType.TEXT_HTML)
public Response hello_world() throws Exception
{
	HashMap<String, Object> variables = new HashMap<String, Object>();
	ArrayList<String> css = new ArrayList<String>();
	ArrayList<String> js = new ArrayList<String>();
	ArrayList<String> html = new ArrayList<String>();

	// VARIABLES :
	variables.put("buttonLabel", "CUSTOM_LABEL");

	// CSS :
	css.add("custom_css");

	// JS :
	js.add("custom_js");

	// HTML :
	html.add("custom_html");

	return createCustomPage(variables, css, js, html);
}

As said, once the button is pressed, a SOAP call will be done asking for information, we are going to prepare the JERSEY responseto this call. On this example, the answer will be really simple, we are going to ask for the users login name:

@GET
@Path("/info")
@Produces(MediaType.APPLICATION_JSON)
public Response hello_world_info() throws Exception
{
	//We just search the user name and send it back
	String user = getLoginUser();
	return Response.ok(user).build();
}

This code is written in the document created previously, so the path to reach the endPoint is going to be /hello_world/info

The application will search for the templates in a specific location inside the app directory:

• app.custom
  • css
    • custom_css.ftl
  • js
    • custom_js.ftl
  • custom_html.ftl

Create the templates on these directories and fill them with the freeMarker code to create the desired custom page.

On this example this is the created code:

• HTML
• HTML + CSS
• HTML + CSS + JS

custom_html.ftl :

Copy

<div>
    <button id="custom_button">
        ${AppLabels[buttonLabel]}
    </button>
</div>

Result:

MISSING LINK

Note: the label is taken from the idiomatic file explained here

custom_css.ftl :

Copy

<link rel="stylesheet" type="text/css" href="/static/app/css/custom-css.css${version}">

This .ftl is loading a .css document, so this document must be added to the folders.

${version} is adding a param to make sure that the file is not in the cache whenever it is updated to a new version

custom-css.css :

Copy

#custom_button {
    background-color: #e67e22;
    color: white;
}

#custom_button {
    background-color: #d35400;
}

Result:

custom_js.ftl :

Copy

<script type="text/javascript" src="/static/app/js/custom-js.js${version}"></script>

This .ftl is loading a .js document, so this document must be added to the folders.

${version} is adding a param to make sure that the file is not in the cache whenever it is updated to a new version

custom-js.js :

Copy

$( "#custom_button" ).click(function() {
	//REST call to the created endPoint
	$.ajax({
		url: "/rest/hello_world/info",
		dataType: "text",
		success: function (response) {
			$("#custom_text").html("Your username is: <b>" + response + "</b>");
		},
		error: function (response) {
			window.alert("Error!!")
		}
	});
});

Result:

Here we can find the folder structure with all the documents created or modified along this example:

• main
  • java.deister.axional.frontend
    • boot
      • Modified: FrontendResourceConfig.java
    • impl
      • Added: HelloWorldFrontendImpl.java
  • resources.deister.axional.frontend.resources
    • app.custom
      • css
        • Added: custom_css.ftl
      • js
        • Added: custom_js.ftl
      • Added: custom_html.ftl
    • static.app
      • css
        • Added: custom-css.css
      • js
        • Added: custom-js.js

This is a resume of all the added files at the end:

package deister.axional.frontend.impl;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
import java.util.ArrayList;
import java.util.HashMap;

/**
 *
 *
 *
 */
@Path("/hello_world")
public class HelloWorldFrontendImpl extends  AbstractFrontendImpl
{
	//Here we load the page
	@GET
	@Path("/page")
	@Produces(MediaType.TEXT_HTML)
	public Response hello_world() throws Exception
	{

		HashMap<String, Object> variables = new HashMap<String, Object>();
		ArrayList<String> css = new ArrayList<String>();
		ArrayList<String> js = new ArrayList<String>();
		ArrayList<String> html = new ArrayList<String>();

		// VARIABLES :
		variables.put("buttonLabel", "CUSTOM_LABEL");

		// CSS :
		css.add("custom_css");

		// JS :
		js.add("custom_js");

		// HTML :
		html.add("custom_html");

		return createCustomPage(variables, css, js, html);
	}

	//Ajax call to get the username information as a response
	@GET
	@Path("/info")
	@Produces(MediaType.APPLICATION_JSON)
	public Response hello_world_info() throws Exception
	{
		//We just search for the username code and send it back
		String user = getLoginUser();
		return Response.ok(user).build();
	}
}

<div>
    <button id="custom_button">
        ${AppLabels[buttonLabel]}
    </button>
    <span id="custom_text"></span>
</div>

<link rel="stylesheet" type="text/css" href="/static/app/css/custom-css.css${version}">

#custom_button {
    background-color: #e67e22;
    color: white;
}

#custom_button:hover {
    background-color: #d35400;
}

<script type="text/javascript" src="/static/app/js/custom-js.js${version}"></script>

$( "#custom_button" ).click(function() {
	//REST call to the created endPoint
	$.ajax({
		url: "/rest/hello_world/info",
		dataType: "text",
		success: function (response) {
			$("#custom_text").html("Your username is: <b>" + response + "</b>");
		},
		error: function (response) {
			window.alert("Error!!")
		}
	});
});