Java Server Faces as an UI for Server-side Kotlin

Java Server Faces (JSF) is a Java specification for building component-based user interfaces for web applications and was formalised as a standard through the Java Community Process being part of the Java Platform, Enterprise Edition. It is also a Controller View Controller (MVC) web framework that simplifies the construction of user interfaces (UI) for server-based applications by using reusable UI components in a page. JSF 2 uses Facelets (XHTML) as its default templating system.

The latest stable release is 2.3.0 (Mojarra Reference Implementation) which was released on March 28, 2017, and was formalized as a standard through the Java Community Process being part of the Java Platform, Enterprise Edition.  Therefore is part of JBoss WildFly 16.0.0.Final.

There are a number of JSF component libraries. I use PrimeFaces, an open source user interface component library for JSF based applications, created by PrimeTek, Turkey. PrimeFaces

Using the PrimeFaces tabView component I created an index.xhtml page which has a tab which includes the kotlin.xhtml page,. This calls our ‘Controller’ a Kotlin POJO. This, in turn, calls a stateless, Kotlin EJB to access my MongoDB database and get a list of Ingredients from a MongoDB collection (table).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

<script type="text/javascript">
</script>

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>NOTiFYwell v.0.001</title>
</h:head>

<f:view>
<h:body>
    <h1 style="font-family:'Arial','Helvetica',sans-serif;">NOTiFYwell</h1>
    <p:tabView switchType="ajax" id="tabHomeView" headerPosition="top" headerLocation="center" style="width:100%">
        <p:tab title="Home" id="ioremIpsumText">
            <ui:include src="ioremIpsumText.xhtml" />
        </p:tab>
        <p:tab title="Kotlin - getListIngredients" id="kotlin">
            <ui:include src="kotlin.xhtml" />
        </p:tab>
        <p:tab title="Drag &amp; Drop" id="dragDropIngredients">
            <ui:include src="dragDropIngredients.xhtml" />
        </p:tab>
        <p:tab title="Enter Product" id="enterProduct">
            <ui:include src="enterProduct.xhtml" />
        </p:tab>
        <p:tab title="getListFoodsCosmeticsMedicines" id="getListFoodsCosmeticsMedicines">
            <ui:include src="getListFoodsCosmeticsMedicines.xhtml" />
        </p:tab>
        <p:tab title="getListEnumbers" id="getListEnumbers">
            <ui:include src="getListEnumbers.xhtml" />
        </p:tab>
        <p:tab title="getListIngredients" id="getListIngredients">
            <ui:include src="getListIngredients.xhtml" />
         </p:tab>
         <p:tab title="getListNutrients" id="getListNutrients">
             <ui:include src="getListNutrients.xhtml" />
         </p:tab>
     </p:tabView>
</h:body>
</f:view>

If you click on the “Kotlin – getListIngredients” tab you will see a list of Ingredients, displayed in a PrimeFaces dataTable:

The (included) page kotlin.xhtml looks like this:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<f:view>
    <h:body>
        <h:form id="formKotlinNutrients">
            <h:dataTable value="#{nOTiFYwellKotlinController.allIngredients}" style="width:100%" var="ingredient" border="1">
                <h:column width="50%">
                    <f:facet name="header">
                        <h:outputText value="_id"/>
                    </f:facet>
                    <h:outputText value="#{ingredient.id}"/>
                </h:column>
                <h:column width="50%">
                    <f:facet name="header">
                        <h:outputText value="ingredientName"/>
                    </f:facet>
                    <h:outputText value="#{ingredient.ingredientName}"/>
                </h:column>
            </h:dataTable>
        </h:form>

    </h:body>
</f:view>
</html>

The dataTable in kotlin.xhtml is populated by a call to the method (get)allIngredients in the Kotlin POJO nOTiFYwellKotlinController:

@Path("/")
open class NOTiFYwellKotlinController {

    private lateinit var ingredientsList: List<Ingredient>

    /**
     *getAllNutrients
     */
    @Inject
    private lateinit var ingredientsEJB: IngredientsEJB

    /**
     *
     */
    open fun getAllIngredients(): List<Ingredient> {
        println(">>>>>> NOTiFYwellKotlinController getAllIngredients .....")

        ingredientsList = ingredientsEJB.getAllIngredients()
        println(">>>>>> NOTiFYwellKotlinController getAllIngredients ingredientsList = " + ingredientsList.size)

        return ingredientsList
    }

This, in turn, calls the (Java) IngredientsEJB and returns a List of ingredients. The WildFly log shows:

19:28:13,948 INFO  [stdout] (default task-1) >>>>>> NOTiFYwellKotlinController getAllIngredients .....
19:28:14,515 INFO  [stdout] (default task-1) >>>>>> NOTiFYwellKotlinController getAllIngredients ingredientsList = 9
19:28:14,517 INFO  [stdout] (default task-1) >>>>>> NOTiFYwellKotlinController getAllIngredients .....
19:28:14,528 INFO  [stdout] (default task-1) >>>>>> NOTiFYwellKotlinController getAllIngredients ingredientsList = 9
19:28:14,538 INFO  [stdout] (default task-1) >>>>>> NOTiFYwellKotlinController getAllIngredients .....
19:28:14,551 INFO  [stdout] (default task-1) >>>>>> NOTiFYwellKotlinController getAllIngredients ingredientsList = 9
19:28:14,587 INFO  [com.notifywell.controller.NOTiFYwellController] (default task-1) >>>>>> NOTiFYwellController getAllIngredients .....
19:28:14,604 INFO  [com.notifywell.controller.NOTiFYwellController] (default task-1) >>>>>> getAllIngredients ingredientsList = 9
19:28:14,604 INFO  [com.notifywell.jsf.IngredientBean] (default task-1) >>>>> init IngredientBean() ingredientsList = 9

Using the EE8 & EE9 standard JSF as your MVC framework for Kotlin gives you a rich selection of UI components, which can be populated directly from Kotlin and allows you to leverage a standard and mature framework from Java.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *