Dueling with JavaScript Use API

In this post, we are going to look into the concepts of Use API.

This API lets us write server-side code which can be consumed by HTL. AEM provides support for two types of Use API - Java Use API and JavaScript Use API. In this post, we are going to learn about JavaScript Use API and in the next post, we will look into Java Use API.

JavaScript Use API

A JavaScript Engine (for e.g. Google's V8 Engine) is responsible for executing JavaScript in the browser. But when we are using Use API, what makes a JavaScript engine to execute it is Rhino. It is an open-source implementation of JavaScript written entirely in Java.

Since JavaScript is translated into Java, we have Java libraries at our disposal. To understand how we can use JavaScript Use API, let's take an example.

Example

• Create a simple text component with a basic configuration as follows 

Create a component

• Create nodes and properties under the component node as per the following XML file

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    jcr:primaryType="nt:unstructured"

    jcr:title="Text component"

    sling:resourceType="cq/gui/components/authoring/dialog">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/tabs"

            type="nav"/>

        <items jcr:primaryType="nt:unstructured">

            <tab

                jcr:primaryType="nt:unstructured"

                jcr:title="Properties"

                sling:resourceType="granite/ui/components/foundation/container">

                <layout

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>

                <items jcr:primaryType="nt:unstructured">

                    <columns

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/container">

                        <items jcr:primaryType="nt:unstructured">

                            <title

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/textfield"

                                class="field-whitespace"

                                fieldDescription="Enter the title"

                                fieldLabel="Title"

                                name="./title"/>

                            <description

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/textarea"

                                class="field-whitespace"

                                fieldDescription="Enter the description"

                                fieldLabel="Description"

                                name="./description"/>

                        </items>

                    </columns>

                </items>

            </tab>

        </items>

    </content>

</jcr:root>

• Now, create a new file text.js under the path  /apps/demoproject/components/content/text  and paste the following code in it

"use strict";

use(function() {

var text = {};

text.title = granite.resource.properties["title"];

text.description = granite.resource.properties["description"];

return text;

});

Here, note that we are using use(function()) which signifies the usage of the Use API and in the function, at line #4, we are initializing a JS object call text. 
• Then, we created two members of the text object, title, and description. we are setting these with the JCR properties title and description respectively. Note that to access these values from the JCR, we are using granite.resource.properties[] object.
• In line #9, we are returning the text object.
• Now rename text.jsp to text.html and paste the following code in it.

Sample Text

<div data-sly-use.text="text.js">

<h1>Title: ${text.title}</h1>

<p>Description: ${text.description}</p>

</div>

Here we are using data-sly-use.text="text.js" which includes the JS file in the HTML code. You have to use the right path of the file if the HTML file and the referred file are not in the same location. This code gets the text object and accesses the properties via dot (.) operator.
• Now drag and drop the component on the page and configure it using the edit dialog. You will see the passed values on your page.