data-sly-call in sightly not invoking

Question

I was trying the sample example given at [a link]http://docs.adobe.com/docs/en/aem/6-0/develop/sightly/use-api-in-java.html. I have created the component SightlyTest in which the data-sly-call to the template does not work. Below are my files inside component: extra.html

<template data-sly-template.extra="${@ text}"
          data-sly-use.extraHelper="${'ExtraHelper' @ text=text}">
    <p>${extraHelper.reversedText}</p>
</template>

ExtraHelper.java

package apps.AEMProject.components.content.SightlyTest;
import com.adobe.cq.sightly.WCMUse;
public class ExtraHelper extends WCMUse {
    private String reversedText;
    public String getReversedText() {
        return reversedText;
    }
    @Override
    public void activate() throws Exception {
        String text = get("text", String.class);
        reversedText = new StringBuilder(text).reverse().toString();
        System.out.print("reversedText ::: "+reversedText);
    }
}

SightlyOp.java

package apps.AEMProject.components.content.SightlyTest;
import com.adobe.cq.sightly.WCMUse;
public class SightlyOp extends WCMUse {
    private String lowerCaseTitle;
    private String lowerCaseDescription;
    @Override
    public void activate() throws Exception {
        lowerCaseTitle = getProperties().get("title", "").toLowerCase();
        lowerCaseDescription = getProperties().get("description", "").toLowerCase();
    }

    public String getLowerCaseTitle() {
        return lowerCaseTitle;
    }

    public String getLowerCaseDescription() {
        return lowerCaseDescription;
    }

}

SightlyTest.html

<div data-sly-use.sg="SightlyOp"
     data-sly-use.extra="extra.html">

    <h1>${sg.lowerCaseTitle}</h1>
    <p>${sg.lowerCaseDescription}</p>
    <div data-sly-call="${extra @ text=properties.description}"></div>

</div>

sg.lowerCaseTitle & sg.lowerCaseDescription is working fine, but nothing display for data-sly-call Thanks

Answer 1

Try this in SightlyTest.html instead,

<div data-sly-use.sg="SightlyOp" data-sly-use.extra1="extra.html">
    <h1>${sg.lowerCaseTitle}</h1>
    <p>${sg.lowerCaseDescription}</p>
    <div data-sly-call="${extra1.extra @ text=properties.description}"></div>
</div>

Modified to data-sly-use.extra1 to differentiate between the variable and the template being called.

Answer 2

I realize I've come to the party a little late, but I'd like to expand on Aditya's answer.

Think of the file extra.html more like a "library" of data-sly-templates rather, since it could contain as many of them as you want (each with a different name). So when you "use" the extra.html file you're sort of importing those templates into a namespace you provide on the use statement. You can then call the templates using that "namespace".

<div data-sly-use.sg="SightlyOp"
     data-sly-use.extra="extra.html">
     <!--/*${extra} is now a namespace for the templates in extra.html. (you can name it whatever you like for more clarity*/-->

    <h1>${sg.lowerCaseTitle}</h1>
    <p>${sg.lowerCaseDescription}</p>

    <!--/*since your template is called extra, and it's in the namespace called extra you call it with ${extra.extra}*/-->
    <div data-sly-call="${extra.extra @ text=properties.description}"></div>

</div>